Merge pull request #220 from skip-mev/sync-solana-and-rapid-relay

rapid relay
skip-mev · Mar 24, 2024 · f050dfd · f050dfd
2 parents ec17960 + ec36b80
commit f050dfd
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,10 +56,12 @@
     "@injectivelabs/sdk-ts": "^1.14.5",
     "@injectivelabs/utils": "^1.14.5",
     "@keplr-wallet/types": "^0.12.66",
+    "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@sentry/nextjs": "^7.99.0",
     "@skip-router/core": "2.0.0-rc.1",

diff --git a/src/components/SimpleTooltip.tsx b/src/components/SimpleTooltip.tsx
@@ -4,7 +4,7 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
 import { cn } from "@/utils/ui";
 
 type Props = Tooltip.TooltipProps & {
-  type?: "default" | "warning";
+  type?: "default" | "warning" | "brand";
   enabled?: boolean;
   label: ReactNode;
   children: ReactNode;
@@ -30,11 +30,18 @@ export const SimpleTooltip = (props: Props) => {
             "animate-slide-up-and-fade",
             type === "warning" && "bg-[#fbeef1] text-[#FF486E]",
             type === "warning" && "font-medium",
+            type === "brand" && "bg-[#FF486E] text-white",
             _content?.className,
           )}
         >
           {label}
-          <Tooltip.Arrow className={cn("fill-white drop-shadow", type === "warning" && "fill-[#fbeef1]")} />
+          <Tooltip.Arrow
+            className={cn(
+              "fill-white drop-shadow",
+              type === "warning" && "fill-[#fbeef1]",
+              type === "brand" && "fill-[#FF486E]",
+            )}
+          />
         </Tooltip.Content>
       </Tooltip.Portal>
     </Tooltip.Root>

diff --git a/src/components/SwapWidget/SwapDetails.tsx b/src/components/SwapWidget/SwapDetails.tsx
@@ -69,6 +69,33 @@ export const SwapDetails = ({
     }
   }, [axelarTransferOperation, hyperlaneTransferOperation]);
 
+  const isRapidRelay = route.estimatedFees?.some((fee) => fee.feeType === "RAPID_RELAY");
+
+  const rapidRelayFee = useMemo(() => {
+    if (!isRapidRelay) return;
+    const fee = route.estimatedFees.filter((fee) => fee.feeType === "RAPID_RELAY");
+    const sameAsset = fee.every((fee, i, arr) => fee.originAsset.symbol === arr[0].originAsset.symbol);
+    if (!sameAsset) return;
+    const computedAmount = fee.reduce((acc, fee) => acc + Number(fee.amount), 0);
+    const computedUsd = fee.reduce((acc, fee) => acc + Number(fee.usdAmount), 0);
+    const inAsset = (computedAmount / Math.pow(10, fee[0].originAsset.decimals || 6)).toLocaleString("en-US", {
+      maximumFractionDigits: 6,
+    });
+
+    return {
+      amount: Number(inAsset),
+      inAsset: `${inAsset} ${fee[0].originAsset.symbol}`,
+      inUSD: `${formatUSD(computedUsd)}`,
+    };
+  }, [isRapidRelay, route.estimatedFees]);
+
+  const totalAmountOut = useMemo(() => {
+    if (isRapidRelay) {
+      return String(parseFloat(amountOut) + (rapidRelayFee?.amount || 0));
+    }
+    return amountOut;
+  }, [amountOut, isRapidRelay, rapidRelayFee?.amount]);
+
   if (!(sourceChain && sourceAsset && destinationChain && destinationAsset)) {
     return null;
   }
@@ -89,7 +116,7 @@ export const SwapDetails = ({
           srcAsset={sourceAsset}
           destAsset={destinationAsset}
           amountIn={amountIn}
-          amountOut={amountOut}
+          amountOut={totalAmountOut}
         >
           {({ left, right, conversion, toggle }) => (
             <div>
@@ -195,11 +222,24 @@ export const SwapDetails = ({
             </SimpleTooltip>
             {parseFloat(gasAmount).toLocaleString()}
           </dd> */}
-          <dt>Bridging Fee</dt>
-          <dd>
-            {bridgingFee?.inAsset ?? "-"}{" "}
-            <span className="text-sm tabular-nums text-neutral-400">{bridgingFee?.inUSD ?? "-"}</span>
-          </dd>
+          {bridgingFee && (
+            <>
+              <dt>Bridging Fee</dt>
+              <dd>
+                {bridgingFee?.inAsset ?? "-"}{" "}
+                <span className="text-sm tabular-nums text-neutral-400">{bridgingFee?.inUSD ?? "-"}</span>
+              </dd>
+            </>
+          )}
+          {rapidRelayFee && (
+            <>
+              <dt>Relayer Fee</dt>
+              <dd>
+                {rapidRelayFee?.inAsset ?? "-"}{" "}
+                <span className="text-sm tabular-nums text-neutral-400">{rapidRelayFee?.inUSD ?? "-"}</span>
+              </dd>
+            </>
+          )}
         </dl>
       </Collapsible.Content>
     </Collapsible.Root>

diff --git a/src/solve/queries.ts b/src/solve/queries.ts
@@ -120,6 +120,7 @@ export function useRoute({
               allowMultiTx: true,
               allowUnsafe: true,
               experimentalFeatures,
+              rapidRelay: true,
             }
           : {
               amountOut: amount,
@@ -131,6 +132,7 @@ export function useRoute({
               allowMultiTx: true,
               allowUnsafe: true,
               experimentalFeatures,
+              rapidRelay: true,
             },
       );
 
@@ -140,7 +142,8 @@ export function useRoute({
 
       return route;
     },
-    refetchInterval: refetchCount < 10 ? 1000 * 5 : false,
+    refetchInterval: refetchCount < 10 ? 1000 * 10 : false,
+    retry: 1,
     enabled:
       enabled &&
       !!sourceAsset &&

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+const { blackA } = require("@radix-ui/colors");
 
 const defaultTheme = require("tailwindcss/defaultTheme");
 const plugin = require("tailwindcss/plugin");
@@ -32,6 +33,9 @@ module.exports = {
         "slide-left-and-fade": `slide-left-and-fade 300ms cubic-bezier(0.16, 1, 0.3, 1)`,
         "spin-swap": `spin 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.27)`,
       },
+      colors: {
+        ...blackA,
+      },
       fontFamily: {
         sans: ["Jost", ...defaultTheme.fontFamily.sans],
       },