Refactor sorted relayers query (#839)

* Refactor sorted relayers query

* Update maximumFileSizeToCacheInBytes

* Unregister the service worker

apps/web/src/components/transfer-information-section.tsx

@@ -1,44 +1,41 @@
-import { SortedLnBridgeRelayInfosResData, Token } from "../types";
+import { Token } from "../types";
 import TransferInformation from "./transfer-information";
 import TransferSection from "./transfer-section";
 import { BaseBridge } from "../bridges";
 import { useMemo } from "react";
 import { useDailyLimit } from "../hooks";
+import { SortedRelayersQuery } from "../_generated_/gql/graphql";
+import { Address } from "viem";
 
 interface Props {
  sourceToken: Token;
- relayData: SortedLnBridgeRelayInfosResData | undefined;
- loadingRelayData: boolean;
+ sortedRelayers: SortedRelayersQuery["sortedLnBridgeRelayInfos"];
+ loadingSortedRelayers: boolean;
  bridge: BaseBridge | undefined;
  fee: { token: Token; value: bigint } | null | undefined;
  loadingFee: boolean;
 }
 
 export default function TransferInformationSection({
  sourceToken,
- relayData,
- loadingRelayData,
+ sortedRelayers,
+ loadingSortedRelayers,
  bridge,
  fee,
  loadingFee,
 }: Props) {
- const hasRelayer = useMemo(
- () => 0 < (relayData?.sortedLnBridgeRelayInfos?.records.length || 0),
- [relayData?.sortedLnBridgeRelayInfos?.records.length],
- );
+ const hasRelayer = useMemo(() => 0 < (sortedRelayers?.records?.length || 0), [sortedRelayers?.records?.length]);
  const { loading: loadingDailyLimit, dailyLimit } = useDailyLimit(bridge);
 
  return (
  <TransferSection>
  <TransferInformation
  transferLimit={{
- loading: loadingRelayData,
- value: relayData?.sortedLnBridgeRelayInfos?.transferLimit
- ? BigInt(relayData.sortedLnBridgeRelayInfos.transferLimit)
- : undefined,
+ loading: loadingSortedRelayers,
+ value: sortedRelayers?.transferLimit ? BigInt(sortedRelayers.transferLimit) : undefined,
  token: sourceToken,
  }}
- estimatedTime={hasRelayer ? { loading: loadingRelayData, value: bridge?.formatEstimateTime() } : undefined}
+ estimatedTime={hasRelayer ? { loading: loadingSortedRelayers, value: bridge?.formatEstimateTime() } : undefined}
  transactionFee={{
  warning: fee ? undefined : "Liquidity is not enough",
  loading: loadingFee,
@@ -48,7 +45,10 @@ export default function TransferInformationSection({
  dailyLimit={
  dailyLimit ? { loading: loadingDailyLimit, value: dailyLimit.limit, token: dailyLimit.token } : undefined
  }
- solver={{ loading: loadingRelayData, address: relayData?.sortedLnBridgeRelayInfos?.records.at(0)?.relayer }}
+ solver={{
+ loading: loadingSortedRelayers,
+ address: sortedRelayers?.records?.at(0)?.relayer as Address | undefined,
+ }}
  />
  </TransferSection>
  );

apps/web/src/components/transfer.tsx

@@ -10,16 +10,17 @@ import {
  useApp,
  useBalance,
  useMaxTransfer,
- useSortedRelayData,
+ useSortedRelayers,
  useTransactionFee,
  useTransfer,
 } from "../hooks";
 import { useAccount, useNetwork, usePublicClient, useSwitchNetwork, useWalletClient } from "wagmi";
 import TransferProvider from "../providers/transfer-provider";
 import DisclaimerModal from "./modals/disclaimer-modal";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
-import { Address } from "viem";
+import { Address, Hash } from "viem";
 import TransferModal from "./modals/transfer-modal";
+import { BridgeCategory } from "../types";
 
 interface Recipient {
  input: string;
@@ -90,20 +91,20 @@ function Component() {
  } = useBalance(sourceChain, sourceToken, account.address);
  const { maxTransfer } = useMaxTransfer(sourceChain, targetChain, sourceToken, balance);
 
- const { data: relayData, loading: loadingRelayData } = useSortedRelayData(
+ const { data: sortedRelayers, loading: loadingSortedRelayers } = useSortedRelayers(
  deferredAmount.value,
  sourceToken,
  sourceChain,
  targetChain,
  );
 
  const bridge = useMemo(() => {
- const category = relayData?.sortedLnBridgeRelayInfos?.records.at(0)?.bridge;
+ const category = sortedRelayers?.sortedLnBridgeRelayInfos?.records?.at(0)?.bridge as BridgeCategory | undefined;
  return category
  ? bridgeFactory({ category, walletClient, publicClient, sourceChain, sourceToken, targetChain, targetToken })
  : undefined;
  }, [
- relayData?.sortedLnBridgeRelayInfos?.records,
+ sortedRelayers?.sortedLnBridgeRelayInfos?.records,
  walletClient,
  publicClient,
  sourceChain,
@@ -117,7 +118,7 @@ function Component() {
  account.address,
  account.address,
  deferredAmount.value,
- relayData,
+ sortedRelayers?.sortedLnBridgeRelayInfos,
  );
 
  const {
@@ -198,15 +199,15 @@ function Component() {
  const targetChain = bridge?.getTargetChain();
 
  if (bridge && account.address && recipient.value) {
- const relayInfo = relayData?.sortedLnBridgeRelayInfos?.records.at(0);
+ const sortedRelayer = sortedRelayers?.sortedLnBridgeRelayInfos?.records?.at(0);
  try {
  setIsTransfering(true);
  const receipt = await bridge.transfer(account.address, recipient.value, deferredAmount.value, {
- relayer: relayInfo?.relayer,
- transferId: relayInfo?.lastTransferId,
+ relayer: sortedRelayer?.relayer as Address | undefined,
+ transferId: sortedRelayer?.lastTransferId as Hash | undefined,
  totalFee: fee?.value,
- withdrawNonce: BigInt(relayInfo?.withdrawNonce ?? 0),
- depositedMargin: BigInt(relayInfo?.margin ?? 0),
+ withdrawNonce: BigInt(sortedRelayer?.withdrawNonce ?? 0),
+ depositedMargin: BigInt(sortedRelayer?.margin ?? 0),
  });
  notifyTransaction(receipt, sourceChain, "Transfer");
  setIsTransfering(false);
@@ -232,7 +233,7 @@ function Component() {
  }
  }
  }, [
- relayData?.sortedLnBridgeRelayInfos?.records,
+ sortedRelayers?.sortedLnBridgeRelayInfos?.records,
  account.address,
  recipient.value,
  bridge,
@@ -291,8 +292,8 @@ function Component() {
  <TransferInformationSection
  bridge={bridge}
  sourceToken={sourceToken}
- relayData={relayData}
- loadingRelayData={loadingRelayData}
+ sortedRelayers={sortedRelayers?.sortedLnBridgeRelayInfos}
+ loadingSortedRelayers={loadingSortedRelayers}
  fee={fee}
  loadingFee={loadingFee}
  />

apps/web/src/config/gql.ts

@@ -1,38 +1,5 @@
 import { gql } from "@apollo/client";
 
-export const GQL_SORTED_LNBRIDGE_RELAY_INFOS = gql`
- query sortedLnBridgeRelayInfos(
- $amount: String
- $decimals: Int
- $bridge: String
- $token: String
- $fromChain: String
- $toChain: String
- ) {
- sortedLnBridgeRelayInfos(
- amount: $amount
- decimals: $decimals
- bridge: $bridge
- token: $token
- fromChain: $fromChain
- toChain: $toChain
- ) {
- transferLimit
- records {
- sendToken
- relayer
- margin
- baseFee
- protocolFee
- liquidityFeeRate
- lastTransferId
- withdrawNonce
- bridge
- }
- }
- }
-`;
-
 export const GQL_QUERY_LNBRIDGE_RELAY_INFOS = gql`
  query queryLnBridgeRelayInfos(
  $fromChain: String

apps/web/src/hooks/index.ts

@@ -8,7 +8,7 @@ export * from "./use-liquidity-withdraw-fee-params";
 export * from "./use-all-allowance";
 export * from "./use-allowance";
 export * from "./use-balance";
-export * from "./use-sorted-relay-data";
+export * from "./use-sorted-relayers";
 export * from "./use-transfer";
 export * from "./use-transaction-fee";
 export * from "./use-daily-limit";

apps/web/src/hooks/use-sorted-relayers.ts

@@ -0,0 +1,51 @@
+import { graphql } from "../_generated_/gql";
+import { ChainConfig, Token } from "../types";
+import { useQuery } from "@apollo/client";
+
+const document = graphql(`
+ query SortedRelayers(
+ $amount: String
+ $decimals: Int
+ $bridge: String
+ $token: String
+ $fromChain: String
+ $toChain: String
+ ) {
+ sortedLnBridgeRelayInfos(
+ amount: $amount
+ decimals: $decimals
+ bridge: $bridge
+ token: $token
+ fromChain: $fromChain
+ toChain: $toChain
+ ) {
+ transferLimit
+ records {
+ sendToken
+ relayer
+ margin
+ baseFee
+ protocolFee
+ liquidityFeeRate
+ lastTransferId
+ withdrawNonce
+ bridge
+ }
+ }
+ }
+`);
+
+export function useSortedRelayers(amount: bigint, token: Token, sourceChain: ChainConfig, targetChain: ChainConfig) {
+ const { loading, data, refetch } = useQuery(document, {
+ variables: {
+ amount: amount.toString(),
+ decimals: token.decimals,
+ token: token.address,
+ fromChain: sourceChain.network,
+ toChain: targetChain.network,
+ },
+ fetchPolicy: "cache-and-network",
+ });
+
+ return { loading, data, refetch };
+}

apps/web/src/hooks/use-transaction-fee.ts

@@ -1,32 +1,33 @@
 import { BaseBridge } from "../bridges";
-import { SortedLnBridgeRelayInfosResData, Token } from "../types";
+import { Token } from "../types";
 import { useEffect, useState } from "react";
 import { Address } from "viem";
 import { from } from "rxjs";
+import { SortedRelayersQuery } from "../_generated_/gql/graphql";
 
 export function useTransactionFee(
  bridge: BaseBridge | undefined,
  sender: Address | undefined,
  recipient: Address | undefined,
  amount: bigint,
- relayData: SortedLnBridgeRelayInfosResData | undefined,
+ sortedRelayers: SortedRelayersQuery["sortedLnBridgeRelayInfos"],
 ) {
  const [fee, setFee] = useState<{ token: Token; value: bigint } | null>();
  const [loading, setLoading] = useState(false);
 
  useEffect(() => {
- const relayInfo = relayData?.sortedLnBridgeRelayInfos?.records.at(0);
+ const sortedRelayer = sortedRelayers?.records?.at(0);
 
  setLoading(true);
  const sub$$ = from(
  bridge?.getFee({
  sender,
  recipient,
  transferAmount: amount,
- relayer: relayInfo?.relayer,
- baseFee: relayInfo?.baseFee ? BigInt(relayInfo.baseFee) : undefined,
- protocolFee: relayInfo?.protocolFee ? BigInt(relayInfo.protocolFee) : undefined,
- liquidityFeeRate: relayInfo?.liquidityFeeRate ? BigInt(relayInfo.liquidityFeeRate) : undefined,
+ relayer: sortedRelayer?.relayer as Address | undefined,
+ baseFee: sortedRelayer?.baseFee ? BigInt(sortedRelayer.baseFee) : undefined,
+ protocolFee: sortedRelayer?.protocolFee ? BigInt(sortedRelayer.protocolFee) : undefined,
+ liquidityFeeRate: sortedRelayer?.liquidityFeeRate ? BigInt(sortedRelayer.liquidityFeeRate) : undefined,
  }) || Promise.resolve(undefined),
  ).subscribe({
  next: (res) => {
@@ -43,7 +44,7 @@ export function useTransactionFee(
  return () => {
  sub$$.unsubscribe();
  };
- }, [bridge, amount, sender, recipient, relayData?.sortedLnBridgeRelayInfos?.records]);
+ }, [bridge, amount, sender, recipient, sortedRelayers?.records]);
 
  return { loading, fee };
 }

apps/web/vite.config.ts

@@ -30,14 +30,15 @@ export default defineConfig({
  globPatterns: ["**/*.{js,css,html,svg,png,ico}"],
  cleanupOutdatedCaches: true,
  clientsClaim: true,
- maximumFileSizeToCacheInBytes: 3145728, // 3MB
+ maximumFileSizeToCacheInBytes: 6291456, // 6MB
  },
  devOptions: {
  enabled: false,
  navigateFallback: "index.html",
  suppressWarnings: true,
  type: "module",
  },
+ selfDestroying: true,
  }),
  sentryVitePlugin({
  org: "helix-ck",