_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 }