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",
+ },
+ ],
+ };
}