Merge pull request #225 from skip-mev/solana-rapid-relay

Solana rapid relay

jest.config.js

@@ -13,6 +13,7 @@ const customJestConfig = {
   moduleNameMapper: {
     isows: "<rootDir>/node_modules/isows/_cjs/index.js", // https://github.com/wagmi-dev/viem/issues/1329
     tinykeys: "<rootDir>/node_modules/tinykeys/dist/tinykeys.js",
+    uuid: require.resolve("uuid"),
   },
   setupFiles: ["<rootDir>/jest.polyfills.js"],
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],

package.json

@@ -56,13 +56,19 @@
     "@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": "^1.4.0",
+    "@skip-router/core": "2.0.0",
+    "@solana/spl-token": "^0.4.1",
+    "@solana/wallet-adapter-react": "^0.15.35",
+    "@solana/wallet-adapter-wallets": "^0.19.31",
+    "@solana/web3.js": "^1.91.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tanstack/query-sync-storage-persister": "^5.18.1",
     "@tanstack/react-query": "^5.18.1",

src/components/ConnectedWalletButton.tsx

@@ -24,6 +24,7 @@ export const ConnectedWalletButton = forwardRef<HTMLButtonElement, Props>(
       >
         {walletLogo && (
           <Image
+            unoptimized
             height={16}
             width={16}
             alt={walletName}

src/components/RouteDisplay/TransferStep.tsx

@@ -172,6 +172,7 @@ export const TransferStep = ({ action, actions, statusData }: TransferStepProps)
           <span>Transfer</span>
           <Gap.Child>
             <Image
+              unoptimized
               className="inline-block h-4 w-4 object-contain"
               height={16}
               width={16}
@@ -183,6 +184,7 @@ export const TransferStep = ({ action, actions, statusData }: TransferStepProps)
           <span>from</span>
           <Gap.Child>
             <Image
+              unoptimized
               className="inline-block h-4 w-4 object-contain"
               height={16}
               width={16}
@@ -197,6 +199,7 @@ export const TransferStep = ({ action, actions, statusData }: TransferStepProps)
           <span>to</span>
           <Gap.Child>
             <Image
+              unoptimized
               className="inline-block h-4 w-4 object-contain"
               height={16}
               width={16}
@@ -212,6 +215,7 @@ export const TransferStep = ({ action, actions, statusData }: TransferStepProps)
               <Gap.Child>
                 {bridge.name.toLowerCase() !== "ibc" && (
                   <Image
+                    unoptimized
                     className="inline-block h-4 w-4 object-contain"
                     height={16}
                     width={16}

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>

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>

src/components/SwapWidget/useSwapWidget.ts

@@ -1,6 +1,7 @@
 import { GasPrice } from "@cosmjs/stargate";
 import { useManager as useCosmosManager } from "@cosmos-kit/react";
 import { Asset, BridgeType } from "@skip-router/core";
+import { useWallet } from "@solana/wallet-adapter-react";
 import { BigNumber } from "bignumber.js";
 import { MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
 import toast from "react-hot-toast";
@@ -59,6 +60,7 @@ export function useSwapWidget() {
     },
   });
   const { disconnect } = useWagmiDisconnect();
+  const { wallets } = useWallet();
 
   const [userTouchedDstAsset, setUserTouchedDstAsset] = useState(false);
 
@@ -110,8 +112,7 @@ export function useSwapWidget() {
     return assetsByChainID(srcChain?.chainID);
 
     // reason: only update when `srcChain?.chainID` changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [srcChain?.chainID]);
+  }, [srcChain?.chainID, assetsByChainID]);
 
   const { data: balances } = useBalancesByChain({
     address: srcAccount?.address,
@@ -644,13 +645,22 @@ export function useSwapWidget() {
             disconnect();
           }
         }
+        if (srcChain && srcChain.chainType === "svm") {
+          const solanaWallet = wallets.find((w) => w.adapter.name === srcTrack?.walletName);
+
+          if (solanaWallet?.adapter.connected) {
+            trackWallet.track("source", srcChain.chainID, solanaWallet.adapter.name, srcChain.chainType);
+          } else {
+            trackWallet.untrack("source");
+          }
+        }
       },
       {
         equalityFn: shallow,
         fireImmediately: true,
       },
     );
-  }, [connector, evmChain, getWalletRepo, switchNetworkAsync]);
+  }, [connector, disconnect, evmChain, getWalletRepo, switchNetworkAsync, wallets]);
 
   /**
    * sync destination chain wallet connections
@@ -706,6 +716,15 @@ export function useSwapWidget() {
             disconnect();
           }
         }
+        if (dstChain && dstChain.chainType === "svm") {
+          const solanaWallet = wallets.find((w) => w.adapter.name === srcTrack?.walletName);
+
+          if (solanaWallet?.adapter.connected) {
+            trackWallet.track("destination", dstChain.chainID, solanaWallet.adapter.name, dstChain.chainType);
+          } else {
+            trackWallet.untrack("destination");
+          }
+        }
       },
       {
         equalityFn: shallow,

src/components/TransactionDialog/TransactionDialogContent.tsx

@@ -161,7 +161,6 @@ function TransactionDialogContent({ route, onClose, isAmountError, transactionCo
   }
 
   const estimatedFinalityTime = useFinalityTimeEstimate(route);
-
   if (isTxComplete && txStatus.data?.isSuccess) {
     return (
       <TransactionSuccessView