Merge pull request #821 from relayprotocol/ted/fe-7727-save-destination-address-for-future-use

Save recent custom addresses to local storage

Author: pedromcunha

.changeset/eighty-apes-jam.md

@@ -0,0 +1,5 @@
+---
+'@relayprotocol/relay-kit-ui': patch
+---
+
+Save recent custom addresses to local storage

packages/ui/src/components/common/CustomAddressModal.tsx

@@ -10,14 +10,19 @@ import { EventNames } from '../../constants/events.js'
 import type { Token } from '../../types/index.js'
 import {
   faCircleCheck,
-  faTriangleExclamation
+  faTriangleExclamation,
+  faClipboard
 } from '@fortawesome/free-solid-svg-icons'
 import { AnchorButton } from '../primitives/Anchor.js'
 import type { AdaptedWallet, RelayChain } from '@relayprotocol/relay-sdk'
 import type { LinkedWallet } from '../../types/index.js'
 import { truncateAddress } from '../../utils/truncate.js'
 import { isValidAddress } from '../../utils/address.js'
 import { ProviderOptionsContext } from '../../providers/RelayKitProvider.js'
+import {
+  addCustomAddress,
+  getCustomAddresses
+} from '../../utils/localStorage.js'
 
 type Props = {
   open: boolean
@@ -50,6 +55,9 @@ export const CustomAddressModal: FC<Props> = ({
   const connectedAddress = useWalletAddress(wallet, linkedWallets)
   const [address, setAddress] = useState('')
   const [input, setInput] = useState('')
+  const [recentCustomAddresses, setRecentCustomAddresses] = useState<string[]>(
+    []
+  )
   const providerOptionsContext = useContext(ProviderOptionsContext)
   const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides
 
@@ -67,6 +75,14 @@ export const CustomAddressModal: FC<Props> = ({
     [toChain, linkedWallets]
   )
 
+  const filteredRecentCustomAddresses = useMemo(
+    () =>
+      recentCustomAddresses.filter((address) =>
+        isValidAddress(toChain?.vmType, address, toChain?.id)
+      ),
+    [recentCustomAddresses, toChain]
+  )
+
   const connectedAddressSet =
     (!address && !toAddress) ||
     (toAddress === connectedAddress && address === connectedAddress) ||
@@ -81,6 +97,8 @@ export const CustomAddressModal: FC<Props> = ({
         setAddress(toAddress ? toAddress : '')
         setInput(toAddress ? toAddress : '')
       }
+      // Load custom addresses when modal opens
+      setRecentCustomAddresses(getCustomAddresses())
       onAnalyticEvent?.(EventNames.ADDRESS_MODAL_OPEN)
     }
   }, [open])
@@ -210,38 +228,39 @@ export const CustomAddressModal: FC<Props> = ({
             )
           ) : null}
 
-          {multiWalletSupportEnabled && availableWallets.length > 0 ? (
+          {filteredRecentCustomAddresses.length > 0 ? (
             <>
-              <Text style="subtitle2">Use connected wallet address</Text>
+              <Text style="subtitle2">Recent addresses</Text>
               <Flex css={{ gap: '2', flexWrap: 'wrap' }} align="center">
-                {availableWallets.map((wallet) => (
+                {filteredRecentCustomAddresses.map((address) => (
                   <Pill
-                    key={wallet.address}
+                    key={address}
                     color="transparent"
                     bordered
                     radius="squared"
                     css={{
                       display: 'flex',
                       alignItems: 'center',
                       gap: '6px',
-                      cursor: 'pointer'
+                      cursor: 'pointer',
+                      px: '8px'
                     }}
                     onClick={() => {
-                      onConfirmed(wallet.address)
+                      onConfirmed(address)
                       onOpenChange(false)
                       onAnalyticEvent?.(EventNames.ADDRESS_MODAL_CONFIRMED, {
-                        address: wallet.address,
-                        context: 'linked_wallet'
+                        address: address,
+                        context: 'custom_address'
                       })
                     }}
                   >
-                    <img
-                      src={wallet.walletLogoUrl}
-                      style={{ width: 16, height: 16, borderRadius: 4 }}
+                    <FontAwesomeIcon
+                      icon={faClipboard}
+                      width={16}
+                      height={16}
+                      color="#9CA3AF"
                     />
-                    <Text style="subtitle2">
-                      {truncateAddress(wallet.address)}
-                    </Text>
+                    <Text style="subtitle2">{truncateAddress(address)}</Text>
                   </Pill>
                 ))}
               </Flex>
@@ -254,6 +273,15 @@ export const CustomAddressModal: FC<Props> = ({
           css={{ justifyContent: 'center' }}
           onClick={() => {
             if (isValidAddress(toChain?.vmType, address, toChain?.id)) {
+              // Save the address to custom addresses if it's not a connected wallet address
+              const isConnectedWallet = availableWallets.some(
+                (wallet) => wallet.address === address
+              )
+              if (!isConnectedWallet && address !== connectedAddress) {
+                addCustomAddress(address)
+                setRecentCustomAddresses(getCustomAddresses())
+              }
+
               onConfirmed(address)
               onAnalyticEvent?.(EventNames.ADDRESS_MODAL_CONFIRMED, {
                 address: address,

packages/ui/src/utils/localStorage.ts

@@ -11,24 +11,33 @@ interface CacheEntry {
 
 interface RelayUiKitData {
   acceptedUnverifiedTokens: string[]
+  recentCustomAddresses?: string[]
   genericCache?: { [key: string]: CacheEntry }
 }
 
 export function getRelayUiKitData(): RelayUiKitData {
   if (typeof window === 'undefined')
-    return { acceptedUnverifiedTokens: [], genericCache: {} }
+    return {
+      acceptedUnverifiedTokens: [],
+      recentCustomAddresses: [],
+      genericCache: {}
+    }
 
   let data: RelayUiKitData = {
     acceptedUnverifiedTokens: [],
+    recentCustomAddresses: [],
     genericCache: {}
   }
   try {
     const localStorageData = localStorage.getItem(RELAY_UI_KIT_KEY)
     data = localStorageData ? JSON.parse(localStorageData) : data
-    // Ensure genericCache exists if loaded data doesn't have it
+    // Ensure genericCache and recentCustomAddresses exist if loaded data doesn't have them
     if (!data.genericCache) {
       data.genericCache = {}
     }
+    if (!data.recentCustomAddresses) {
+      data.recentCustomAddresses = []
+    }
   } catch (e) {
     console.warn('Failed to get RelayKitUIData', e)
   }
@@ -111,3 +120,48 @@ export const alreadyAcceptedToken = (token: Token) => {
   // Ensure acceptedUnverifiedTokens exists before accessing includes
   return relayUiKitData.acceptedUnverifiedTokens?.includes(tokenKey) ?? false
 }
+
+/**
+ * Add a custom address to the saved list if it doesn't already exist
+ * Keeps a maximum of 3 addresses, removing the oldest when limit is exceeded
+ * @param address - The address to save
+ */
+export function addCustomAddress(address: string): void {
+  const data = getRelayUiKitData()
+  const recentCustomAddresses = data.recentCustomAddresses || []
+
+  // Remove address if it already exists to avoid duplicates
+  const filteredAddresses = recentCustomAddresses.filter(
+    (addr) => addr !== address
+  )
+
+  // Add the new address to the end
+  const updatedAddresses = [...filteredAddresses, address]
+
+  // Keep only the last 3 addresses (most recent)
+  const limitedAddresses = updatedAddresses.slice(-3)
+
+  setRelayUiKitData({ recentCustomAddresses: limitedAddresses })
+}
+
+/**
+ * Get all saved custom addresses
+ * @returns Array of custom addresses
+ */
+export function getCustomAddresses(): string[] {
+  const data = getRelayUiKitData()
+  return data.recentCustomAddresses || []
+}
+
+/**
+ * Remove a custom address from the saved list
+ * @param address - The address to remove
+ */
+export function removeCustomAddress(address: string): void {
+  const data = getRelayUiKitData()
+  const recentCustomAddresses = data.recentCustomAddresses || []
+  const updatedAddresses = recentCustomAddresses.filter(
+    (addr) => addr !== address
+  )
+  setRelayUiKitData({ recentCustomAddresses: updatedAddresses })
+}