fix: wallet style

AbstractSDK · Sep 11, 2024 · 32f7e2d · 32f7e2d
1 parent 687b3db
commit 32f7e2d
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 57 deletions.
diff --git a/app/src/lib/components/connect/connect.svelte b/app/src/lib/components/connect/connect.svelte
@@ -6,7 +6,6 @@ import * as Sheet from "$lib/components/ui/sheet"
 import { Button } from "$lib/components/ui/button"
 import * as Avatar from "$lib/components/ui/avatar"
 import WalletIcon from "virtual:icons/lucide/wallet"
-import { Separator } from "$lib/components/ui/separator"
 import { sepoliaStore, evmWalletsInformation } from "$lib/wallet/evm/index.ts"
 import { cosmosStore, cosmosWalletsInformation } from "$lib/wallet/cosmos/index.ts"
 import { Switch } from "$lib/components/ui/switch"
@@ -47,10 +46,11 @@ $: if ($navigating) sheetOpen = false
     <Button
       builders={[builder]}
       class={cn(
-        connectedWallets === 1 ? "w-[75px]" : "w-[50px]",
-        "space-x-1.5 lg:w-[180px] text-md bg-accent text-black hover:bg-cyan-300/90 ml-auto",
-        $sepoliaStore.connectionStatus === "connected" &&
-          $cosmosStore.connectionStatus === "connected"
+        connectedWallets === 1 ? 'w-[75px]' : 'w-[50px]',
+        'space-x-1.5 lg:w-[180px] text-md bg-accent text-black ml-auto',
+        'hover:bg-cyan-300/90',
+        $sepoliaStore.connectionStatus === 'connected' &&
+          $cosmosStore.connectionStatus === 'connected',
       )}
       on:click={() => (sheetOpen = !sheetOpen)}
       size="sm"
@@ -59,42 +59,31 @@ $: if ($navigating) sheetOpen = false
       <span class="font-supermolot font-bold uppercase lg:block hidden">
         {buttonText}
       </span>
-      <span
-        class={cn(
-          connectedWallets === 1
-            ? "font-supermolot font-bold uppercase"
-            : "hidden"
-        )}
-      >
-        {connectedWallets === 1 ? "1/2" : ""}
+      <span class={cn(connectedWallets === 1 ? 'font-supermolot font-bold uppercase' : 'hidden')}>
+        {connectedWallets === 1 ? '1/2' : ''}
       </span>
     </Button>
   </Sheet.Trigger>
   <Sheet.Content
     class={cn(
-      "h-full border-solid border-left flex flex-col justify-start",
-      "min-w-[95%] max-w-[90%] sm:min-w-min sm:max-w-[500px]",
-      "overflow-y-auto"
+      'h-full border-solid border-left flex flex-col justify-start',
+      'min-w-[95%] max-w-[90%] sm:min-w-min sm:max-w-[500px]',
+      'overflow-y-auto',
     )}
   >
     <Sheet.Header>
       <Sheet.Title class="flex gap-4 items-center">
         <!-- Connect Wallet -->
         <Avatar.Root
-          class={cn(
-            "size-10",
-            $sepoliaStore.connectionStatus !== "connected" && "hidden"
-          )}
+          class={cn('size-10', $sepoliaStore.connectionStatus !== 'connected' && 'hidden')}
         >
           <Avatar.Image
             alt="ethereum avatar"
-            src={`https://effigy.im/a/${$sepoliaStore.address || "0x8478B37E983F520dBCB5d7D3aAD8276B82631aBd"}.png`}
+            src={`https://effigy.im/a/${$sepoliaStore.address || '0x8478B37E983F520dBCB5d7D3aAD8276B82631aBd'}.png`}
           />
           <Avatar.Fallback>UN</Avatar.Fallback>
         </Avatar.Root>
-        <h2
-          class=" text-start w-full text-2xl font-bold uppercase font-supermolot"
-        >
+        <h2 class=" text-start w-full text-2xl font-bold uppercase font-supermolot">
           Connect Wallets
         </h2>
       </Sheet.Title>
@@ -147,17 +136,14 @@ $: if ($navigating) sheetOpen = false
         </DropdownMenu.Trigger>
         <DropdownMenu.Content class="w-fit rounded-none bg-secondary">
           <DropdownMenu.Group>
-            <DropdownMenu.Item
-              on:click={() => setMode("system")}
-              class="cursor-pointer">System</DropdownMenu.Item
+            <DropdownMenu.Item on:click={() => setMode('system')} class="cursor-pointer"
+              >System</DropdownMenu.Item
             >
-            <DropdownMenu.Item
-              on:click={() => setMode("dark")}
-              class="cursor-pointer">Dark</DropdownMenu.Item
+            <DropdownMenu.Item on:click={() => setMode('dark')} class="cursor-pointer"
+              >Dark</DropdownMenu.Item
             >
