fix: recovery from serialized data (#10802)

DimensionDev · Sep 20, 2023 · 9888735 · 9888735
1 parent 861b35c
commit 9888735
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 24 deletions.
diff --git a/packages/mask/src/extension/popups/pages/Wallet/CreateWallet/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/CreateWallet/index.tsx
@@ -86,7 +86,7 @@ const CreateWallet = memo(function CreateWallet() {
                     </Typography>
                     <List className={classes.groups}>
                         {groups.map(([key, wallets], index) => {
-                            const theFirstWallet = first(sortBy(wallets, (w) => w.createdAt.getMilliseconds()))
+                            const theFirstWallet = first(sortBy(wallets, (w) => w.createdAt.getTime()))
                             return (
                                 <ListItem
                                     classes={{ secondaryAction: classes.secondaryAction }}

diff --git a/packages/web3-hooks/base/src/useWallets.ts b/packages/web3-hooks/base/src/useWallets.ts
@@ -1,4 +1,4 @@
-import { EMPTY_LIST } from '@masknet/shared-base'
+import { EMPTY_LIST, type Wallet } from '@masknet/shared-base'
 import { Providers } from '@masknet/web3-providers'
 import { ProviderType } from '@masknet/web3-shared-evm'
 import { useMemo } from 'react'
@@ -12,28 +12,37 @@ export function useWallets() {
     )
 
     return useMemo(() => {
-        return [...wallets].sort((a, b) => {
-            if (a.owner && !b.owner) return 1
-            // Could be serialized by react query persist client
-            const timestampA = new Date(a.createdAt).getTime()
-            const timestampB = new Date(b.createdAt).getTime()
-            if (timestampA - timestampB > 10000) {
-                return 1
-            } else if (timestampB - timestampA > 10000) {
-                return -1
-            }
-            const numA = a.name.split('Wallet ')[1]
-            const numB = b.name.split('Wallet ')[1]
-            try {
-                if (!numA && numB && !Number.isNaN(numB)) return 1
-                if (!Number.isNaN(numA) && !Number.isNaN(numB)) {
-                    return Number(numA) > Number(numB) ? 1 : -1
-                } else {
-                    return numB.length - numA.length
+        return [...wallets]
+            .map((w) => {
+                // Could be serialized by react query persist client
+                if (w.createdAt instanceof Date && w.updatedAt instanceof Date) return w
+                return {
+                    ...w,
+                    createdAt: new Date(w.createdAt),
+                    updatedAt: new Date(w.updatedAt),
+                } as Wallet
+            })
+            .sort((a, b) => {
+                if (a.owner && !b.owner) return 1
+                const timestampA = a.createdAt.getTime()
+                const timestampB = b.createdAt.getTime()
+                if (timestampA - timestampB > 10000) {
+                    return 1
+                } else if (timestampB - timestampA > 10000) {
+                    return -1
                 }
-            } catch {
-                return 0
-            }
-        })
+                const numA = a.name.split('Wallet ')[1]
+                const numB = b.name.split('Wallet ')[1]
+                try {
+                    if (!numA && numB && !Number.isNaN(numB)) return 1
+                    if (!Number.isNaN(numA) && !Number.isNaN(numB)) {
+                        return Number(numA) > Number(numB) ? 1 : -1
+                    } else {
+                        return numB.length - numA.length
+                    }
+                } catch {
+                    return 0
+                }
+            })
     }, [wallets])
 }