Push Universal Wallet Provider

PushUniversalWalletProvider is the top-level context provider component that initializes wallet functionality across your app, handling:

• Login Configuration: What logins and wallets you want to enable in your app (email, OAuth, wallets).
• Application Metadata: Allows you to display your application metadata such as logo, name, etc.
• Theme Overrides: Customize or override default styles.

Installation

npm

# UI Kit SDK
npm install @pushchain/ui-kit

yarn

# UI Kit SDK
yarn add @pushchain/ui-kit

Usage

Wrap your application with PushUniversalWalletProvider to make wallet functionality available to all child components.

REACT PLAYGROUND

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

function App() {
  return (
    <PushUniversalWalletProvider
      config={{ network: PushUI.CONSTANTS.PUSH_NETWORK.TESTNET }}
      themeMode={PushUI.CONSTANTS.THEME.DARK}
    >
      <PushUniversalAccountButton />
    </PushUniversalWalletProvider>
  );
}

LIVE APP PREVIEW

Props

TheseArgumentsare mandatory

Property	Type	Default	Description
config	Object	**	Used to configure the wallet connection, logins, and modals. ** See config prop for more info.
app	Object	**	Used to display your application metadata such as logo, name, etc. ** See app prop for more info.
themeMode	PushUI.CONSTANTS.THEME	PushUI.CONSTANTS.THEME.LIGHT	Theme mode to apply, you can use LIGHT or DARK option. PushUI.CONSTANTS.THEME PushUI.CONSTANTS.THEME.LIGHT PushUI.CONSTANTS.THEME.DARK
themeOverrides	Object	**	Used to override default styles. ** See themeOverrides prop for more info.

config prop (required)

Customize the behavior of the wallet connection, logins, and modals by using the config prop.

TheseArgumentsare mandatory

Property	Type	Default	Description
network	PushUI.CONSTANTS.PUSH_NETWORK	-	Push Chain network to connect to. For example: PushUI.CONSTANTS.PUSH_NETWORK.TESTNET PushUI.CONSTANTS.PUSH_NETWORK PushUI.CONSTANTS.PUSH_NETWORK.TESTNET PushUI.CONSTANTS.PUSH_NETWORK.TESTNET_DONUT PushUI.CONSTANTS.PUSH_NETWORK.LOCALNET
login	Object	**	Login method configuration. ** See config.login Options.
modal	Object	**	Global defaults for login and connected modal instances. ** See config.modal Options.
uid	string	'default'	Unique identifier for this provider. instance
rpcUrl	string	Public endpoints	Custom JSON-RPC endpoint for supported chains.
chainConfig	Object	**	Custom settings to configure the SDK instance. ** See config.chainConfig Options.

`config.login` Options

Property	Type	Default	Description
loginLayout	PushUI.CONSTANTS.LOGIN.LAYOUT	PushUI.CONSTANTS.LOGIN.LAYOUT.SIMPLE	Login modal layout type. PushUI.CONSTANTS.LOGIN.LAYOUT PushUI.CONSTANTS.LOGIN.LAYOUT.SIMPLE PushUI.CONSTANTS.LOGIN.LAYOUT.SPLIT
appPreview	boolean	false	Show app preview in modal
bgImage	string	null	Background image for the login modal
connectedLayout	PushUI.CONSTANTS.CONNECTED.LAYOUT	PushUI.CONSTANTS.CONNECTED.LAYOUT.HOVER	Connected modal layout type. PushUI.CONSTANTS.CONNECTED.LAYOUT PushUI.CONSTANTS.CONNECTED.LAYOUT.FULL PushUI.CONSTANTS.CONNECTED.LAYOUT.HOVER
connectedInteraction	PushUI.CONSTANTS.CONNECTED.INTERACTION	PushUI.CONSTANTS.CONNECTED.INTERACTION.INTERACTIVE	Connected modal outside interaction type. PushUI.CONSTANTS.CONNECTED.INTERACTION PushUI.CONSTANTS.CONNECTED.INTERACTION.INTERACTABLE PushUI.CONSTANTS.INTERACTION.BLUR

