Skip to main content

UserProfile

Streamlined solution for effortless profile management: a user-friendly component designed to seamlessly display and edit user profile details.

This smart component streamlines profile editing with a one-liner integration, simplifying complex tasks for users.

Usage​

import { UserProfile } from "@pushprotocol/uiweb";

const UserProfileTest = () => {
  return (
    <div>
    <UserProfile />
    </div>
  );
};

export default UserProfileTest;

Customization parameters​

ParamTypeDefaultRemarks
updateUserProfileModalBackgroundModalBackgroundType-Default value is "OVERLAY", decides the update user profile modal background, possible values are "OVERLAY" &#124 "BLUR" &#124 "TRANSPARENT"
updateUserProfileModalPositionTypeModalPositionType-Default value is "GLOBAL", decides the update user profile modal position, it can be either relative to immediate parent(RELATIVE) or the entire screen(GLOBAL), possible values are "RELATIVE" &#124 "GLOBAL"

Note: Parameters in this style are mandatory.

Note: Refer ChatUIProvider for details on its paramters.

Push UserProfile Component live playground​

customPropMinimized = 'true';
// DO NOT FORGET TO IMPORT LIBRARIES
// NOT NEEDED HERE SINCE PLAYGROUND IMPORTS INTERNALLY
// import { ChatUIProvider, UserProfile,MODAL_POSITION_TYPE } from @pushprotocol/uiweb;
function App(props) {
  const [signer, setSigner] = useState(null);
  const connectWallet = async () => {
    // Demo only supports MetaMask (or other browser based wallets) and gets provider that injects as window.ethereum into each page
    const provider = new ethers.providers.Web3Provider(window.ethereum);

    // Get provider
    await provider.send('eth_requestAccounts', []);

    // Grabbing signer from provider
    const signer = provider.getSigner();

    // store signer
    setSigner(signer);
  };

  const disconnectWallet = async () => {
    setSigner(null);
  };
  const buttonStyle = {
    padding: '10px 20px',
    backgroundColor: '#dd44b9',
    color: '#FFF',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
    marginTop: '20px',
  };
  return (
    <>
      <h2></h2>
      <label>
        For this demo, You will need Metamask (or equivalent browser injected
        wallet), you will also need to sign a transaction to see the
        notifications. Connect wallet for better usage of the UserProfile
        component.
      </label>
      <p />
      <button
        style={buttonStyle}
        onClick={signer ? disconnectWallet : connectWallet}
      >
        {signer ? 'Disconnect wallet' : 'Connect Wallet'}
      </button>

      <ChatUIProvider signer={signer}>
        <div
          style={{
            maxHeight: '75vh',
            margin: '20px auto',
            position: 'relative',
          }}
        >
          <UserProfile />
        </div>
      </ChatUIProvider>
    </>
  );
}
LIVE PREVIEW