Merge pull request #10 from argentlabs/develop

fix: avoid tailwind css styles overwrite and enable reconnect logic
argentlabs · Oct 10, 2023 · f2d6d26 · f2d6d26
2 parents 0bd51df + f65d033
commit f2d6d26
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "starknetkit",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "repository": "github:argentlabs/starknetkit",
   "private": false,
   "browser": {

diff --git a/src/connectors/argentMobile/index.ts b/src/connectors/argentMobile/index.ts
@@ -145,6 +145,21 @@ export class ArgentMobileConnector extends Connector {
       url,
     }
 
+    if (projectId === DEFAULT_PROJECT_ID) {
+      console.log("========= NOTICE =========")
+      console.log(
+        "While your application will continue to function, we highly recommended",
+      )
+      console.log("signing up for your own API keys.")
+      console.log(
+        "Go to WalletConnect Cloud (https://cloud.walletconnect.com) and create a new account.",
+      )
+      console.log(
+        "Once your account is created, create a new project and collect the Project ID",
+      )
+      console.log("==========================")
+    }
+
     const _wallet = await getStarknetWindowObject(options)
     this._wallet = _wallet
   }

diff --git a/src/connectors/argentMobile/modal/starknet/adapter.ts b/src/connectors/argentMobile/modal/starknet/adapter.ts
@@ -36,8 +36,8 @@ export class StarknetAdapter
   extends NamespaceAdapter
   implements ConnectedStarknetWindowObject
 {
-  id = "starknetkit"
-  name = "Starknet Kit"
+  id = "argentMobile"
+  name = "Argent Mobile"
   version = "0.1.0"
   icon = ""
   provider: ProviderInterface

diff --git a/src/helpers/lastConnected.ts b/src/helpers/lastConnected.ts
@@ -0,0 +1,7 @@
+export const setStarknetLastConnectedWallet = (id: string) => {
+  localStorage.setItem("starknetLastConnectedWallet", id)
+}
+
+export const removeStarknetLastConnectedWallet = () => {
+  localStorage.removeItem("starknetLastConnectedWallet")
+}
diff --git a/src/main.ts b/src/main.ts
@@ -9,6 +9,10 @@ import { mapModalWallets } from "./helpers/mapModalWallets"
 import { resetWalletConnect } from "./helpers/resetWalletConnect"
 import Modal from "./modal/Modal.svelte"
 import type { ConnectOptions, ModalWallet } from "./types/modal"
+import {
+  removeStarknetLastConnectedWallet,
+  setStarknetLastConnectedWallet,
+} from "./helpers/lastConnected"
 
 export const connect = async ({
   modalMode = "canAsk",
@@ -28,29 +32,29 @@ export const connect = async ({
         })
       : connectors
 
-  const lastWallet = await sn.getLastConnectedWallet()
+  const lastWalletId = localStorage.getItem("starknetLastConnectedWallet")
   if (modalMode === "neverAsk") {
-    const connector = availableConnectors.find((c) => c.id === lastWallet?.id)
+    const connector = availableConnectors.find((c) => c.id === lastWalletId)
     await connector?.connect()
     return connector?.wallet || null
   }
 
   const installedWallets = await sn.getAvailableWallets(restOptions)
 
   // we return/display wallet options once per first-dapp (ever) connect
-  if (modalMode === "canAsk" && lastWallet) {
+  if (modalMode === "canAsk" && lastWalletId) {
     const preAuthorizedWallets = await sn.getPreAuthorizedWallets({
       ...restOptions,
     })
 
     const wallet =
-      preAuthorizedWallets.find((w) => w.id === lastWallet?.id) ??
+      preAuthorizedWallets.find((w) => w.id === lastWalletId) ??
       installedWallets.length === 1
         ? installedWallets[0]
         : undefined
 
     if (wallet) {
-      const connector = availableConnectors.find((c) => c.id === lastWallet?.id)
+      const connector = availableConnectors.find((c) => c.id === lastWalletId)
       await connector?.connect()
       return wallet
     } // otherwise fallback to modal
@@ -70,6 +74,9 @@ export const connect = async ({
         dappName,
         callback: async (value: StarknetWindowObject | null) => {
           try {
+            if (value.id !== "argentWebWallet") {
+              setStarknetLastConnectedWallet(value.id)
+            }
             resolve(value)
           } finally {
             setTimeout(() => modal.$destroy())
@@ -84,5 +91,6 @@ export const connect = async ({
 
 export function disconnect(options: DisconnectOptions = {}): Promise<void> {
   resetWalletConnect()
+  removeStarknetLastConnectedWallet()
   return sn.disconnect(options)
 }
diff --git a/src/modal/ConnectorButton.svelte b/src/modal/ConnectorButton.svelte
@@ -14,11 +14,15 @@
     href={wallet.download}
     target="_blank"
     rel="noopener noreferrer"
-    class="rounded-md focus:outline-none focus:ring-2 focus:ring-neutral-200 dark:focus:ring-neutral-700 transition-colors"
+    class={`starknetkit-rounded-md focus:starknetkit-outline-none  focus:starknetkit-ring-2 
+    focus:starknetkit-ring-neutral-200  dark:focus:starknetkit-ring-neutral-700 starknetkit-transition-colors`}
   >
     <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
     <li
-      class="flex flex-row-reverse justify-between items-center p-3 rounded-md cursor-pointer shadow-list-item dark:shadow-none dark:bg-neutral-800 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700"
+      class={`starknetkit-flex starknetkit-flex-row-reverse starknetkit-justify-between starknetkit-items-center 
+              starknetkit-p-3 starknetkit-rounded-md starknetkit-cursor-pointer starknetkit-shadow-list-item 
+              dark:starknetkit-shadow-none dark:starknetkit-bg-neutral-800 dark:starknetkit-text-white 
+            hover:starknetkit-bg-neutral-100 dark:hover:starknetkit-bg-neutral-700`}
       on:click={() => {
         cb(null)
       }}
@@ -29,16 +33,26 @@
       }}
     >
       <span class="w-8 h-8" />
-      <p class="font-semibold text-base">
+      <p class="starknetkit-font-semibold starknetkit-text-base starknetkit-p">
         Install {wallet.name}
       </p>
-      <img alt={wallet.name} src={wallet.icon} class="w-8 h-8 rounded-full" />
+      <img
+        alt={wallet.name}
+        src={wallet.icon}
+        class="starknetkit-w-8 starknetkit-h-8 starknetkit-rounded-full"
+      />
     </li>
   </a>
 {:else}
   <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <li
-    class="flex flex-row-reverse justify-between items-center p-3 rounded-md cursor-pointer shadow-list-item dark:shadow-none dark:bg-neutral-800 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-200 dark:focus:ring-neutral-700 transition-colors"
+    class={`starknetkit-flex starknetkit-flex-row-reverse starknetkit-justify-between starknetkit-items-center 
+            starknetkit-p-3 starknetkit-rounded-md starknetkit-cursor-pointer starknetkit-shadow-list-item 
+            dark:starknetkit-shadow-none dark:starknetkit-bg-neutral-800 dark:starknetkit-text-white 
+          hover:starknetkit-bg-neutral-100 dark:hover:starknetkit-bg-neutral-700 
+          focus:starknetkit-outline-none focus:starknetkit-ring-2 
+        focus:starknetkit-ring-neutral-200 dark:focus:starknetkit-ring-neutral-700 
+          starknetkit-transition-colors`}
     role="button"
     tabindex="0"
     on:click={async () => {
@@ -51,16 +65,22 @@
     }}
   >
     <span class="w-8 h-8" />
-    <div class="flex flex-col justify-center items-center">
-      <p class="font-semibold text-base">{wallet.title ?? wallet.name}</p>
-      <p class="l2" style="text-align: center;">{wallet.subtitle ?? ""}</p>
+    <div
+      class="starknetkit-flex starknetkit-flex-col starknetkit-justify-center starknetkit-items-center"
+    >
+      <p class="starknetkit-font-semibold starknetkit-text-base starknetkit-p">
+        {wallet.title ?? wallet.name}
+      </p>
+      <p class="starknetkit-l2 starknetkit-p" style="text-align: center;">
+        {wallet.subtitle ?? ""}
+      </p>
     </div>
 
     {#if loadingItem === wallet?.id}
       <div role="status">
         <svg
           aria-hidden="true"
-          class="w-8 h-8 text-neutral-300 animate-spin dark:text-neutral-600 fill-neutral-600 dark:fill-neutral-300"
+          class="starknetkit-w-8 starknetkit-h-8 starknetkit-text-neutral-300 starknetkit-animate-spin dark:starknetkit-text-neutral-600 starknetkit-fill-neutral-600 dark:starknetkit-fill-neutral-300"
           viewBox="0 0 100 101"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
@@ -74,12 +94,16 @@
             fill="currentFill"
           />
         </svg>
-        <span class="sr-only">Loading...</span>
+        <span class="starknetkit-sr-only">Loading...</span>
       </div>
     {:else if isSvg}
       <div style="position: relative;">{@html wallet.icon}</div>
     {:else}
-      <img alt={wallet?.name} src={wallet?.icon} class="w-8 h-8 rounded" />
+      <img
+        alt={wallet?.name}
+        src={wallet?.icon}
+        class="starknetkit-w-8 starknetkit-h-8 starknetkit-rounded"
+      />
     {/if}
   </li>
 {/if}
diff --git a/src/modal/Modal.svelte b/src/modal/Modal.svelte
@@ -46,7 +46,7 @@
       (theme === null &&
         window.matchMedia("(prefers-color-scheme: dark)").matches)
     ) {
-      darkModeControlClass = "dark"
+      darkModeControlClass = "starknetkit-dark"
     } else {
       darkModeControlClass = ""
     }
@@ -74,8 +74,8 @@
 {#if !isInAppBrowser && !emailOnly}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class={"backdrop-blur-sm fixed inset-0 flex items-center justify-center bg-black/25 z-[9999] " +
-      darkModeControlClass}
+    class={`starknetkit-font starknetkit-backdrop-blur-sm starknetkit-fixed starknetkit-inset-0 starknetkit-flex starknetkit-items-center 
+            starknetkit-justify-center starknetkit-bg-black/25 starknetkit-z-[9999] ${darkModeControlClass}`}
     on:click={() => cb(null)}
     on:keyup={(e) => {
       if (e.key === "Escape") {
@@ -86,21 +86,39 @@
     <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
     <main
       role="dialog"
-      class={`bg-slate-50 rounded-3xl shadow-modal dark:shadow-none w-full max-w-[380px] mx-6 p-6 pb-8 text-center z-50 dark:bg-neutral-900 text-neutral-900 dark:text-white`}
+      class={`starknetkit-rounded-3xl starknetkit-shadow-modal dark:shadow-none 
+              starknetkit-w-full starknetkit-max-w-[380px] starknetkit-z-50 
+              starknetkit-mx-6 starknetkit-p-6 starknetkit-pb-8 starknetkit-text-center 
+              starknetkit-bg-slate-50 dark:starknetkit-bg-neutral-900 
+            starknetkit-text-neutral-900 dark:starknetkit-text-white`}
       on:click={(e) => e.stopPropagation()}
       on:keyup={(e) => {
         e.stopPropagation()
       }}
     >
-      <header class="flex items-center justify-center flex-col mb-2 relative">
-        <h2 class="text-sm text-gray-400 font-semibold">Connect to</h2>
+      <header
+        class={`starknetkit-flex starknetkit-items-center starknetkit-justify-center starknetkit-flex-col starknetkit-mb-2 starknetkit-relative`}
+      >
+        <h2
+          class="starknetkit-text-sm starknetkit-text-gray-400 starknetkit-font-semibold"
+        >
+          Connect to
+        </h2>
         <h1
-          class="text-xl font-semibold mb-6 max-w-[240px] overflow-hidden whitespace-nowrap text-ellipsis"
+          class={`starknetkit-text-xl starknetkit-font-semibold starknetkit-mb-6 
+                  starknetkit-max-w-[240px] starknetkit-overflow-hidden 
+                  starknetkit-whitespace-nowrap starknetkit-text-ellipsis`}
         >
           {dappName}
         </h1>
         <span
-          class="absolute top-0 right-0 p-2 cursor-pointer rounded-full bg-neutral-100 text-neutral-400 dark:bg-neutral-800 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-200 dark:focus:ring-neutral-700 transition-colors"
+          class={`starknetkit-absolute starknetkit-top-0 starknetkit-right-0 starknetkit-p-2 starknetkit-cursor-pointer
+                  starknetkit-rounded-full starknetkit-bg-neutral-100 dark:starknetkit-bg-neutral-800
+                  starknetkit-text-neutral-400 dark:starknetkit-text-white
+                  hover:starknetkit-bg-neutral-100 dark:hover:starknetkit-bg-neutral-700
+                  focus:starknetkit-outline-none focus:starknetkit-ring-2
+                focus:starknetkit-ring-neutral-200 dark:focus:starknetkit-ring-neutral-700
+                  starknetkit-transition-colors`}
           role="button"
           tabindex="0"
           aria-label="Close"
@@ -126,7 +144,7 @@
         </span>
       </header>
 
-      <ul class="flex flex-col gap-3">
+      <ul class="starknetkit-flex starknetkit-flex-col starknetkit-gap-3">
         {#each modalWallets as wallet}
           <ConnectorButton {wallet} {loadingItem} {cb} />
         {/each}
@@ -142,7 +160,7 @@
 
   @import url("https://fonts.googleapis.com/css2?family=Barlow:wght@500;600&display=swap");
 
-  * {
+  .starknetkit-font {
     font-family: "Barlow", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
       Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
       sans-serif;
@@ -152,7 +170,7 @@
     font-feature-settings: "kern";
   }
 
-  .l2 {
+  .starknetkit-l2 {
     color: #8c8c8c;
     font-size: 12px;
     font-weight: 500;
@@ -161,7 +179,7 @@
     text-align: left;
   }
 
-  p {
+  .starknetkit-p {
     margin: 0;
   }
 </style>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -2,12 +2,13 @@
 module.exports = {
   content: ["./src/**/*.{svelte,ts}"],
   darkMode: "class",
+  prefix: "starknetkit-",
   theme: {
     extend: {
       boxShadow: {
         "list-item": "0px 2px 12px rgba(0, 0, 0, 0.12)",
-        "modal": "0px 4px 20px rgba(0, 0, 0, 0.5)"
-      }
+        modal: "0px 4px 20px rgba(0, 0, 0, 0.5)",
+      },
     },
   },
   plugins: [],