Skip to main content

usePushWalletContext

The usePushWalletContext hook provides access to the current wallet state and methods to interact with the Push Wallet. This hook must be used within a component that's wrapped by a PushUniversalWalletProvider.

Usage​

REACT PLAYGROUND
import { 
  PushUniversalWalletProvider,
  PushUniversalAccountButton,
  usePushWalletContext,
  PushUI 
} from '@pushchain/ui-kit';

function App() {
  // Create a component that uses the hook inside the provider context
  const WalletContextComponent = () => {
    const { 
      connectionStatus, 
      handleConnectToPushWallet, 
      handleUserLogOutEvent 
    } = usePushWalletContext(); // optional: uid parameter for targeting a specific wallet instance

    return (
      <div>
        <h3 style={{ margin: '1rem 0' }}>Wallet Status: {connectionStatus}</h3>
        {connectionStatus === PushUI.CONSTANTS.CONNECTION.STATUS.NOT_CONNECTED && (
          <button
            style={{
              background: 'transparent',
              padding: '12px 18px',
              borderRadius: '10px',
              border: '1px solid',
            }}
            onClick={() => handleConnectToPushWallet()}
          >
            Connect via Hook Call
          </button>
        )}
        {connectionStatus === PushUI.CONSTANTS.CONNECTION.STATUS.CONNECTED && (
          <button
            style={{
              background: 'transparent',
              padding: '12px 18px',
              borderRadius: '10px',
              border: '1px solid',
            }}
            onClick={() => handleUserLogOutEvent()}
          >
            Disconnect via Hook Call
          </button>
        )}
      </div>
    );
  };

  return (
    <PushUniversalWalletProvider config={{ network: PushUI.CONSTANTS.PUSH_NETWORK.TESTNET }}>
      <PushUniversalAccountButton />
      <WalletContextComponent />
    </PushUniversalWalletProvider>
  );
}
LIVE APP PREVIEW

Parameters​

ArgumentsTypeDescription
uidstringOptional ID for targeting a specific wallet instance, must match config.uid of specific PushUniversalWalletProvider instance.
 
See multiple wallet example for usage.

Returns​

PropertyTypeDefaultDescription
connectionStatusPushUI.CONSTANTS.CONNECTION.STATUSPushUI.CONSTANTS.CONNECTION.STATUS.NOT_CONNECTEDIt will be from one of the following:
PushUI.CONSTANTS.CONNECTION.STATUS
PushUI.CONSTANTS.CONNECTION.STATUS.NOT_CONNECTED PushUI.CONSTANTS.CONNECTION.STATUS.CONNECTING PushUI.CONSTANTS.CONNECTION.STATUS.AUTHENTICATING PushUI.CONSTANTS.CONNECTION.STATUS.CONNECTED PushUI.CONSTANTS.CONNECTION.STATUS.RETRY
handleConnectToPushWallet() => voidfunctionCall to open the wallet-connect modal (or trigger your chosen flow).
handleUserLogOutEvent() => voidfunctionCall to disconnect the wallet and clear the session.

Next Steps​