Wallet Standard support, bug fixes and upgrades

package.json

@@ -57,7 +57,7 @@
         "shx": "^0.3.3",
         "tslib": "^2.3.0",
         "typedoc": "^0.22.10",
-        "typescript": "~4.4.4",
+        "typescript": "~4.7.4",
         "typescript-esm": "^2.0.0"
     },
     "dependencies": {

packages/anchor/package.json

@@ -32,7 +32,7 @@
 		"eventemitter3": "^4.0.7"
 	},
 	"peerDependencies": {
-		"@project-serum/anchor": "^0.24.2"
+		"@coral-xyz/anchor": "^0.28.1-beta.2"
 	},
 	"keywords": [
 		"svelte",

packages/anchor/src/lib/AnchorConnectionProvider.svelte

@@ -2,7 +2,7 @@
 	import { Connection } from '@solana/web3.js';
 	import type { Commitment, ConnectionConfig } from '@solana/web3.js';
 	import { workSpace } from './workSpace';
-	import { web3, Program, AnchorProvider } from '@project-serum/anchor';
+	import { web3, Program, AnchorProvider } from '@coral-xyz/anchor';
 	import { walletStore } from '@svelte-on-solana/wallet-adapter-core';
 
 	export let idl,

packages/anchor/src/lib/workSpace.ts

@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store';
-import type { Program, Provider, web3 } from '@project-serum/anchor';
+import type { Program, Provider, web3 } from '@coral-xyz/anchor';
 import type { Connection, Keypair } from '@solana/web3.js';
 
 export type WorkSpace = {

packages/anchor/svelte.config.js

@@ -10,8 +10,8 @@ const config = {
 		vite: {
 			adapter: adapter(),
 			optimizeDeps: {
-        include: ['@project-serum/anchor', '@solana/web3.js'],
-      },
+				include: ['@coral-xyz/anchor', '@solana/web3.js']
+			},
 			resolve: {
 				alias: {
 					$lib: path.resolve('src/lib/')

packages/core/package.json

@@ -27,10 +27,8 @@
         "postbuild": "echo '{\"type\":\"commonjs\"}' | npx json > lib/cjs/package.json && echo '{\"type\":\"module\"} ' | npx json > lib/esm/package.json"
     },
     "dependencies": {
-        "@types/node-fetch": "^2.6.2",
-        "@solana/wallet-adapter-base": "^0.9.19",
-        "@solana/web3.js": "^1.70.0",
-        "eventemitter3": "^4.0.7",
+        "@solana/wallet-adapter-base": "^0.9.23",
+        "@solana/web3.js": "^1.78.5",
         "svelte": "^3.0.0"
     },
     "keywords": [

packages/core/src/walletStore.ts

@@ -165,7 +165,11 @@ function createWalletStore() {
 
     function updateAdapter(adapter: Adapter | null) {
         removeAdapterEventListeners();
+        if (adapter) addAdapterEventListeners(adapter);
+        update((store: WalletStore) => ({ ...store, adapter }));
+    }
 
+    function updateAdapterFeatures(adapter: Adapter) {
         let signTransaction: SignerWalletAdapter['signTransaction'] | undefined = undefined;
         let signAllTransactions: SignerWalletAdapter['signAllTransactions'] | undefined = undefined;
         let signMessage: MessageSignerWalletAdapter['signMessage'] | undefined = undefined;
@@ -197,11 +201,9 @@ function createWalletStore() {
                     return await adapter.signMessage(message);
                 };
             }
-
-            addAdapterEventListeners(adapter);
         }
 
-        update((store: WalletStore) => ({ ...store, adapter, signTransaction, signAllTransactions, signMessage }));
+        update((store: WalletStore) => ({ ...store, signTransaction, signAllTransactions, signMessage }));
     }
 
     return {
@@ -218,6 +220,7 @@ function createWalletStore() {
         updateWallets: (wallets: Wallet[]) => update((store: WalletStore) => ({ ...store, ...wallets })),
         updateStatus: (walletStatus: WalletStatus) => update((store: WalletStore) => ({ ...store, ...walletStatus })),
         updateWallet: (walletName: WalletName) => updateWalletName(walletName),
+        updateFeatures: (adapter: Adapter) => updateAdapterFeatures(adapter),
     };
 }
 
@@ -263,9 +266,7 @@ export async function initialize({
 
     const walletName = getLocalStorage<WalletName>(localStorageKey);
 
-    if (walletName) {
-        walletStore.updateWallet(walletName);
-    }
+    if (walletName) await select(walletName);
 }
 
 function newError(error: WalletError): WalletError {
@@ -278,6 +279,7 @@ function onConnect() {
     const { adapter } = get(walletStore);
     if (!adapter) return;
 
+    walletStore.updateFeatures(adapter);
     walletStore.updateStatus({
         publicKey: adapter.publicKey,
         connected: adapter.connected,

packages/ui/package.json

@@ -18,6 +18,7 @@
 		"@sveltejs/kit": "next",
 		"@typescript-eslint/eslint-plugin": "^4.31.1",
 		"@typescript-eslint/parser": "^4.31.1",
+		"@wallet-standard/base": "^1.0.1",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-svelte3": "^3.2.1",
@@ -30,6 +31,8 @@
 		"typescript": "^4.4.3"
 	},
 	"dependencies": {
+		"@solana/wallet-standard-wallet-adapter-base": "^1.1.1",
+		"@wallet-standard/app": "^1.0.1",
 		"eventemitter3": "^4.0.7"
 	},
 	"keywords": [

packages/ui/src/lib/WalletModal.svelte

@@ -3,14 +3,13 @@
     import { walletStore } from '@svelte-on-solana/wallet-adapter-core';
     import { createEventDispatcher } from 'svelte';
     import WalletButton from './WalletButton.svelte';
+    import { clickOutside } from './clickOutside';
     import type { WalletName } from '@solana/wallet-adapter-base';
 
     export let maxNumberOfWallets;
 
     let showMoreOptions = false,
-        showExtensionsAvailables = false,
-        backdrop: HTMLDivElement,
-        container: HTMLDivElement;
+        showExtensionsAvailables = false;
 
     $: numberOfWalletsShown = showMoreOptions
         ? $walletStore.wallets.length
@@ -34,10 +33,8 @@
         showExtensionsAvailables = !showExtensionsAvailables;
     }
 
-    function closeModal(e) {
-        if (e.target === backdrop || e.target === container) {
-            dispatch('close');
-        }
+    function closeModal() {
+        dispatch('close');
     }
 
     function handleKeyup(e) {
@@ -65,11 +62,9 @@
     aria-modal="true"
     class="wallet-adapter-modal wallet-adapter-modal-fade-in"
     role="dialog"
-    bind:this={backdrop}
-    on:click={e => closeModal(e)}
 >
-    <div class="wallet-adapter-modal-container" bind:this={container}>
-        <div class="wallet-adapter-modal-wrapper">
+    <div class="wallet-adapter-modal-container">
+        <div class="wallet-adapter-modal-wrapper" use:clickOutside={closeModal}>
             <h1 class="wallet-adapter-modal-title">
                 {walletsAvailable
                     ? 'Connect a wallet on Solana to continue'

packages/ui/src/lib/WalletMultiButton.svelte

@@ -3,6 +3,7 @@
     import WalletButton from './WalletButton.svelte';
     import WalletConnectButton from './WalletConnectButton.svelte';
     import WalletModal from './WalletModal.svelte';
+    import { clickOutside } from './clickOutside';
     import './styles.css';
 
     export let maxNumberOfWallets = 3;
@@ -31,6 +32,12 @@
     };
     const closeModal = () => (modalVisible = false);
 
+    function handleKeyup(e) {
+        if (e.key == 'Escape') {
+            closeDropdown();
+        }
+    }
+
     function showAddressContent(store) {
         const base58 = store.publicKey?.toBase58();
         if (!store.wallet || !base58) return null;
@@ -47,39 +54,10 @@
         closeDropdown();
         await disconnect();
     }
-
-    interface CallbackType {
-        (arg?: string): void;
-    }
-
-    function clickOutside(
-        node: HTMLElement,
-        callbackFunction: CallbackType,
-    ): unknown {
-        function onClick(event: MouseEvent) {
-            if (
-                node &&
-                event.target instanceof Node &&
-                !node.contains(event.target) &&
-                !event.defaultPrevented
-            ) {
-                callbackFunction();
-            }
-        }
-
-        document.body.addEventListener('click', onClick, true);
-
-        return {
-            update(newCallbackFunction: CallbackType) {
-                callbackFunction = newCallbackFunction;
-            },
-            destroy() {
-                document.body.removeEventListener('click', onClick, true);
-            },
-        };
-    }
 </script>
 
+<svelte:window on:keyup={handleKeyup} />
+
 {#if !wallet}
     <WalletButton class="wallet-adapter-button-trigger" on:click={openModal}>
         <slot>Select Wallet</slot>
@@ -108,26 +86,20 @@
                     }
                 }}
             >
-                <li
-                    on:click={copyAddress}
-                    class="wallet-adapter-dropdown-list-item"
-                    role="menuitem"
-                >
-                    {copied ? 'Copied' : 'Copy address'}
+                <li role="menuitem">
+                    <button class="wallet-adapter-dropdown-list-item" on:click={copyAddress}>
+                        {copied ? 'Copied' : 'Copy address'}
+                    </button>
                 </li>
-                <li
-                    on:click={openModal}
-                    class="wallet-adapter-dropdown-list-item"
-                    role="menuitem"
-                >
-                    Connect a different wallet
+                <li role="menuitem">
+                    <button class="wallet-adapter-dropdown-list-item" on:click={openModal}>
+                        Connect a different wallet
+                    </button>
                 </li>
-                <li
-                    on:click={disconnectWallet}
-                    class="wallet-adapter-dropdown-list-item"
-                    role="menuitem"
-                >
-                    Disconnect
+                <li role="menuitem">
+                    <button class="wallet-adapter-dropdown-list-item" on:click={disconnectWallet}>
+                        Disconnect
+                    </button>
                 </li>
             </ul>
         {/if}

packages/ui/src/lib/WalletProvider.svelte

@@ -1,14 +1,44 @@
 <script lang="ts">
-	import type { Adapter } from '@solana/wallet-adapter-base';
+	import { onMount } from 'svelte';
+	import { isWalletAdapterCompatibleStandardWallet } from '@solana/wallet-adapter-base';
+	import { StandardWalletAdapter } from '@solana/wallet-standard-wallet-adapter-base';
+	import { getWallets } from '@wallet-standard/app';
 	import { initialize } from '@svelte-on-solana/wallet-adapter-core';
-	import type { WalletError } from '@solana/wallet-adapter-base';
+	import type { Adapter, WalletError } from '@solana/wallet-adapter-base';
 
 	export let localStorageKey: string,
-		wallets: Adapter[],
+		wallets: Adapter[] = [],
 		autoConnect = false,
 		onError = (error: WalletError) => console.error(error);
 
-	$: wallets && initialize({ wallets, autoConnect, localStorageKey, onError });
+	$: wallets.length && updateWallets();
+
+	function updateWallets() {
+		// get installed wallets compatible with the standard
+		const { get } = getWallets();
+		const standardWallets = get()
+			.filter(isWalletAdapterCompatibleStandardWallet)
+			.map((wallet) => new StandardWalletAdapter({ wallet }));
+
+		// filter out non standard wallets
+		const nonStandardWallets = wallets.filter(
+			(wallet) => !standardWallets.some(({ name }) => wallet.name === name)
+		);
+
+		// merge and initialize wallets store
+		const allWallets = [...standardWallets, ...nonStandardWallets];
+		initialize({ wallets: allWallets, autoConnect, localStorageKey, onError });
+	}
+
+	onMount(() => {
+		const { on } = getWallets();
+		const removeRegisterListener = on('register', updateWallets);
+		const removeUnregisterListener = on('unregister', updateWallets);
+		return () => {
+			removeRegisterListener();
+			removeUnregisterListener();
+		};
+	});
 </script>
 
 <svelte:head>

packages/ui/src/lib/clickOutside.ts

@@ -0,0 +1,27 @@
+interface CallbackType {
+    (arg?: string): void;
+}
+
+export function clickOutside(node: HTMLElement, callbackFunction: CallbackType): unknown {
+    function onClick(event: MouseEvent) {
+        if (
+            node &&
+            event.target instanceof Node &&
+            !node.contains(event.target) &&
+            !event.defaultPrevented
+        ) {
+            callbackFunction();
+        }
+    }
+
+    document.body.addEventListener('click', onClick, true);
+
+    return {
+        update(newCallbackFunction: CallbackType) {
+            callbackFunction = newCallbackFunction;
+        },
+        destroy() {
+            document.body.removeEventListener('click', onClick, true);
+        }
+    };
+}

packages/ui/src/lib/styles.css

@@ -105,6 +105,7 @@
     font-weight: 600;
     height: 37px;
     color: #fff;
+    background-color: transparent;
 }
 
 .wallet-adapter-dropdown-list-item:not([disabled]):hover {