Add connect page

safe-global · Sep 15, 2023 · 7d2c42a · 7d2c42a
1 parent ac1314a
commit 7d2c42a
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 3 deletions.
diff --git a/src/pages/connect.tsx b/src/pages/connect.tsx
@@ -0,0 +1,31 @@
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import { useRouter } from 'next/router'
+import useLastSafe from '@/hooks/useLastSafe'
+import useSafeWalletConnect from '@/safe-wallet-provider/useSafeWalletConnect'
+
+const Connect: NextPage = () => {
+  const router = useRouter()
+  const { safe } = router.query
+  const lastSafe = useLastSafe()
+
+  if (!safe && lastSafe) {
+    router.replace(`/connect?safe=${lastSafe}`)
+  }
+
+  useSafeWalletConnect()
+
+  return (
+    <>
+      <Head>
+        <title>{'Safe{Wallet} – Connect'}</title>
+      </Head>
+
+      <main>
+        <h1>Connect</h1>
+      </main>
+    </>
+  )
+}
+
+export default Connect
diff --git a/src/safe-wallet-provider/provider.ts b/src/safe-wallet-provider/provider.ts
@@ -8,10 +8,11 @@ type WalletSDK = {
   signTypedMessage: (typedData: unknown) => Promise<{ signature?: string }>
   send: (params: { txs: unknown[]; params: { safeTxGas: number } }) => Promise<{ safeTxHash: string }>
   getBySafeTxHash: (safeTxHash: string) => Promise<{ txHash?: string }>
-  proxy: (method: string, params: unknown[]) => Promise<unknown>
+  proxy: (method: string, params: unknown[]) => Promise<{ result: unknown }>
 }
 
 interface RpcRequest {
+  id: number
   method: string
   params?: unknown[]
 }
@@ -26,10 +27,13 @@ export class SafeWalletProvider {
     this.sdk = sdk
   }
 
-  async request(request: RpcRequest): Promise<unknown> {
+  private async makeRequest(request: RpcRequest): Promise<unknown> {
     const { method, params = [] } = request
 
     switch (method) {
+      case 'wallet_switchEthereumChain':
+        return true
+
       case 'eth_accounts':
         return [this.safe.safeAddress]
 
@@ -137,4 +141,17 @@ export class SafeWalletProvider {
         return await this.sdk.proxy(method, params)
     }
   }
+
+  async request(request: RpcRequest): Promise<{
+    jsonrpc: string
+    id: number
+    result?: unknown
+  }> {
+    const result = await this.makeRequest(request)
+    return {
+      jsonrpc: '2.0',
+      id: request.id,
+      result,
+    }
+  }
 }
diff --git a/src/safe-wallet-provider/useSafeWalletConnect.ts b/src/safe-wallet-provider/useSafeWalletConnect.ts
@@ -0,0 +1,35 @@
+import { useEffect } from 'react'
+import useSafeWalletProvider from './useSafeWalletProvider'
+
+const useSafeWalletConnect = () => {
+  const safeWalletProvider = useSafeWalletProvider()
+
+  useEffect(() => {
+    if (!safeWalletProvider) return
+
+    const handler = async (e: MessageEvent) => {
+      if (e.origin === location.origin) return
+
+      if (e.data.safeRpcRequest) {
+        const response = await safeWalletProvider.request(e.data.safeRpcRequest)
+
+        window.opener?.postMessage(
+          {
+            safeRpcResponse: response,
+          },
+          e.origin,
+        )
+      }
+    }
+
+    window.addEventListener('message', handler)
+
+    window.opener?.postMessage('safeWalletLoaded', '*')
+
+    return () => {
+      window.removeEventListener('message', handler)
+    }
+  }, [safeWalletProvider])
+}
+
+export default useSafeWalletConnect
diff --git a/src/safe-wallet-provider/useSafeWalletProvider.tsx b/src/safe-wallet-provider/useSafeWalletProvider.tsx
@@ -69,7 +69,8 @@ const useSafeWalletProvider = (): SafeWalletProvider | undefined => {
       },
 
       async proxy(method: string, params: unknown[]) {
-        return web3ReadOnly?.send(method, params)
+        const data = await web3ReadOnly?.send(method, params)
+        return data.result
       },
     }
   }, [safeAddress, chainId, setTxFlow, web3ReadOnly])