dynamic active chan selection

reown-com · Feb 7, 2024 · 49eae3a · 49eae3a
1 parent a2c5757
commit 49eae3a
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 31 deletions.
diff --git a/advanced/wallets/react-wallet-v2/src/components/ChainSmartAddressMini.tsx b/advanced/wallets/react-wallet-v2/src/components/ChainSmartAddressMini.tsx
@@ -22,7 +22,10 @@ const getKey = (namespace?: string) => {
 
 export default function ChainSmartAddressMini({ namespace }: Props) {
   const { activeChainId } = useSnapshot(SettingsStore.state)
-  const { address } = useSmartAccount(getKey(namespace) as `0x${string}`, allowedChains.find((c) => c.id.toString() === activeChainId) as Chain)
+  const { address } = useSmartAccount(
+    getKey(namespace) as `0x${string}`, 
+    allowedChains.find((c) => c.id.toString() === activeChainId.toString()) as Chain
+  )
   if (!address) return <Spinner />
   return (
       <ChainAddressMini address={address}/>

diff --git a/advanced/wallets/react-wallet-v2/src/utils/EIP155RequestHandlerUtil.ts b/advanced/wallets/react-wallet-v2/src/utils/EIP155RequestHandlerUtil.ts
@@ -18,6 +18,7 @@ type RequestEventArgs = Omit<SignClientTypes.EventArguments['session_request'],
 
 
 const getWallet = async (params: any) => {
+  const typedChains: Record<number, Chain> = chains;
   console.log('get wallet params', params)
   const chainId = params?.chainId?.split(':')[1]
   console.log('chain id', chainId)
@@ -31,16 +32,15 @@ const getWallet = async (params: any) => {
   const smartAccounts = await Promise.all(Object.values(eip155Wallets).map(async (wallet) => {
     const smartAccount = new SmartAccountLib({
       privateKey: wallet.getPrivateKey() as Hex,
-      chain: chains[chainId],
+      chain: typedChains[chainId],
       sponsored: true, // TODO: Sponsor for now but should be dynamic according to SettingsStore
     })
+
     const isDeployed = await smartAccount.checkIfSmartAccountDeployed()
-    if (isDeployed) {
-      return smartAccount
-    } else {
+    if (!isDeployed) {
       await smartAccount.deploySmartAccount()
-      return smartAccount
     }
+    return smartAccount
   }));
 
   const smartAccountAddress = getWalletAddressFromParams(smartAccounts.map(acc => acc.address!), params)

diff --git a/advanced/wallets/react-wallet-v2/src/utils/SmartAccountUtils.ts b/advanced/wallets/react-wallet-v2/src/utils/SmartAccountUtils.ts
@@ -9,7 +9,7 @@ export const allowedChains = [sepolia, polygonMumbai, goerli] as const
 export const chains = allowedChains.reduce((acc, chain) => {
   acc[chain.id] = chain
   return acc
-}, {} as any)
+}, {} as Record<Chain['id'], Chain>)
 export type Chain = (typeof allowedChains)[number]
 export type UrlConfig = {
   chain: Chain

diff --git a/advanced/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx b/advanced/wallets/react-wallet-v2/src/views/SessionProposalModal.tsx
@@ -176,7 +176,14 @@ export default function SessionProposalModal() {
 
   // the chains that are supported by the wallet from the proposal
   const supportedChains = useMemo(
-    () => requestedChains.map(chain => getChainData(chain!)),
+    () => requestedChains.map(chain => {
+      const chainData = getChainData(chain!)
+
+      if (!chainData) return null
+
+      SettingsStore.setActiveChainId(chainData.chainId)
+      return chainData
+    }),
     [requestedChains]
   )
 
@@ -185,10 +192,6 @@ export default function SessionProposalModal() {
     [supportedChains]
   )
 
-
-
-  console.log(smartAccountChains, "smartAccountChains")
-
   // get required chains that are not supported by the wallet
   const notSupportedChains = useMemo(() => {
     if (!proposal) return []
@@ -235,25 +238,37 @@ export default function SessionProposalModal() {
     proposal: proposal.params,
     supportedNamespaces
   })
-  const chainId = namespaces['eip155'].chains?.[0]
-  const chainIdParsed = chainId?.replace('eip155:', '')
-  const signerAddress = namespaces['eip155'].accounts[0].split(':')[2]
-  const wallet = eip155Wallets[signerAddress]
-  const chain = allowedChains.find(chain => chain.id.toString() === chainIdParsed)!
-
-  const {
-    address: smartAccountAddress,
-  } = useSmartAccount(wallet.getPrivateKey() as Hex, chain)
 
   // Hanlde approve action, construct session namespace
   const onApprove = useCallback(async () => {
     if (proposal) {
       setIsLoadingApprove(true)
-      if (wallet && smartAccountAddress) {
-        namespaces.eip155.accounts = [...namespaces.eip155.accounts, `eip155:${chain.id}:${smartAccountAddress}`]
-      }
+        // get keys of namespaces
+      const namespaceKeys = Object.keys(namespaces)
+      const [nameSpaceKey] = namespaceKeys
+
+      // get chain ids from namespaces
+      const [chainIds] = namespaceKeys.map(key => namespaces[key].chains)
 
-      console.log('approving namespaces:', namespaces)
+      if (chainIds) {
+        const chainIdParsed = chainIds[0].replace(`${nameSpaceKey}:`, '')
+        const signerAddress = namespaces[nameSpaceKey].accounts[0].split(':')[2]
+        const wallet = eip155Wallets[signerAddress]
+        const chain = allowedChains.find(chain => chain.id.toString() === chainIdParsed)!
+
+        const smartAccountClient = new SmartAccountLib({
+          privateKey: wallet.getPrivateKey() as Hex,
+          chain: allowedChains.find(chain => chain.id.toString() === chainIdParsed)!,
+          sponsored: smartAccountSponsorshipEnabled,
+        })
+
+        const smartAccountAddress = await smartAccountClient.getAccount()
+        if (wallet && smartAccountAddress) {
+          namespaces.eip155.accounts = [...namespaces.eip155.accounts, `${nameSpaceKey}:${chain.id}:${smartAccountAddress.address}`]
+        }
+
+        console.log('approving namespaces:', namespaces)
+      }
 
       try {        
         await web3wallet.approveSession({
@@ -269,7 +284,7 @@ export default function SessionProposalModal() {
     }
     setIsLoadingApprove(false)
     ModalStore.close()
-  }, [chain, namespaces, proposal, smartAccountAddress, wallet])
+  }, [namespaces, proposal, smartAccountSponsorshipEnabled])
 
   // Hanlde reject action
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -338,11 +353,14 @@ export default function SessionProposalModal() {
             })}
 
           <Row style={{ color: 'GrayText' }}>Smart Accounts</Row>
-          {smartAccountAddress &&
-            <Row key={1}>
-              <ChainAddressMini key={1} address={smartAccountAddress} />
-            </Row>
-          }
+          {smartAccountChains.length &&
+            smartAccountChains.map((chain, i) => {
+              return (
+                <Row key={i}>
+                  <ChainSmartAddressMini namespace={chain?.namespace!} />
+                </Row>
+              )
+            })}
         </Grid>
         <Grid>
           <Row style={{ color: 'GrayText' }} justify="flex-end">