-            <DropdownMenu.Item
-              on:click={() => setMode("light")}
-              class="cursor-pointer">Light</DropdownMenu.Item
+            <DropdownMenu.Item on:click={() => setMode('light')} class="cursor-pointer"
+              >Light</DropdownMenu.Item
             >
           </DropdownMenu.Group>
         </DropdownMenu.Content>

diff --git a/app/src/lib/components/connect/connection.svelte b/app/src/lib/components/connect/connection.svelte
@@ -40,11 +40,11 @@ const onCopyClick = () => [toggleCopy(), setTimeout(() => toggleCopy(), 1_500)]
 
 // filter items with duplicate names
 let sanitizeWalletInformation =
-  chainWalletsInformation
-    .toReversed()
-    .filter(
-      (v, i, a) => a.findIndex(t => t.name.toLowerCase().startsWith(v.name.toLowerCase())) === i
-    ) ?? chainWalletsInformation
+  chainWalletsInformation.filter(
+    (predicate, index, array) =>
+      array.findIndex(t => t.name.toLowerCase().startsWith(predicate.name.toLowerCase())) ===
+      index,
+  ) ?? chainWalletsInformation
 
 $: walletListToRender =
   connectStatus === "connected" ? chainWalletsInformation : sanitizeWalletInformation
@@ -107,18 +107,17 @@ let metamaskAlertDialogOpen = false
             (connectStatus === "disconnected" || connectStatus == undefined) &&
               "opacity-75 hover:opacity-100 dark:hover:text-black",
             hoverState === "hover" &&
+              connectStatus === "connected" &&
               connectedWalletId === id &&
               "hover:text-destructive border-destructive hover:bg-transparent dark:hover:text-white",
           )}
           on:click={async () => {
-            if (connectStatus === "connected") onDisconnectClick()
-            else {
-              await onConnectClick(walletIdentifier)
-
-              if (walletIdentifier === OFFENDING_WALLET_ID) {
-                metamaskAlertDialogOpen = true
-              }
+            if (walletIdentifier === OFFENDING_WALLET_ID) {
+              metamaskAlertDialogOpen = true
             }
+
+            if (connectStatus === "disconnected") return onConnectClick(walletIdentifier)
+            return onDisconnectClick()
           }}
         >
           <img src={icon} alt={name} class="size-7 mr-3 dark:text-white" />

diff --git a/app/src/lib/components/transfer-details.svelte b/app/src/lib/components/transfer-details.svelte
@@ -43,7 +43,6 @@ let transfers = createQuery({
   }
 })
 
-$: console.log("transfers", $transfers)
 //@ts-ignore
 let processedTransfers = derived(
   [transfers, submittedTransfers],

diff --git a/app/src/lib/wallet/evm/config.ts b/app/src/lib/wallet/evm/config.ts
@@ -63,12 +63,12 @@ export const config = createConfig({
       http(berachainTestnetbArtio.rpcUrls.default.http.at(0), { name: "default Berachain RPC" })
     ]),
     [arbitrumSepolia.id]: fallback([
-      // unstable_connector(injected, {
-      //   retryCount: 3,
-      //   retryDelay: 100,
-      //   key: "unstable_connector-injected-berachain",
-      //   name: "unstable_connector-injected-berachain"
-      // }),
+      unstable_connector(injected, {
+        retryCount: 3,
+        retryDelay: 100,
+        key: "unstable_connector-injected-berachain",
+        name: "unstable_connector-injected-berachain"
+      }),
       http(arbitrumSepolia.rpcUrls.default.http.at(0), { name: "default Arbitrum Sepolia RPC" })
     ]),
     [scrollSepolia.id]: fallback([
@@ -146,14 +146,18 @@ export function createSepoliaStore(
     update,
     subscribe,
     connect: async (walletId: EvmWalletId) => {
-      console.log("[evm] connect --", { walletId })
       await evmConnect(walletId, sepolia.id)
     },
     disconnect: async () => {
-      console.log("[evm] disconnect")
       await Promise.all([
-        await evmDisconnect(),
-        ...config.connectors.map(connector => connector.disconnect())
+        await evmDisconnect().catch(error => {
+          console.error(error)
+        }),
+        ...config.connectors.map(connector =>
+          connector.disconnect().catch(error => {
+            console.error(error)
+          })
+        )
       ])
       await sleep(1_000)
     }

diff --git a/app/src/lib/wallet/evm/index.ts b/app/src/lib/wallet/evm/index.ts
@@ -1,7 +1,7 @@
 export {
   evmConnect,
-  sepoliaStore,
   userAddrEvm,
+  sepoliaStore,
   type EvmWalletId,
   evmWalletsInformation
 } from "./config.ts"