Merge pull request #239 from argentlabs/fix/bug-edge-case

Fix/bug edge case

Author: Cussone

src/helpers/mapModalWallets.ts

@@ -54,7 +54,7 @@ export function getModalWallet(
     id: connector.id,
     icon: isCompound ? connectorOrCompoundConnector.icon : connector.icon,
     connector: connectorOrCompoundConnector,
-    installed: true,
+    installed: false,
     title:
       "title" in connector && isString(connector.title)
         ? connector.title

src/main.ts

@@ -14,7 +14,6 @@ import type {
   StarknetkitConnector,
   ConnectorData,
 } from "./connectors"
-import { DEFAULT_WEBWALLET_URL } from "./connectors/webwallet/constants"
 
 import { ArgentMobileBaseConnector } from "./connectors/argent/argentMobile"
 import { defaultConnectors } from "./helpers/defaultConnectors"
@@ -73,9 +72,6 @@ export const connect = async ({
   skipEmit = false,
   ...restOptions
 }: ConnectOptionsWithConnectors | ConnectOptions): Promise<ModalResult> => {
-  const { webWalletUrl = DEFAULT_WEBWALLET_URL, argentMobileOptions } =
-    restOptions as ConnectOptions
-
   const { connectors } = restOptions as ConnectOptionsWithConnectors
 
   // force null in case it was disconnected from mobile app
@@ -248,6 +244,7 @@ export const connect = async ({
         },
         theme: modalTheme === "system" ? null : (modalTheme ?? null),
         modalWallets,
+        discoveryWallets,
       },
     }) as unknown as ModalInstance // Prevents vite build errors
   })

src/modal/Modal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte"
+  import type { WalletProvider } from "@starknet-io/get-starknet-core"
 
   import {
     type Callback,
@@ -39,6 +40,7 @@
     return layout
   }
 
+  export let discoveryWallets: WalletProvider[]
   export let modalWallets: ModalWallet[] = []
   export let selectedWallet: ModalWallet | null = null
   $: selectedConnector =
@@ -98,7 +100,9 @@
 
     if (modalWallets.length === 1) {
       try {
-        await callback(modalWallets[0])
+        setTimeout(() => {
+          void callback(modalWallets[0])
+        })
       } catch (e) {
         console.error(e)
       }
@@ -174,6 +178,8 @@
           extensionName={selectedWallet?.name.includes("Ready")
             ? "Ready Wallet (formerly Argent)"
             : selectedConnector?.name}
+          extensionId={selectedWallet?.id}
+          discoveryWallets={discoveryWallets}
         />
       {/if}
     </main>

src/modal/layouts/DownloadWallet/DownloadWallet.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { StoreVersion } from "../../../types/modal"
+  import type { WalletProvider } from "@starknet-io/get-starknet-core"
+  import type { StoreVersion } from "../../../types/modal"
 
   import AppleIcon from "../../components/icons/brands/AppleIcon.svelte"
   import PlayStore from "../../components/icons/brands/PlayStore.svelte"
@@ -16,9 +17,14 @@
   import HorizontalLine from "../../components/HorizontalLine.svelte"
 
   export let isArgent: boolean = false
+  export let extensionId: string = ""
   export let extensionName: string = ""
   export let store: StoreVersion | null
   export let storeLink: string | undefined
+  export let discoveryWallets: WalletProvider[]
+
+  const discoveredWallet = discoveryWallets.find((w: WalletProvider) => w.id.toLowerCase() === extensionId.toLowerCase())
+  const discoveredWalletDownloads = Object.entries(discoveredWallet?.downloads || {})
 
   const storeData = {
     // @dev - Be mindful of name property length, it might break the UI
@@ -39,6 +45,7 @@
 
 <section class="flex flex-col flex-grow justify-between">
   <div class="flex flex-col gap-2">
+    <!--  Upon removal of Argent mobile, remove and code else `!isArgent` if case from line 84  -->
     {#if isArgent}
       <ArgentDownloadItem
         title="Ready mobile"
@@ -80,6 +87,16 @@
           {/if}
         </svelte:fragment>
       </ArgentDownloadItem>
+    {:else if !isArgent}
+      <p class="text-[16px] text-primary">
+        <span class="capitalize">{extensionName}</span> is not available on your browser.<br/><br/>
+        {#if discoveredWalletDownloads.length > 0}
+          Try on other browsers:{" "}
+          {#each discoveredWalletDownloads as discovery, i}
+            <Link as="a" className="capitalize" href={discovery[1]}>{discovery[0]}</Link>{i + 1 === discoveredWalletDownloads.length ? "." : ", "}
+          {/each}
+        {/if}
+      </p>
     {/if}
   </div>
 

src/modal/layouts/WalletList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Callback, ModalWallet, Theme } from "../../types/modal"
+  import type { Callback, ModalWallet, Theme } from "../../types/modal"
   import WalletButton from "../components/buttons/WalletButton.svelte"
 
   export let theme: Theme