Feat/integrate btc wallet

apps/site/package.json

@@ -10,12 +10,13 @@
     "fmt": "prettier --write '**/*.{tsx,ts,json,css,scss,md}'"
   },
   "dependencies": {
-    "@oranjlabs/strike": "*",
     "@dfinity/agent": "^1.3",
     "@dfinity/auth-client": "^1.3",
     "@dfinity/candid": "^1.3",
     "@dfinity/identity": "^1.3",
     "@dfinity/principal": "^1.3",
+    "@oranjlabs/strike": "*",
+    "@xstate/react": "^5.0.1",
     "next": "^14.2.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

apps/site/src/config.ts

@@ -1,11 +1,58 @@
+// Test Case
 export const host =
   process.env.NEXT_PUBLIC_DFX_NETWORK === 'ic'
     ? 'https://icp0.io'
-    : 'http://127.0.0.1:4943';
+    : 'https://icp0.io';
 
 export const provider =
   process.env.NEXT_PUBLIC_DFX_NETWORK === 'ic'
     ? 'https://identity.ic0.app'
     : 'http://rdmx6-jaaaa-aaaaa-aaadq-cai.localhost:4943';
 
 export const ICP_BLINK_PREFIX = /^(icp-action:|icp:)/;
+
+export interface Wallet {
+  id: string;
+  name: string;
+  lightLogo: string;
+  darkLogo: string;
+  link: string;
+}
+
+export const btcWallets: Wallet[] = [
+  {
+    id: 'XverseProviders.BitcoinProvider',
+    name: 'Xverse',
+    lightLogo: '/wallet/xverse.svg',
+    darkLogo: '/wallet/xverse.svg',
+    link: 'https://chromewebstore.google.com/detail/xverse-wallet/idnnbdplmphpflfnlkomgpfbpcgelopg?hl=en',
+  },
+  {
+    id: 'unisat',
+    name: 'Unisat',
+    lightLogo: '/wallet/unisat.png',
+    darkLogo: '/wallet/unisat.png',
+    link: 'https://chromewebstore.google.com/detail/unisat-wallet/ppbibelpcjmhbdihakflkdcoccbgbkpo?hl=en',
+  },
+  {
+    id: 'wizz',
+    name: 'Wizz',
+    lightLogo: '/wallet/wizz-black.png',
+    darkLogo: '/wallet/wizz-black.png',
+    link: 'https://chromewebstore.google.com/detail/wizz-wallet/ghlmndacnhlaekppcllcpcjjjomjkjpg?hl=en',
+  },
+  {
+    id: 'okxwallet.bitcoin',
+    name: 'OKX',
+    lightLogo: '/wallet/okx.png',
+    darkLogo: '/wallet/okx.png',
+    link: 'https://chromewebstore.google.com/detail/okx-wallet/mcohilncbfahbmgdjkbpemcciiolgcge?hl=en',
+  },
+  {
+    id: 'OrangecryptoProviders.BitcoinProvider',
+    name: 'Orange',
+    lightLogo: '/wallet/orange.png',
+    darkLogo: '/wallet/orange.png',
+    link: 'https://chromewebstore.google.com/detail/glmhbknppefdmpemdmjnjlinpbclokhn',
+  },
+];

apps/site/src/provider/ConnectProvider.tsx

@@ -1,27 +1,59 @@
 'use client';
 
 import { Connect2ICProvider } from '@oranjlabs/icp-wallet-adapter-react';
-import { createClient, InternetIdentity } from '@oranjlabs/icp-wallet-adapter';
+import {
+  createClient,
+  BTCWalletConnector,
+  InternetIdentity,
+} from '@oranjlabs/icp-wallet-adapter';
 import '@oranjlabs/strike/index.css';
 import '@oranjlabs/icp-wallet-adapter-react/index.css';
-
-import { host, provider } from '../config';
+import {
+  siwbMachine,
+  createActor as createSIWBActor,
+} from '@oranjbase/ic-siwb-js';
+import { useMachine } from '@xstate/react';
+import { host, provider, btcWallets } from '../config';
 
 const isServer = typeof window === 'undefined';
-const config = { host, providerUrl: provider };
-
-const providers = isServer ? [] : [new InternetIdentity(config)];
-
-const client = createClient({
-  providers,
-  globalProviderConfig: {
-    host,
-  },
+const actor = createSIWBActor('aw5qc-miaaa-aaaak-amupq-cai', {
+  agentOptions: { host },
 });
+
 export default function ConnectProvider({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const [snapshot, send, actorRef] = useMachine(siwbMachine, {
+    input: { anonymousActor: actor },
+    inspect: (e) => console.debug(e),
+  });
+
+  const config = {
+    host,
+    providerUrl: provider,
+    send,
+    siwbActorRef: actorRef,
+  };
+
+  const providers = isServer
+    ? []
+    : [
+        new InternetIdentity(config),
+        new BTCWalletConnector({ ...config, btcWallet: btcWallets[0] }),
+        new BTCWalletConnector({ ...config, btcWallet: btcWallets[1] }),
+        new BTCWalletConnector({ ...config, btcWallet: btcWallets[2] }),
+        new BTCWalletConnector({ ...config, btcWallet: btcWallets[3] }),
+        new BTCWalletConnector({ ...config, btcWallet: btcWallets[4] }),
+      ];
+
+  const client = createClient({
+    providers,
+    globalProviderConfig: {
+      host,
+    },
+  });
+
   return <Connect2ICProvider client={client}>{children}</Connect2ICProvider>;
 }

apps/site/src/views/home/Header.tsx

@@ -49,15 +49,32 @@ export default function Header() {
               STRIKE
             </span>
           </a>
-          <div className="sm:flex hidden flex-row gap-[8px] font-medium items-center text-[14px] leading-[24px]">
-            <ExtensionIcon width={20} height={20} />
-            <a
-              href="https://chromewebstore.google.com/detail/strike-by-oranj/iomlailejogiahpdlmckpjdkipgpfccm "
-              target="_blank"
-            >
-              Get Chrome Extension
-            </a>
+          <div className="sm:flex hidden flex flex-row gap-[16px]">
+            <div className="flex flex-row gap-[8px] font-medium items-center text-[14px] leading-[24px]">
+              <ExtensionIcon width={20} height={20} />
+              <a
+                href="https://chromewebstore.google.com/detail/strike-by-oranj/iomlailejogiahpdlmckpjdkipgpfccm "
+                target="_blank"
+              >
+                Get Chrome Extension
+              </a>
+            </div>
+            <ConnectButton
+              style={{
+                borderRadius: 12,
+                padding: `8px 12px`,
+                borderColor: '#2B5ACC',
+                backgroundColor: '#3670FF',
+                fontWeight: 600,
+                fontSize: 14,
+                borderWidth: 1,
+                borderStyle: 'solid',
+                display: 'flex',
+                justifyContent: 'center',
+              }}
+            />
           </div>
+
           {menuVisible ? (
             <CrossIcon
               width={24}