Account federation and guest wallets (#25)

* WIP playfab * Account federation and guest wallets * Use the new signIn for email login * Integrate Playfab login * WIP * Make all login options available for linking * Add basic Stytch support * Only show Playfab if configured * Update sequence.js with linkAccount and proper types --------- Co-authored-by: Tolgahan Arikan <[email protected]>
0xsequence · Jul 16, 2024 · f41a2b0 · f41a2b0
1 parent 4a19c35
commit f41a2b0
Show file tree

Hide file tree

Showing 14 changed files with 3,304 additions and 2,197 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/demo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Demo Waas App</title>
+    <script src="https://download.playfab.com/PlayFabClientApi.js"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -17,8 +17,10 @@
     "@0xsequence/design-system": "1.6.3",
     "@0xsequence/indexer": "1.9.26",
     "@0xsequence/network": "1.9.26",
-    "@0xsequence/waas": "0.0.0-20240613131211",
+    "@0xsequence/waas": "0.0.0-20240715202213",
     "@react-oauth/google": "^0.11.1",
+    "@stytch/react": "^18.1.0",
+    "@stytch/vanilla-js": "^4.13.2",
     "@vanilla-extract/css": "^1.12.0",
     "axios": "^1.6.0",
     "ethers": "5.7.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -15,7 +15,8 @@ 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 { Network } from '@0xsequence/waas'
+import { accountToName, ListAccountsView } from './components/views/ListAccountsView.tsx'
+import { Account, IdentityType, Network } from '@0xsequence/waas'
 
 function App() {
   const [walletAddress, setWalletAddress] = useState<string>()
@@ -27,6 +28,8 @@ function App() {
 
   const [network, setNetwork] = useState<undefined | Network>()
 
+  const [currentAccount, setCurrentAccount] = useState<Account>()
+
   useEffect(() => {
     sequence
       .getAddress()
@@ -36,6 +39,12 @@ function App() {
       .catch((e: Error) => {
         setFetchWalletAddressError(e.message)
       })
+
+    sequence.listAccounts().then((response: any) => {
+      if (response.currentAccountId) {
+        setCurrentAccount(response.accounts.find(account => account.id === response.currentAccountId))
+      }
+    })
   }, [])
 
   useEffect(() => {
@@ -100,12 +109,16 @@ function App() {
         </Box>
 
         <Box marginBottom="5" flexDirection="row">
-          <Text marginTop="1" variant="normal" color="text100">
-            Logged in with email:{' '}
-            {/* <Text fontWeight="bold" underline>
-              {email}
-            </Text> */}
-          </Text>
+          {currentAccount && (
+            <Box flexDirection="column" gap="2">
+              <Text marginTop="1" variant="normal" color="text100">
+                {currentAccount.type === IdentityType.Guest
+                  ? 'Guest account'
+                  : `Logged in with account type ${currentAccount.type}`}{' '}
+              </Text>
+              {currentAccount.type !== IdentityType.Guest && accountToName(currentAccount)}
+            </Box>
+          )}
 
           <Button
             marginLeft="auto"
@@ -144,13 +157,18 @@ function App() {
           </Text>
         </Box>
 
+        <Box>{fetchWalletAddressError && <Text>Error fetching wallet address: {fetchWalletAddressError}</Text>}</Box>
+        <Divider background="buttonGlass" />
+        <ListSessionsView />
+
+        <Divider background="buttonGlass" />
+
         <Box marginBottom="5">
           <NetworkSwitch onNetworkChange={setNetwork}></NetworkSwitch>
         </Box>
 
-        <Box>{fetchWalletAddressError && <Text>Error fetching wallet address: {fetchWalletAddressError}</Text>}</Box>
         <Divider background="buttonGlass" />
-        <ListSessionsView />
+
         <Collapsible marginY={'3'} label="Send native token transaction">
           <Divider background="buttonGlass" />
           <SendTransactionsView network={network} />
@@ -175,6 +193,7 @@ function App() {
           <Divider background="buttonGlass" />
           <EOALinkView network={network} walletAddress={walletAddress} />
         </Collapsible>
+        <ListAccountsView />
       </Box>
     </>
   )