@orderly.network/react is an application layer of the Orderly API. It is mainly responsible for rendering the UI, handling user interaction events, and completing trading actions. Therefore, it does not include built-in wallet connection functionality.

In places where wallet connection needs to be handled, @orderly.network/react utilizes React’s context mechanism to obtain information about the currently connected wallet or call wallet connection functions provided by the context. To facilitate this, @orderly.network/hooks defines a context named WalletConnectorContext. Any component that implements the WalletConnectorContext.Provider defined in WalletConnectorContextState can serve as the wallet connection component for the app. Please refer to this link for more details.

​
Using the wallet connection component provided by Orderly

For the convenience of developers to quickly integrate with third-party wallet connectors, the Orderly SDK has encapsulated and provided installations for popular libraries in the community.

​
@orderly.network/web3-onboard

This is a wrapper for web3-onboard, which can assist you in quickly integrating wallet functionality.

​
Installation

npm install @orderly.network/web3-onboard

​
Usage

Wrap your component with the ConnectorProvider component, which should typically be the top-level component in your component tree. If it’s not, it must be placed at a level above OrderlyAppProvider. The ConnectorProvider component accepts two parameters:

  • apiKey: Your API key created in web3-onboard.
  • options: Configuration options for web3-onboard. For details, refer to web3-onboard. This parameter is optional; if not provided, default configuration options will be used.
import { ConnectorProvider } from "@orderly.network/web3-onboard";
import injectedModule from "@web3-onboard/injected-wallets";

export const App = () => {
  return (
    <ConnectorProvider
      apiKey="<Your web3-onboard's api key>"
      options={{
        wallets: [injectedModule()],
        appMetadata: {
          name: "Orderly",
          icon: "/Orderly.svg",
          description: "Orderly"
        }
      }}
    >
      {/* components */}
    </ConnectorProvider>
  );
};

Orderly will continue to release support for more wallet connection libraries. Stay tuned for updates!

​
Custom wallet connection provider

You can also customize wallet connections by implementing all the properties defined in WalletConnectorContextState. Define the component in the following format:

import { PropsWithChildren } from "react";
import { WalletConnectorContext } from "@orderly.network/hooks";

export const WalletConnector = ({ children }: PropsWithChildren) => {
  return (
    <WalletConnectorContext.Provider
      value={
        {
          /*
           * implement all properties defined in WalletConnectorContextState
           */
        }
      }
    >
      {children}
    </WalletConnectorContext.Provider>
  );
};

After defining the component, you also need to add this component to the parent of OrderlyAppProvider.

​
Interface & Context

export type ConnectedChain = {
  id: string;
};

export interface WalletConnectorContextState {
  connect: () => Promise<any[]>;
  disconnect: (options: any) => Promise<any[]>;
  connecting: boolean;
  setChain: (options: any) => Promise<any>;
  chains: any[];
  switchChain: (options: { chainId: string }) => Promise<any>;
  wallet: any;
  connectedChain: ConnectedChain | null;

  settingChain: boolean;
}

export const WalletConnectorContext = createContext<WalletConnectorContextState>(
  {} as WalletConnectorContextState
);

export const useWalletConnector = () => {
  return useContext(WalletConnectorContext);
};

​
Implementation

The following example demonstrates a wallet connection component implemented using web3modal. You can use this example as a reference to implement your own wallet connection component.

import { FC, PropsWithChildren, createContext, useContext, useEffect, useCallback } from "react";
import { useAccount, WalletConnectorContext } from "@orderly.network/hooks";

import { createWeb3Modal, defaultWagmiConfig, useWeb3Modal } from "@web3modal/wagmi/react";

import { WagmiConfig, useAccount as useWagmiAccount, useProvider, usePublicClient } from "wagmi";
import { arbitrum, mainnet } from "viem/chains";

// 1. Get projectId at https://cloud.walletconnect.com
const projectId = "YOUR_PROJECT_ID";

// 2. Create wagmiConfig
const metadata = {
  name: "Web3Modal",
  description: "Web3Modal Example",
  url: "https://web3modal.com",
  icons: ["https://avatars.githubusercontent.com/u/37784886"]
};

const chains = [mainnet, arbitrum];
export const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });

// 3. Create modal
createWeb3Modal({ wagmiConfig, projectId, chains });

export const WalletConnectProvider: FC<PropsWithChildren<{}>> = (props) => {
  const { account } = useAccount();

  const publicClient = usePublicClient();
  const { address, isConnecting, isDisconnected } = useWagmiAccount();

  const { open } = useWeb3Modal();

  useEffect(() => {
    // call account's setAdress method to update account status;
  }, []);

  const connect = useCallback(() => {
    return open().then((res) => {
      console.log(res);
      return [];
    });
  }, []);

  return (
    <WalletConnectorContext.Provider value={{ connect }}>
      {props.children}
    </WalletConnectorContext.Provider>
  );
};
ThemingNext.js