upgrade: remix single fetch

package.json

@@ -24,11 +24,11 @@
     "@merkl/api": "0.10.307",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-scroll-area": "^1.2.0",
-    "@remix-run/dev": "^2.11.2",
-    "@remix-run/node": "^2.11.2",
-    "@remix-run/react": "^2.11.2",
-    "@remix-run/serve": "^2.11.2",
-    "@remixicon/react": "^4.2.0",
+    "@remix-run/dev": "^2.15.2",
+    "@remix-run/node": "^2.15.2",
+    "@remix-run/react": "^2.15.2",
+    "@remix-run/serve": "^2.15.2",
+    "@remixicon/react": "^4.6.0",
     "@svgr/rollup": "^8.1.0",
     "@tanstack/react-query": "^5.55.4",
     "@vitejs/plugin-react": "^4.3.1",

src/modules/chain/routes/chain.$id.header.tsx

@@ -1,4 +1,4 @@
-import { type LoaderFunctionArgs, type MetaFunction, json } from "@remix-run/node";
+import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
 import Hero, { defaultHeroSideDatas } from "../../../components/composite/Hero";
 import { Cache } from "../../../modules/cache/cache.service";
@@ -17,7 +17,7 @@ export async function loader({ params: { id } }: LoaderFunctionArgs) {
 
   const { sum: dailyRewards } = await OpportunityService.getAggregate({ chainId: chain.id.toString() }, "dailyRewards");
 
-  return json({ chain, count, dailyRewards, maxApr: opportunitiesByApr?.[0]?.apr });
+  return { chain, count, dailyRewards, maxApr: opportunitiesByApr?.[0]?.apr };
 }
 
 export const clientLoader = Cache.wrap("chain", 300);

src/modules/chain/routes/chain.$id.opportunities.tsx

@@ -1,4 +1,4 @@
-import { type LoaderFunctionArgs, json } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { Container, Group, Space, Title } from "dappkit";
 import OpportunityLibrary from "../../../components/element/opportunity/OpportunityLibrary";
@@ -19,7 +19,7 @@ export async function loader({ params: { id: chainId }, request }: LoaderFunctio
 
   const { protocols } = await ProtocolService.getManyFromRequest(request);
 
-  return json({ opportunities, count, protocols, featuredOpportunities });
+  return { opportunities, count, protocols, featuredOpportunities };
 }
 
 export const clientLoader = Cache.wrap("chain/opportunities", 300);

src/modules/chain/routes/chains.list.tsx

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json, useLoaderData } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
 import { useNavigate } from "@remix-run/react";
 import { Container, Space } from "dappkit";
 import { useEffect } from "react";
@@ -10,7 +10,7 @@ import { ChainService } from "../../../modules/chain/chain.service";
 
 export async function loader(_args: LoaderFunctionArgs) {
   const chains = await ChainService.getAll();
-  return json({ chains, count: chains.length });
+  return { chains, count: chains.length };
 }
 
 export const clientLoader = Cache.wrap("chains", 300);

src/modules/interaction/routes/transaction.$name.tsx

@@ -1,4 +1,4 @@
-import { type ActionFunctionArgs, json } from "@remix-run/node";
+import type { ActionFunctionArgs } from "@remix-run/node";
 import { encodeFunctionData, parseAbi } from "viem";
 import { api } from "../../../api/";
 import { ZyfiService } from "../../../modules/zyfi/zyfi.service";
@@ -25,9 +25,9 @@ export const action = async ({ params: { name }, request }: ActionFunctionArgs)
       if (payload.sponsor) {
         const sponsoredTx = await ZyfiService.wrapAndPrepareTx(tx);
 
-        return json(sponsoredTx);
+        return sponsoredTx;
       }
-      return json(tx);
+      return tx;
     }
     case "supply": {
       try {
@@ -49,7 +49,7 @@ export const action = async ({ params: { name }, request }: ActionFunctionArgs)
           });
         }
 
