diff --git a/package-lock.json b/package-lock.json index 1c14879e..df617acd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,10 +35,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", @@ -9741,6 +9743,11 @@ "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz", "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==" }, + "node_modules/@radix-ui/colors": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-3.0.0.tgz", + "integrity": "sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg==" + }, "node_modules/@radix-ui/number": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz", @@ -10192,6 +10199,35 @@ } } }, + "node_modules/@radix-ui/react-switch": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.0.3.tgz", + "integrity": "sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-previous": "1.0.1", + "@radix-ui/react-use-size": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-tooltip": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz", @@ -10296,6 +10332,23 @@ } } }, + "node_modules/@radix-ui/react-use-previous": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz", + "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==", + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-rect": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz", diff --git a/package.json b/package.json index a6e38adc..d1cb2923 100644 --- 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 index 68530a26..d43a4197 100644 --- 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} - + diff --git a/src/components/SwapWidget/SwapDetails.tsx b/src/components/SwapWidget/SwapDetails.tsx index f2e65f1c..ab1e88e4 100644 --- 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 }) => (
@@ -195,11 +222,24 @@ export const SwapDetails = ({ {parseFloat(gasAmount).toLocaleString()} */} -
Bridging Fee
-
- {bridgingFee?.inAsset ?? "-"}{" "} - {bridgingFee?.inUSD ?? "-"} -
+ {bridgingFee && ( + <> +
Bridging Fee
+
+ {bridgingFee?.inAsset ?? "-"}{" "} + {bridgingFee?.inUSD ?? "-"} +
+ + )} + {rapidRelayFee && ( + <> +
Relayer Fee
+
+ {rapidRelayFee?.inAsset ?? "-"}{" "} + {rapidRelayFee?.inUSD ?? "-"} +
+ + )} diff --git a/src/solve/queries.ts b/src/solve/queries.ts index f9acedfd..6d378a3d 100644 --- 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 index 7f403f50..fa4579ab 100644 --- 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], },