Use SupportedWallet type from core

secretkeylabs · Mar 26, 2024 · 8f4c0d5 · 8f4c0d5
1 parent 3b3cd71
commit 8f4c0d5
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -11,6 +11,9 @@
     "build": "tsc && vite build",
     "build-app": "tsc && vite build --config vite.config.app.ts"
   },
+  "dependencies": {
+    "@sats-connect/core": "*"
+  },
   "devDependencies": {
     "@ark-ui/solid": "2.2.0",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",

diff --git a/src/lib/WalletProviderOption.tsx b/src/lib/WalletProviderOption.tsx
@@ -1,36 +1,39 @@
-import { createSignal } from "solid-js";
+import { SupportedWallet } from "@sats-connect/core";
+import { createMemo, createSignal } from "solid-js";
 
-import { TWalletProviderOption } from "./utils";
-
-interface Props extends TWalletProviderOption {
+interface Props extends SupportedWallet {
   onProviderSelected: (walletId: string) => void;
 }
 
 export function WalletProviderOption(props: Props) {
   function handleWalletSelected() {
-    if (props.installPrompt) {
-      window.open(props.installPrompt.url, "_blank");
+    if (!props.isInstalled) {
+      window.open(props.googlePlayStoreUrl, "_blank");
       return;
     }
 
     props.onProviderSelected(props.id);
   }
 
+  const role = createMemo(() => (props.isInstalled ? "button" : "link"));
+
   function handleKeyDown(e: KeyboardEvent) {
-    if (props.installPrompt) {
+    if (role() === "link") {
       // Handle required ARIA keyboard events for links
       // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role
       if (e.key === "Enter") {
         handleWalletSelected();
-        return;
       }
       return;
     }
 
-    // Handle required ARIA keyboard events for buttons
-    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
-    if (e.key === "Enter" || e.key === " ") {
-      handleWalletSelected();
+    if (role() === "button") {
+      // Handle required ARIA keyboard events for buttons
+      // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
+      if (e.key === "Enter" || e.key === " ") {
+        handleWalletSelected();
+      }
+      return;
     }
   }
 
@@ -44,7 +47,7 @@ export function WalletProviderOption(props: Props) {
 
   return (
     <div
-      role={props.installPrompt ? "link" : "button"}
+      role={role()}
       tabIndex={0}
       style={{
         display: "flex",

diff --git a/src/lib/WalletProviderSelector.tsx b/src/lib/WalletProviderSelector.tsx
@@ -1,18 +1,17 @@
 import { Dialog } from "@ark-ui/solid";
+import { SupportedWallet } from "@sats-connect/core";
 import { For, Show, batch, createSignal, onCleanup, onMount } from "solid-js";
 
 import { CssReset } from "./CssReset";
 import { WalletProviderOption } from "./WalletProviderOption";
 import { XCircle } from "./XCircle";
 import { cancel, close, open, select } from "./constants";
-import { TWalletProviderOption } from "./utils";
+import { Config } from "./utils";
 
 export function WalletProviderSelector() {
   const [isVisible, setIsVisible] = createSignal(false);
   const [shouldRender, setShouldRender] = createSignal(false);
-  const [providers, setProviders] = createSignal<Array<TWalletProviderOption>>(
-    [],
-  );
+  const [providers, setProviders] = createSignal<Array<SupportedWallet>>([]);
 
   const triggerFadeOut = () => setIsVisible(false);
 
@@ -38,11 +37,11 @@ export function WalletProviderSelector() {
     });
   }
 
-  function handleOpen(e: CustomEvent<Array<TWalletProviderOption>>) {
+  function handleOpen(e: CustomEvent<Config>) {
     batch(() => {
       setIsVisible(true);
       setShouldRender(true);
-      setProviders(e.detail);
+      setProviders(e.detail.providers);
     });
   }
 

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -1,3 +1,4 @@
+import { SupportedWallet } from "@sats-connect/core";
 import { customElement } from "solid-element";
 
 import { WalletProviderSelector } from "./WalletProviderSelector";
@@ -37,15 +38,10 @@ export interface InstallPrompt {
   url: string;
 }
 
-export interface TWalletProviderOption {
-  name: string;
-  id: string;
-  icon: string;
-  installPrompt?: InstallPrompt;
+export interface Config {
+  providers: SupportedWallet[];
 }
 
-export type Config = Array<TWalletProviderOption>;
-
 export function selectWalletProvider(config: Config): Promise<string> {
   return new Promise((resolve, reject) => {
     const walletSelectorElement = getWalletProviderSelectorElement();

diff --git a/src/mocks.ts b/src/mocks.ts
@@ -1,35 +1,26 @@
-import { TWalletProviderOption } from "./lib";
+import { Config } from "./lib";
 
-export function mockGetAvailableProviders(): Array<TWalletProviderOption> {
-  return [
-    {
-      name: "Walet (uninstalled)",
-      id: "xverse",
-      icon: "https://picsum.photos/100",
-      installPrompt: { url: "https://xverse.app" },
-    },
-    { name: "Wallet 2", id: "Wallet_2", icon: "https://picsum.photos/101" },
-    { name: "Wallet 3", id: "Wallet_3", icon: "https://picsum.photos/102" },
-    { name: "Wallet 4", id: "Wallet_4", icon: "https://picsum.photos/103" },
-    {
-      name: "Wallet 5 with super long name",
-      id: "Wallet_5",
-      icon: "https://picsum.photos/104",
-    },
-    { name: "Wallet 6", id: "Wallet_6", icon: "https://picsum.photos/105" },
-    { name: "Wallet 7", id: "Wallet_7", icon: "https://picsum.photos/106" },
-    { name: "Wallet 8", id: "Wallet_8", icon: "https://picsum.photos/107" },
-    { name: "Wallet 9", id: "Wallet_9", icon: "https://picsum.photos/108" },
-    { name: "Wallet 10", id: "Wallet_10", icon: "https://picsum.photos/109" },
-    { name: "Wallet 11", id: "Wallet_11", icon: "https://picsum.photos/110" },
-    { name: "Wallet 12", id: "Wallet_12", icon: "https://picsum.photos/111" },
-    { name: "Wallet 13", id: "Wallet_13", icon: "https://picsum.photos/112" },
-    { name: "Wallet 14", id: "Wallet_14", icon: "https://picsum.photos/113" },
-    { name: "Wallet 15", id: "Wallet_15", icon: "https://picsum.photos/114" },
-    { name: "Wallet 16", id: "Wallet_16", icon: "https://picsum.photos/115" },
-    { name: "Wallet 17", id: "Wallet_17", icon: "https://picsum.photos/116" },
-    { name: "Wallet 18", id: "Wallet_18", icon: "https://picsum.photos/117" },
-    { name: "Wallet 19", id: "Wallet_19", icon: "https://picsum.photos/118" },
-    { name: "Wallet 20", id: "Wallet_20", icon: "https://picsum.photos/119" },
-  ];
+export function mockGetAvailableProviders(): Config {
+  return {
+    providers: [
+      {
+        name: "Wallet (uninstalled)",
+        id: "xverse",
+        icon: "https://picsum.photos/100",
+        isInstalled: false,
+        chromeWebStoreUrl: "https://example.com/?chrome-store-xverse-wallet",
+        googlePlayStoreUrl: "https://example.com/?google-play-xverse-wallet",
+        iOSAppStoreUrl: "https://example.com/?ios-xverse-wallet",
+      },
+      {
+        name: "Wallet (installed)",
+        id: "xverse",
+        icon: "https://picsum.photos/101",
+        isInstalled: true,
+        chromeWebStoreUrl: "https://example.com/?chrome-store-xverse-wallet",
+        googlePlayStoreUrl: "https://example.com/?google-play-xverse-wallet",
+        iOSAppStoreUrl: "https://example.com/?ios-xverse-wallet",
+      },
+    ],
+  };
 }