feat: add fallback link for uninstalled wallet (#144)

.changeset/tasty-scissors-suffer.md

@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-wallet-connect": patch
+---
+
+add fallback link

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}

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 = {

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)}
             />
           ))}