Merge branch 'refs/heads/feat/argent-one-button-connector' into beta

Author: Aleksandar Cakalic

src/connectors/argent/argentMobile/index.ts

@@ -1,3 +1,4 @@
+import sn from "@starknet-io/get-starknet-core"
 import { type AccountChangeEventHandler } from "@starknet-io/get-starknet-core"
 import {
   Permission,
@@ -222,7 +223,7 @@ export class ArgentMobileBaseConnector extends Connector {
       url,
       icons,
       rpcUrl: providerRpcUrl,
-      modalWallet: getModalWallet(this),
+      modalWallet: getModalWallet(this, await sn.getDiscoveryWallets()),
     }
 
     if (projectId === DEFAULT_PROJECT_ID) {

src/helpers/mapModalWallets.ts

@@ -9,6 +9,7 @@ import { ARGENT_X_ICON } from "../connectors/injected/constants"
 import type { ModalWallet, StoreVersion } from "../types/modal"
 import { isInArgentMobileAppBrowser } from "../connectors/argent/helpers"
 import { extractConnector, findConnectorById } from "./connector"
+import { getStoreVersionFromBrowser } from "./getStoreVersionFromBrowser"
 
 interface SetConnectorsExpandedParams {
   availableConnectors: (StarknetkitConnector | StarknetkitCompoundConnector)[]
@@ -23,7 +24,13 @@ export function getModalWallet(
     | StarknetkitConnector
     | StarknetkitCompoundConnector,
   discoveryWallets?: WalletProvider[],
+  _storeVersion?: StoreVersion | null,
 ): ModalWallet {
+  let storeVersion = _storeVersion
+  if (!storeVersion) {
+    storeVersion = getStoreVersionFromBrowser()
+  }
+
   const connector = extractConnector(
     connectorOrCompoundConnector,
   ) as StarknetkitConnector
@@ -32,6 +39,11 @@ export function getModalWallet(
     connectorOrCompoundConnector as StarknetkitCompoundConnector
   ).isCompoundConnector
 
+  const downloads = discoveryWallets?.find(
+    (d) =>
+      d.id === (connector.id === "argentMobile" ? "argentX" : connector.id),
+  )?.downloads
+
   return {
     name: isCompoundConnector
       ? connectorOrCompoundConnector.name
@@ -50,7 +62,8 @@ export function getModalWallet(
       "subtitle" in connector && isString(connector.subtitle)
         ? connector.subtitle
         : undefined,
-    downloads: discoveryWallets?.find((d) => d.id === connector.id)?.downloads,
+    download: downloads?.[storeVersion as keyof typeof downloads],
+    downloads: downloads,
   }
 }
 
@@ -92,6 +105,7 @@ export const mapModalWallets = ({
       if (installed) {
         let icon
         let name
+        let download
 
         if (isCompoundConnector) {
           icon = _c.icon
@@ -107,13 +121,18 @@ export const mapModalWallets = ({
           name = installed.name
         }
 
+        const downloads = discoveryWallets.find(
+          (d) => d.id === (installed.id === "argentMobile" ? "argentX" : c?.id),
+        )?.downloads
+
         return {
           name,
           id: installed.id,
           icon,
           connector: _c,
           installed: true,
-          downloads: discoveryWallets.find((d) => d.id === c?.id)?.downloads,
+          download: downloads?.[storeVersion as keyof typeof downloads],
+          downloads: downloads,
         }
       }
 

src/main.ts

@@ -170,7 +170,7 @@ export const connect = async ({
             modal.$set({ selectedWallet: modalWallet })
 
             if (!modalWallet.installed) {
-              modal.$set({ layout: Layout.extensionDownloadList })
+              modal.$set({ layout: Layout.download })
               return
             }
 
@@ -223,7 +223,7 @@ export const connect = async ({
         theme: modalTheme === "system" ? null : (modalTheme ?? null),
         modalWallets,
       },
-    }) as ModalInstance // Prevents vite build errors
+    }) as unknown as ModalInstance // Prevents vite build errors
   })
 }
 

src/modal/Modal.svelte

@@ -9,15 +9,15 @@
   import ArgentMobileQR from "./layouts/argent/ArgentMobileQR.svelte"
   import FailedLogin from "./layouts/FailedLogin.svelte"
   import SuccessfulLogin from "./layouts/SuccessfulLogin.svelte"
-  import ArgentDownload from "./layouts/argent/ArgentDownload/ArgentDownload.svelte"
-  import ExtensionDownloadList from "./layouts/ExtensionDownloadList/ExtensionDownloadList.svelte"
+  import DownloadWallet from "./layouts/DownloadWallet/DownloadWallet.svelte"
   import DynamicIcon from "./components/DynamicIcon.svelte"
 
   import { isInArgentMobileAppBrowser } from "../connectors/argent/helpers"
   import { extractConnector } from "../helpers/connector"
   import { StarknetkitCompoundConnector } from "../connectors"
   import { ArgentX } from "../connectors/injected/argentX"
   import { getModalWallet } from "../helpers/mapModalWallets"
+  import { getStoreVersionFromBrowser } from "../helpers/getStoreVersionFromBrowser"
 
   let nodeRef: HTMLElement | undefined
 
@@ -117,11 +117,14 @@
           handleFallback={() => callback(selectedWallet, true)}
         />
       {:else if layout === Layout.qrCode}
-        <ArgentMobileQR handleInstallClick={() => setLayout(Layout.argentDownload)} />
-      {:else if layout === Layout.extensionDownloadList}
-        <ExtensionDownloadList downloadLinks={selectedWallet?.downloads} extensionName={selectedWallet?.name} />
-      {:else if layout === Layout.argentDownload}
-        <ArgentDownload showInstallExtension={Boolean(selectedWallet?.downloads)} handleExtensionClick={() => setLayout(Layout.extensionDownloadList)} />
+        <ArgentMobileQR handleInstallClick={() => setLayout(Layout.download)} />
+      {:else if layout === Layout.download}
+        <DownloadWallet
+          store={getStoreVersionFromBrowser()}
+          isArgent={Boolean(selectedConnector && (selectedConnector?.id === "argentMobile" || selectedConnector?.id === "argentX"))}
+          storeLink={selectedWallet?.download}
+          extensionName={selectedWallet?.name === "Argent" ? "Argent X" : selectedConnector?.name}
+        />
       {/if}
 
     </main>

src/modal/layouts/DownloadWallet/DownloadWallet.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import { StoreVersion } from "../../../types/modal"
+
+  import AppleIcon from "../../components/icons/brands/AppleIcon.svelte";
+  import PlayStore from "../../components/icons/brands/PlayStore.svelte";
+  import ChromeIcon from "../../components/icons/brands/ChromeIcon.svelte";
+  import EdgeIcon from "../../components/icons/brands/EdgeIcon.svelte"
+  import FirefoxIcon from "../../components/icons/brands/FirefoxIcon.svelte"
+
+  import ArgentMobileGraphic from "./graphics/ArgentMobileGraphic.svelte";
+  import ArgentXGraphic from "./graphics/ArgentXGraphic.svelte";
+  import GeneralizedGraphic from "./graphics/GeneralizedGraphic.svelte"
+
+  import ArgentDownloadItem from "./DownloadWalletItem.svelte";
+  import Link from "../../components/buttons/Link.svelte";
+  import HorizontalLine from "../../components/HorizontalLine.svelte";
+
+  export let isArgent: boolean = false;
+  export let extensionName: string = ""
+  export let store: StoreVersion | null;
+  export let storeLink: string | undefined;
+
+  const storeData = ({ // @dev - Be mindful of name property length, it might break the UI
+    chrome: {
+      name: "Chrome",
+      icon: ChromeIcon,
+    },
+    edge: {
+      name: "Edge",
+      icon: EdgeIcon,
+    },
+    firefox: {
+      name: "Firefox",
+      icon: FirefoxIcon,
+    }
+  })
+</script>
+
+<section class="flex flex-col flex-grow justify-between">
+  <div class="flex flex-col gap-2">
+    {#if isArgent}
+      <ArgentDownloadItem title="Argent mobile" subtitle="Download Argent wallet on your mobile." link="https://www.argent.xyz/app">
+        <svelte:fragment slot="icons">
+          <AppleIcon />
+          <PlayStore />
+        </svelte:fragment>
+
+        <svelte:fragment slot="button">
+          Download
+        </svelte:fragment>
+
+        <svelte:fragment slot="graphic">
+          <ArgentMobileGraphic />
+        </svelte:fragment>
+      </ArgentDownloadItem>
+    {/if}
+
+    {#if store && storeLink}
+      <ArgentDownloadItem title={extensionName} subtitle={`Install ${extensionName} extension.`} link={storeLink}>
+        <svelte:fragment slot="button">
+          <div class="flex gap-1 items-center whitespace-nowrap">
+            <svelte:component this={storeData[store].icon} /> Install for {storeData[store].name}
+          </div>
+        </svelte:fragment>
+
+        <svelte:fragment slot="graphic">
+          {#if isArgent}
+            <ArgentXGraphic />
+          {:else}
+            <GeneralizedGraphic />
+          {/if}
+        </svelte:fragment>
+      </ArgentDownloadItem>
+    {/if}
+  </div>
+
+  <footer class="flex flex-col gap-4">
+    {#if isArgent}
+      <HorizontalLine />
+      <p class="text-[13px] text-secondary">If you want to learn more about argent visit our site:
+        <Link as="a" className="text-brand" href="https://www.argent.xyz/">www.argent.xyz</Link>
+      </p>
+    {/if}
+  </footer>
+</section>

…ArgentDownload/ArgentDownloadItem.svelte …DownloadWallet/DownloadWalletItem.sveltesrc/modal/layouts/argent/ArgentDownload/ArgentDownloadItem.svelte renamed to src/modal/layouts/DownloadWallet/DownloadWalletItem.svelte src/modal/layouts/argent/ArgentDownload/ArgentDownloadItem.svelte renamed to src/modal/layouts/DownloadWallet/DownloadWalletItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Button from "../../../components/buttons/Button.svelte";
+  import Button from "../../components/buttons/Button.svelte";
 
   export let title: string
   export let subtitle: string
@@ -8,12 +8,12 @@
 </script>
 
 <div class="flex flex-row gap-3 px-4 py-3 rounded-xl bg-surface-elevated">
-  <div class="flex flex-col gap-3 flex-grow">
+  <div class="flex flex-col gap-3">
     <div class="flex flex-col gap-1 text-left">
-      <h4 class="text-heading5 text-primary">{title}</h4>
+      <h4 class="text-heading5 text-primary capitalize">{title}</h4>
       <p class="text-l1 text-secondary-web">{subtitle}</p>
     </div>
-    <div class="flex gap-3">
+    <div class="flex gap-3 text-primary">
       <slot name="icons" />
     </div>
     <Button
@@ -25,9 +25,9 @@
           handleClick()
         }
       }}
-      className="bg-button-secondary text-primary hover:bg-button-secondary-hover flex w-[140px] h-[32px] text-b3 rounded-3xl justify-center items-center"
+      className="bg-button-secondary text-primary hover:bg-button-secondary-hover flex w-full h-[32px] text-b3 rounded-3xl justify-center items-center"
     >
-      Download
+      <slot name="button" />
     </Button>
   </div>
   <div class="flex items-center">

…ntDownload/graphics/MobileGraphic.svelte …llet/graphics/ArgentMobileGraphic.sveltesrc/modal/layouts/argent/ArgentDownload/graphics/MobileGraphic.svelte renamed to src/modal/layouts/DownloadWallet/graphics/ArgentMobileGraphic.svelte src/modal/layouts/argent/ArgentDownload/graphics/MobileGraphic.svelte renamed to src/modal/layouts/DownloadWallet/graphics/ArgentMobileGraphic.svelte

@@ -0,0 +1,43 @@
+<svg width="109" height="109" viewBox="0 0 109 109" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <mask id="mask0_697_1274" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="109" height="109">
+    <ellipse cx="54.201" cy="54.2667" rx="53.9" ry="54.2667" fill="#F2F2F2"/>
+  </mask>
+  <g mask="url(#mask0_697_1274)">
+    <path d="M54.4182 108.477C84.171 108.477 108.29 84.1937 108.29 54.2386C108.29 24.2834 84.171 0 54.4182 0C24.6655 0 0.546143 24.2834 0.546143 54.2386C0.546143 84.1937 24.6655 108.477 54.4182 108.477Z" fill="#BFBFBF" fill-opacity="0.2"/>
+    <rect x="16.4709" y="21.7067" width="75.46" height="105.573" rx="4.9" fill="black"/>
+    <ellipse opacity="0.4" cx="54.2011" cy="44.3999" rx="9.31" ry="9.37333" fill="#6D6D6D"/>
+    <rect x="49.791" y="43.4133" width="5.39" height="1.97333" rx="0.986666" fill="#8C8C8C"/>
+    <rect x="56.6511" y="43.4133" width="1.96" height="1.97333" rx="0.98" fill="#8C8C8C"/>
+    <rect x="49.301" y="27.6266" width="10.29" height="1.48" rx="0.74" fill="#595959"/>
+    <rect x="21.3711" y="69.4933" width="65.66" height="11.76" rx="1.96" fill="#3A3A3A"/>
+    <rect x="31.1711" y="73.4133" width="18.62" height="1.47" rx="0.735" fill="#CDCDCD"/>
+    <rect x="31.1711" y="75.8633" width="34.3" height="1.47" rx="0.735" fill="#8C8C8C"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M83.52 75.373C83.52 74.0199 82.4231 72.923 81.07 72.923H78.2117C76.8586 72.923 75.7617 74.0199 75.7617 75.373C75.7617 76.7261 76.8586 77.823 78.2117 77.823H81.07C82.4231 77.823 83.52 76.7261 83.52 75.373Z" fill="#919191"/>
+    <g filter="url(#filter0_d_697_1274)">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M81.0701 77.4147C79.9426 77.4147 79.0285 76.5006 79.0285 75.373C79.0285 74.2454 79.9426 73.3314 81.0701 73.3314C82.1977 73.3314 83.1118 74.2454 83.1118 75.373C83.1118 76.5006 82.1977 77.4147 81.0701 77.4147Z" fill="#CDCDCD"/>
+    </g>
+    <path d="M24.8874 74.0835C24.9425 74.03 25.0173 74 25.0953 74H27.4473C27.5252 74 27.6 74.03 27.6552 74.0835C27.7103 74.137 27.7413 74.2095 27.7413 74.2851V75.1219C27.7413 76.4368 26.5897 76.8719 26.3658 76.9442C26.3046 76.9653 26.2379 76.9653 26.1768 76.9442C25.9528 76.8719 24.8013 76.4368 24.8013 75.1219V74.2851C24.8013 74.2095 24.8322 74.137 24.8874 74.0835Z" fill="#CDCDCD"/>
+    <rect x="21.3711" y="87.1334" width="65.66" height="6.86" rx="1.96" fill="#262626"/>
+    <rect x="30.6812" y="90.0734" width="34.79" height="1.47" rx="0.735" fill="#595959"/>
+    <path d="M81.1511 89.5834L82.1311 90.5634L81.1511 91.5434" stroke="#595959" stroke-width="0.98" stroke-linecap="round" stroke-linejoin="round"/>
+    <rect x="25.7812" y="89.5834" width="2.45" height="2.45" rx="0.49" fill="#595959"/>
+    <rect x="21.3711" y="96.9333" width="65.66" height="6.86" rx="1.96" fill="#262626"/>
+    <rect x="30.6812" y="99.8734" width="34.79" height="1.47" rx="0.735" fill="#595959"/>
+    <path d="M81.1511 99.3834L82.1311 100.363L81.1511 101.343" stroke="#595959" stroke-width="0.98" stroke-linecap="round" stroke-linejoin="round"/>
+    <rect x="25.7812" y="99.3834" width="2.45" height="2.45" rx="0.49" fill="#595959"/>
+    <rect x="21.3711" y="59.6934" width="65.66" height="6.86" rx="1.96" fill="#0F0F0F"/>
+    <rect x="39.0112" y="62.6334" width="30.87" height="1.47" rx="0.735" fill="#595959"/>
+    <rect x="80.1711" y="62.1434" width="2.45" height="2.45" rx="0.49" fill="#595959"/>
+  </g>
+  <defs>
+    <filter id="filter0_d_697_1274" x="78.7019" y="73.3314" width="4.73659" height="4.73665" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="0.326667"/>
+      <feGaussianBlur stdDeviation="0.163333"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_697_1274"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_697_1274" result="shape"/>
+    </filter>
+  </defs>
+</svg>