@ difficial-labs- sdk/ wagmi (英语)

公务 华为 支持动态JS SDK. 显示 a 动态管理 EVM 钱包账户(嵌入/OTP 或外部)为 wagmi 连接器是这样 useAccount, (中文(简体) ), useSendTransaction, (中文(简体) ), useReadContract,其余则 有动态钱包 保留钱包状态的真相来源.

安装

npm install @dynamic-labs-sdk/wagmi wagmi @wagmi/core viem @tanstack/react-query

wagmi, (中文(简体) ), @wagmi/core 财务报告和审定财务报表 viem 是同伴的依赖关系. wagmi 财务报告和审定财务报表 @tanstack/react-query 只有反应者需要帮助.

要使用的 API

使用自动同步—— syncDynamicWagmi 在香草JS, SyncDynamicWagmi 编号 : useSyncDynamicWagmi 在反应。 都盯着Dynami的 选中 EVM 钱包账户,所以 setSelectedWalletAccount(...) 这是你一直呼吁 动起来.

createDynamicWagmiConnector 是原始的两种同步帮助都建立在上。 这个 桥 一个 账号——你通过的那个账号——从不跟踪 Dynamic的选取,所以只有在你故意想要给 wagmi 针入时才能达到 具体账户.

香草联署材料

syncDynamicWagmi 在 Dynamic 选定的 EVM 钱包账户上保留一个 wagmi 配置, 没有反应 它订阅 Dynamic 的钱包事件和驱动器 维克米的 connect 编号 : disconnect 当选择更改时——登录,钱包 切换,或登录——并返回停止同步的函数.

创建您的 wagmi 配置 启动时一次 你没有钱包账户 你却从未重建过这个配置 没有动态连接器在 createConfig数字 :

import { createConfig, http } from '@wagmi/core';
import { mainnet } from 'viem/chains';

export const config = createConfig({
  chains: [mainnet],
  transports: { [mainnet.id]: http() },
});

然后开始同步一次——没有 walletAccount 辩论,你从来没有 自己建立一个连接器 :

import { setSelectedWalletAccount } from '@dynamic-labs-sdk/client';
import { syncDynamicWagmi } from '@dynamic-labs-sdk/wagmi';

const stopSync = syncDynamicWagmi({ config });

// When you're done (teardown / logout):
stopSync();

它可以在用户拥有钱包之前开始:wagmi在EVM之前保持断开 选择钱包账户.

如果您使用多个动态客户端, 请通过客户端作为第二个参数 :

const stopSync = syncDynamicWagmi({ config }, client);

切换目标钱包账户

切换是一个动态呼叫——没有wagmi代码:

import { setSelectedWalletAccount } from '@dynamic-labs-sdk/client';

// wagmi re-points to nextWalletAccount automatically.
await setSelectedWalletAccount({ walletAccount: nextWalletAccount });

将 wagmi 插入一个特定账户

如果你想让wagmi来解释你的选择 而不是Dynamic的选择 一,自己建连接器. 钱包提供者来自 账户,所以你只通过账户:

import { connect, disconnect, getConnections } from '@wagmi/core';
import { createDynamicWagmiConnector } from '@dynamic-labs-sdk/wagmi';

await connect(config, {
  connector: createDynamicWagmiConnector({ walletAccount }),
});

// Dynamic-backed connectors carry `type: 'dynamic'`, so you can disconnect
// yours by name and leave connections your app made elsewhere untouched.
const dynamicConnections = getConnections(config).filter(
  (connection) => connection.connector.type === 'dynamic'
);

for (const { connector } of dynamicConnections) {
  await disconnect(config, { connector });
}

此连接器与该单一账户绑定, 不响应 setSelectedWalletAccount(...); 将其指向别处, 断开连接 用于另一个账户的连接器.

如果您使用多个动态客户端, 请通过客户端作为第二个参数 :

const connector = createDynamicWagmiConnector({ walletAccount }, client);

反应

SyncDynamicWagmi (或 useSyncDynamicWagmi 钩子)是反应包装器 周围 syncDynamicWagmi ——它运行组件寿命的同步. 这个 监视动态 选中 EVM 钱包账户和驱动 wagmi 的 connect 编号 : disconnect 当选择更改时, 您需要登录、 钱包切换或 登录。 没错 没有 通过一个 walletAccount,而你从来没有建立连接器 你自己来.

报酬: 给Dynamic的 setSelectedWalletAccount(...) 在你的应用程序中任何地方 和瓦格米自动跟随 useAccount 和朋友重新指向新来的 选中的账户没有额外的线程 。 动态保持真相的来源; wagmi 是一个只读的镜像。 它使什么也没有.

import { DynamicProvider } from '@dynamic-labs-sdk/react-hooks';
import { SyncDynamicWagmi } from '@dynamic-labs-sdk/wagmi/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet } from 'wagmi/chains';

// Your Dynamic client, created once via createDynamicClient(...).
import { client } from './dynamicClient';

// Dynamic handles wallet discovery, so disable wagmi's own injected discovery.
const config = createConfig({
  chains: [mainnet],
  multiInjectedProviderDiscovery: false,
  transports: { [mainnet.id]: http() },
});

const queryClient = new QueryClient();

// DynamicProvider makes the client available to the rest of Dynamic's React
// hooks (useUser, useGetWalletAccounts, ...). SyncDynamicWagmi uses the same
// client to keep wagmi in sync.
export const Providers = ({ children }) => (
  <DynamicProvider client={client}>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <SyncDynamicWagmi config={config} />
        {children}
      </QueryClientProvider>
    </WagmiProvider>
  </DynamicProvider>
);

一旦挂载, 任何 wagmi 钩子都会镜像选中的动态钱包并切换 账户只是一个动态调用——没有wagmi代码:

import { setSelectedWalletAccount } from '@dynamic-labs-sdk/client';
import { useAccount } from 'wagmi';

const { address, isConnected } = useAccount();

// wagmi re-points to nextWalletAccount automatically.
await setSelectedWalletAccount({ walletAccount: nextWalletAccount });

钩也可直接取出:

import { useSyncDynamicWagmi } from '@dynamic-labs-sdk/wagmi/react';

useSyncDynamicWagmi({ config });

支持的东西

• connect 编号 : disconnect
• getAccounts 编号 : getChainId 编号 : isAuthorized
• switchChain
• 转发动态钱包事件( 账户更改、 网络更改、 断开) 给瓦格米.

注释限制( L)

• v1 一次桥接一个单一的 EVM 账户(同步时选中的账户 一个你通过其他。 同时连接多个EVM账户是一个 后续行动——如果需要,请告诉我们.
• 仅连接 EVM 钱包账户 。 选择一个非 EVM 钱包账户( 如 ) . Solana)将wagmi断开,直到选择 EVM 钱包账户 再来一次.
• 并不是每个动态钱包提供者都可以更改网络. 当基础 提供者不能, switchChain - 和 connect(config, { connector, chainId }) 除了钱包的当前链条外 SwitchChainNotSupportedError 而不是沉默地停留在旧的网络上.