Merge pull request #253 from radixdlt/improve-ux

feat: set name after linking
radixdlt · May 24, 2024 · a416ea4 · a416ea4
2 parents 1c126da + b694425
commit a416ea4
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 34 deletions.
diff --git a/src/pairing/components/connection-status.tsx b/src/pairing/components/connection-status.tsx
@@ -2,19 +2,36 @@ import { Box, Button } from '../../components'
 import { PairingHeader } from './pairing-header'
 import { useEffect, useState } from 'react'
 import { LinkedWallet } from 'components/linked-wallet/linked-wallet'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate, useSearchParams } from 'react-router-dom'
 import { useConnectionsClient } from 'pairing/state/connections'
 import { ForgetThisWallet } from './forget-this-wallet'
 import { RenameWalletLink } from './rename-wallet-link'
 
 export const ConnectionStatus = () => {
   const navigate = useNavigate()
   const connectionsClient = useConnectionsClient()
+  const [searchParams, setSearchParams] = useSearchParams()
   const connections = connectionsClient.connections
 
   const [connectionIdToForget, setConnectionIdToForget] = useState<string>('')
-  const [connectionIdToChangeName, setConnectionIdToChangeName] =
-    useState<string>('')
+  const [changingName, setChangingName] = useState<
+    { walletPublicKey: string; isInitial: boolean } | undefined
+  >(undefined)
+
+  useEffect(() => {
+    if (searchParams.has('newWallet')) {
+      const newWalletPublicKey = searchParams.get('newWallet') as string
+      const isKnownWallet = searchParams.get('isKnownConnection') === 'true'
+
+      setChangingName(
+        !isKnownWallet
+          ? { walletPublicKey: newWalletPublicKey, isInitial: true }
+          : undefined,
+      )
+
+      setSearchParams({})
+    }
+  }, [searchParams])
 
   useEffect(() => {
     if (connectionsClient.isLoading()) return
@@ -29,8 +46,10 @@ export const ConnectionStatus = () => {
   }
 
   const updateWalletName = (walletName: string) => {
-    connectionsClient.updateName(walletName, connectionIdToChangeName)
-    setConnectionIdToChangeName('')
+    if (changingName) {
+      connectionsClient.updateName(walletName, changingName.walletPublicKey)
+      setChangingName(undefined)
+    }
   }
 
   const renderForgetWalletConfirmation = () => {
@@ -45,13 +64,14 @@ export const ConnectionStatus = () => {
   }
 
   const renderChangeWalletName = () => {
-    if (!connectionIdToChangeName || !connections) return null
+    if (!changingName || !connections) return null
 
     return (
       <RenameWalletLink
-        cancel={() => setConnectionIdToChangeName('')}
+        cancel={() => setChangingName(undefined)}
         updateName={(updatedName) => updateWalletName(updatedName)}
-        initialValue={connections[connectionIdToChangeName].walletName}
+        isInitial={changingName.isInitial}
+        initialValue={connections[changingName.walletPublicKey].walletName}
       />
     )
   }
@@ -62,7 +82,7 @@ export const ConnectionStatus = () => {
         py="small"
         flex="col"
         style={{
-          ...(connectionIdToForget || connectionIdToChangeName
+          ...(connectionIdToForget || changingName
             ? { filter: `blur(10px)`, height: '100%' }
             : { height: '100%' }),
         }}
@@ -76,7 +96,9 @@ export const ConnectionStatus = () => {
                 accounts={connection.accounts}
                 name={connection.walletName}
                 onForgetWallet={() => setConnectionIdToForget(id)}
-                onRenameWalletLink={() => setConnectionIdToChangeName(id)}
+                onRenameWalletLink={() =>
+                  setChangingName({ walletPublicKey: id, isInitial: false })
+                }
               />
             ))}
           </Box>

diff --git a/src/pairing/components/rename-wallet-link.tsx b/src/pairing/components/rename-wallet-link.tsx
@@ -1,16 +1,30 @@
 import { Modal, Box, Button } from 'components'
 import { useState } from 'react'
 import InfoOutline from '../assets/info-outline.svg'
+
+const texts = {
+  initialFlow: {
+    header: 'Name Your Wallet',
+    action: 'Confirm',
+  },
+  updateFlow: {
+    header: 'Rename Wallet Link',
+    action: 'Update',
+  },
+}
+
 export const RenameWalletLink = (props: {
   initialValue: string
   cancel: () => void
+  isInitial: boolean
   updateName: (name: string) => void
 }) => {
+  const text = texts[props.isInitial ? 'initialFlow' : 'updateFlow']
   const [currentName, setCurrentName] = useState(props.initialValue)
   const [isUpdateDisabled, setIsUpdateDisabled] = useState(true)
 
   return (
-    <Modal header="Rename Wallet Link">
+    <Modal header={text.header}>
       <input
         className="rename-wallet-link__input"
         type="text"
@@ -34,11 +48,11 @@ export const RenameWalletLink = (props: {
           Cancel
         </Button>
         <Button
-          disabled={isUpdateDisabled}
+          disabled={isUpdateDisabled && !props.isInitial}
           onClick={() => props.updateName(currentName)}
           full
         >
-          Update
+          {text.action}
         </Button>
       </Box>
     </Modal>

diff --git a/src/pairing/pairing.tsx b/src/pairing/pairing.tsx
@@ -81,9 +81,14 @@ export const Pairing = () => {
         .subscribe(([password, interaction]) => {
           connectionsClient
             .addOrUpdate(password, interaction)
-            .map(() => chromeLocalStore.removeItem('connectionPassword'))
-            .map(() => connectorClient.disconnect())
-            .map(() => navigate('/'))
+            .map(({ isKnownConnection }) => {
+              chromeLocalStore.removeItem('connectionPassword')
+              connectorClient.disconnect()
+              navigate({
+                pathname: '/',
+                search: `?newWallet=${interaction.publicKey}&isKnownConnection=${isKnownConnection}`,
+              })
+            })
         }),
     )
 

diff --git a/src/pairing/state/connections.ts b/src/pairing/state/connections.ts
@@ -96,31 +96,25 @@ export const ConnectionsClient = (connections?: Connections | null) => {
       }
     }
 
-    if (connections && connections[walletPublicKey]) {
-      connections[walletPublicKey] = {
-        ...connections[walletPublicKey],
-        password,
-      }
-      return chromeLocalStore.setItem({
-        connections: {
-          ...(connections || {}),
-          [walletPublicKey]: connections[walletPublicKey],
-        },
-      })
-    }
-
-    return chromeLocalStore.setItem({
+    const knownConnection = connections && connections[walletPublicKey]
+    const numberOfExistingConnections = Object.keys(connections || {}).length
+    const updatedConnections = {
       connections: {
         ...(connections || {}),
         [walletPublicKey]: {
-          walletName: `Radix Wallet ${
-            Object.keys(connections || {}).length + 1
-          }`,
+          walletName:
+            knownConnection?.walletName ||
+            `Radix Wallet ${numberOfExistingConnections + 1}`,
           walletPublicKey,
           password,
+          accounts: knownConnection?.accounts || [],
         },
       },
-    })
+    }
+
+    return chromeLocalStore.setItem(updatedConnections).map(() => ({
+      isKnownConnection: !!knownConnection,
+    }))
   }
 
   const updateAccounts = (walletPublicKey: string, accounts: Account[]) => {