diff --git a/package.json b/package.json index 82b6f19..887001e 100644 --- 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 index 5c49f37..29c5286 100644 --- 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 (
>( - [], - ); + const [providers, setProviders] = createSignal>([]); const triggerFadeOut = () => setIsVisible(false); @@ -38,11 +37,11 @@ export function WalletProviderSelector() { }); } - function handleOpen(e: CustomEvent>) { + function handleOpen(e: CustomEvent) { batch(() => { setIsVisible(true); setShouldRender(true); - setProviders(e.detail); + setProviders(e.detail.providers); }); } diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 3e9a06a..b7cec73 100644 --- 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; - export function selectWalletProvider(config: Config): Promise { return new Promise((resolve, reject) => { const walletSelectorElement = getWalletProviderSelectorElement(); diff --git a/src/mocks.ts b/src/mocks.ts index 3ffe22c..ae12f2a 100644 --- a/src/mocks.ts +++ b/src/mocks.ts @@ -1,35 +1,26 @@ -import { TWalletProviderOption } from "./lib"; +import { Config } from "./lib"; -export function mockGetAvailableProviders(): Array { - 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", + }, + ], + }; }