Skip to content

Use Hooks Only (without UI)

This section will introduce how to only use the provided hooks.

It could be useful when you want to customize your UI components together with our hooks.

Customize your UI components with Razor Kit Hooks

Firstly, add WalletProvider to wrap your App. The WalletProvider component provides the context of data and functions.

For customizing the default wallet list, check WalletProvider

import React from 'react';
import { WalletProvider } from '@razorlabs/razorkit';
 
const App: React.FC = () => {
  return <div>Hello World</div>;
};
 
function RootComponent() {
  return (
    <WalletProvider>
      <App />
    </WalletProvider>
  );
}

Next, you should have a connect button for wallet connection and a display area for account info after connection.

In this case, you can manage these two components by connected status from useWallet hook. And get active account address after connected.

import { useWallet } from '@razorlabs/razorkit';
import React, { useState, useEffect } from 'react';
 
const AccountInfo: React.FC<{ address?: string }> = ({ address }) => {
  return <div>Account Info: {address}</div>;
};
 
const ConnectButton: React.FC = () => {
  return <button>Connect</button>;
};
 
function App() {
  const wallet = useWallet();
 
  return (
    <div>
      {wallet.connected ? (
        <AccountInfo address={wallet?.address} />
      ) : (
        <ConnectButton />
      )}
    </div>
  );
}

For your wallet-select modal component, let's just call it WalletSelector.

You can use select method from useWallet hook to connect to one of any movement wallets.

import React from 'react';
import { useWallet } from '@razorlabs/razorkit';
 
function WalletSelector() {
  const {
    select, // select
    configuredWallets, // default wallets
    detectedWallets, // Movement-standard wallets detected from browser env
    allAvailableWallets, // all the installed Movement-standard wallets
  } = useWallet();
 
  return [...configuredWallets, ...detectedWallets].map((wallet) => (
    <button
      key={wallet.name}
      onClick={() => {
        // check if user installed the wallet
        if (!wallet.installed) {
          // do something like guiding users to install
          return;
        }
        select(wallet.name);
      }}
    >
      Connect to {wallet.name}
    </button>
  ));
}