Skip to content

Commit

Permalink
fix(web3-wagmi): Ensure AntDesignWeb3ConfigProvider component renders…
Browse files Browse the repository at this point in the history 
… correctly when Wagmi config ssr is true (#1099)
  • Loading branch information
@Tian-Hun
Tian-Hun authored Aug 19, 2024
1 parent 094f890 commit 615d403
Show file tree
Hide file tree
Showing 12 changed files with 276 additions and 146 deletions.
5 changes: 5 additions & 0 deletions .changeset/fifty-pans-tease.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@ant-design/web3-wagmi': patch
---

fix(web3-wagmi): Ensure AntDesignWeb3ConfigProvider component renders correctly when Wagmi config ssr is true
35 changes: 28 additions & 7 deletions packages/wagmi/src/wagmi-provider/__tests__/balance.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { ConnectButton, Connector } from '@ant-design/web3';
import { Mainnet } from '@ant-design/web3-assets';
import { render } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import type * as Wagmi from 'wagmi';
import { mainnet } from 'wagmi/chains';

import { MetaMask } from '../../wallets';
Expand All @@ -16,8 +17,10 @@ vi.mock('wagmi/actions', () => ({
disconnect: () => {},
}));

vi.mock('wagmi', () => {
vi.mock('wagmi', async (importOriginal) => {
const actual = await importOriginal<typeof Wagmi>();
return {
...actual,
useConfig: () => {
return {};
},
Expand Down Expand Up @@ -59,14 +62,23 @@ vi.mock('wagmi', () => {
});

describe('WagmiWeb3ConfigProvider balance', () => {
it('show balance', () => {
it('show balance', async () => {
const { createConfig, http } = await import('wagmi');

const config = createConfig({
chains: [mainnet],
transports: {
[mainnet.id]: http(),
},
connectors: [],
});

const App = () => (
<AntDesignWeb3ConfigProvider
availableConnectors={[]}
balance
availableChains={[mainnet]}
walletFactorys={[MetaMask()]}
chainAssets={[Mainnet]}
wagimConfig={config}
>
<Connector>
<ConnectButton />
Expand All @@ -80,13 +92,22 @@ describe('WagmiWeb3ConfigProvider balance', () => {
expect(baseElement.querySelector('.ant-web3-icon-ethereum-filled')).toBeTruthy();
});

it('show address', () => {
it('show address', async () => {
const { createConfig, http } = await import('wagmi');

const config = createConfig({
chains: [mainnet],
transports: {
[mainnet.id]: http(),
},
connectors: [],
});

const App = () => (
<AntDesignWeb3ConfigProvider
availableConnectors={[]}
availableChains={[mainnet]}
walletFactorys={[MetaMask()]}
chainAssets={[Mainnet]}
wagimConfig={config}
>
<Connector>
<ConnectButton />
Expand Down
76 changes: 76 additions & 0 deletions packages/wagmi/src/wagmi-provider/__tests__/config-with-ssr-wallet.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { useProvider } from '@ant-design/web3';
import { Mainnet } from '@ant-design/web3-assets';
import { MetaMask, WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
import { QueryClient } from '@tanstack/react-query';
import { render } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import type * as Wagmi from 'wagmi';
import { mainnet } from 'wagmi/chains';
import { injected } from 'wagmi/connectors';

// Mock necessary modules
vi.mock('wagmi', async (importOriginal) => {
const actual = await importOriginal<typeof Wagmi>();
return {
...actual,
useConfig: () => ({ ssr: true }),
useAccount: () => ({ isDisconnected: true }),
useConnect: () => ({ connectAsync: vi.fn() }),
useSwitchChain: () => ({ switchChain: vi.fn() }),
useBalance: () => ({ data: {} }),
useEnsName: () => ({ data: null }),
useEnsAvatar: () => ({ data: null }),
};
});

describe('WagmiWeb3ConfigProvider with SSR', () => {
it('should render correctly in SSR environment', async () => {
const { createConfig, http } = await import('wagmi');

const mockConfig = createConfig({
chains: [mainnet],
transports: {
[mainnet.id]: http(),
},
connectors: [
injected({
target: 'metaMask',
}),
],
ssr: true,
});

const CustomConnector: React.FC = () => {
const { availableWallets, availableChains } = useProvider();
return (
<div>
<div data-testid="wallets">{availableWallets?.length}</div>
<div data-testid="chains">{availableChains?.length}</div>
<div data-testid="firstWalletName">{availableWallets![0]?.name}</div>
<div data-testid="firstChainId">{availableChains![0]?.id}</div>
</div>
);
};

const App = () => (
<WagmiWeb3ConfigProvider config={mockConfig} chains={[Mainnet]} wallets={[MetaMask()]}>
<CustomConnector />
</WagmiWeb3ConfigProvider>
);
const { getByTestId } = render(<App />);

// Check if the provider renders without errors
expect(getByTestId('wallets')).toBeDefined();
expect(getByTestId('chains')).toBeDefined();

// Verify that wallets and chains are available
expect(getByTestId('wallets').textContent).toBe('1');
expect(getByTestId('chains').textContent).toBe('1');

// Verify that the first wallet is MetaMask
expect(getByTestId('firstWalletName').textContent).toBe('MetaMask');

// Verify that the first chain is Ethereum Mainnet (chainId: 1)
expect(getByTestId('firstChainId').textContent).toBe('1');
});
});
70 changes: 49 additions & 21 deletions packages/wagmi/src/wagmi-provider/__tests__/connect-with-universal-wallet.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import { useProvider } from '@ant-design/web3';
import { Mainnet } from '@ant-design/web3-assets';
import { fireEvent, render } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import type { Connector } from 'wagmi';
import type { Connector, Config as WagmiConfig } from 'wagmi';
import type * as Wagmi from 'wagmi';
import { mainnet } from 'wagmi/chains';

import { TokenPocket } from '../../wallets';
Expand Down Expand Up @@ -32,12 +33,13 @@ vi.mock('wagmi/actions', () => ({
},
}));

vi.mock('wagmi', () => {
vi.mock('wagmi', async (importOriginal) => {
const actual = await importOriginal<typeof Wagmi>();
return {
...actual,
useConfig: () => {
return {};
},
// https://wagmi.sh/react/hooks/useAccount
useAccount: () => {
const [connected, setConnected] = React.useState(false);
useEffect(() => {
Expand All @@ -58,7 +60,7 @@ vi.mock('wagmi', () => {
connectAsync: (options: any) => {
connectAsync(options);
event.emit('connectChanged', true);
return {};
return { accounts: ['0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B'] };
},
};
},
Expand All @@ -76,10 +78,10 @@ vi.mock('wagmi', () => {
};
},
useBalance: () => {
return {};
return { data: {} };
},
useEnsName: () => ({}),
useEnsAvatar: () => ({}),
useEnsName: () => ({ data: null }),
useEnsAvatar: () => ({ data: null }),
};
});

Expand All @@ -105,12 +107,23 @@ describe('WagmiWeb3ConfigProvider connect with UniversalWallet', () => {
);
};

const { createConfig, http } = await import('wagmi');

const mockWagmiConfig: WagmiConfig = {
...createConfig({
chains: [mainnet],
transports: {
[mainnet.id]: http(),
},
}),
connectors: [walletConnetor, injectConnector],
};

const App = () => (
<AntDesignWeb3ConfigProvider
availableChains={[mainnet]}
availableConnectors={[injectConnector, walletConnetor]}
walletFactorys={[TokenPocket()]}
chainAssets={[Mainnet]}
walletFactorys={[TokenPocket()]}
wagimConfig={mockWagmiConfig}
>
<CustomConnector />
</AntDesignWeb3ConfigProvider>
Expand All @@ -119,10 +132,12 @@ describe('WagmiWeb3ConfigProvider connect with UniversalWallet', () => {
expect(baseElement.querySelector('.custom-text')?.textContent).toBe('Connect');
fireEvent.click(baseElement.querySelector('.custom-text')!);
await vi.waitFor(() => {
expect(connectAsync).toBeCalledWith({
chainId: 1,
connector: walletConnetor,
});
expect(connectAsync).toBeCalledWith(
expect.objectContaining({
chainId: 1,
connector: walletConnetor,
}),
);

expect(baseElement.querySelector('.custom-text')?.textContent).toBe(
'0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B',
Expand Down Expand Up @@ -161,12 +176,23 @@ describe('WagmiWeb3ConfigProvider connect with UniversalWallet', () => {
);
};

const { createConfig, http } = await import('wagmi');

const mockWagmiConfig: WagmiConfig = {
...createConfig({
chains: [mainnet],
transports: {
[mainnet.id]: http(),
},
}),
connectors: [walletConnetor, injectConnector],
};

const App = () => (
<AntDesignWeb3ConfigProvider
availableChains={[mainnet]}
availableConnectors={[injectConnector, walletConnetor]}
walletFactorys={[TokenPocket()]}
chainAssets={[Mainnet]}
walletFactorys={[TokenPocket()]}
wagimConfig={mockWagmiConfig}
>
<CustomConnector />
</AntDesignWeb3ConfigProvider>
Expand All @@ -175,10 +201,12 @@ describe('WagmiWeb3ConfigProvider connect with UniversalWallet', () => {
expect(baseElement.querySelector('.custom-text')?.textContent).toBe('Connect');
fireEvent.click(baseElement.querySelector('.custom-text')!);
await vi.waitFor(() => {
expect(connectAsync).toBeCalledWith({
chainId: 1,
connector: injectConnector,
});
expect(connectAsync).toBeCalledWith(
expect.objectContaining({
chainId: 1,
connector: injectConnector,
}),
);

expect(baseElement.querySelector('.custom-text')?.textContent).toBe(
'0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B',
Expand Down
37 changes: 31 additions & 6 deletions packages/wagmi/src/wagmi-provider/__tests__/connect.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import { useProvider } from '@ant-design/web3';
import { Mainnet } from '@ant-design/web3-assets';
import { fireEvent, render } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import type { Connector } from 'wagmi';
import type { Connector, Config as WagmiConfig } from 'wagmi';
import type * as Wagmi from 'wagmi';
import { mainnet } from 'wagmi/chains';

import { MetaMask } from '../../wallets';
Expand All @@ -27,8 +28,10 @@ vi.mock('wagmi/actions', () => ({
},
}));

vi.mock('wagmi', () => {
vi.mock('wagmi', async (importOriginal) => {
const actual = await importOriginal<typeof Wagmi>();
return {
...actual,
useConfig: () => {
return {};
},
Expand Down Expand Up @@ -107,12 +110,23 @@ describe('WagmiWeb3ConfigProvider connect', () => {
);
};

const { createConfig, http } = await import('wagmi');

const mockWagmiConfig: WagmiConfig = {
...createConfig({
chains: [mainnet],
transports: {
[mainnet.id]: http(),
},
}),
connectors: [mockConnector],
};

const App = () => (
<AntDesignWeb3ConfigProvider
availableChains={[mainnet]}
availableConnectors={[mockConnector]}
walletFactorys={[MetaMask()]}
chainAssets={[Mainnet]}
wagimConfig={mockWagmiConfig}
>
<CustomConnector />
</AntDesignWeb3ConfigProvider>
Expand Down Expand Up @@ -166,12 +180,23 @@ describe('WagmiWeb3ConfigProvider connect', () => {
);
};

const { createConfig, http } = await import('wagmi');

const mockWagmiConfig: WagmiConfig = {
...createConfig({
chains: [mainnet],
transports: {
[mainnet.id]: http(),
},
}),
connectors: [mockConnector],
};

const App = () => (
<AntDesignWeb3ConfigProvider
availableChains={[mainnet]}
availableConnectors={[mockConnector]}
walletFactorys={[MetaMask()]}
chainAssets={[Mainnet]}
wagimConfig={mockWagmiConfig}
>
<CustomConnector />
</AntDesignWeb3ConfigProvider>
Expand Down
Loading

0 comments on commit 615d403

Please sign in to comment.