-
Notifications
You must be signed in to change notification settings - Fork 88
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: improve Wagmi config sync (#261)
- Loading branch information
Showing
15 changed files
with
1,320 additions
and
1,302 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
121 changes: 121 additions & 0 deletions
121
packages/wallet-management/src/createDefaultWagmiConfig.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| import type { | ||
| CoinbaseWalletParameters, | ||
| WalletConnectParameters, | ||
| } from '@wagmi/connectors'; | ||
| import type { Chain, Transport } from 'viem'; | ||
| import { createClient, http } from 'viem'; | ||
| import { mainnet } from 'viem/chains'; | ||
| import type { Config, CreateConnectorFn } from 'wagmi'; | ||
| import { createConfig } from 'wagmi'; | ||
| import { createCoinbaseConnector } from './connectors/coinbase.js'; | ||
| import { | ||
| alpha, | ||
| binance, | ||
| bitget, | ||
| bitpie, | ||
| block, | ||
| brave, | ||
| dcent, | ||
| exodus, | ||
| frame, | ||
| frontier, | ||
| gate, | ||
| hyperpay, | ||
| imtoken, | ||
| liquality, | ||
| okx, | ||
| oneinch, | ||
| ownbit, | ||
| safepal, | ||
| status, | ||
| taho, | ||
| tokenary, | ||
| tokenpocket, | ||
| trust, | ||
| xdefi, | ||
| } from './connectors/connectors.js'; | ||
| import { createWalletConnectConnector } from './connectors/walletConnect.js'; | ||
|
|
||
| export type _chains = readonly [Chain, ...Chain[]]; | ||
| export type _transports = Record<_chains[number]['id'], Transport>; | ||
|
|
||
| export interface DefaultWagmiConfigProps { | ||
| walletConnect?: WalletConnectParameters; | ||
| coinbase?: CoinbaseWalletParameters; | ||
| wagmiConfig?: { | ||
| ssr?: boolean; | ||
| }; | ||
| } | ||
|
|
||
| export interface DefaultWagmiConfigResult { | ||
| config: Config; | ||
| connectors: CreateConnectorFn[]; | ||
| } | ||
|
|
||
| /** | ||
| * Creates default Wagmi config that can be later synced (via useSyncWagmiConfig) with chains fetched from LI.FI API. | ||
| * @param props Properties to setup connectors. {@link DefaultWagmiConfigProps} | ||
| * @returns Wagmi config and connectors. {@link DefaultWagmiConfigResult} | ||
| * @example | ||
| * const { config, connectors } = createDefaultWagmiConfig({ | ||
| * walletConnect: { | ||
| * projectId: import.meta.env.VITE_WALLET_CONNECT, | ||
| * }, | ||
| * coinbase: { appName: 'LI.FI Demo' }, | ||
| * }); | ||
| * export const WalletProvider: FC<PropsWithChildren> = ({ children }) => { | ||
| * const { chains } = useAvailableChains(); | ||
| * useSyncWagmiConfig(config, connectors, chains); | ||
| * return <WagmiProvider config={config}>{children}</WagmiProvider>; | ||
| * }; | ||
| */ | ||
| export function createDefaultWagmiConfig( | ||
| props?: DefaultWagmiConfigProps, | ||
| ): DefaultWagmiConfigResult { | ||
| const connectors: CreateConnectorFn[] = [ | ||
| bitget, | ||
| gate, | ||
| exodus, | ||
| taho, | ||
| binance, | ||
| frontier, | ||
| okx, | ||
| trust, | ||
| status, | ||
| alpha, | ||
| block, | ||
| bitpie, | ||
| brave, | ||
| dcent, | ||
| frame, | ||
| hyperpay, | ||
| imtoken, | ||
| liquality, | ||
| ownbit, | ||
| tokenpocket, | ||
| xdefi, | ||
| oneinch, | ||
| tokenary, | ||
| safepal, | ||
| ]; | ||
|
|
||
| if (props?.coinbase) { | ||
| connectors.unshift(createCoinbaseConnector(props.coinbase)); | ||
| } | ||
| if (props?.walletConnect) { | ||
| connectors.unshift(createWalletConnectConnector(props.walletConnect)); | ||
| } | ||
|
|
||
| const config = createConfig({ | ||
| chains: [mainnet], | ||
| client({ chain }) { | ||
| return createClient({ chain, transport: http() }); | ||
| }, | ||
| ...props?.wagmiConfig, | ||
| }); | ||
|
|
||
| return { | ||
| config, | ||
| connectors, | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import type { ExtendedChain } from '@lifi/sdk'; | ||
| import type { Chain } from 'viem'; | ||
| import type { Config, CreateConnectorFn } from 'wagmi'; | ||
| import { reconnect } from 'wagmi/actions'; | ||
| import { convertExtendedChain } from './utils/convertExtendedChain.js'; | ||
|
|
||
| export const syncWagmiConfig = ( | ||
| wagmiConfig: Config, | ||
| connectors: CreateConnectorFn[], | ||
| chains: ExtendedChain[], | ||
| ) => { | ||
| const _chains = chains.map(convertExtendedChain) as [Chain, ...Chain[]]; | ||
| wagmiConfig._internal.chains.setState(_chains); | ||
| wagmiConfig._internal.connectors.setState(() => | ||
| [ | ||
| ...connectors, | ||
| ...(wagmiConfig._internal.mipd | ||
| ?.getProviders() | ||
| .map(wagmiConfig._internal.connectors.providerDetailToConnector) ?? []), | ||
| ].map(wagmiConfig._internal.connectors.setup), | ||
| ); | ||
| reconnect(wagmiConfig); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import type { ExtendedChain } from '@lifi/sdk'; | ||
| import { useEffect } from 'react'; | ||
| import type { Config, CreateConnectorFn } from 'wagmi'; | ||
| import { syncWagmiConfig } from './syncWagmiConfig.js'; | ||
|
|
||
| export const useSyncWagmiConfig = ( | ||
| wagmiConfig: Config, | ||
| connectors: CreateConnectorFn[], | ||
| chains?: ExtendedChain[], | ||
| ) => { | ||
| useEffect(() => { | ||
| if (chains?.length) { | ||
| syncWagmiConfig(wagmiConfig, connectors, chains); | ||
| } | ||
| }, [chains, connectors, wagmiConfig]); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
97 changes: 12 additions & 85 deletions
97
packages/widget-embedded/src/providers/WalletProvider.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,95 +1,22 @@ | ||
| import { | ||
| alpha, | ||
| binance, | ||
| bitget, | ||
| bitpie, | ||
| block, | ||
| brave, | ||
| createCoinbaseConnector, | ||
| createWalletConnectConnector, | ||
| dcent, | ||
| exodus, | ||
| frame, | ||
| frontier, | ||
| gate, | ||
| hyperpay, | ||
| imtoken, | ||
| liquality, | ||
| metaMask, | ||
| okx, | ||
| oneinch, | ||
| ownbit, | ||
| safepal, | ||
| status, | ||
| taho, | ||
| tokenary, | ||
| tokenpocket, | ||
| trust, | ||
| xdefi, | ||
| createDefaultWagmiConfig, | ||
| useSyncWagmiConfig, | ||
| } from '@lifi/wallet-management'; | ||
| import { formatChain, useAvailableChains } from '@lifi/widget'; | ||
| import { useMemo, type FC, type PropsWithChildren } from 'react'; | ||
| import type { Chain } from 'viem'; | ||
| import { createClient } from 'viem'; | ||
| import { WagmiProvider, createConfig, http } from 'wagmi'; | ||
| import { mainnet } from 'wagmi/chains'; | ||
| import { useAvailableChains } from '@lifi/widget'; | ||
| import { type FC, type PropsWithChildren } from 'react'; | ||
| import { WagmiProvider } from 'wagmi'; | ||
|
|
||
| const connectors = [ | ||
| metaMask, | ||
| createWalletConnectConnector({ | ||
| const { config, connectors } = createDefaultWagmiConfig({ | ||
| walletConnect: { | ||
| projectId: import.meta.env.VITE_WALLET_CONNECT, | ||
| }), | ||
| createCoinbaseConnector({ appName: 'LI.FI NFT Demo' }), | ||
| bitget, | ||
| gate, | ||
| exodus, | ||
| taho, | ||
| binance, | ||
| frontier, | ||
| okx, | ||
| trust, | ||
| status, | ||
| alpha, | ||
| block, | ||
| bitpie, | ||
| brave, | ||
| dcent, | ||
| frame, | ||
| hyperpay, | ||
| imtoken, | ||
| liquality, | ||
| ownbit, | ||
| tokenpocket, | ||
| xdefi, | ||
| oneinch, | ||
| tokenary, | ||
| safepal, | ||
| ]; | ||
| }, | ||
| coinbase: { appName: 'LI.FI NFT Demo' }, | ||
| }); | ||
|
|
||
| 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]; | ||
| const wagmiConfig = createConfig({ | ||
| chains: _chains, | ||
| connectors: connectors, | ||
| client({ chain }) { | ||
| return createClient({ chain, transport: http() }); | ||
| }, | ||
| }); | ||
| useSyncWagmiConfig(config, connectors, chains); | ||
|
|
||
| return wagmiConfig; | ||
| }, [chains]); | ||
|
|
||
| return ( | ||
| <WagmiProvider | ||
| config={wagmiConfig} | ||
| reconnectOnMount={Boolean(chains?.length)} | ||
| > | ||
| {children} | ||
| </WagmiProvider> | ||
| ); | ||
| return <WagmiProvider config={config}>{children}</WagmiProvider>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.