refactor: wallet check

src/views/app/Dashboard.tsx

@@ -2,55 +2,89 @@
 
 import { Loader2 } from 'lucide-react';
 import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { useLocalStorage } from 'usehooks-ts';
 
-import { useGetWalletQuery } from '@/graphql/queries/__generated__/wallet.generated';
+import {
+  useGetAllWalletsQuery,
+  useGetWalletQuery,
+} from '@/graphql/queries/__generated__/wallet.generated';
 import { LOCALSTORAGE_KEYS } from '@/utils/constants';
 import { ROUTES } from '@/utils/routes';
 
 import { WalletInfo } from '../wallet/Wallet';
 
+const Wallet: FC<{ walletId: string }> = ({ walletId }) => {
+  const { data, loading } = useGetWalletQuery({
+    variables: { id: walletId },
+    errorPolicy: 'ignore',
+  });
+
+  if (loading) {
+    return (
+      <div className="flex w-full justify-center py-4">
+        <Loader2 className="size-4 animate-spin" />
+      </div>
+    );
+  }
+
+  if (!data?.wallets.find_one.id) {
+    return null;
+  }
+
+  return <WalletInfo id={walletId} />;
+};
+
 export const Dashboard = () => {
   const { push } = useRouter();
 
-  const [value] = useLocalStorage(LOCALSTORAGE_KEYS.currentWalletId, '');
+  const [checkingId, setCheckingId] = useState<boolean>(true);
 
-  const { data, loading } = useGetWalletQuery({
-    variables: { id: value },
-    skip: !value,
-    errorPolicy: 'ignore',
-  });
+  const [value, setValue] = useLocalStorage(
+    LOCALSTORAGE_KEYS.currentWalletId,
+    ''
+  );
 
-  useEffect(() => {
-    if (!value) return;
-    if (loading) return;
-    if (!!data?.wallets.find_one.id) return;
-    localStorage.removeItem(LOCALSTORAGE_KEYS.currentWalletId);
-  }, [data, loading, value]);
+  const { data, loading, error } = useGetAllWalletsQuery();
 
   useEffect(() => {
-    if (value) return;
     if (loading) return;
-    if (!!data?.wallets.find_one.id) return;
-    push(ROUTES.setup.wallet.home);
-  }, [value, data, push, loading]);
+    if (error) return;
 
-  if (loading) {
+    // User has no wallets for his account
+    if (!data?.wallets.find_many.length) {
+      localStorage.removeItem(LOCALSTORAGE_KEYS.currentWalletId);
+      push(ROUTES.setup.wallet.home);
+      return;
+    }
+
+    const savedWallets = data.wallets.find_many;
+
+    if (value) {
+      const wallet = savedWallets.find(w => w.id === value);
+
+      // User has a valid wallet id in localstorage
+      if (!!wallet) {
+        setCheckingId(false);
+        return;
+      }
+    }
+
+    setValue(savedWallets[0].id);
+    setCheckingId(false);
+  }, [data, loading, error, value, push, setValue]);
+
+  if (loading || checkingId) {
     return (
       <div className="flex w-full justify-center py-4">
         <Loader2 className="size-4 animate-spin" />
       </div>
     );
   }
 
-  if (!value || !data?.wallets.find_one.id) {
-    return null;
-  }
-
   return (
     <div className="py-4">
-      <WalletInfo id={value} />
+      <Wallet walletId={value} />
     </div>
   );
 };