-        return json(tx);
+        return tx;
       } catch (err) {
         console.error(err);
 

src/modules/leaderboard/routes/leaderboard.($chain).($address).header.tsx

@@ -1,4 +1,4 @@
-import { type LoaderFunctionArgs, json } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import type { MetaFunction } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
 import { I18n } from "../../../I18n";
@@ -24,10 +24,10 @@ export const extractChainAndTokenFromParams = async (address: string | undefined
 export async function loader({ params: { address, chain: chainName } }: LoaderFunctionArgs) {
   const { chain, token } = await extractChainAndTokenFromParams(address, chainName);
 
-  return json({
+  return {
     token,
     chain,
-  });
+  };
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data: _data }) => {

src/modules/leaderboard/routes/leaderboard.($chain).($address).leaderboard.tsx

@@ -1,4 +1,4 @@
-import { type LoaderFunctionArgs, json } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { Box, Container, Group, Space, Title, Value } from "dappkit";
 import { Suspense, useMemo } from "react";
@@ -17,13 +17,13 @@ export async function loader({ params: { address, chain: chainName }, request }:
     address: token.address,
   });
 
-  return json({
+  return {
     rewards,
     token,
     chain,
     count,
     total,
-  });
+  };
 }
 
 export const clientLoader = Cache.wrap("leaderboard", 300);

src/modules/opportunity/routes/opportunities.list.tsx

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json, useLoaderData } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
 import { Container, Group, Space, Title } from "dappkit";
 import OpportunityLibrary from "../../../components/element/opportunity/OpportunityLibrary";
 import { ErrorContent } from "../../../components/layout/ErrorContent";
@@ -17,7 +17,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const chains = await ChainService.getAll();
   const { protocols } = await ProtocolService.getManyFromRequest(request);
 
-  return json({ opportunities, chains, count, protocols, featuredOpportunities });
+  return { opportunities, chains, count, protocols, featuredOpportunities };
 }
 
 export const clientLoader = Cache.wrap("opportunities", 300);

src/modules/opportunity/routes/opportunity.$chain.$type.$id.header.tsx

@@ -1,5 +1,5 @@
 import type { Chain } from "@merkl/api";
-import { type LoaderFunctionArgs, type MetaFunction, json } from "@remix-run/node";
+import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { Meta, Outlet, useLoaderData } from "@remix-run/react";
 import { Button, Group, Icon } from "dappkit";
 import { useClipboard } from "dappkit";
@@ -26,7 +26,7 @@ export async function loader({ params: { id, type, chain: chainId } }: LoaderFun
     type: type,
     identifier: id,
   });
-  return json({ rawOpportunity, chain });
+  return { rawOpportunity, chain };
 }
 
 export const clientLoader = Cache.wrap("opportunity", 300);

src/modules/opportunity/routes/opportunity.$chain.$type.$id.leaderboard.tsx

@@ -1,5 +1,5 @@
 import type { Campaign } from "@merkl/api";
-import { type LoaderFunctionArgs, json } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import {
   Box,
@@ -46,14 +46,14 @@ export async function loader({ params: { id, type, chain: chainId }, request }:
     campaignId: selectedCampaign.campaignId,
   });
 
