钱包管理

import { useSyncWagmiConfig } from '@lifi/wallet-management';
import { useAvailableChains } from '@lifi/widget';
import { injected } from '@wagmi/connectors';
import { useRef, type FC, type PropsWithChildren } from 'react';
import { createClient, http } from 'viem';
import { mainnet } from 'viem/chains';
import type { Config } from 'wagmi';
import { createConfig, WagmiProvider } from 'wagmi';

const connectors = [injected()];

export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
  const { chains } = useAvailableChains();
  const wagmi = useRef<Config>();

if (!wagmi.current) {
wagmi.current = createConfig({
chains: [mainnet],
client({ chain }) {
return createClient({ chain, transport: http() });
},
ssr: true,
});
}

useSyncWagmiConfig(wagmi.current, connectors, chains);

return (

<WagmiProvider config={wagmi.current} reconnectOnMount={false}>
  {children}
</WagmiProvider>
); };

import { LiFiWidget } from '@lifi/widget';
import { WalletProvider } from '../providers/WalletProvider';

export const WidgetPage = () => {
  return (
    <WalletProvider>
      <LiFiWidget integrator="wagmi-example" />
    </WalletProvider>
  );
};

import type { Adapter } from "@solana/wallet-adapter-base";
import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
import {
  ConnectionProvider,
  WalletProvider,
} from "@solana/wallet-adapter-react";
import { clusterApiUrl } from "@solana/web3.js";
import type { FC, PropsWithChildren } from "react";

const endpoint = clusterApiUrl(WalletAdapterNetwork.Mainnet);
/**
 * Wallets that implement either of these standards will be available automatically.
 *
 *   - Solana Mobile Stack Mobile Wallet Adapter Protocol
 *     (https://github.com/solana-mobile/mobile-wallet-adapter)
 *   - Solana Wallet Standard
 *     (https://github.com/solana-labs/wallet-standard)
 *
 * If you wish to support a wallet that supports neither of those standards,
 * instantiate its legacy wallet adapter here. Common legacy adapters can be found
 * in the npm package `@solana/wallet-adapter-wallets`.
 */
const wallets: Adapter[] = [];

export const SolanaWalletProvider: FC<PropsWithChildren> = ({ children }) => {
  return (
    <ConnectionProvider endpoint={endpoint}>
      <WalletProvider wallets={wallets} autoConnect>
        {children}
      </WalletProvider>
    </ConnectionProvider>
  );
};

import { LiFiWidget } from "@lifi/widget";
import { WalletProvider } from "../providers/SolanaWalletProvider";

export const WidgetPage = () => {
  return (
    <SolanaWalletProvider>
      <LiFiWidget integrator="solana-example" />
    </SolanaWalletProvider>
  );
};

import type { FC, PropsWithChildren } from "react";
import {
  createNetworkConfig,
  SuiClientProvider,
  WalletProvider,
} from "@mysten/dapp-kit";
import { getFullnodeUrl } from "@mysten/sui/client";

const { networkConfig } = createNetworkConfig({
  mainnet: { url: getFullnodeUrl("mainnet") },
});

export const SuiWalletProvider: FC<PropsWithChildren> = ({ children }) => {
  return (
    <SuiClientProvider networks={networkConfig} defaultNetwork="mainnet">
      <WalletProvider autoConnect>{children}</WalletProvider>
    </SuiClientProvider>
  );
};

import { LiFiWidget } from "@lifi/widget";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { SuiWalletProvider } from "../providers/SuiWalletProvider";

const queryClient = new QueryClient();

export const WidgetPage = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <SuiWalletProvider>
        <LiFiWidget integrator="sui-example" />
      </SuiWalletProvider>
    </QueryClientProvider>
  );
};

import type { Config, CreateConnectorFn } from '@bigmi/client'
import {
  createConfig,
  phantom,
  unisat,
  xverse,
} from '@bigmi/client'
import { bitcoin, createClient, http } from '@bigmi/core'
import { BigmiProvider } from '@bigmi/react'

const connectors: CreateConnectorFn[] = [phantom(), unisat(), xverse()]

const config = createConfig({
chains: [bitcoin],
connectors,
client({ chain }) {
return createClient({ chain, transport: http() })
}
}) as Config

export const WidgetPage: FC<PropsWithChildren> = ({ children }) => {
  return (
    <BigmiProvider config={config} reconnectOnMount>
      <LiFiWidget integrator="bigmi-example" />
    </BigmiProvider>
  );
};

import { LiFiWidget } from "@lifi/widget";
import { useConnectModal } from "@rainbow-me/rainbowkit";
import { WalletProvider } from "../providers/WalletProvider";

export const WidgetPage = () => {
  const { openConnectModal } = useConnectModal();
  return (
    <WalletProvider>
      <LiFiWidget
        integrator="wagmi-example"
        config={{
          walletConfig: {
            onConnect() {
              openConnectModal?.();
            },
          },
        }}
      />
    </WalletProvider>
  );
};

import { formatChain, useAvailableChains } from "@lifi/widget";
import { RainbowKitProvider, getDefaultConfig } from "@rainbow-me/rainbowkit";
import { useMemo, type FC, type PropsWithChildren } from "react";
import type { Chain } from "viem";
import { WagmiProvider } from "wagmi";
import { mainnet } from "wagmi/chains";

export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
  const { chains } = useAvailableChains();

  const wagmiConfig = useMemo(() => {
    const _chains: [Chain, ...Chain[]] = chains?.length
      ? (chains.map(formatChain) as [Chain, ...Chain[]])
      : [mainnet];

    // Wagmi currently doesn't support updating the config after its creation,
    // so in order to keep the dynamic chains list updated, we need to
    // re-create a config every time the chains list changes.
    const wagmiConfig = getDefaultConfig({
      appName: "LI.FI Widget Example",
      chains: _chains,
      projectId: "Your WalletConnect ProjectId",
      ssr: !chains?.length,
    });

    return wagmiConfig;
  }, [chains]);

  return (
    <WagmiProvider
      config={wagmiConfig}
      reconnectOnMount={Boolean(chains?.length)}
    >
      <RainbowKitProvider>{children}</RainbowKitProvider>
    </WagmiProvider>
  );
};