/ packages / react-hooks / _createWrapper.tsx
_createWrapper.tsx
 1  import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 2  import {
 3    createRootRoute,
 4    createRouter,
 5    Outlet,
 6    RouterProvider,
 7  } from "@tanstack/react-router";
 8  import { createConfig, http, mock, WagmiProvider } from "wagmi";
 9  import { foundry } from "wagmi/chains";
10  import { createTestClient, publicActions, walletActions } from "viem";
11  import { mintShop } from "@massmarket/contracts";
12  import { random256BigInt } from "@massmarket/utils";
13  import { MassMarketProvider } from "./MassMarketContext.ts";
14  // import { random256BigInt } from "@massmarket/utils";
15  
16  declare global {
17    var IS_REACT_ACT_ENVIRONMENT: boolean;
18  }
19  globalThis.IS_REACT_ACT_ENVIRONMENT = true;
20  
21  export const testClient = createTestClient({
22    transport: http(),
23    chain: foundry,
24    mode: "anvil",
25  }).extend(walletActions).extend(publicActions);
26  
27  const testAccounts = await testClient.requestAddresses();
28  export const testAccount = testAccounts[0];
29  
30  export function createWrapper(
31    shopId: bigint = random256BigInt(),
32    testAccountIndex = 0,
33  ) {
34    const queryClient = new QueryClient({
35      defaultOptions: {
36        queries: {
37          experimental_prefetchInRender: true,
38        },
39      },
40    });
41    globalThis.location.replace(
42      `http://localhost?shopId=0x${shopId.toString(16)}`,
43    );
44    return ({ children }: { children: React.ReactNode }) => {
45      const rootRoute = createRootRoute({
46        component: () => (
47          <>
48            {children}
49            <Outlet />
50          </>
51        ),
52      });
53  
54      const router = createRouter({
55        routeTree: rootRoute,
56      });
57  
58      const connectors = [
59        mock({
60          accounts: [testAccounts[testAccountIndex]],
61          features: {
62            defaultConnected: true,
63            reconnect: true,
64          },
65        }),
66      ];
67  
68      const config = createConfig({
69        chains: [foundry],
70        connectors,
71        transports: {
72          [foundry.id]: http(),
73        },
74      });
75  
76      return (
77        <WagmiProvider config={config}>
78          <MassMarketProvider>
79            <QueryClientProvider client={queryClient}>
80              <RouterProvider router={router} />,
81            </QueryClientProvider>
82          </MassMarketProvider>
83        </WagmiProvider>
84      );
85    };
86  }
87  
88  export async function createShop(shopId: bigint) {
89    const transactionHash = await mintShop(testClient, testAccount, [
90      shopId,
91      testAccount,
92    ]);
93    // this is still causing a leak
94    // https://github.com/wevm/viem/issues/2903
95    await testClient.waitForTransactionReceipt({
96      hash: transactionHash,
97    });
98  }