-  return json({
+  return {
     computeChain,
     rewards,
     campaigns,
     count,
     total,
     selectedCampaign,
-  });
+  };
 }
 
 export default function Index() {

src/modules/protocol/routes/protocol.$id.header.tsx

@@ -1,5 +1,5 @@
 import type { Opportunity } from "@merkl/api";
-import { type LoaderFunctionArgs, type MetaFunction, json } from "@remix-run/node";
+import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
 import { Group } from "dappkit";
 import { I18n } from "../../../I18n";
@@ -23,14 +23,14 @@ export async function loader({ params: { id }, request }: LoaderFunctionArgs) {
 
   const { sum } = await OpportunityService.getAggregate({ mainProtocolId: id }, "dailyRewards");
 
-  return json({
+  return {
     opportunities,
     count,
     protocol,
     liveOpportunityCount: liveCount,
     maxApr: opportunitiesByApr?.[0]?.apr,
     dailyRewards: sum,
-  });
+  };
 }
 
 export const clientLoader = Cache.wrap("protocol", 300);

src/modules/protocol/routes/protocol.$id.opportunities.tsx

@@ -1,4 +1,4 @@
-import { type LoaderFunctionArgs, json } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { Container, Group, Space, Title } from "dappkit";
 import { useWalletContext } from "dappkit";
@@ -16,7 +16,7 @@ export async function loader({ params: { id }, request }: LoaderFunctionArgs) {
   //TODO: embed this in client/service
   const { protocols } = await ProtocolService.getManyFromRequest(request);
 
-  return json({ opportunities, count, protocols, featuredOpportunities });
+  return { opportunities, count, protocols, featuredOpportunities };
 }
 
 export default function Index() {

src/modules/protocol/routes/protocols.header.tsx

@@ -4,7 +4,7 @@ import { v4 as uuidv4 } from "uuid";
 import Hero from "../../../components/composite/Hero";
 import { ProtocolService } from "../../../modules/protocol/protocol.service";
 
-import { Outlet, json, useLoaderData } from "@remix-run/react";
+import { Outlet, useLoaderData } from "@remix-run/react";
 import { I18n } from "../../../I18n";
 
 export const meta: MetaFunction = () => {
@@ -14,7 +14,7 @@ export const meta: MetaFunction = () => {
 export async function loader({ request }: LoaderFunctionArgs) {
   const { protocols, count } = await ProtocolService.getManyFromRequest(request);
 
-  return json({ protocols, count });
+  return { protocols, count };
 }
 
 export default function Index() {

src/modules/protocol/routes/protocols.list.tsx

@@ -1,4 +1,4 @@
-import { type LoaderFunctionArgs, json } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { Container, Space } from "dappkit";
 import ProtocolLibrary from "../../../components/element/protocol/ProtocolLibrary";
@@ -8,7 +8,7 @@ import { ProtocolService } from "../../../modules/protocol/protocol.service";
 export async function loader({ request }: LoaderFunctionArgs) {
   const { protocols, count } = await ProtocolService.getManyFromRequest(request);
 
-  return json({ protocols, count });
+  return { protocols, count };
 }
 
 export const clientLoader = Cache.wrap("protocols", 300);

src/modules/token/routes/token.$symbol.header.tsx

@@ -1,4 +1,4 @@
-import { type LoaderFunctionArgs, type MetaFunction, json } from "@remix-run/node";
+import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
 import { I18n } from "../../../I18n";
 import Hero, { defaultHeroSideDatas } from "../../../components/composite/Hero";
@@ -20,13 +20,13 @@ export async function loader({ params: { symbol } }: LoaderFunctionArgs) {
 
   const { sum: dailyRewards } = await OpportunityService.getAggregate({ tokens: symbol }, "dailyRewards");
 
-  return json({
+  return {
     tokens,
     chains,
     dailyRewards,
     maxApr: opportunitiesByApr?.[0]?.apr,
     count,
-  });
+  };
 }
 
 export const clientLoader = Cache.wrap("token", 300);

src/modules/token/routes/token.$symbol.opportunities.tsx

@@ -1,4 +1,4 @@
-import { type LoaderFunctionArgs, json } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { Container, Group, Space, Title } from "dappkit";
 import OpportunityLibrary from "../../../components/element/opportunity/OpportunityLibrary";
@@ -16,7 +16,7 @@ export async function loader({ params: { symbol }, request }: LoaderFunctionArgs
   //TODO: embed this in client/service
   const chains = await ChainService.getAll();
 
-  return json({ opportunities, chains, count, featuredOpportunities });
+  return { opportunities, chains, count, featuredOpportunities };
 }
 
 export const clientLoader = Cache.wrap("token/opportunities", 300);

src/modules/token/routes/tokens.list.tsx

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json, useLoaderData } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
 import { useNavigate } from "@remix-run/react";
 import { Container, Space } from "dappkit";
 import { useEffect } from "react";
@@ -11,7 +11,7 @@ import { TokenService } from "../../../modules/token/token.service";
 export async function loader({ request }: LoaderFunctionArgs) {
   const { tokens, count } = await TokenService.getManyFromRequest(request);
 
-  return json({ tokens, count });
+  return { tokens, count };
 }
 
 export const clientLoader = Cache.wrap("tokens", 300);

src/modules/user/routes/user.$address.claims.tsx

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json, useLoaderData } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
 import { Container, Space } from "dappkit";
 import { isAddress } from "viem";
 import HistoricalClaimsLibrary from "../../../components/element/historicalClaimsLibrary/HistoricalClaimsLibrary";
@@ -8,7 +8,7 @@ import { ClaimsService } from "../../../modules/claim/claim.service";
 export async function loader({ params: { address } }: LoaderFunctionArgs) {
   if (!address || !isAddress(address)) throw "";
   const claims = await ClaimsService.getForUser(address);
-  return json({ claims });
+  return { claims };
 }
 export default function Index() {
   const { claims } = useLoaderData<typeof loader>();

src/modules/user/routes/user.$address.header.tsx

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { Outlet, json, useFetcher, useLoaderData } from "@remix-run/react";
+import { Outlet, useFetcher, useLoaderData } from "@remix-run/react";
 import { Button, Divider, Dropdown, Group, Hash, Icon, Text, Value } from "dappkit";
 import { TransactionButton, type TransactionButtonProps } from "dappkit";
 import { useWalletContext } from "dappkit";
@@ -28,7 +28,7 @@ export async function loader({ params: { address }, request }: LoaderFunctionArg
       )?.[0]
     : null;
 
-  return json({ rewards, address, token });
+  return { rewards, address, token };
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data, error }) => {

src/modules/user/routes/user.$address.liquidity.tsx

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json, useLoaderData } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
 import { Container } from "dappkit";
 import { isAddress } from "viem";
 import PositionLibrary from "../../../components/element/position/PositionLibrary";
@@ -16,7 +16,7 @@ export async function loader({ params: { address } }: LoaderFunctionArgs) {
     address,
     chainId: defaultChain,
   });
-  return json({ positions });
+  return { positions };
 }
 
 export default function Index() {

src/modules/user/routes/user.$address.rewards.tsx

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json, useLoaderData, useOutletContext } from "@remix-run/react";
+import { useLoaderData, useOutletContext } from "@remix-run/react";
 import { Container, Fmt, Group, Icon, Space, Text, useWalletContext } from "dappkit";
 import { useMemo } from "react";
 import { isAddress } from "viem";
@@ -12,7 +12,8 @@ import type { OutletContextRewards } from "./user.$address.header";
 
 export async function loader({ params: { address } }: LoaderFunctionArgs) {
   if (!address || !isAddress(address)) throw "";
-  return json({ address });
+
+  return { address };
 }
 
 export default function Index() {

src/root.tsx

@@ -6,7 +6,6 @@ import {
   Scripts,
   ScrollRestoration,
   isRouteErrorResponse,
-  json,
   useLoaderData,
   useNavigate,
   useRouteError,
@@ -33,7 +32,7 @@ export async function loader(_args: LoaderFunctionArgs) {
 
   if (!chains) throw new Response("Unable to fetch chains", { status: 500 });
 
-  return json({ ENV: { API_URL: process.env.API_URL }, chains });
+  return { ENV: { API_URL: process.env.API_URL }, chains };
 }
 
 export const clientLoader = Cache.wrap("root", 300);