`config.login.wallet` Options

Property	Type	Default	Description
enabled	boolean	true	Allow external wallet connections
chains	PushUI.CONSTANTS.CHAIN[]	All supported chains	You can choose to enable specific chains by passing them in an array. PushUI.CONSTANTS.CHAIN PushUI.CONSTANTS.CHAIN.ETHEREUM_SEPOLIA PushUI.CONSTANTS.CHAIN.SOLANA_DEVNET PushUI.CONSTANTS.CHAIN.PUSH_TESTNET_DONUT

`config.modal` Options

Property	Type	Default	Description
loginLayout	PushUI.CONSTANTS.LOGIN.LAYOUT	PushUI.CONSTANTS.LOGIN.LAYOUT.SIMPLE	Login modal layout type. PushUI.CONSTANTS.LOGIN.LAYOUT PushUI.CONSTANTS.LOGIN.LAYOUT.SIMPLE PushUI.CONSTANTS.LOGIN.LAYOUT.SPLIT
appPreview	boolean	false	Show app preview in modal
bgImage	string	null	Background image for the login modal
connectedLayout	PushUI.CONSTANTS.CONNECTED.LAYOUT	PushUI.CONSTANTS.CONNECTED.LAYOUT.HOVER	Connected modal layout type. PushUI.CONSTANTS.CONNECTED.LAYOUT PushUI.CONSTANTS.CONNECTED.LAYOUT.FULL PushUI.CONSTANTS.CONNECTED.LAYOUT.HOVER
connectedInteraction	PushUI.CONSTANTS.CONNECTED.INTERACTION	PushUI.CONSTANTS.CONNECTED.INTERACTION.INTERACTABLE	Connected modal outside interaction type. PushUI.CONSTANTS.CONNECTED.INTERACTION PushUI.CONSTANTS.CONNECTED.INTERACTION.INTERACTABLE PushUI.CONSTANTS.INTERACTION.BLUR

`config.chainConfig` Options

Property	Type	Default	Description
rpcUrls	Partial<Record<CHAIN, string>>	{}	Custom RPC URLs mapped by chain IDs.
blockExplorers	Partial<Record<CHAIN, string[]>	{[CHAIN.PUSH_TESTNET_DONUT]: ['https://donut.push.network']}	Custom block explorer URLs mapped by chain IDs.
printTraces	boolean	false	When true, console logs the internal trace logs for debugging requests to nodes

Live Playground: Creating basic and advanced config

Basic

REACT PLAYGROUND

// Import necessary components from @pushchain/ui-kit
import {
  PushUniversalWalletProvider,
  PushUniversalAccountButton,
  PushUI,
} from '@pushchain/ui-kit';

function App() {
  // Define Wallet Config
  const walletConfig = {
    uid: 'basic',
    network: PushUI.CONSTANTS.PUSH_NETWORK.TESTNET, // network to connect to
  };

  return (
    <PushUniversalWalletProvider config={walletConfig}>
      {/* Your app logic */}

      {/* Push Universal Wallet Button to show the functionality */}
      <PushUniversalAccountButton uid='basic' />
    </PushUniversalWalletProvider>
  );
}

LIVE APP PREVIEW

Advanced

REACT PLAYGROUND

// Import necessary components from @pushchain/ui-kit
import {
  PushUniversalWalletProvider,
  PushUniversalAccountButton,
  PushUI,
} from '@pushchain/ui-kit';

