feat: allow customize wallets (#97)

* feat: allow adding external/custom wallets

* add external enkrypt wallet

* fix reject wallet connection behaviour

* add error log

Author: sinzii

.github/workflows/demo-build-tests.yml

@@ -0,0 +1,28 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Demo Build Tests
+
+on:
+  push:
+  workflow_dispatch:
+  merge_group:
+
+jobs:
+  unit-tests:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'yarn'
+    - run: yarn install --immutable
+    - run: yarn workspace demo build
+    - run: yarn workspace demo-subconnect build

README.md

@@ -194,7 +194,6 @@ const { connectedAccount, signer } = ... // from subconnect or talisman-connect
 - `useWatchContractQuery`: Similar to `useContractQuery` with ability to watch for changes
 - `useDeployer`: Create & manage `ContractDeployer` instance given its unique id from the registered contract deployments
 - `useDeployerTx`: Similar to `useContractTx`, this hook provides functionality to sign and send transactions to deploy a smart contract, and tracks the progress of the transaction.
-- `useWallets`: Access available/installed extension wallets, helpful when building a wallet connector
 - `useWatchContractEvent`: Help watch for a specific contract event and perform a specific action
 - `usePSP22Balance`: Fetch balance of an address from a PSP22 contract with ability to watch for balance changing
 
@@ -215,6 +214,7 @@ const {
   connectedWallet, // connected wallet
   connectWallet, // func to connect to a wallet given its id
   disconnect, // func to sign out and disconnect from the wallet
+  wallets, // available wallets
   ...
 } = useTypink();
 // ...

examples/demo/src/components/dialog/WalletSelection.tsx

@@ -12,7 +12,7 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 import { ThemingProps } from '@chakra-ui/system';
-import { useTypink, useWallets, Wallet } from 'typink';
+import { useTypink, Wallet } from 'typink';
 
 interface WalletButtonProps {
   walletInfo: Wallet;
@@ -63,7 +63,7 @@ export default function WalletSelection({
   buttonProps,
 }: WalletSelectionProps) {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { wallets } = useWallets();
+  const { wallets } = useTypink();
 
   return (
     <>

examples/demo/src/main.tsx

@@ -5,14 +5,31 @@ import 'react-toastify/dist/ReactToastify.css';
 import App from '@/App';
 import { theme } from '@/theme';
 import { deployments } from '@/contracts/deployments';
-import { alephZeroTestnet, development, popTestnet, TypinkProvider } from 'typink';
+import {
+  alephZeroTestnet,
+  development,
+  ExtensionWallet,
+  polkadotjs,
+  popTestnet,
+  subwallet,
+  talisman,
+  TypinkProvider,
+} from 'typink';
 
 const DEFAULT_CALLER = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY'; // Alice
 const SUPPORTED_NETWORK = [popTestnet, alephZeroTestnet];
 if (process.env.NODE_ENV === 'development') {
   SUPPORTED_NETWORK.push(development);
 }
 
+const enkrypt = new ExtensionWallet({
+  name: 'Enkrypt',
+  id: 'enkrypt',
+  logo: 'https://raw.githubusercontent.com/enkryptcom/enKrypt/refs/heads/main/packages/extension/public/assets/img/icons/icon192.png',
+  installUrl: 'https://www.enkrypt.com',
+  websiteUrl: 'https://www.enkrypt.com',
+});
+
 function Root() {
   return (
     <ChakraProvider theme={theme}>
@@ -21,7 +38,8 @@ function Root() {
         defaultCaller={DEFAULT_CALLER}
         supportedNetworks={SUPPORTED_NETWORK}
         defaultNetworkId={popTestnet.id}
-        cacheMetadata={true}>
+        cacheMetadata={true}
+        wallets={[subwallet, talisman, polkadotjs, enkrypt]}>
         <App />
         <ToastContainer
           position='top-right'

packages/typink/src/hooks/index.ts

@@ -8,6 +8,5 @@ export * from './useContractTx.js';
 export * from './useDeployer.js';
 export * from './useDeployerTx.js';
 export * from './useRawContract.js';
-export * from './useWallets.js';
 export * from './useWatchContractEvent.js';
 export * from './useTypink.js';

packages/typink/src/hooks/useWallets.ts

@@ -65,9 +65,10 @@ export function TypinkProvider({
   supportedNetworks,
   signer,
   connectedAccount,
+  wallets,
 }: TypinkProviderProps) {
   return (
-    <WalletSetupProvider signer={signer} connectedAccount={connectedAccount}>
+    <WalletSetupProvider signer={signer} connectedAccount={connectedAccount} wallets={wallets}>
       <ClientProvider
         defaultNetworkId={defaultNetworkId}
         cacheMetadata={cacheMetadata}

packages/typink/src/providers/TypinkProvider.tsx

@@ -1,8 +1,8 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { useLocalStorage } from 'react-use';
-import { useIsFirstRender, useWallets } from '../hooks/index.js';
+import { useDeepDeps, useIsFirstRender } from '../hooks/index.js';
 import { InjectedAccount, InjectedSigner } from '../types.js';
-import { Wallet } from '../wallets/index.js';
+import { polkadotjs, subwallet, talisman, Wallet } from '../wallets/index.js';
 import { assert } from 'dedot/utils';
 import { noop } from '../utils/index.js';
 import { WalletProvider, WalletProviderProps } from './WalletProvider.js';
@@ -14,6 +14,7 @@ export interface WalletSetupContextProps {
   disconnect: () => void;
   connectedWalletId?: string;
   connectedWallet?: Wallet;
+  wallets: Wallet[]; // custom available wallets
 
   setConnectedAccount: (account: InjectedAccount) => void;
   accounts: InjectedAccount[];
@@ -24,13 +25,18 @@ export const WalletSetupContext = createContext<WalletSetupContextProps>({
   connectWallet: noop,
   disconnect: noop,
   setConnectedAccount: noop,
+  wallets: [],
 });
 
 export const useWalletSetup = () => {
   return useContext(WalletSetupContext);
 };
 
-export interface WalletSetupProviderProps extends WalletProviderProps {}
+export interface WalletSetupProviderProps extends WalletProviderProps {
+  wallets?: Wallet[];
+}
+
+const DEFAULT_WALLETS: Wallet[] = [subwallet, talisman, polkadotjs];
 
 /**
  * WalletSetupProvider is a component that manages wallet setup and connection state.
@@ -45,8 +51,9 @@ export function WalletSetupProvider({
   children,
   signer: initialSigner,
   connectedAccount: initialConnectedAccount,
+  wallets: initialWallets,
 }: WalletSetupProviderProps) {
-  const { wallets } = useWallets();
+  const wallets = useMemo(() => initialWallets || DEFAULT_WALLETS, useDeepDeps([initialWallets]));
   const [accounts, setAccounts] = useState<InjectedAccount[]>([]);
 
   const [connectedWalletId, setConnectedWalletId, removeConnectedWalletId] =
@@ -81,28 +88,41 @@ export function WalletSetupProvider({
     let unsub: () => void;
 
     (async () => {
-      const targetWallet: Wallet = getWallet(connectedWalletId);
+      try {
+        const targetWallet: Wallet = getWallet(connectedWalletId);
 
-      assert(targetWallet, `Wallet Id Not Found ${connectedWalletId}`);
+        assert(targetWallet, `Wallet Id Not Found ${connectedWalletId}`);
 
-      await targetWallet.waitUntilReady();
-      const injectedProvider = targetWallet.injectedProvider;
+        await targetWallet.waitUntilReady();
+        const injectedProvider = targetWallet.injectedProvider;
 
-      assert(injectedProvider?.enable, `Invalid Wallet: ${targetWallet.id}`);
+        assert(injectedProvider?.enable, `Invalid Wallet: ${targetWallet.id}`);
 
-      const injected = await injectedProvider.enable('Sample Dapp');
+        // TODO customize dapp name?
+        const injected = await injectedProvider.enable('Sample Dapp');
+        const initialConnectedAccounts = await injected.accounts.get();
 
-      // reset accounts on wallet changing
-      setAccounts([]);
+        // TODO keep track of wallet decision?
+        if (initialConnectedAccounts.length === 0) {
+          removeConnectedWalletId();
+          return;
+        }
 
-      // only remove the connected account if we're switching to a different wallet
-      if (!isFirstRender) {
-        removeConnectedAccount();
-      }
+        // reset accounts on wallet changing
+        setAccounts([]);
 
-      unsub = injected.accounts.subscribe(setAccounts);
+        // only remove the connected account if we're switching to a different wallet
+        if (!isFirstRender) {
+          removeConnectedAccount();
+        }
 
-      setSigner(injected.signer as any);
+        unsub = injected.accounts.subscribe(setAccounts);
+
+        setSigner(injected.signer as any);
+      } catch (e) {
+        console.error('Error while connecting wallet:', e);
+        removeConnectedWalletId();
+      }
     })();
 
     return () => unsub && unsub();
@@ -128,6 +148,7 @@ export function WalletSetupProvider({
         connectedWalletId,
         connectedWallet,
         setConnectedAccount,
+        wallets,
       }}>
       <WalletProvider signer={signer} connectedAccount={connectedAccount}>
         {children}

packages/typink/src/providers/WalletSetupProvider.tsx

@@ -1,2 +1,28 @@
+import { ExtensionWallet } from './ExtensionWallet.js';
+
 export * from './Wallet.js';
 export * from './ExtensionWallet.js';
+
+export const subwallet = new ExtensionWallet({
+  name: 'SubWallet',
+  id: 'subwallet-js',
+  logo: 'https://raw.githubusercontent.com/dedotdev/typink/refs/heads/main/assets/wallets/subwallet-logo.svg',
+  installUrl: 'https://www.subwallet.app/download.html',
+  websiteUrl: 'https://www.subwallet.app',
+});
+
+export const talisman = new ExtensionWallet({
+  name: 'Talisman',
+  id: 'talisman',
+  logo: 'https://raw.githubusercontent.com/dedotdev/typink/refs/heads/main/assets/wallets/talisman-logo.svg',
+  installUrl: 'https://talisman.xyz/download',
+  websiteUrl: 'https://talisman.xyz',
+});
+
+export const polkadotjs = new ExtensionWallet({
+  name: 'Polkadot{.js}',
+  id: 'polkadot-js',
+  logo: 'https://raw.githubusercontent.com/dedotdev/typink/refs/heads/main/assets/wallets/polkadot-js-logo.svg',
+  installUrl: 'https://polkadot.js.org/extension',
+  websiteUrl: 'https://polkadot.js.org',
+});