chore: Migrate various wallet hooks from the Warp UI to the Widgets lib (#4865)
### Description More ground-work for the upcoming Warp Deploy app No new code, just migrating things from the Warp UI Corresponds with https://github.com/hyperlane-xyz/hyperlane-warp-ui-template/pull/326 Fixes https://github.com/hyperlane-xyz/hyperlane-warp-ui-template/issues/321 ### Drive-by changes Update the hyp registry versions to 6.1.0 ### Backward compatibility Yes ### Testing Tested in Warp UI and storybook <img width="1000" alt="Screenshot 2024-11-16 at 7 08 00 PM" src="https://github.com/user-attachments/assets/f8f9c616-01c4-46e1-8b3b-98415741d4e0">pull/4877/head
J M Rossy
6 days ago
committed by
GitHub
parent
33b6f58418
commit
0cd65c5715
@ -0,0 +1,5 @@ |
||||
--- |
||||
'@hyperlane-xyz/widgets': minor |
||||
--- |
||||
|
||||
Add multi-protocol wallet integration hooks and types |
||||
@ -0,0 +1,5 @@ |
||||
--- |
||||
'@hyperlane-xyz/sdk': minor |
||||
--- |
||||
|
||||
Add chainMetadataToCosmosChain function |
||||
@ -0,0 +1,98 @@ |
||||
import type { AssetList, Chain as CosmosChain } from '@chain-registry/types'; |
||||
import { Chain, defineChain } from 'viem'; |
||||
|
||||
import { test1 } from '../consts/testChains.js'; |
||||
import { |
||||
ChainMetadata, |
||||
getChainIdNumber, |
||||
} from '../metadata/chainMetadataTypes.js'; |
||||
|
||||
export function chainMetadataToViemChain(metadata: ChainMetadata): Chain { |
||||
return defineChain({ |
||||
id: getChainIdNumber(metadata), |
||||
name: metadata.displayName || metadata.name, |
||||
network: metadata.name, |
||||
nativeCurrency: metadata.nativeToken || test1.nativeToken!, |
||||
rpcUrls: { |
||||
public: { http: [metadata.rpcUrls[0].http] }, |
||||
default: { http: [metadata.rpcUrls[0].http] }, |
||||
}, |
||||
blockExplorers: metadata.blockExplorers?.length |
||||
? { |
||||
default: { |
||||
name: metadata.blockExplorers[0].name, |
||||
url: metadata.blockExplorers[0].url, |
||||
}, |
||||
} |
||||
: undefined, |
||||
testnet: !!metadata.isTestnet, |
||||
}); |
||||
} |
||||
|
||||
export function chainMetadataToCosmosChain(metadata: ChainMetadata): { |
||||
chain: CosmosChain; |
||||
assets: AssetList; |
||||
} { |
||||
const { |
||||
name, |
||||
displayName, |
||||
chainId, |
||||
rpcUrls, |
||||
restUrls, |
||||
isTestnet, |
||||
nativeToken, |
||||
bech32Prefix, |
||||
slip44, |
||||
} = metadata; |
||||
|
||||
if (!nativeToken) throw new Error(`Missing native token for ${name}`); |
||||
|
||||
const chain: CosmosChain = { |
||||
chain_name: name, |
||||
chain_type: 'cosmos', |
||||
status: 'live', |
||||
network_type: isTestnet ? 'testnet' : 'mainnet', |
||||
pretty_name: displayName || name, |
||||
chain_id: chainId as string, |
||||
bech32_prefix: bech32Prefix!, |
||||
slip44: slip44!, |
||||
apis: { |
||||
rpc: [{ address: rpcUrls[0].http, provider: displayName || name }], |
||||
rest: restUrls |
||||
? [{ address: restUrls[0].http, provider: displayName || name }] |
||||
: [], |
||||
}, |
||||
fees: { |
||||
fee_tokens: [{ denom: 'token' }], |
||||
}, |
||||
staking: { |
||||
staking_tokens: [{ denom: 'stake' }], |
||||
}, |
||||
}; |
||||
|
||||
const assets: AssetList = { |
||||
chain_name: name, |
||||
assets: [ |
||||
{ |
||||
description: `The native token of ${displayName || name} chain.`, |
||||
denom_units: [{ denom: 'token', exponent: nativeToken.decimals }], |
||||
base: 'token', |
||||
name: 'token', |
||||
display: 'token', |
||||
symbol: 'token', |
||||
type_asset: 'sdk.coin', |
||||
}, |
||||
{ |
||||
description: `The native token of ${displayName || name} chain.`, |
||||
denom_units: [{ denom: 'token', exponent: nativeToken.decimals }], |
||||
base: 'stake', |
||||
name: 'stake', |
||||
display: 'stake', |
||||
symbol: 'stake', |
||||
type_asset: 'sdk.coin', |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
return { chain, assets }; |
||||
} |
||||
@ -1,29 +0,0 @@ |
||||
import { Chain, defineChain } from 'viem'; |
||||
|
||||
import { test1 } from '../consts/testChains.js'; |
||||
import { |
||||
ChainMetadata, |
||||
getChainIdNumber, |
||||
} from '../metadata/chainMetadataTypes.js'; |
||||
|
||||
export function chainMetadataToViemChain(metadata: ChainMetadata): Chain { |
||||
return defineChain({ |
||||
id: getChainIdNumber(metadata), |
||||
name: metadata.displayName || metadata.name, |
||||
network: metadata.name, |
||||
nativeCurrency: metadata.nativeToken || test1.nativeToken!, |
||||
rpcUrls: { |
||||
public: { http: [metadata.rpcUrls[0].http] }, |
||||
default: { http: [metadata.rpcUrls[0].http] }, |
||||
}, |
||||
blockExplorers: metadata.blockExplorers?.length |
||||
? { |
||||
default: { |
||||
name: metadata.blockExplorers[0].name, |
||||
url: metadata.blockExplorers[0].url, |
||||
}, |
||||
} |
||||
: undefined, |
||||
testnet: !!metadata.isTestnet, |
||||
}); |
||||
} |
||||
@ -0,0 +1,3 @@ |
||||
import { rootLogger } from '@hyperlane-xyz/utils'; |
||||
|
||||
export const widgetLogger = rootLogger.child({ module: 'widgets' }); |
||||
@ -0,0 +1,40 @@ |
||||
import React, { SVGProps, memo } from 'react'; |
||||
|
||||
function _CosmosLogo(props: SVGProps<SVGSVGElement>) { |
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
fill="none" |
||||
viewBox="0 0 1024 1024" |
||||
{...props} |
||||
> |
||||
<path |
||||
fill="#171717" |
||||
fillRule="evenodd" |
||||
d="M512 1a511 511 0 1 1 0 1022A511 511 0 0 1 512 1" |
||||
clipRule="evenodd" |
||||
></path> |
||||
<path |
||||
fill="#000" |
||||
fillRule="evenodd" |
||||
d="M511 217.2a294.8 294.8 0 1 1 0 589.6 294.8 294.8 0 0 1 0-589.6" |
||||
clipRule="evenodd" |
||||
></path> |
||||
<path |
||||
fill="#fff" |
||||
fillRule="evenodd" |
||||
d="M520 88.4c-4-3.7-6.1-3.8-6.5-3.8-.3 0-2.4 0-6.5 3.8a77.3 77.3 0 0 0-14.5 20.6c-10.7 20.4-21 51.2-29.8 91A1204 1204 0 0 0 440 360.4c23.9 11.6 48.5 24.2 73.5 37.7 25-13.5 49.7-26 73.6-37.7-5-61.1-12.8-115.7-22.8-160.4-8.8-39.8-19-70.6-29.8-91A77.3 77.3 0 0 0 520 88.4m-27.4 321.2a1837 1837 0 0 0-54.2-27.7c-1.4 19.7-2.4 40-3.2 60.8a2039 2039 0 0 1 57.4-33.1m-72-58.4c14.4-167.6 50.6-286.6 93-286.6 42.3 0 78.4 119 92.8 286.6 152.5-71.4 273.7-99.6 294.8-63 21.2 36.7-63.8 127.5-202 223.8 138.2 96.3 223.2 187 202 223.7-21.1 36.7-142.3 8.5-294.8-63-14.4 167.7-50.5 286.7-92.9 286.7-42.3 0-78.5-119-92.9-286.6-152.4 71.4-273.6 99.6-294.8 63-21.2-36.7 63.8-127.5 202-223.8-138.2-96.3-223.2-187-202-223.7s142.4-8.5 294.8 63ZM345.4 500c-50.5-34.9-94-69-127.7-100-30-27.5-51.6-51.7-63.9-71.2a77.3 77.3 0 0 1-10.6-22.9c-1.2-5.4-.3-7.2 0-7.5 0-.3 1.2-2 6.5-3.7a77.4 77.4 0 0 1 25.1-2.3c23 1 54.9 7.5 93.7 19.7 43.7 13.8 95 34.3 150.5 60.6q-3 39.75-4.2 82.5a1906 1906 0 0 0-69.4 44.8m0 24.2c-50.5 34.9-94 69-127.7 100-30 27.5-51.6 51.7-63.9 71.2a77.3 77.3 0 0 0-10.6 22.9c-1.2 5.4-.3 7.2 0 7.5 0 .3 1.2 2 6.5 3.7a77.4 77.4 0 0 0 25.1 2.3c23-1 54.9-7.5 93.7-19.7 43.7-13.8 95-34.3 150.5-60.6q-3-39.75-4.2-82.5a1861 1861 0 0 1-69.4-44.8m68.9 21c-17.7-11-34.7-22-51.1-33.1 16.4-11 33.4-22 51.1-33a2032 2032 0 0 0 0 66Zm20.2 12.5a2007 2007 0 0 1 0-91.2 2008 2008 0 0 1 79-45.5 2008 2008 0 0 1 79 45.5 2006 2006 0 0 1 0 91.2 2008 2008 0 0 1-79 45.5 2008 2008 0 0 1-79-45.5m.7 23.7c.8 20.8 1.8 41.1 3.2 60.8 17.7-8.7 35.8-18 54.2-27.7a2036 2036 0 0 1-57.4-33Zm78.3 44.6c-25 13.5-49.6 26-73.5 37.7 5 61.1 12.8 115.7 22.7 160.4 8.8 39.8 19 70.6 29.8 91a77.3 77.3 0 0 0 14.5 20.6c4 3.7 6.2 3.8 6.5 3.8.4 0 2.5 0 6.5-3.8a77.3 77.3 0 0 0 14.5-20.6c10.8-20.4 21-51.2 29.8-91 10-44.7 17.8-99.3 22.8-160.4-24-11.6-48.6-24.2-73.6-37.7m94.6 25.5A1206 1206 0 0 0 758.5 712c38.9 12.2 70.7 18.7 93.7 19.7 11.5.4 19.8-.6 25.2-2.3 5.2-1.6 6.3-3.4 6.5-3.7s1.2-2.1 0-7.5a77.3 77.3 0 0 0-10.7-22.9c-12.3-19.5-33.8-43.7-63.9-71.3-33.7-31-77.1-65-127.7-99.9-22 15-45.2 30-69.4 44.8-.8 28.5-2.2 56-4.1 82.5ZM681.6 500c50.6-34.9 94-69 127.7-100 30-27.5 51.6-51.7 64-71.2a77.3 77.3 0 0 0 10.6-22.9c1.2-5.4.2-7.2 0-7.5s-1.3-2-6.5-3.7a77.5 77.5 0 0 0-25.2-2.3c-23 1-54.8 7.5-93.7 19.7-43.7 13.8-95 34.3-150.4 60.6 2 26.5 3.3 54 4.1 82.5a1906 1906 0 0 1 69.4 44.8m-68.9-21c17.7 11 34.8 22.1 51.1 33.1-16.3 11-33.4 22-51 33a2042 2042 0 0 0 0-66Zm-20.9-36.2c-.7-20.8-1.8-41.1-3.1-60.8-17.7 8.7-35.9 18-54.2 27.7a2030 2030 0 0 1 57.3 33ZM588.7 642c-17.7-8.7-35.9-18-54.2-27.7a2030 2030 0 0 0 57.3-33c-.7 20.7-1.8 41-3.1 60.7" |
||||
clipRule="evenodd" |
||||
opacity="0.7" |
||||
></path> |
||||
<path |
||||
fill="#fff" |
||||
fillRule="evenodd" |
||||
d="M227.5 386.7a31.5 31.5 0 1 1 0 63 31.5 31.5 0 0 1 0-63M727.6 279a31.5 31.5 0 1 1 0 62.9 31.5 31.5 0 0 1 0-63ZM450.1 773a31.5 31.5 0 1 1 0 63 31.5 31.5 0 0 1 0-63M511.8 458.5a53.3 53.3 0 1 1 0 106.6 53.3 53.3 0 0 1 0-106.6" |
||||
clipRule="evenodd" |
||||
></path> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const CosmosLogo = memo(_CosmosLogo); |
||||
@ -0,0 +1,27 @@ |
||||
import React, { SVGProps, memo } from 'react'; |
||||
|
||||
function _EthereumLogo(props: SVGProps<SVGSVGElement>) { |
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
fillRule="evenodd" |
||||
clipRule="evenodd" |
||||
viewBox="-150 0 1100 1277.4" |
||||
{...props} |
||||
> |
||||
<g fillRule="nonzero"> |
||||
<path fill="#343434" d="m392.1 0-8.6 29.1v844.6l8.6 8.6 392-231.8z" /> |
||||
<path fill="#8C8C8C" d="M392.1 0 0 650.5l392.1 231.8v-410z" /> |
||||
<path |
||||
fill="#3C3C3B" |
||||
d="m392.1 956.5-4.9 5.9v300.9l4.9 14.1 392.3-552.5z" |
||||
/> |
||||
<path fill="#8C8C8C" d="M392.1 1277.4V956.5L0 724.9z" /> |
||||
<path fill="#141414" d="m392.1 882.3 392-231.8-392-178.2z" /> |
||||
<path fill="#393939" d="m0 650.5 392.1 231.8v-410z" /> |
||||
</g> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const EthereumLogo = memo(_EthereumLogo); |
||||
@ -0,0 +1,63 @@ |
||||
import React, { SVGProps, memo } from 'react'; |
||||
|
||||
function _SolanaLogo(props: SVGProps<SVGSVGElement>) { |
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
xmlSpace="preserve" |
||||
viewBox="0 0 397.7 311.7" |
||||
{...props} |
||||
> |
||||
<linearGradient |
||||
id="solGrad1" |
||||
x1="360.88" |
||||
x2="141.21" |
||||
y1="351.46" |
||||
y2="-69.29" |
||||
gradientTransform="matrix(1 0 0 -1 0 314)" |
||||
gradientUnits="userSpaceOnUse" |
||||
> |
||||
<stop offset="0" stopColor="#00ffa3"></stop> |
||||
<stop offset="1" stopColor="#dc1fff"></stop> |
||||
</linearGradient> |
||||
<path |
||||
fill="url(#solGrad1)" |
||||
d="M64.6 237.9c2.4-2.4 5.7-3.8 9.2-3.8h317.4c5.8 0 8.7 7 4.6 11.1l-62.7 62.7c-2.4 2.4-5.7 3.8-9.2 3.8H6.5c-5.8 0-8.7-7-4.6-11.1z" |
||||
></path> |
||||
<linearGradient |
||||
id="solGrad2" |
||||
x1="264.83" |
||||
x2="45.16" |
||||
y1="401.6" |
||||
y2="-19.15" |
||||
gradientTransform="matrix(1 0 0 -1 0 314)" |
||||
gradientUnits="userSpaceOnUse" |
||||
> |
||||
<stop offset="0" stopColor="#00ffa3"></stop> |
||||
<stop offset="1" stopColor="#dc1fff"></stop> |
||||
</linearGradient> |
||||
<path |
||||
fill="url(#solGrad2)" |
||||
d="M64.6 3.8C67.1 1.4 70.4 0 73.8 0h317.4c5.8 0 8.7 7 4.6 11.1l-62.7 62.7c-2.4 2.4-5.7 3.8-9.2 3.8H6.5c-5.8 0-8.7-7-4.6-11.1z" |
||||
></path> |
||||
<linearGradient |
||||
id="solGrad3" |
||||
x1="312.55" |
||||
x2="92.88" |
||||
y1="376.69" |
||||
y2="-44.06" |
||||
gradientTransform="matrix(1 0 0 -1 0 314)" |
||||
gradientUnits="userSpaceOnUse" |
||||
> |
||||
<stop offset="0" stopColor="#00ffa3"></stop> |
||||
<stop offset="1" stopColor="#dc1fff"></stop> |
||||
</linearGradient> |
||||
<path |
||||
fill="url(#solGrad3)" |
||||
d="M333.1 120.1c-2.4-2.4-5.7-3.8-9.2-3.8H6.5c-5.8 0-8.7 7-4.6 11.1l62.7 62.7c2.4 2.4 5.7 3.8 9.2 3.8h317.4c5.8 0 8.7-7 4.6-11.1z" |
||||
></path> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const SolanaLogo = memo(_SolanaLogo); |
||||
@ -0,0 +1,33 @@ |
||||
import React, { SVGProps, memo } from 'react'; |
||||
|
||||
function _WalletConnectLogo(props: SVGProps<SVGSVGElement>) { |
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="400" |
||||
height="400" |
||||
fill="none" |
||||
viewBox="0 0 400 400" |
||||
{...props} |
||||
> |
||||
<clipPath id="walletConnectClip"> |
||||
<path d="M0 0h400v400H0z"></path> |
||||
</clipPath> |
||||
<g clipPath="url(#walletConnectClip)"> |
||||
<circle |
||||
cx="200" |
||||
cy="200" |
||||
r="199.5" |
||||
fill="#3396ff" |
||||
stroke="#66b1ff" |
||||
></circle> |
||||
<path |
||||
fill="#fff" |
||||
d="M122.519 148.965c42.791-41.729 112.171-41.729 154.962 0l5.15 5.022a5.25 5.25 0 0 1 0 7.555l-17.617 17.18a2.79 2.79 0 0 1-3.874 0l-7.087-6.911c-29.853-29.111-78.253-29.111-108.106 0l-7.59 7.401a2.79 2.79 0 0 1-3.874 0l-17.617-17.18a5.25 5.25 0 0 1 0-7.555zm191.397 35.529 15.679 15.29a5.25 5.25 0 0 1 0 7.555l-70.7 68.944c-2.139 2.087-5.608 2.087-7.748 0l-50.178-48.931a1.394 1.394 0 0 0-1.937 0l-50.178 48.931c-2.139 2.087-5.608 2.087-7.748 0l-70.701-68.945a5.25 5.25 0 0 1 0-7.555l15.679-15.29c2.14-2.086 5.609-2.086 7.748 0l50.179 48.932a1.394 1.394 0 0 0 1.937 0l50.177-48.932c2.139-2.087 5.608-2.087 7.748 0l50.179 48.932a1.394 1.394 0 0 0 1.937 0l50.179-48.931c2.139-2.087 5.608-2.087 7.748 0" |
||||
></path> |
||||
</g> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
export const WalletConnectLogo = memo(_WalletConnectLogo); |
||||
@ -0,0 +1,16 @@ |
||||
import { FC, SVGProps } from 'react'; |
||||
|
||||
import { ProtocolType } from '@hyperlane-xyz/utils'; |
||||
|
||||
import { CosmosLogo } from './Cosmos.js'; |
||||
import { EthereumLogo } from './Ethereum.js'; |
||||
import { SolanaLogo } from './Solana.js'; |
||||
|
||||
export const PROTOCOL_TO_LOGO: Record< |
||||
ProtocolType, |
||||
FC<Omit<SVGProps<SVGSVGElement>, 'ref'>> |
||||
> = { |
||||
[ProtocolType.Ethereum]: EthereumLogo, |
||||
[ProtocolType.Sealevel]: SolanaLogo, |
||||
[ProtocolType.Cosmos]: CosmosLogo, |
||||
}; |
||||
@ -0,0 +1,124 @@ |
||||
import { ChakraProvider } from '@chakra-ui/react'; |
||||
import { ChainProvider } from '@cosmos-kit/react'; |
||||
import '@interchain-ui/react/styles'; |
||||
import { RainbowKitProvider } from '@rainbow-me/rainbowkit'; |
||||
import '@rainbow-me/rainbowkit/styles.css'; |
||||
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'; |
||||
import { |
||||
ConnectionProvider, |
||||
WalletProvider, |
||||
} from '@solana/wallet-adapter-react'; |
||||
import { WalletModalProvider } from '@solana/wallet-adapter-react-ui'; |
||||
import '@solana/wallet-adapter-react-ui/styles.css'; |
||||
import { clusterApiUrl } from '@solana/web3.js'; |
||||
import { Meta, StoryObj } from '@storybook/react'; |
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; |
||||
import React, { PropsWithChildren, useState } from 'react'; |
||||
import { WagmiProvider, createConfig, http } from 'wagmi'; |
||||
|
||||
import { cosmoshub, ethereum, solanamainnet } from '@hyperlane-xyz/registry'; |
||||
import { MultiProtocolProvider } from '@hyperlane-xyz/sdk'; |
||||
import { ProtocolType } from '@hyperlane-xyz/utils'; |
||||
|
||||
import { AccountList } from '../walletIntegrations/AccountList.js'; |
||||
import { ConnectWalletButton } from '../walletIntegrations/ConnectWalletButton.js'; |
||||
import { MultiProtocolWalletModal } from '../walletIntegrations/MultiProtocolWalletModal.js'; |
||||
import { getCosmosKitChainConfigs } from '../walletIntegrations/cosmos.js'; |
||||
import { getWagmiChainConfigs } from '../walletIntegrations/ethereum.js'; |
||||
|
||||
const multiProvider = new MultiProtocolProvider({ |
||||
ethereum, |
||||
cosmoshub, |
||||
solanamainnet, |
||||
}); |
||||
|
||||
function MinimalDapp({ protocols }: { protocols?: ProtocolType[] }) { |
||||
const [isOpen, setIsOpen] = useState(false); |
||||
const open = () => setIsOpen(true); |
||||
const close = () => setIsOpen(false); |
||||
|
||||
return ( |
||||
<EthereumWalletProvider> |
||||
<CosmosWalletProvider> |
||||
<SolanaWalletProvider> |
||||
<div className="htw-space-y-4"> |
||||
<h1>CONNECT BUTTON</h1> |
||||
<ConnectWalletButton |
||||
multiProvider={multiProvider} |
||||
onClickWhenConnected={open} |
||||
onClickWhenUnconnected={open} |
||||
/> |
||||
<h1>ACCOUNT SUMMARY</h1> |
||||
<AccountList |
||||
multiProvider={multiProvider} |
||||
onClickConnectWallet={open} |
||||
/> |
||||
</div> |
||||
<MultiProtocolWalletModal |
||||
isOpen={isOpen} |
||||
close={close} |
||||
protocols={protocols} |
||||
/> |
||||
</SolanaWalletProvider> |
||||
</CosmosWalletProvider> |
||||
</EthereumWalletProvider> |
||||
); |
||||
} |
||||
|
||||
const wagmiConfig = createConfig({ |
||||
chains: [getWagmiChainConfigs(multiProvider)[0]], |
||||
transports: { [ethereum.chainId]: http() }, |
||||
}); |
||||
|
||||
function EthereumWalletProvider({ children }: PropsWithChildren<unknown>) { |
||||
const queryClient = new QueryClient(); |
||||
|
||||
return ( |
||||
<WagmiProvider config={wagmiConfig}> |
||||
<QueryClientProvider client={queryClient}> |
||||
<RainbowKitProvider>{children}</RainbowKitProvider> |
||||
</QueryClientProvider> |
||||
</WagmiProvider> |
||||
); |
||||
} |
||||
|
||||
const cosmosKitConfig = getCosmosKitChainConfigs(multiProvider); |
||||
|
||||
function CosmosWalletProvider({ children }: PropsWithChildren<unknown>) { |
||||
return ( |
||||
<ChakraProvider> |
||||
<ChainProvider |
||||
chains={cosmosKitConfig.chains} |
||||
assetLists={cosmosKitConfig.assets} |
||||
wallets={[]} |
||||
> |
||||
{children} |
||||
</ChainProvider> |
||||
</ChakraProvider> |
||||
); |
||||
} |
||||
|
||||
function SolanaWalletProvider({ children }: PropsWithChildren<unknown>) { |
||||
return ( |
||||
<ConnectionProvider endpoint={clusterApiUrl(WalletAdapterNetwork.Mainnet)}> |
||||
<WalletProvider wallets={[]}> |
||||
<WalletModalProvider>{children}</WalletModalProvider> |
||||
</WalletProvider> |
||||
</ConnectionProvider> |
||||
); |
||||
} |
||||
|
||||
const meta = { |
||||
title: 'MultiProtocolWalletModal', |
||||
component: MinimalDapp, |
||||
} satisfies Meta<typeof MinimalDapp>; |
||||
export default meta; |
||||
type Story = StoryObj<typeof meta>; |
||||
|
||||
export const DefaultPicker = { |
||||
args: {}, |
||||
} satisfies Story; |
||||
|
||||
export const EvmOnlyPicker = { |
||||
args: { protocols: [ProtocolType.Ethereum] }, |
||||
} satisfies Story; |
||||
@ -0,0 +1,143 @@ |
||||
import clsx from 'clsx'; |
||||
import React, { ButtonHTMLAttributes } from 'react'; |
||||
|
||||
import { MultiProtocolProvider } from '@hyperlane-xyz/sdk'; |
||||
import { ProtocolType, objKeys } from '@hyperlane-xyz/utils'; |
||||
|
||||
import { Button } from '../components/Button.js'; |
||||
import { IconButton } from '../components/IconButton.js'; |
||||
import { LogoutIcon } from '../icons/Logout.js'; |
||||
import { WalletIcon } from '../icons/Wallet.js'; |
||||
import { XCircleIcon } from '../icons/XCircle.js'; |
||||
import { widgetLogger } from '../logger.js'; |
||||
import { tryClipboardSet } from '../utils/clipboard.js'; |
||||
import { WalletLogo } from '../walletIntegrations/WalletLogo.js'; |
||||
import { |
||||
useAccounts, |
||||
useDisconnectFns, |
||||
useWalletDetails, |
||||
} from '../walletIntegrations/multiProtocol.js'; |
||||
|
||||
import { AccountInfo, WalletDetails } from './types.js'; |
||||
|
||||
const logger = widgetLogger.child({ module: 'walletIntegrations/AccountList' }); |
||||
|
||||
export function AccountList({ |
||||
multiProvider, |
||||
onClickConnectWallet, |
||||
onCopySuccess, |
||||
className, |
||||
}: { |
||||
multiProvider: MultiProtocolProvider; |
||||
onClickConnectWallet: () => void; |
||||
onCopySuccess?: () => void; |
||||
className?: string; |
||||
}) { |
||||
const { readyAccounts } = useAccounts(multiProvider); |
||||
const disconnectFns = useDisconnectFns(); |
||||
const walletDetails = useWalletDetails(); |
||||
|
||||
const onClickDisconnect = async (protocol: ProtocolType) => { |
||||
try { |
||||
const disconnectFn = disconnectFns[protocol]; |
||||
if (disconnectFn) await disconnectFn(); |
||||
} catch (error) { |
||||
logger.error('Error disconnecting wallet', error); |
||||
} |
||||
}; |
||||
|
||||
const onClickDisconnectAll = async () => { |
||||
for (const protocol of objKeys(disconnectFns)) { |
||||
await onClickDisconnect(protocol); |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<div className={clsx('htw-space-y-2', className)}> |
||||
{readyAccounts.map((acc, i) => ( |
||||
<AccountSummary |
||||
key={i} |
||||
account={acc} |
||||
walletDetails={walletDetails[acc.protocol]} |
||||
onCopySuccess={onCopySuccess} |
||||
onClickDisconnect={() => onClickDisconnect(acc.protocol)} |
||||
/> |
||||
))} |
||||
<Button |
||||
onClick={onClickConnectWallet} |
||||
className={clsx(styles.btn, 'htw-py-2 htw-px-2.5')} |
||||
> |
||||
<WalletIcon width={18} height={18} /> |
||||
<div className="htw-ml-2 htw-text-sm">Connect wallet</div> |
||||
</Button> |
||||
<Button |
||||
onClick={onClickDisconnectAll} |
||||
className={clsx(styles.btn, 'htw-py-2 htw-px-2.5')} |
||||
> |
||||
<LogoutIcon width={18} height={18} /> |
||||
<div className="htw-ml-2 htw-text-sm">Disconnect all wallets</div> |
||||
</Button> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
type AccountSummaryProps = { |
||||
account: AccountInfo; |
||||
walletDetails: WalletDetails; |
||||
onCopySuccess?: () => void; |
||||
onClickDisconnect: () => Promise<void>; |
||||
} & ButtonHTMLAttributes<HTMLButtonElement>; |
||||
|
||||
export function AccountSummary({ |
||||
account, |
||||
onCopySuccess, |
||||
walletDetails, |
||||
onClickDisconnect, |
||||
className, |
||||
...rest |
||||
}: AccountSummaryProps) { |
||||
const numAddresses = account?.addresses?.length || 0; |
||||
const onlyAddress = |
||||
numAddresses === 1 ? account.addresses[0].address : undefined; |
||||
|
||||
const onClickCopy = async () => { |
||||
const copyValue = account.addresses.map((a) => a.address).join(', '); |
||||
await tryClipboardSet(copyValue); |
||||
onCopySuccess?.(); |
||||
}; |
||||
|
||||
return ( |
||||
<div className="htw-relative"> |
||||
<Button |
||||
onClick={onClickCopy} |
||||
className={clsx(styles.btn, 'htw-py-2 htw-pl-1 htw-pr-3', className)} |
||||
{...rest} |
||||
> |
||||
<div className="htw-shrink-0 htw-overflow-hidden htw-rounded-full"> |
||||
<WalletLogo walletDetails={walletDetails} size={38} /> |
||||
</div> |
||||
<div className="htw-mx-3 htw-flex htw-shrink htw-flex-col htw-items-start htw-overflow-hidden"> |
||||
<div className="htw-text-sm htw-font-normal htw-text-gray-800"> |
||||
{walletDetails.name || 'Wallet'} |
||||
</div> |
||||
<div className="htw-w-full htw-truncate htw-text-left htw-text-xs"> |
||||
{onlyAddress || `${numAddresses} known addresses`} |
||||
</div> |
||||
</div> |
||||
</Button> |
||||
<div className="htw-absolute htw-right-1 htw-top-1/2 htw--translate-y-1/2 htw-rounded-full"> |
||||
<IconButton |
||||
onClick={onClickDisconnect} |
||||
title="Disconnect" |
||||
className="hover:htw-rotate-90" |
||||
> |
||||
<XCircleIcon width={15} height={15} /> |
||||
</IconButton> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const styles = { |
||||
btn: 'htw-flex htw-w-full htw-items-center all:htw-justify-start htw-rounded-sm htw-text-sm hover:htw-bg-gray-200 all:hover:htw-opacity-100', |
||||
}; |
||||
@ -0,0 +1,115 @@ |
||||
import clsx from 'clsx'; |
||||
import React, { ButtonHTMLAttributes } from 'react'; |
||||
|
||||
import { MultiProtocolProvider } from '@hyperlane-xyz/sdk'; |
||||
import { ProtocolType, shortenAddress } from '@hyperlane-xyz/utils'; |
||||
|
||||
import { Button } from '../components/Button.js'; |
||||
import { ChevronIcon } from '../icons/Chevron.js'; |
||||
import { WalletIcon } from '../icons/Wallet.js'; |
||||
import { useIsSsr } from '../utils/ssr.js'; |
||||
|
||||
import { WalletLogo } from './WalletLogo.js'; |
||||
import { useAccounts, useWalletDetails } from './multiProtocol.js'; |
||||
|
||||
type Props = { |
||||
multiProvider: MultiProtocolProvider; |
||||
onClickWhenConnected: () => void; |
||||
onClickWhenUnconnected: () => void; |
||||
countClassName?: string; |
||||
} & ButtonHTMLAttributes<HTMLButtonElement>; |
||||
|
||||
export function ConnectWalletButton({ |
||||
multiProvider, |
||||
onClickWhenConnected, |
||||
onClickWhenUnconnected, |
||||
className, |
||||
countClassName, |
||||
...rest |
||||
}: Props) { |
||||
const isSsr = useIsSsr(); |
||||
|
||||
const { readyAccounts } = useAccounts(multiProvider); |
||||
const walletDetails = useWalletDetails(); |
||||
|
||||
const numReady = readyAccounts.length; |
||||
const firstAccount = readyAccounts[0]; |
||||
const firstWallet = |
||||
walletDetails[firstAccount?.protocol || ProtocolType.Ethereum]; |
||||
|
||||
if (isSsr) { |
||||
// https://github.com/wagmi-dev/wagmi/issues/542#issuecomment-1144178142
|
||||
return null; |
||||
} |
||||
|
||||
return ( |
||||
<div className="htw-relative"> |
||||
<div className="htw-relative"> |
||||
{numReady === 0 && ( |
||||
<Button |
||||
className={clsx('htw-py-2 htw-px-3', className)} |
||||
onClick={onClickWhenUnconnected} |
||||
title="Choose wallet" |
||||
{...rest} |
||||
> |
||||
<div className="htw-flex htw-items-center htw-gap-2"> |
||||
<WalletIcon width={16} height={16} /> |
||||
<div className="htw-text-xs sm:htw-text-sm">Connect wallet</div> |
||||
</div> |
||||
</Button> |
||||
)} |
||||
|
||||
{numReady === 1 && ( |
||||
<Button |
||||
onClick={onClickWhenConnected} |
||||
className={clsx('htw-px-2.5 htw-py-1', className)} |
||||
{...rest} |
||||
> |
||||
<div className="htw-flex htw-w-36 htw-items-center htw-justify-center xs:htw-w-auto"> |
||||
<WalletLogo walletDetails={firstWallet} size={26} /> |
||||
<div className="htw-mx-3 htw-flex htw-flex-col htw-items-start"> |
||||
<div className="htw-text-xs htw-text-gray-500"> |
||||
{firstWallet.name || 'Wallet'} |
||||
</div> |
||||
<div className="htw-text-xs"> |
||||
{readyAccounts[0].addresses.length |
||||
? shortenAddress( |
||||
readyAccounts[0].addresses[0].address, |
||||
true, |
||||
) |
||||
: 'Unknown'} |
||||
</div> |
||||
</div> |
||||
<ChevronIcon direction="s" width={10} height={6} /> |
||||
</div> |
||||
</Button> |
||||
)} |
||||
|
||||
{numReady > 1 && ( |
||||
<Button |
||||
onClick={onClickWhenConnected} |
||||
className={clsx('htw-px-2.5 htw-py-1', className)} |
||||
{...rest} |
||||
> |
||||
<div className="htw-flex htw-items-center htw-justify-center"> |
||||
<div |
||||
style={{ height: 26, width: 26 }} |
||||
className={clsx( |
||||
'htw-flex htw-items-center htw-justify-center htw-rounded-full htw-bg-gray-600 htw-text-white', |
||||
countClassName, |
||||
)} |
||||
> |
||||
{numReady} |
||||
</div> |
||||
<div className="htw-mx-3 htw-flex htw-flex-col htw-items-start"> |
||||
<div className="htw-text-xs htw-text-gray-500">Wallets</div> |
||||
<div className="htw-text-xs">{`${numReady} Connected`}</div> |
||||
</div> |
||||
<ChevronIcon direction="s" width={10} height={6} /> |
||||
</div> |
||||
</Button> |
||||
)} |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,86 @@ |
||||
import React, { PropsWithChildren } from 'react'; |
||||
|
||||
import { ProtocolType } from '@hyperlane-xyz/utils'; |
||||
|
||||
import { Modal } from '../layout/Modal.js'; |
||||
import { PROTOCOL_TO_LOGO } from '../logos/protocols.js'; |
||||
|
||||
import { useConnectFns } from './multiProtocol.js'; |
||||
|
||||
export function MultiProtocolWalletModal({ |
||||
isOpen, |
||||
close, |
||||
protocols, |
||||
}: { |
||||
isOpen: boolean; |
||||
close: () => void; |
||||
protocols?: ProtocolType[]; // defaults to all protocols if not provided
|
||||
}) { |
||||
const connectFns = useConnectFns(); |
||||
|
||||
const onClickProtocol = (protocol: ProtocolType) => { |
||||
close(); |
||||
const connectFn = connectFns[protocol]; |
||||
if (connectFn) connectFn(); |
||||
}; |
||||
|
||||
const includesProtocol = (protocol: ProtocolType) => |
||||
!protocols || protocols.includes(protocol); |
||||
|
||||
return ( |
||||
<Modal isOpen={isOpen} close={close} panelClassname="htw-max-w-sm htw-p-4"> |
||||
<div className="htw-flex htw-flex-col htw-space-y-2.5 htw-pb-2 htw-pt-4"> |
||||
{includesProtocol(ProtocolType.Ethereum) && ( |
||||
<ProtocolButton |
||||
protocol={ProtocolType.Ethereum} |
||||
onClick={onClickProtocol} |
||||
subTitle="an EVM" |
||||
> |
||||
Ethereum |
||||
</ProtocolButton> |
||||
)} |
||||
{includesProtocol(ProtocolType.Sealevel) && ( |
||||
<ProtocolButton |
||||
protocol={ProtocolType.Sealevel} |
||||
onClick={onClickProtocol} |
||||
subTitle="a Solana" |
||||
> |
||||
Solana |
||||
</ProtocolButton> |
||||
)} |
||||
{includesProtocol(ProtocolType.Cosmos) && ( |
||||
<ProtocolButton |
||||
protocol={ProtocolType.Cosmos} |
||||
onClick={onClickProtocol} |
||||
subTitle="an Cosmos" |
||||
> |
||||
Cosmos |
||||
</ProtocolButton> |
||||
)} |
||||
</div> |
||||
</Modal> |
||||
); |
||||
} |
||||
|
||||
function ProtocolButton({ |
||||
onClick, |
||||
subTitle, |
||||
protocol, |
||||
children, |
||||
}: PropsWithChildren<{ |
||||
subTitle: string; |
||||
protocol: ProtocolType; |
||||
onClick: (protocol: ProtocolType) => void; |
||||
}>) { |
||||
const Logo = PROTOCOL_TO_LOGO[protocol]; |
||||
return ( |
||||
<button |
||||
onClick={() => onClick(protocol)} |
||||
className="htw-flex htw-w-full htw-flex-col htw-items-center htw-space-y-2.5 htw-rounded-lg htw-border htw-border-gray-200 htw-py-3.5 htw-transition-all hover:htw-bg-gray-100 active:htw-scale-95" |
||||
> |
||||
<Logo width={34} height={34} /> |
||||
<div className="htw-tracking-wide htw-text-gray-800">{children}</div> |
||||
<div className="htw-text-sm htw-text-gray-500">{`Connect to ${subTitle} compatible wallet`}</div> |
||||
</button> |
||||
); |
||||
} |
||||
@ -0,0 +1,24 @@ |
||||
import React from 'react'; |
||||
|
||||
import { WalletIcon } from '../icons/Wallet.js'; |
||||
import { WalletConnectLogo } from '../logos/WalletConnect.js'; |
||||
|
||||
import { WalletDetails } from './types.js'; |
||||
|
||||
export function WalletLogo({ |
||||
walletDetails, |
||||
size, |
||||
}: { |
||||
walletDetails: WalletDetails; |
||||
size?: number; |
||||
}) { |
||||
const src = walletDetails.logoUrl?.trim(); |
||||
|
||||
if (src) { |
||||
return <img src={src} width={size} height={size} />; |
||||
} else if (walletDetails.name?.toLowerCase() === 'walletconnect') { |
||||
return <WalletConnectLogo width={size} height={size} />; |
||||
} else { |
||||
return <WalletIcon width={size} height={size} />; |
||||
} |
||||
} |
||||
@ -0,0 +1,208 @@ |
||||
import type { AssetList, Chain as CosmosChain } from '@chain-registry/types'; |
||||
import type { |
||||
DeliverTxResponse, |
||||
ExecuteResult, |
||||
IndexedTx, |
||||
} from '@cosmjs/cosmwasm-stargate'; |
||||
import { useChain, useChains } from '@cosmos-kit/react'; |
||||
import { useCallback, useMemo } from 'react'; |
||||
|
||||
import { cosmoshub } from '@hyperlane-xyz/registry'; |
||||
import { |
||||
ChainMetadata, |
||||
ChainName, |
||||
MultiProtocolProvider, |
||||
ProviderType, |
||||
TypedTransactionReceipt, |
||||
WarpTypedTransaction, |
||||
chainMetadataToCosmosChain, |
||||
} from '@hyperlane-xyz/sdk'; |
||||
import { HexString, ProtocolType, assert } from '@hyperlane-xyz/utils'; |
||||
|
||||
import { widgetLogger } from '../logger.js'; |
||||
|
||||
import { |
||||
AccountInfo, |
||||
ActiveChainInfo, |
||||
ChainAddress, |
||||
ChainTransactionFns, |
||||
WalletDetails, |
||||
} from './types.js'; |
||||
import { getChainsForProtocol } from './utils.js'; |
||||
|
||||
// Used because the CosmosKit hooks always require a chain name
|
||||
const PLACEHOLDER_COSMOS_CHAIN = cosmoshub.name; |
||||
|
||||
const logger = widgetLogger.child({ |
||||
module: 'widgets/walletIntegrations/cosmos', |
||||
}); |
||||
|
||||
export function useCosmosAccount( |
||||
multiProvider: MultiProtocolProvider, |
||||
): AccountInfo { |
||||
const cosmosChains = getCosmosChainNames(multiProvider); |
||||
const chainToContext = useChains(cosmosChains); |
||||
return useMemo<AccountInfo>(() => { |
||||
const addresses: Array<ChainAddress> = []; |
||||
let publicKey: Promise<HexString> | undefined = undefined; |
||||
let connectorName: string | undefined = undefined; |
||||
let isReady = false; |
||||
for (const [chainName, context] of Object.entries(chainToContext)) { |
||||
if (!context.address) continue; |
||||
addresses.push({ address: context.address, chainName }); |
||||
publicKey = context |
||||
.getAccount() |
||||
.then((acc) => Buffer.from(acc.pubkey).toString('hex')); |
||||
isReady = true; |
||||
connectorName ||= context.wallet?.prettyName; |
||||
} |
||||
return { |
||||
protocol: ProtocolType.Cosmos, |
||||
addresses, |
||||
publicKey, |
||||
isReady, |
||||
}; |
||||
}, [chainToContext]); |
||||
} |
||||
|
||||
export function useCosmosWalletDetails() { |
||||
const { wallet } = useChain(PLACEHOLDER_COSMOS_CHAIN); |
||||
const { logo, prettyName } = wallet || {}; |
||||
|
||||
return useMemo<WalletDetails>( |
||||
() => ({ |
||||
name: prettyName, |
||||
logoUrl: typeof logo === 'string' ? logo : undefined, |
||||
}), |
||||
[prettyName, logo], |
||||
); |
||||
} |
||||
|
||||
export function useCosmosConnectFn(): () => void { |
||||
const { openView } = useChain(PLACEHOLDER_COSMOS_CHAIN); |
||||
return openView; |
||||
} |
||||
|
||||
export function useCosmosDisconnectFn(): () => Promise<void> { |
||||
const { disconnect, address } = useChain(PLACEHOLDER_COSMOS_CHAIN); |
||||
const safeDisconnect = async () => { |
||||
if (address) await disconnect(); |
||||
}; |
||||
return safeDisconnect; |
||||
} |
||||
|
||||
export function useCosmosActiveChain( |
||||
_multiProvider: MultiProtocolProvider, |
||||
): ActiveChainInfo { |
||||
// Cosmoskit doesn't have the concept of an active chain
|
||||
return useMemo(() => ({} as ActiveChainInfo), []); |
||||
} |
||||
|
||||
export function useCosmosTransactionFns( |
||||
multiProvider: MultiProtocolProvider, |
||||
): ChainTransactionFns { |
||||
const cosmosChains = getCosmosChainNames(multiProvider); |
||||
const chainToContext = useChains(cosmosChains); |
||||
|
||||
const onSwitchNetwork = useCallback( |
||||
async (chainName: ChainName) => { |
||||
const displayName = |
||||
multiProvider.getChainMetadata(chainName).displayName || chainName; |
||||
// CosmosKit does not have switch capability
|
||||
throw new Error( |
||||
`Cosmos wallet must be connected to origin chain ${displayName}}`, |
||||
); |
||||
}, |
||||
[multiProvider], |
||||
); |
||||
|
||||
const onSendTx = useCallback( |
||||
async ({ |
||||
tx, |
||||
chainName, |
||||
activeChainName, |
||||
}: { |
||||
tx: WarpTypedTransaction; |
||||
chainName: ChainName; |
||||
activeChainName?: ChainName; |
||||
}) => { |
||||
const chainContext = chainToContext[chainName]; |
||||
if (!chainContext?.address) |
||||
throw new Error(`Cosmos wallet not connected for ${chainName}`); |
||||
|
||||
if (activeChainName && activeChainName !== chainName) |
||||
await onSwitchNetwork(chainName); |
||||
|
||||
logger.debug(`Sending tx on chain ${chainName}`); |
||||
const { getSigningCosmWasmClient, getSigningStargateClient } = |
||||
chainContext; |
||||
let result: ExecuteResult | DeliverTxResponse; |
||||
let txDetails: IndexedTx | null; |
||||
if (tx.type === ProviderType.CosmJsWasm) { |
||||
const client = await getSigningCosmWasmClient(); |
||||
result = await client.executeMultiple( |
||||
chainContext.address, |
||||
[tx.transaction], |
||||
'auto', |
||||
); |
||||
txDetails = await client.getTx(result.transactionHash); |
||||
} else if (tx.type === ProviderType.CosmJs) { |
||||
const client = await getSigningStargateClient(); |
||||
// The fee param of 'auto' here stopped working for Neutron-based IBC transfers
|
||||
// It seems the signAndBroadcast method uses a default fee multiplier of 1.4
|
||||
// https://github.com/cosmos/cosmjs/blob/e819a1fc0e99a3e5320d8d6667a08d3b92e5e836/packages/stargate/src/signingstargateclient.ts#L115
|
||||
// A multiplier of 1.6 was insufficient for Celestia -> Neutron|Cosmos -> XXX transfers, but 2 worked.
|
||||
result = await client.signAndBroadcast( |
||||
chainContext.address, |
||||
[tx.transaction], |
||||
2, |
||||
); |
||||
txDetails = await client.getTx(result.transactionHash); |
||||
} else { |
||||
throw new Error(`Invalid cosmos provider type ${tx.type}`); |
||||
} |
||||
|
||||
const confirm = async (): Promise<TypedTransactionReceipt> => { |
||||
assert(txDetails, `Cosmos tx failed: ${JSON.stringify(result)}`); |
||||
return { |
||||
type: tx.type, |
||||
receipt: { ...txDetails, transactionHash: result.transactionHash }, |
||||
}; |
||||
}; |
||||
return { hash: result.transactionHash, confirm }; |
||||
}, |
||||
[onSwitchNetwork, chainToContext], |
||||
); |
||||
|
||||
return { sendTransaction: onSendTx, switchNetwork: onSwitchNetwork }; |
||||
} |
||||
|
||||
function getCosmosChains( |
||||
multiProvider: MultiProtocolProvider, |
||||
): ChainMetadata[] { |
||||
return [ |
||||
...getChainsForProtocol(multiProvider, ProtocolType.Cosmos), |
||||
cosmoshub, |
||||
]; |
||||
} |
||||
|
||||
function getCosmosChainNames( |
||||
multiProvider: MultiProtocolProvider, |
||||
): ChainName[] { |
||||
return getCosmosChains(multiProvider).map((c) => c.name); |
||||
} |
||||
|
||||
// Metadata formatted for use in Wagmi config
|
||||
export function getCosmosKitChainConfigs( |
||||
multiProvider: MultiProtocolProvider, |
||||
): { |
||||
chains: CosmosChain[]; |
||||
assets: AssetList[]; |
||||
} { |
||||
const chains = getCosmosChains(multiProvider); |
||||
const configList = chains.map(chainMetadataToCosmosChain); |
||||
return { |
||||
chains: configList.map((c) => c.chain), |
||||
assets: configList.map((c) => c.assets), |
||||
}; |
||||
} |
||||
@ -0,0 +1,169 @@ |
||||
import { useConnectModal } from '@rainbow-me/rainbowkit'; |
||||
import { |
||||
getAccount, |
||||
sendTransaction, |
||||
switchChain, |
||||
waitForTransactionReceipt, |
||||
} from '@wagmi/core'; |
||||
import { useCallback, useMemo } from 'react'; |
||||
import { Chain as ViemChain } from 'viem'; |
||||
import { useAccount, useConfig, useDisconnect } from 'wagmi'; |
||||
|
||||
import { |
||||
ChainName, |
||||
MultiProtocolProvider, |
||||
ProviderType, |
||||
TypedTransactionReceipt, |
||||
WarpTypedTransaction, |
||||
chainMetadataToViemChain, |
||||
} from '@hyperlane-xyz/sdk'; |
||||
import { ProtocolType, assert, sleep } from '@hyperlane-xyz/utils'; |
||||
|
||||
import { widgetLogger } from '../logger.js'; |
||||
|
||||
import { |
||||
AccountInfo, |
||||
ActiveChainInfo, |
||||
ChainTransactionFns, |
||||
WalletDetails, |
||||
} from './types.js'; |
||||
import { ethers5TxToWagmiTx, getChainsForProtocol } from './utils.js'; |
||||
|
||||
const logger = widgetLogger.child({ module: 'walletIntegrations/ethereum' }); |
||||
|
||||
export function useEthereumAccount( |
||||
_multiProvider: MultiProtocolProvider, |
||||
): AccountInfo { |
||||
const { address, isConnected, connector } = useAccount(); |
||||
const isReady = !!(address && isConnected && connector); |
||||
|
||||
return useMemo<AccountInfo>( |
||||
() => ({ |
||||
protocol: ProtocolType.Ethereum, |
||||
addresses: address ? [{ address: `${address}` }] : [], |
||||
isReady: isReady, |
||||
}), |
||||
[address, isReady], |
||||
); |
||||
} |
||||
|
||||
export function useEthereumWalletDetails() { |
||||
const { connector } = useAccount(); |
||||
const name = connector?.name; |
||||
const logoUrl = connector?.icon; |
||||
|
||||
return useMemo<WalletDetails>( |
||||
() => ({ |
||||
name, |
||||
logoUrl, |
||||
}), |
||||
[name, logoUrl], |
||||
); |
||||
} |
||||
|
||||
export function useEthereumConnectFn(): () => void { |
||||
const { openConnectModal } = useConnectModal(); |
||||
return useCallback(() => openConnectModal?.(), [openConnectModal]); |
||||
} |
||||
|
||||
export function useEthereumDisconnectFn(): () => Promise<void> { |
||||
const { disconnectAsync } = useDisconnect(); |
||||
return disconnectAsync; |
||||
} |
||||
|
||||
export function useEthereumActiveChain( |
||||
multiProvider: MultiProtocolProvider, |
||||
): ActiveChainInfo { |
||||
const { chain } = useAccount(); |
||||
return useMemo<ActiveChainInfo>( |
||||
() => ({ |
||||
chainDisplayName: chain?.name, |
||||
chainName: chain |
||||
? multiProvider.tryGetChainMetadata(chain.id)?.name |
||||
: undefined, |
||||
}), |
||||
[chain, multiProvider], |
||||
); |
||||
} |
||||
|
||||
export function useEthereumTransactionFns( |
||||
multiProvider: MultiProtocolProvider, |
||||
): ChainTransactionFns { |
||||
const config = useConfig(); |
||||
|
||||
const onSwitchNetwork = useCallback( |
||||
async (chainName: ChainName) => { |
||||
const chainId = multiProvider.getChainMetadata(chainName) |
||||
.chainId as number; |
||||
await switchChain(config, { chainId }); |
||||
// Some wallets seem to require a brief pause after switch
|
||||
await sleep(2000); |
||||
}, |
||||
[config, multiProvider], |
||||
); |
||||
// Note, this doesn't use wagmi's prepare + send pattern because we're potentially sending two transactions
|
||||
// The prepare hooks are recommended to use pre-click downtime to run async calls, but since the flow
|
||||
// may require two serial txs, the prepare hooks aren't useful and complicate hook architecture considerably.
|
||||
// See https://github.com/hyperlane-xyz/hyperlane-warp-ui-template/issues/19
|
||||
// See https://github.com/wagmi-dev/wagmi/discussions/1564
|
||||
const onSendTx = useCallback( |
||||
async ({ |
||||
tx, |
||||
chainName, |
||||
activeChainName, |
||||
}: { |
||||
tx: WarpTypedTransaction; |
||||
chainName: ChainName; |
||||
activeChainName?: ChainName; |
||||
}) => { |
||||
if (tx.type !== ProviderType.EthersV5) |
||||
throw new Error(`Unsupported tx type: ${tx.type}`); |
||||
|
||||
// If the active chain is different from tx origin chain, try to switch network first
|
||||
if (activeChainName && activeChainName !== chainName) |
||||
await onSwitchNetwork(chainName); |
||||
|
||||
// Since the network switching is not foolproof, we also force a network check here
|
||||
const chainId = multiProvider.getChainMetadata(chainName) |
||||
.chainId as number; |
||||
logger.debug('Checking wallet current chain'); |
||||
const latestNetwork = await getAccount(config); |
||||
assert( |
||||
latestNetwork?.chain?.id === chainId, |
||||
`Wallet not on chain ${chainName} (ChainMismatchError)`, |
||||
); |
||||
|
||||
logger.debug(`Sending tx on chain ${chainName}`); |
||||
const wagmiTx = ethers5TxToWagmiTx(tx.transaction); |
||||
const hash = await sendTransaction(config, { |
||||
chainId, |
||||
...wagmiTx, |
||||
}); |
||||
const confirm = (): Promise<TypedTransactionReceipt> => { |
||||
const foo = waitForTransactionReceipt(config, { |
||||
chainId, |
||||
hash, |
||||
confirmations: 1, |
||||
}); |
||||
return foo.then((r) => ({ |
||||
type: ProviderType.Viem, |
||||
receipt: { ...r, contractAddress: r.contractAddress || null }, |
||||
})); |
||||
}; |
||||
|
||||
return { hash, confirm }; |
||||
}, |
||||
[config, onSwitchNetwork, multiProvider], |
||||
); |
||||
|
||||
return { sendTransaction: onSendTx, switchNetwork: onSwitchNetwork }; |
||||
} |
||||
|
||||
// Metadata formatted for use in Wagmi config
|
||||
export function getWagmiChainConfigs( |
||||
multiProvider: MultiProtocolProvider, |
||||
): ViemChain[] { |
||||
return getChainsForProtocol(multiProvider, ProtocolType.Ethereum).map( |
||||
chainMetadataToViemChain, |
||||
); |
||||
} |
||||
@ -0,0 +1,256 @@ |
||||
import { useMemo } from 'react'; |
||||
|
||||
import { ChainName, MultiProtocolProvider } from '@hyperlane-xyz/sdk'; |
||||
import { Address, HexString, ProtocolType } from '@hyperlane-xyz/utils'; |
||||
|
||||
import { widgetLogger } from '../logger.js'; |
||||
|
||||
import { |
||||
useCosmosAccount, |
||||
useCosmosActiveChain, |
||||
useCosmosConnectFn, |
||||
useCosmosDisconnectFn, |
||||
useCosmosTransactionFns, |
||||
useCosmosWalletDetails, |
||||
} from './cosmos.js'; |
||||
import { |
||||
useEthereumAccount, |
||||
useEthereumActiveChain, |
||||
useEthereumConnectFn, |
||||
useEthereumDisconnectFn, |
||||
useEthereumTransactionFns, |
||||
useEthereumWalletDetails, |
||||
} from './ethereum.js'; |
||||
import { |
||||
useSolanaAccount, |
||||
useSolanaActiveChain, |
||||
useSolanaConnectFn, |
||||
useSolanaDisconnectFn, |
||||
useSolanaTransactionFns, |
||||
useSolanaWalletDetails, |
||||
} from './solana.js'; |
||||
import { |
||||
AccountInfo, |
||||
ActiveChainInfo, |
||||
ChainTransactionFns, |
||||
WalletDetails, |
||||
} from './types.js'; |
||||
|
||||
const logger = widgetLogger.child({ |
||||
module: 'walletIntegrations/multiProtocol', |
||||
}); |
||||
|
||||
export function useAccounts( |
||||
multiProvider: MultiProtocolProvider, |
||||
blacklistedAddresses: Address[] = [], |
||||
): { |
||||
accounts: Record<ProtocolType, AccountInfo>; |
||||
readyAccounts: Array<AccountInfo>; |
||||
} { |
||||
const evmAccountInfo = useEthereumAccount(multiProvider); |
||||
const solAccountInfo = useSolanaAccount(multiProvider); |
||||
const cosmAccountInfo = useCosmosAccount(multiProvider); |
||||
|
||||
// Filtered ready accounts
|
||||
const readyAccounts = useMemo( |
||||
() => |
||||
[evmAccountInfo, solAccountInfo, cosmAccountInfo].filter( |
||||
(a) => a.isReady, |
||||
), |
||||
[evmAccountInfo, solAccountInfo, cosmAccountInfo], |
||||
); |
||||
|
||||
// Check if any of the ready accounts are blacklisted
|
||||
const readyAddresses = readyAccounts |
||||
.map((a) => a.addresses) |
||||
.flat() |
||||
.map((a) => a.address.toLowerCase()); |
||||
if (readyAddresses.some((a) => blacklistedAddresses.includes(a))) { |
||||
throw new Error('Wallet address is blacklisted'); |
||||
} |
||||
|
||||
return useMemo( |
||||
() => ({ |
||||
accounts: { |
||||
[ProtocolType.Ethereum]: evmAccountInfo, |
||||
[ProtocolType.Sealevel]: solAccountInfo, |
||||
[ProtocolType.Cosmos]: cosmAccountInfo, |
||||
}, |
||||
readyAccounts, |
||||
}), |
||||
[evmAccountInfo, solAccountInfo, cosmAccountInfo, readyAccounts], |
||||
); |
||||
} |
||||
|
||||
export function useAccountForChain( |
||||
multiProvider: MultiProtocolProvider, |
||||
chainName?: ChainName, |
||||
): AccountInfo | undefined { |
||||
const { accounts } = useAccounts(multiProvider); |
||||
const protocol = chainName ? multiProvider.getProtocol(chainName) : undefined; |
||||
if (!chainName || !protocol) return undefined; |
||||
return accounts?.[protocol]; |
||||
} |
||||
|
||||
export function useAccountAddressForChain( |
||||
multiProvider: MultiProtocolProvider, |
||||
chainName?: ChainName, |
||||
): Address | undefined { |
||||
const { accounts } = useAccounts(multiProvider); |
||||
return getAccountAddressForChain(multiProvider, chainName, accounts); |
||||
} |
||||
|
||||
export function getAccountAddressForChain( |
||||
multiProvider: MultiProtocolProvider, |
||||
chainName?: ChainName, |
||||
accounts?: Record<ProtocolType, AccountInfo>, |
||||
): Address | undefined { |
||||
if (!chainName || !accounts) return undefined; |
||||
const protocol = multiProvider.getProtocol(chainName); |
||||
const account = accounts[protocol]; |
||||
if (protocol === ProtocolType.Cosmos) { |
||||
return account?.addresses.find((a) => a.chainName === chainName)?.address; |
||||
} else { |
||||
// Use first because only cosmos has the notion of per-chain addresses
|
||||
return account?.addresses[0]?.address; |
||||
} |
||||
} |
||||
|
||||
export function getAccountAddressAndPubKey( |
||||
multiProvider: MultiProtocolProvider, |
||||
chainName?: ChainName, |
||||
accounts?: Record<ProtocolType, AccountInfo>, |
||||
): { address?: Address; publicKey?: Promise<HexString> } { |
||||
const address = getAccountAddressForChain(multiProvider, chainName, accounts); |
||||
if (!accounts || !chainName || !address) return {}; |
||||
const protocol = multiProvider.getProtocol(chainName); |
||||
const publicKey = accounts[protocol]?.publicKey; |
||||
return { address, publicKey }; |
||||
} |
||||
|
||||
export function useWalletDetails(): Record<ProtocolType, WalletDetails> { |
||||
const evmWallet = useEthereumWalletDetails(); |
||||
const solWallet = useSolanaWalletDetails(); |
||||
const cosmosWallet = useCosmosWalletDetails(); |
||||
|
||||
return useMemo( |
||||
() => ({ |
||||
[ProtocolType.Ethereum]: evmWallet, |
||||
[ProtocolType.Sealevel]: solWallet, |
||||
[ProtocolType.Cosmos]: cosmosWallet, |
||||
}), |
||||
[evmWallet, solWallet, cosmosWallet], |
||||
); |
||||
} |
||||
|
||||
export function useConnectFns(): Record<ProtocolType, () => void> { |
||||
const onConnectEthereum = useEthereumConnectFn(); |
||||
const onConnectSolana = useSolanaConnectFn(); |
||||
const onConnectCosmos = useCosmosConnectFn(); |
||||
|
||||
return useMemo( |
||||
() => ({ |
||||
[ProtocolType.Ethereum]: onConnectEthereum, |
||||
[ProtocolType.Sealevel]: onConnectSolana, |
||||
[ProtocolType.Cosmos]: onConnectCosmos, |
||||
}), |
||||
[onConnectEthereum, onConnectSolana, onConnectCosmos], |
||||
); |
||||
} |
||||
|
||||
export function useDisconnectFns(): Record<ProtocolType, () => Promise<void>> { |
||||
const disconnectEvm = useEthereumDisconnectFn(); |
||||
const disconnectSol = useSolanaDisconnectFn(); |
||||
const disconnectCosmos = useCosmosDisconnectFn(); |
||||
|
||||
const onClickDisconnect = |
||||
(env: ProtocolType, disconnectFn?: () => Promise<void> | void) => |
||||
async () => { |
||||
try { |
||||
if (!disconnectFn) throw new Error('Disconnect function is null'); |
||||
await disconnectFn(); |
||||
} catch (error) { |
||||
logger.error(`Error disconnecting from ${env} wallet`, error); |
||||
} |
||||
}; |
||||
|
||||
return useMemo( |
||||
() => ({ |
||||
[ProtocolType.Ethereum]: onClickDisconnect( |
||||
ProtocolType.Ethereum, |
||||
disconnectEvm, |
||||
), |
||||
[ProtocolType.Sealevel]: onClickDisconnect( |
||||
ProtocolType.Sealevel, |
||||
disconnectSol, |
||||
), |
||||
[ProtocolType.Cosmos]: onClickDisconnect( |
||||
ProtocolType.Cosmos, |
||||
disconnectCosmos, |
||||
), |
||||
}), |
||||
[disconnectEvm, disconnectSol, disconnectCosmos], |
||||
); |
||||
} |
||||
|
||||
export function useActiveChains(multiProvider: MultiProtocolProvider): { |
||||
chains: Record<ProtocolType, ActiveChainInfo>; |
||||
readyChains: Array<ActiveChainInfo>; |
||||
} { |
||||
const evmChain = useEthereumActiveChain(multiProvider); |
||||
const solChain = useSolanaActiveChain(multiProvider); |
||||
const cosmChain = useCosmosActiveChain(multiProvider); |
||||
|
||||
const readyChains = useMemo( |
||||
() => [evmChain, solChain, cosmChain].filter((c) => !!c.chainDisplayName), |
||||
[evmChain, solChain, cosmChain], |
||||
); |
||||
|
||||
return useMemo( |
||||
() => ({ |
||||
chains: { |
||||
[ProtocolType.Ethereum]: evmChain, |
||||
[ProtocolType.Sealevel]: solChain, |
||||
[ProtocolType.Cosmos]: cosmChain, |
||||
}, |
||||
readyChains, |
||||
}), |
||||
[evmChain, solChain, cosmChain, readyChains], |
||||
); |
||||
} |
||||
|
||||
export function useTransactionFns( |
||||
multiProvider: MultiProtocolProvider, |
||||
): Record<ProtocolType, ChainTransactionFns> { |
||||
const { switchNetwork: onSwitchEvmNetwork, sendTransaction: onSendEvmTx } = |
||||
useEthereumTransactionFns(multiProvider); |
||||
const { switchNetwork: onSwitchSolNetwork, sendTransaction: onSendSolTx } = |
||||
useSolanaTransactionFns(multiProvider); |
||||
const { switchNetwork: onSwitchCosmNetwork, sendTransaction: onSendCosmTx } = |
||||
useCosmosTransactionFns(multiProvider); |
||||
|
||||
return useMemo( |
||||
() => ({ |
||||
[ProtocolType.Ethereum]: { |
||||
sendTransaction: onSendEvmTx, |
||||
switchNetwork: onSwitchEvmNetwork, |
||||
}, |
||||
[ProtocolType.Sealevel]: { |
||||
sendTransaction: onSendSolTx, |
||||
switchNetwork: onSwitchSolNetwork, |
||||
}, |
||||
[ProtocolType.Cosmos]: { |
||||
sendTransaction: onSendCosmTx, |
||||
switchNetwork: onSwitchCosmNetwork, |
||||
}, |
||||
}), |
||||
[ |
||||
onSendEvmTx, |
||||
onSendSolTx, |
||||
onSwitchEvmNetwork, |
||||
onSwitchSolNetwork, |
||||
onSendCosmTx, |
||||
onSwitchCosmNetwork, |
||||
], |
||||
); |
||||
} |
||||
@ -0,0 +1,138 @@ |
||||
import { useConnection, useWallet } from '@solana/wallet-adapter-react'; |
||||
import { useWalletModal } from '@solana/wallet-adapter-react-ui'; |
||||
import { Connection } from '@solana/web3.js'; |
||||
import { useCallback, useMemo } from 'react'; |
||||
|
||||
import { |
||||
ChainName, |
||||
MultiProtocolProvider, |
||||
ProviderType, |
||||
TypedTransactionReceipt, |
||||
WarpTypedTransaction, |
||||
} from '@hyperlane-xyz/sdk'; |
||||
import { ProtocolType } from '@hyperlane-xyz/utils'; |
||||
|
||||
import { widgetLogger } from '../logger.js'; |
||||
|
||||
import { |
||||
AccountInfo, |
||||
ActiveChainInfo, |
||||
ChainTransactionFns, |
||||
WalletDetails, |
||||
} from './types.js'; |
||||
import { findChainByRpcUrl } from './utils.js'; |
||||
|
||||
const logger = widgetLogger.child({ module: 'walletIntegrations/solana' }); |
||||
|
||||
export function useSolanaAccount( |
||||
_multiProvider: MultiProtocolProvider, |
||||
): AccountInfo { |
||||
const { publicKey, connected, wallet } = useWallet(); |
||||
const isReady = !!(publicKey && wallet && connected); |
||||
const address = publicKey?.toBase58(); |
||||
|
||||
return useMemo<AccountInfo>( |
||||
() => ({ |
||||
protocol: ProtocolType.Sealevel, |
||||
addresses: address ? [{ address: address }] : [], |
||||
isReady: isReady, |
||||
}), |
||||
[address, isReady], |
||||
); |
||||
} |
||||
|
||||
export function useSolanaWalletDetails() { |
||||
const { wallet } = useWallet(); |
||||
const { name, icon } = wallet?.adapter || {}; |
||||
|
||||
return useMemo<WalletDetails>( |
||||
() => ({ |
||||
name, |
||||
logoUrl: icon, |
||||
}), |
||||
[name, icon], |
||||
); |
||||
} |
||||
|
||||
export function useSolanaConnectFn(): () => void { |
||||
const { setVisible } = useWalletModal(); |
||||
return useCallback(() => setVisible(true), [setVisible]); |
||||
} |
||||
|
||||
export function useSolanaDisconnectFn(): () => Promise<void> { |
||||
const { disconnect } = useWallet(); |
||||
return disconnect; |
||||
} |
||||
|
||||
export function useSolanaActiveChain( |
||||
multiProvider: MultiProtocolProvider, |
||||
): ActiveChainInfo { |
||||
const { connection } = useConnection(); |
||||
const connectionEndpoint = connection?.rpcEndpoint; |
||||
return useMemo<ActiveChainInfo>(() => { |
||||
try { |
||||
const hostname = new URL(connectionEndpoint).hostname; |
||||
const metadata = findChainByRpcUrl(multiProvider, hostname); |
||||
if (!metadata) return {}; |
||||
return { |
||||
chainDisplayName: metadata.displayName, |
||||
chainName: metadata.name, |
||||
}; |
||||
} catch (error) { |
||||
logger.warn('Error finding sol active chain', error); |
||||
return {}; |
||||
} |
||||
}, [connectionEndpoint, multiProvider]); |
||||
} |
||||
|
||||
export function useSolanaTransactionFns( |
||||
multiProvider: MultiProtocolProvider, |
||||
): ChainTransactionFns { |
||||
const { sendTransaction: sendSolTransaction } = useWallet(); |
||||
|
||||
const onSwitchNetwork = useCallback(async (chainName: ChainName) => { |
||||
logger.warn(`Solana wallet must be connected to origin chain ${chainName}`); |
||||
}, []); |
||||
|
||||
const onSendTx = useCallback( |
||||
async ({ |
||||
tx, |
||||
chainName, |
||||
activeChainName, |
||||
}: { |
||||
tx: WarpTypedTransaction; |
||||
chainName: ChainName; |
||||
activeChainName?: ChainName; |
||||
}) => { |
||||
if (tx.type !== ProviderType.SolanaWeb3) |
||||
throw new Error(`Unsupported tx type: ${tx.type}`); |
||||
if (activeChainName && activeChainName !== chainName) |
||||
await onSwitchNetwork(chainName); |
||||
const rpcUrl = multiProvider.getRpcUrl(chainName); |
||||
const connection = new Connection(rpcUrl, 'confirmed'); |
||||
const { |
||||
context: { slot: minContextSlot }, |
||||
value: { blockhash, lastValidBlockHeight }, |
||||
} = await connection.getLatestBlockhashAndContext(); |
||||
|
||||
logger.debug(`Sending tx on chain ${chainName}`); |
||||
const signature = await sendSolTransaction(tx.transaction, connection, { |
||||
minContextSlot, |
||||
}); |
||||
|
||||
const confirm = (): Promise<TypedTransactionReceipt> => |
||||
connection |
||||
.confirmTransaction({ blockhash, lastValidBlockHeight, signature }) |
||||
.then(() => connection.getTransaction(signature)) |
||||
.then((r) => ({ |
||||
type: ProviderType.SolanaWeb3, |
||||
receipt: r!, |
||||
})); |
||||
|
||||
return { hash: signature, confirm }; |
||||
}, |
||||
[onSwitchNetwork, sendSolTransaction, multiProvider], |
||||
); |
||||
|
||||
return { sendTransaction: onSendTx, switchNetwork: onSwitchNetwork }; |
||||
} |
||||
@ -0,0 +1,48 @@ |
||||
import { |
||||
ChainName, |
||||
TypedTransactionReceipt, |
||||
WarpTypedTransaction, |
||||
} from '@hyperlane-xyz/sdk'; |
||||
import { HexString, ProtocolType } from '@hyperlane-xyz/utils'; |
||||
|
||||
export interface ChainAddress { |
||||
address: string; |
||||
chainName?: ChainName; |
||||
} |
||||
|
||||
export interface AccountInfo { |
||||
protocol: ProtocolType; |
||||
// This needs to be an array instead of a single address b.c.
|
||||
// Cosmos wallets have different addresses per chain
|
||||
addresses: Array<ChainAddress>; |
||||
// And another Cosmos exception, public keys are needed
|
||||
// for tx simulation and gas estimation
|
||||
publicKey?: Promise<HexString>; |
||||
isReady: boolean; |
||||
} |
||||
|
||||
export interface WalletDetails { |
||||
name?: string; |
||||
logoUrl?: string; |
||||
} |
||||
|
||||
export interface ActiveChainInfo { |
||||
chainDisplayName?: string; |
||||
chainName?: ChainName; |
||||
} |
||||
|
||||
export type SendTransactionFn< |
||||
TxReq extends WarpTypedTransaction = WarpTypedTransaction, |
||||
TxResp extends TypedTransactionReceipt = TypedTransactionReceipt, |
||||
> = (params: { |
||||
tx: TxReq; |
||||
chainName: ChainName; |
||||
activeChainName?: ChainName; |
||||
}) => Promise<{ hash: string; confirm: () => Promise<TxResp> }>; |
||||
|
||||
export type SwitchNetworkFn = (chainName: ChainName) => Promise<void>; |
||||
|
||||
export interface ChainTransactionFns { |
||||
sendTransaction: SendTransactionFn; |
||||
switchNetwork?: SwitchNetworkFn; |
||||
} |
||||
@ -0,0 +1,56 @@ |
||||
import { SendTransactionParameters } from '@wagmi/core'; |
||||
import { |
||||
PopulatedTransaction as Ethers5Transaction, |
||||
BigNumber as EthersBN, |
||||
} from 'ethers'; |
||||
|
||||
import { ChainMetadata, MultiProtocolProvider } from '@hyperlane-xyz/sdk'; |
||||
import { ProtocolType } from '@hyperlane-xyz/utils'; |
||||
|
||||
export function ethers5TxToWagmiTx( |
||||
tx: Ethers5Transaction, |
||||
): SendTransactionParameters { |
||||
if (!tx.to) throw new Error('No tx recipient address specified'); |
||||
if (!tx.data) throw new Error('No tx data specified'); |
||||
return { |
||||
to: tx.to as `0x${string}`, |
||||
value: ethersBnToBigInt(tx.value || EthersBN.from('0')), |
||||
data: tx.data as `0x{string}`, |
||||
nonce: tx.nonce, |
||||
chainId: tx.chainId, |
||||
gas: tx.gasLimit ? ethersBnToBigInt(tx.gasLimit) : undefined, |
||||
gasPrice: tx.gasPrice ? ethersBnToBigInt(tx.gasPrice) : undefined, |
||||
maxFeePerGas: tx.maxFeePerGas |
||||
? ethersBnToBigInt(tx.maxFeePerGas) |
||||
: undefined, |
||||
maxPriorityFeePerGas: tx.maxPriorityFeePerGas |
||||
? ethersBnToBigInt(tx.maxPriorityFeePerGas) |
||||
: undefined, |
||||
}; |
||||
} |
||||
|
||||
function ethersBnToBigInt(bn: EthersBN): bigint { |
||||
return BigInt(bn.toString()); |
||||
} |
||||
|
||||
export function getChainsForProtocol( |
||||
multiProvider: MultiProtocolProvider, |
||||
protocol: ProtocolType, |
||||
): ChainMetadata[] { |
||||
return Object.values(multiProvider.metadata).filter( |
||||
(c) => c.protocol === protocol, |
||||
); |
||||
} |
||||
|
||||
export function findChainByRpcUrl( |
||||
multiProvider: MultiProtocolProvider, |
||||
url?: string, |
||||
) { |
||||
if (!url) return undefined; |
||||
const allMetadata = Object.values(multiProvider.metadata); |
||||
const searchUrl = url.toLowerCase(); |
||||
return allMetadata.find( |
||||
(m) => |
||||
!!m.rpcUrls.find((rpc) => rpc.http.toLowerCase().includes(searchUrl)), |
||||
); |
||||
} |
||||
Loading…
Reference in new issue