function App() {
  // Define Wallet Config
  const walletConfig = {
    network: PushUI.CONSTANTS.PUSH_NETWORK.TESTNET, // network to connect to
    login: {
      // login options to choose from
      email: true,
      google: false, // disable google login
      wallet: {
        enabled: true, // enable external wallet login
        chains: [
          PushUI.CONSTANTS.CHAIN.ETHEREUM_SEPOLIA,
          PushUI.CONSTANTS.CHAIN.SOLANA_DEVNET,
          PushUI.CONSTANTS.CHAIN.PUSH_TESTNET_DONUT,
        ],
      },
      appPreview: true, // enable app preview to be shown inside login modal. Need to provide app metadata as well
    },
    modal: {
      loginLayout: PushUI.CONSTANTS.LOGIN.LAYOUT.SIMPLE, // login modal layout type
      connectedLayout: PushUI.CONSTANTS.CONNECTED.LAYOUT.FULL, // connected modal layout type
      appPreview: true, // enable app preview to be shown inside modal. Meed to provide app metadata as well
    },
    uid: 'your-uid', // unique identifier, only used if multiple wallet needs to be connected
    rpcURL: '<INFURA_RPC_URL>', // custom rpc url to connect to
    chainConfig: {}, // custom chain config to pass to push chain client if needed
  };

  return (
    <PushUniversalWalletProvider config={walletConfig}>
      {/* Your app logic */}

      {/* Push Universal Wallet Button to show the functionality */}
      <PushUniversalAccountButton uid='your-uid' />
    </PushUniversalWalletProvider>
  );
}

LIVE APP PREVIEW

app prop

Display your app metadata in login screens and preview panes by using the app prop. Note: You will also need to enable appPreview in the login and modal section of config props to show them in different sections of the UI.

Property	Type	Description
logoUrl	string	URL to application logo or icon
title	string	Application name or title
description	string	Brief description of the application

Live Playground: Creating your app metadata

REACT PLAYGROUND

// Import necessary components from @pushchain/ui-kit
import {
  PushUniversalWalletProvider,
  PushUniversalAccountButton,
  PushUI,
} from '@pushchain/ui-kit';

function App() {
  // Define Wallet Config
  const walletConfig = {
    uid: 'custom-app-metadata',
    network: PushUI.CONSTANTS.PUSH_NETWORK.TESTNET, // network to connect to
    login: { appPreview: true },
  };

  // Define Your App Preview
  const appMetadata = {
    logoUrl: 'https://avatars.githubusercontent.com/u/64157541?v=4',
    title: 'Test App Title',
    description: 'Test App Description',
  };

  return (
    <PushUniversalWalletProvider config={walletConfig} app={appMetadata}>
      {/* Your app logic */}

      {/* Push Universal Wallet Button to show the functionality */}
      <PushUniversalAccountButton uid='custom-app-metadata' />
    </PushUniversalWalletProvider>
  );
}

LIVE APP PREVIEW

themeOverrides prop

Override different theme settings by using the themeOverrides prop. Check out all the supported theme variables in Theme Variables.

Type	Default	Description
ThemeOverrides	{}	Override the theme settings

Live Playground: Customizing your theme

REACT PLAYGROUND

// Import necessary components from @pushchain/ui-kit
import {
  PushUniversalWalletProvider,
  PushUniversalAccountButton,
  PushUI,
} from '@pushchain/ui-kit';

function App() {
  // Define Wallet Config
  const walletConfig = {
    uid: 'custom-theme',
    network: PushUI.CONSTANTS.PUSH_NETWORK.TESTNET,
  };

  return (
    <PushUniversalWalletProvider
      config={walletConfig}
      themeOverrides={{
        '--pw-core-bg-primary-color': '#DBE3FF',
        '--pw-core-bg-secondary-color': '#EDEFFF',
        '--pw-core-font-family': 'Inter',
        '--pw-core-text-primary-color': '#1A1A1A',
        '--pw-core-text-secondary-color': '#4B4B4B',
      }}
    >
      <PushUniversalAccountButton uid='custom-theme' />
    </PushUniversalWalletProvider>
  );
}

LIVE APP PREVIEW

Next Steps

• Customize the connect button with Push Universal Account Button
• Use wallet context hooks via usePushWalletContext
• Access the Push Chain Client with usePushChainClient