feat: error fixes and ui fixes

app/api/rpc/[...routes]/route.ts

@@ -4,14 +4,15 @@
 // export const preferredRegion = 'iad1';
 
 import { NextResponse } from 'next/server';
+import { env } from 'process';
 
 export async function POST(req: Request, { params }: { params: { routes: string[] } }) {
   const body = await req.json().catch(console.error);
 
   const res = await fetch(`https://api.g.alchemy.com/${params.routes.join('/')}`, {
     method: 'POST',
     headers: {
-      Authorization: `Bearer ${'6-7bbRdhqAvOKomY2JhAladgpGf7AQzR' /*env.ALCHEMY_API_KEY*/}`,
+      Authorization: `Bearer ${env.ALCHEMY_API_KEY}`,
       ...req.headers
     },
     body: JSON.stringify(body)

app/loading.tsx

@@ -3,8 +3,8 @@ import { Spinner } from '@chakra-ui/spinner';
 
 export default function Loading() {
   return (
-    <Center w="100vw" h="100vh">
-      <Spinner thickness="4px" speed="0.65s" emptyColor="gray.200" color="primary.500" size="3xl" />
+    <Center h="70vh">
+      <Spinner thickness="4px" speed="0.75s" emptyColor="white" color="primary.500" size="xl" />
     </Center>
   );
 }

app/page.tsx

@@ -12,7 +12,7 @@ export default function Page() {
   return (
     <Center flex={1}>
       {isLoadingUser ? (
-        <Spinner thickness="4px" speed="0.65s" emptyColor="gray.200" color="primary.500" size="3xl" />
+        <Spinner thickness="4px" speed="0.75s" emptyColor="white" color="primary.500" size="xl" />
       ) : account == null ? (
         <LoginSignupCard signer={signer} onLogin={refetchUserDetails} />
       ) : (

components/auth/UserCardModal.tsx

@@ -28,7 +28,7 @@ import {
   Tooltip,
   useToast
 } from '@chakra-ui/react';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { useCallback, useMemo, useState } from 'react';
 import { HiOutlineFingerPrint, HiOutlineLogout } from 'react-icons/hi';
 import { encodeFunctionData } from 'viem';
@@ -65,12 +65,10 @@ export const UserCardModal = () => {
   const [hasClosedPrivateKeyModal, setHasClosedPrivateKeyModal] = useState(false);
   const closePrivateKeyModal = useCallback(() => setHasClosedPrivateKeyModal(true), []);
 
-  const { isPluginInstalled: getIsPluginInstalled } = usePlugin<typeof ColdStoragePluginAbi>(client, ColdStoragePlugin);
+  const [hasClosedExportedKeyModal, setHasClosedExportedKeyModal] = useState(false);
+  const closeExportedKeyModal = useCallback(() => setHasClosedExportedKeyModal(true), []);
 
-  const { data: isPluginInstalled } = useQuery({
-    queryKey: ['is-plugin-installed'],
-    queryFn: () => getIsPluginInstalled()
-  });
+  const { setIsPluginInstalled, isPluginInstalled } = usePlugin<typeof ColdStoragePluginAbi>(client, ColdStoragePlugin);
 
   const {
     mutate: mutateInstallColdStorage,
@@ -107,6 +105,7 @@ export const UserCardModal = () => {
         ]
       });
       await waitForUserOp(client, mintHash);
+      setIsPluginInstalled(true);
       return storagePrivateKey;
     }
   });
@@ -115,14 +114,15 @@ export const UserCardModal = () => {
 
   const {
     mutate: exportWallet,
-    isPending,
-    data
+    isPending: isExportingWallet,
+    data: exportedWalletKey
   } = useMutation({
-    mutationFn: () =>
-      signer.exportWallet({
+    mutationFn: () => {
+      return signer.exportWallet({
         iframeContainerId: exportWalletContainerId,
         iframeElementId: exportWalletElementId
-      })
+      });
+    }
   });
 
   const { mutate: addPasskey } = useMutation({
@@ -195,38 +195,65 @@ export const UserCardModal = () => {
 
           <Flex gap={4}>
             <Button
-              bg="white"
               flex={1}
               h="40px"
               flexDirection="row"
               onClick={() => exportWallet()}
-              isLoading={isPending}
+              isLoading={isExportingWallet}
               spinnerPlacement="end"
-              isDisabled={!!data}
+              isDisabled={!!exportedWalletKey}
             >
               Export Wallet
             </Button>
             <Button
               h="40px"
               onClick={installColdStorage}
-              isDisabled={!account || isInstallingColdStorage || isPluginInstalled || hasClosedPrivateKeyModal}
+              isDisabled={!account || isPluginInstalled}
+              spinnerPlacement="end"
+              isLoading={isInstallingColdStorage}
             >
               {isInstallingColdStorage
                 ? 'Installing cold storage plugin'
-                : isPluginInstalled || hasClosedPrivateKeyModal
+                : isPluginInstalled
                   ? 'Cold storage plugin installed'
                   : 'Install cold storage plugin'}
             </Button>
           </Flex>
-          {data && (
-            <Flex id={exportWalletContainerId}>
-              <style>{iframeCss}</style>
-            </Flex>
-          )}
         </ModalBody>
         <ModalFooter>
           <Button onClick={hideModal}>Close</Button>
         </ModalFooter>
+
+        <Modal
+          isOpen={!!exportedWalletKey && !hasClosedExportedKeyModal}
+          closeOnOverlayClick={false}
+          onClose={closeExportedKeyModal}
+        >
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader>Your Alchemy Signer private key</ModalHeader>
+            <ModalCloseButton />
+            <ModalBody>
+              <Text fontSize={16}>
+                Save your private key in a secure location. You&apos;ll need this to access your locked assets! After
+                closing this dialog, your private key will not be shown again.
+              </Text>
+              <Box p={2} mt={2} borderWidth="1" borderColor="gray.500" borderRadius={4}>
+                {exportedWalletKey && (
+                  <Flex id={exportWalletContainerId}>
+                    <style>{iframeCss}</style>
+                  </Flex>
+                )}
+              </Box>
+            </ModalBody>
+            <ModalFooter>
+              <Button colorScheme="accent" onClick={closeExportedKeyModal}>
+                I have saved my private key
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+
         <Modal
           isOpen={!!storagePrivateKey && !hasClosedPrivateKeyModal}
           closeOnOverlayClick={false}

hooks/common/usePlugin.ts

@@ -3,7 +3,7 @@ import { Plugin, UninstallPluginParams } from '@/utils/types';
 import { accountLoupeActions, pluginManagerActions } from '@alchemy/aa-accounts';
 import { AlchemySmartAccountClient } from '@alchemy/aa-alchemy';
 import { UserOperationOverrides } from '@alchemy/aa-core';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Abi } from 'viem';
 
 export const usePlugin = <TAbi extends Abi>(client: AlchemySmartAccountClient, plugin: Plugin<TAbi>) => {
@@ -25,17 +25,34 @@ export const usePlugin = <TAbi extends Abi>(client: AlchemySmartAccountClient, p
     [address, client]
   );
 
-  const isPluginInstalled = useCallback(async () => {
+  const getIsPluginInstalled = useCallback(async () => {
     if (!client.account) return false;
     if (!(await client.account.isAccountDeployed())) return false;
     const plugins = await client.extend(accountLoupeActions).getInstalledPlugins({ account: client.account });
     return plugins.some((p) => p === address);
   }, [address, client]);
 
+  const [isPluginInstalled, setIsPluginInstalled] = useState(false);
+
+  useEffect(() => {
+    async function fn() {
+      if (!client.account) return false;
+      if (!(await client.account.isAccountDeployed())) return false;
+      const plugins = await client.extend(accountLoupeActions).getInstalledPlugins({ account: client.account });
+      const res = plugins.some((p) => p === address);
+      console.log('!!!!!!!!!!', res);
+      setIsPluginInstalled(res);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    fn();
+  }, [address, client]);
+
   return {
     address,
     contract,
     uninstallPlugin,
-    isPluginInstalled
+    isPluginInstalled,
+    setIsPluginInstalled,
+    getIsPluginInstalled
   };
 };

utils/alchemy.ts

@@ -1,4 +1,5 @@
 import { AlchemySettings, Network } from 'alchemy-sdk';
+import { env } from 'process';
 
 export function getRpcUrl() {
   // This should run in the client only. Without this check, the build fails.
@@ -26,5 +27,5 @@ export const getAlchemySettings = (nft?: boolean): AlchemySettings => {
     };
   }
 
-  return { network: Network.ARB_SEPOLIA, apiKey: '6-7bbRdhqAvOKomY2JhAladgpGf7AQzR' /*env.ALCHEMY_API_KEY*/ };
+  return { network: Network.ARB_SEPOLIA, apiKey: env.ALCHEMY_API_KEY };
 };