From e05222fdf797f075b4675badedd74008b25fa060 Mon Sep 17 00:00:00 2001
From: David Totraev <totraev@gmail.com>
Date: Thu, 19 Dec 2024 09:18:39 +0500
Subject: [PATCH] feat: add fallback link for uninstalled wallet

---
 .changeset/tasty-scissors-suffer.md      |  5 +++++
 package-lock.json                        | 13 ++++++-------
 src/components/WalletButton/index.tsx    | 19 +++++++++++++++----
 src/components/Wallets/index.stories.tsx | 20 ++++++++++++++++++++
 src/components/Wallets/index.tsx         |  3 +++
 5 files changed, 49 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/tasty-scissors-suffer.md

diff --git a/.changeset/tasty-scissors-suffer.md b/.changeset/tasty-scissors-suffer.md
new file mode 100644
index 0000000..7d02702
--- /dev/null
+++ b/.changeset/tasty-scissors-suffer.md
@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-wallet-connect": patch
+---
+
+add fallback link
diff --git a/package-lock.json b/package-lock.json
index 5323822..4366598 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,19 +1,19 @@
 {
   "name": "@babylonlabs-io/bbn-wallet-connect",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@babylonlabs-io/bbn-wallet-connect",
-      "version": "0.1.20",
+      "version": "0.1.22",
       "dependencies": {
         "@bitcoin-js/tiny-secp256k1-asmjs": "^2.2.3",
         "@cosmjs/stargate": "^0.32.4",
         "@keplr-wallet/types": "^0.12.156",
         "@keystonehq/animated-qr": "^0.8.6",
         "@keystonehq/keystone-sdk": "^0.4.1",
-        "@keystonehq/sdk": "^0.22.0",
+        "@keystonehq/sdk": "0.22.1",
         "buffer": "^6.0.3",
         "nanoevents": "^9.1.0"
       },
@@ -2342,10 +2342,9 @@
       }
     },
     "node_modules/@keystonehq/sdk": {
-      "version": "0.22.0",
-      "resolved": "https://registry.npmjs.org/@keystonehq/sdk/-/sdk-0.22.0.tgz",
-      "integrity": "sha512-hoZwhDxKgno6rzR58M4SeoVRuK1lMbHuCbeCUUpiQKEHh+T2NSThtsxLvQVa3lXH80B7Aoc5nJ7suAEIHmnmsg==",
-      "license": "ISC",
+      "version": "0.22.1",
+      "resolved": "https://registry.npmjs.org/@keystonehq/sdk/-/sdk-0.22.1.tgz",
+      "integrity": "sha512-yBX2L3ieoZ1llj8Ocsiu+doDP+XtoI8oUPkv50oP3aBnzqM0IBsL46upWIVUWt5DucHAdGLGcVx9FxR9sQYZBw==",
       "dependencies": {
         "@ngraveio/bc-ur": "^1.0.0",
         "@yudiel/react-qr-scanner": "2.0.0-beta.3",
diff --git a/src/components/WalletButton/index.tsx b/src/components/WalletButton/index.tsx
index 5b01a1a..dafde7f 100644
--- a/src/components/WalletButton/index.tsx
+++ b/src/components/WalletButton/index.tsx
@@ -7,20 +7,31 @@ interface WalletButtonProps {
   disabled?: boolean;
   name: string;
   label?: string;
+  fallbackLink?: string;
+  installed?: boolean;
   onClick?: () => void;
 }
 
-export function WalletButton({ className, disabled = false, name, logo, label, onClick }: WalletButtonProps) {
+export function WalletButton({
+  className,
+  disabled = false,
+  name,
+  logo,
+  label,
+  fallbackLink,
+  installed = true,
+  onClick,
+}: WalletButtonProps) {
+  const btnProps = installed ? { as: "button", disabled, onClick } : { as: "a", href: fallbackLink, target: "_blank" };
+
   return (
     <Text
-      disabled={disabled}
-      as="button"
       className={twMerge(
         "b-flex b-h-14 b-w-full b-cursor-pointer b-items-center b-gap-2.5 b-rounded b-border b-border-primary-main/30 b-px-2",
         disabled ? "b-cursor-default" : "b-cursor-pointer",
         className,
       )}
-      onClick={onClick}
+      {...btnProps}
     >
       <Avatar variant="rounded" className="b-shrink-0" alt={name} url={logo} />
       {name}
diff --git a/src/components/Wallets/index.stories.tsx b/src/components/Wallets/index.stories.tsx
index 22ac99e..a4e64d1 100644
--- a/src/components/Wallets/index.stories.tsx
+++ b/src/components/Wallets/index.stories.tsx
@@ -46,6 +46,26 @@ const wallets: IWallet[] = [
     account: null,
     label: "Hardware wallet",
   },
+  {
+    id: "keystone",
+    name: "Keysone",
+    installed: true,
+    icon: "/images/wallets/keystone.svg",
+    docs: "",
+    provider: null,
+    account: null,
+    label: "Hardware wallet",
+  },
+  {
+    id: "tomo",
+    name: "Tomo wallet",
+    installed: false,
+    icon: "/images/wallets/tomo.png",
+    docs: "https://docs.tomo.inc/",
+    provider: null,
+    account: null,
+    label: "",
+  },
 ];
 
 export const Default: Story = {
diff --git a/src/components/Wallets/index.tsx b/src/components/Wallets/index.tsx
index 1d9546a..f093464 100644
--- a/src/components/Wallets/index.tsx
+++ b/src/components/Wallets/index.tsx
@@ -35,6 +35,7 @@ export const Wallets = memo(({ chain, className, append, onClose, onBack, onSele
         <div className={twMerge("b-grid b-gap-6", countOfVisibleWallets > 1 ? "b-grid-cols-2" : "b-grid-cols-1")}>
           {injectableWallet && (
             <WalletButton
+              installed
               name={injectableWallet.name}
               logo={injectableWallet.icon}
               label={injectableWallet.label}
@@ -44,10 +45,12 @@ export const Wallets = memo(({ chain, className, append, onClose, onBack, onSele
 
           {wallets.map((wallet) => (
             <WalletButton
+              installed={wallet.installed}
               key={wallet.id}
               name={wallet.name}
               logo={wallet.icon}
               label={wallet.label}
+              fallbackLink={wallet.docs}
               onClick={() => onSelectWallet?.(chain, wallet)}
             />
           ))}