From 9aaeb70f9160c584cea4121fcc8ca990cad724ca Mon Sep 17 00:00:00 2001
From: tolgahan-arikan <tolgahan.arikan@gmail.com>
Date: Tue, 27 Aug 2024 17:19:52 +0300
Subject: [PATCH] Update external wallet linking demo (#42)

---
 src/App.tsx                          | 20 +++++--
 src/Login.tsx                        |  2 +-
 src/components/views/EOALinkView.tsx | 85 ----------------------------
 3 files changed, 15 insertions(+), 92 deletions(-)
 delete mode 100644 src/components/views/EOALinkView.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 45d0f89..a39a423 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Box, Text, Divider, Button, Spinner, Modal, Collapsible } from '@0xsequence/design-system'
+import { Box, Text, Divider, Button, Spinner, Modal, Collapsible, ExternalLinkIcon } from '@0xsequence/design-system'
 
 import { router, sequence } from './main'
 
@@ -13,7 +13,6 @@ import { AnimatePresence } from 'framer-motion'
 import { PINCodeInput } from './components/PINCodeInput'
 import { SendERC20View } from './components/views/SendERC20View'
 import { SendERC1155View } from './components/views/SendERC1155View'
-import { EOALinkView } from './components/views/EOALinkView'
 import { NetworkSwitch } from './components/NetworkSwitch.tsx'
 import { accountToName, ListAccountsView } from './components/views/ListAccountsView.tsx'
 import { Account, IdentityType, Network } from '@0xsequence/waas'
@@ -40,7 +39,7 @@ function App() {
         setFetchWalletAddressError(e.message)
       })
 
-    sequence.listAccounts().then((response) => {
+    sequence.listAccounts().then(response => {
       if (response.currentAccountId) {
         setCurrentAccount(response.accounts.find(account => account.id === response.currentAccountId))
       }
@@ -189,9 +188,18 @@ function App() {
           <Divider background="buttonGlass" />
           <CallContractsView network={network} />
         </Collapsible>
-        <Collapsible marginY={'3'} label="EOA Link">
-          <Divider background="buttonGlass" />
-          <EOALinkView network={network} walletAddress={walletAddress} />
+        <Collapsible marginY={'3'} label="External Wallet Linking Demo">
+          <Text
+            as="a"
+            variant="medium"
+            color="text100"
+            href="https://demo-waas-wallet-link.pages.dev/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Go to demo
+            <ExternalLinkIcon position="relative" top="1" marginLeft="1" />
+          </Text>
         </Collapsible>
         <ListAccountsView />
       </Box>
diff --git a/src/Login.tsx b/src/Login.tsx
index 317cbc3..c91142a 100644
--- a/src/Login.tsx
+++ b/src/Login.tsx
@@ -13,7 +13,7 @@ import { randomName } from './utils/indexer'
 import { useEmailAuth } from './utils/useEmailAuth.ts'
 import { useEmailAuthV2 } from './utils/useEmailAuthV2.ts'
 import { StytchLogin } from './components/StytchLogin.tsx'
-import {StytchLegacyLogin} from "./components/StytchLegacyLogin.tsx"
+import { StytchLegacyLogin } from './components/StytchLegacyLogin.tsx'
 import { EmailConflictInfo } from '@0xsequence/waas'
 
 function Login() {
diff --git a/src/components/views/EOALinkView.tsx b/src/components/views/EOALinkView.tsx
deleted file mode 100644
index b3aa133..0000000
--- a/src/components/views/EOALinkView.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-
-import { Box, Text, Button, Spinner } from "@0xsequence/design-system"
-import { useState } from "react"
-import { sequence } from "../../main.tsx"
-import {
-  Network,
-} from "@0xsequence/waas"
-
-export function EOALinkView(props: {network?: Network, walletAddress?: string}) {
-  const [verificationLink, setVerificationLink] = useState<string>()
-  const [externalNonce, setExternalNonce] = useState<string>()
-  const [inProgress, setInProgress] = useState<boolean>(false)
-  const [sendTransactionError, setSendTransactionError] = useState<string>()
-
-  const generateEOALink = async () => {
-    try {
-      setSendTransactionError(undefined)
-      setInProgress(true)
-
-      console.log(props.walletAddress)
-
-      const response = await fetch(`https://dev-api.sequence.app/rpc/API/GenerateWaaSVerificationURL`, {
-          method: "POST",
-          headers: {
-              "Content-Type": "application/json"
-          },
-          body: JSON.stringify({ walletAddress: props.walletAddress })
-      });
-      
-      const data = await response.json()
-
-      const authProof = await sequence.sessionAuthProof({ 
-        nonce: data.nonce, 
-        network: props.network?.name
-      })
-
-      const verificationLink = `${'https://demo-waas-wallet-link.pages.dev/'}?nonce=${data.nonce}&signature=${authProof.data.signature}&sessionId=${authProof.data.sessionId}&chainId=${props.network?.name}`
-
-      setVerificationLink(verificationLink)
-      setExternalNonce(data.nonce)
-
-      setInProgress(false)
-    } catch (e) {
-      console.error(e)
-      setInProgress(false)
-    }
-  }
-
-  return (
-    <Box>
-      {sendTransactionError && (
-        <Box marginTop="3">
-          Transaction failed: {sendTransactionError}
-        </Box>
-      )}
-      {!inProgress ? (
-        <Box>
-          <Button
-            marginTop="5"
-            label="Generate EOA Link"
-            disabled={
-              externalNonce !== undefined
-            }
-            onClick={() => generateEOALink() }
-          />
-        </Box>
-      ) : (
-        <Box gap="2" marginY="4" alignItems="center" justifyContent="center">
-          <Spinner />
-        </Box>
-      )}
-      {externalNonce && (
-        <Box marginTop="3">
-          <Text variant="normal" color="text100" fontWeight="bold">
-            Verification Link:
-          </Text>
-          <br />
-          <a href={`${verificationLink}`} target="_blank" rel="noopener noreferrer">
-            {verificationLink}
-          </a>
-        </Box>
-      )}
-    </Box>
-  )
-}