fix(bitcoin): adapt to Next.js (#881)

* fix(bitcoin): adapt to next.js

* chore(bitcoin): unit test and clarify docs

Author: AmAzing129

.changeset/rude-apples-chew.md

@@ -0,0 +1,5 @@
+---
+"@ant-design/web3-bitcoin": patch
+---
+
+fix: adapt to next.js

docs/guide/quick-start.md

@@ -45,7 +45,9 @@ Of course, compared with `NFTImage`, we may use more components of the connectio
 
 ## Use in Next.js
 
-In [Next.js](https://nextjs.org/), based on its build mechanism, you may encounter the following errors when introducing packages such as `@ant-design/web3`:
+- If you're using recommended App Router, add the `"use client"` directive at the top of the file to use Provider such as `WagmiWeb3ConfigProvider`, considering that `createContext` only works in Client Components.
+
+- In [Next.js](https://nextjs.org/), based on its build mechanism, you may encounter the following errors when introducing packages such as `@ant-design/web3`:
 
 1. `Error: require() of ES Module ... from ... not supported.`
 2. `SyntaxError: Cannot use import statement outside a module`

docs/guide/quick-start.zh-CN.md

@@ -45,7 +45,9 @@ export default () => {
 
 ## 在 Next.js 中使用
 
-在 [Next.js](https://nextjs.org/) 中，基于它的构建机制，你可能在引入 `@ant-design/web3` 等包时会遇到类型下面的错误：
+- 若使用默认的 App Router，由于 `createContext` 仅可使用在客户端组件中，因此使用诸如 `WagmiWeb3ConfigProvider` 等 Provider 时，均应在组件代码顶部增加`"use client"`指令。
+
+- 在 [Next.js](https://nextjs.org/) 中，基于它的构建机制，你可能在引入 `@ant-design/web3` 等包时会遇到类型下面的错误：
 
 1. `Error: require() of ES Module ... from ... not supported.`
 2. `SyntaxError: Cannot use import statement outside a module`

packages/bitcoin/package.json

@@ -43,7 +43,6 @@
   "dependencies": {
     "@ant-design/web3-common": "workspace:*",
     "@ant-design/web3-icons": "workspace:*",
-    "@mempool/mempool.js": "^2.3.0",
     "sats-connect": "^2.3.1"
   },
   "devDependencies": {

packages/bitcoin/src/error.ts

@@ -16,3 +16,12 @@ export class NoAddressError extends Error {
     this.name = this.constructor.name;
   }
 }
+
+export class NoBalanceError extends Error {
+  name: string;
+
+  constructor(message = "Can't fetch the balance") {
+    super(message);
+    this.name = this.constructor.name;
+  }
+}

packages/bitcoin/src/helpers.tsx

@@ -1,12 +1,9 @@
 import type { Balance } from '@ant-design/web3-common';
 import { BitcoinCircleColorful } from '@ant-design/web3-icons';
-import mempoolJS from '@mempool/mempool.js';
 
-const {
-  bitcoin: { addresses },
-} = mempoolJS({
-  hostname: 'mempool.space',
-});
+import { NoBalanceError } from './error';
+
+const MEMPOOL_URL = 'https://mempool.space/api';
 
 export const getBalanceObject = (sats: number): Balance => {
   return {
@@ -22,8 +19,13 @@ export const getBalanceObject = (sats: number): Balance => {
  * https://github.com/secretkeylabs/sats-connect/issues/12#issuecomment-2038963924
  */
 export const getBalanceByMempool = async (address: string): Promise<Balance> => {
-  const addr = await addresses.getAddress({ address });
-  const { funded_txo_sum, spent_txo_count } = addr.chain_stats;
-  // mempool not included
-  return getBalanceObject(funded_txo_sum - spent_txo_count);
+  const res = await fetch(`${MEMPOOL_URL}/address/${address}`);
+  if (res.ok) {
+    const data = await res.json();
+    const { chain_stats } = data;
+    const { funded_txo_sum, spent_txo_sum } = chain_stats;
+    return getBalanceObject(funded_txo_sum - spent_txo_sum);
+  } else {
+    throw new NoBalanceError();
+  }
 };

packages/bitcoin/src/provider/__tests__/basic.test.tsx

@@ -1,12 +1,19 @@
 import { ConnectButton, Connector, useConnection } from '@ant-design/web3';
 import { fireEvent } from '@testing-library/react';
 import { Button } from 'antd';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { getBalanceByMempool } from '../../helpers';
 import { XverseWallet } from '../../wallets';
 import { BitcoinWeb3ConfigProvider } from '../index';
 import { xrender } from './utils';
 
+// mock fetch
+global.fetch = vi.fn();
+function createFetchResponse(data: any) {
+  return Promise.resolve({ ok: true, json: () => new Promise((resolve) => resolve(data)) });
+}
+
 vi.mock('sats-connect', async () => {
   const originModules = await vi.importActual('sats-connect');
   return {
@@ -31,25 +38,12 @@ vi.mock('sats-connect', async () => {
   };
 });
 
-vi.mock('@mempool/mempool.js', async () => {
-  return {
-    default: () => ({
-      bitcoin: {
-        addresses: {
-          getAddress: () =>
-            Promise.resolve({
-              chain_stats: {
-                funded_txo_sum: 1000,
-                spent_txo_count: 100,
-              },
-            }),
-        },
-      },
-    }),
-  };
-});
-
 describe('BitcoinWeb3ConfigProvider', () => {
+  beforeEach(() => {
+    // @ts-ignore: vi.fn().mockReset
+    global.fetch.mockReset();
+  });
+
   it('mount correctly', () => {
     const App = () => (
       <BitcoinWeb3ConfigProvider>
@@ -61,7 +55,27 @@ describe('BitcoinWeb3ConfigProvider', () => {
     expect(selector('.content')?.textContent).toBe('test');
   });
 
+  it("can't get balance", async () => {
+    // @ts-ignore: vi.fn().mockResolvedValue
+    fetch.mockResolvedValue(() => Promise.resolve({ ok: false }));
+    try {
+      await getBalanceByMempool('bc1p');
+    } catch (e: any) {
+      console.log(e.message);
+    }
+  });
+
   it('connect and disconnect', async () => {
+    const addressResponse = {
+      chain_stats: {
+        funded_txo_sum: 1000,
+        spent_txo_sum: 100,
+      },
+    };
+
+    // @ts-ignore: vi.fn().mockResolvedValue
+    fetch.mockResolvedValue(createFetchResponse(addressResponse));
+
     const Disconnect = () => {
       const { disconnect } = useConnection();
       return (

packages/bitcoin/src/wallets/factory.ts

@@ -1,12 +1,12 @@
 import type { WalletFactoryBuilder } from './types';
 
-export const WalletFactory: WalletFactoryBuilder = (adapter, metadata) => {
+export const WalletFactory: WalletFactoryBuilder = (adapterConstructor, metadata) => {
   return {
-    adapter,
     create: () => {
+      const adapter = new adapterConstructor(metadata.name);
       return {
         ...metadata,
-        adapter: adapter,
+        adapter,
         hasWalletReady: () => Promise.resolve(!!adapter.provider),
         hasExtensionInstalled: () => Promise.resolve(!!adapter.provider),
       };

packages/bitcoin/src/wallets/index.ts

@@ -6,7 +6,5 @@ import { metadata_Unisat, metadata_Xverse } from '@ant-design/web3-assets';
 import { UnisatBitcoinWallet, XverseBitcoinWallet } from '../adapter';
 import { WalletFactory } from './factory';
 
-export const UnisatWallet = () =>
-  WalletFactory(new UnisatBitcoinWallet(metadata_Unisat.name), metadata_Unisat);
-export const XverseWallet = () =>
-  WalletFactory(new XverseBitcoinWallet(metadata_Xverse.name), metadata_Xverse);
+export const UnisatWallet = () => WalletFactory(UnisatBitcoinWallet, metadata_Unisat);
+export const XverseWallet = () => WalletFactory(XverseBitcoinWallet, metadata_Xverse);

packages/bitcoin/src/wallets/types.ts

@@ -1,17 +1,16 @@
 import type { Wallet, WalletMetadata } from '@ant-design/web3-common';
 
-import type { BitcoinWallet } from '../adapter';
+import { BitcoinWallet, XverseBitcoinWallet } from '../adapter';
 
 export interface WalletWithAdapter extends Wallet {
   adapter: BitcoinWallet;
 }
 
 export interface WalletFactory {
-  adapter: BitcoinWallet;
   create: () => WalletWithAdapter;
 }
 
 export type WalletFactoryBuilder = (
-  adapter: BitcoinWallet,
+  adapter: typeof XverseBitcoinWallet,
   metadata: WalletMetadata,
 ) => WalletFactory;