feat: send swap tx

src/components/Modal/Onboarding/OnboardingInput.tsx

@@ -0,0 +1,135 @@
+import { useSwapBalance } from "@/hooks";
+import {
+  chainIdToName,
+  tokenAddress,
+  type TokenChainType,
+} from "@/utils/tokenAddress";
+import { Box, NumberInput, Select, SimpleGrid, Text } from "@mantine/core";
+import { parseUnits } from "viem";
+
+export type OnboardingParams = {
+  srcChain: TokenChainType | null;
+  dstChain: TokenChainType | null;
+  srcToken: string | null;
+  dstToken: string | null;
+  amount: string | undefined;
+};
+
+export function OnboardingInput({
+  params,
+  setParams,
+}: {
+  params: OnboardingParams;
+  setParams: (f: (prev: OnboardingParams) => OnboardingParams) => void;
+}) {
+  const { data } = useSwapBalance({
+    chainId: params.srcChain,
+    tokenAddress: params.srcToken,
+  });
+  const insufficientError = () => {
+    if (!data || !params.amount) return undefined;
+    const amountBN = parseUnits(params.amount, data.decimals);
+    if (amountBN <= 0n) return "Must be greater than 0";
+    return data.value < amountBN ? "Insufficient Balance" : undefined;
+  };
+
+  return (
+    <SimpleGrid cols={2} spacing="lg" className="divide-x divide-gray-700">
+      <Box className="p-4 space-y-4">
+        <Text w={500} className="mb-2">
+          Source Chain
+        </Text>
+        <Select
+          value={params.srcChain?.toString()}
+          onChange={(value) => {
+            setParams((prev: OnboardingParams) => ({
+              ...prev,
+              srcChain: value as unknown as TokenChainType,
+              srcToken: null,
+            }));
+          }}
+          data={Object.keys(tokenAddress).map((chainId) => ({
+            value: chainId,
+            label: chainIdToName(chainId as unknown as TokenChainType),
+          }))}
+          className="mb-4"
+        />
+        <Text w={500}>Source Token</Text>
+        <div>
+          {data && (
+            <Text w={500} className="text-sm text-gray-500">
+              Balance {data.formatted}
+            </Text>
+          )}
+          <Select
+            value={params.srcToken}
+            onChange={(value) =>
+              setParams((prev) => ({ ...prev, srcToken: value }))
+            }
+            data={
+              params.srcChain
+                ? Object.entries(tokenAddress[params.srcChain]).map(
+                    ([token, address]) => ({
+                      value: address,
+                      label: token,
+                    })
+                  )
+                : []
+            }
+          />
+        </div>
+
+        <NumberInput
+          label="Input Amount"
+          hideControls
+          className="mt-1"
+          value={params.amount}
+          onChange={(value) =>
+            setParams((prev) => ({ ...prev, amount: value.toString() }))
+          }
+          error={insufficientError()}
+        />
+      </Box>
+
+      <Box className="p-4 space-y-4">
+        <Text w={500} className="mb-2">
+          Destination Chain
+        </Text>
+        <Select
+          value={params.dstChain?.toString()}
+          onChange={(value) => {
+            setParams((prev: OnboardingParams) => ({
+              ...prev,
+              dstChain: value as unknown as TokenChainType,
+              dstToken: null,
+            }));
+          }}
+          data={Object.keys(tokenAddress).map((chainId) => ({
+            value: chainId,
+            label: chainIdToName(chainId as unknown as TokenChainType),
+          }))}
+          className="mb-4"
+        />
+        <Text w={500} className="mb-2">
+          Destination Token
+        </Text>
+        <Select
+          value={params.dstToken}
+          onChange={(value) =>
+            setParams((prev) => ({ ...prev, dstToken: value }))
+          }
+          data={
+            params.dstChain
+              ? Object.entries(tokenAddress[params.dstChain]).map(
+                  ([token, address]) => ({
+                    value: address,
+                    label: token,
+                  })
+                )
+              : []
+          }
+        />
+      </Box>
+    </SimpleGrid>
+  );
+}

src/components/Modal/Onboarding/OnboardingPreview.tsx

@@ -0,0 +1,59 @@
+import {
+  chainIdToName,
+  getTokenByChainIdAndAddress,
+  type TokenChainType,
+} from "@/utils/tokenAddress";
+import { Box, SimpleGrid, Text } from "@mantine/core";
+
+export type OnboardingParams = {
+  srcChain: TokenChainType | null;
+  dstChain: TokenChainType | null;
+  srcToken: string | null;
+  dstToken: string | null;
+  amount: string | undefined;
+};
+
+export function OnboardingPreview({
+  params,
+  amountOut,
+}: {
+  params: OnboardingParams;
+  amountOut: string;
+}) {
+  const { srcChain, dstChain, srcToken, dstToken, amount } = params;
+  if (!srcChain || !dstChain || !srcToken || !dstToken || !amount) return null;
+
+  return (
+    <SimpleGrid cols={2} spacing="lg" className="divide-x divide-gray-700">
+      <Box className="p-4 space-y-4">
+        <Text w={500} className="mb-2">
+          Source Chain
+        </Text>
+        <Text>{chainIdToName(srcChain)}</Text>
+        <Text w={500} className="mb-2">
+          Source Token
+        </Text>
+        <Text>{getTokenByChainIdAndAddress(srcChain, srcToken)}</Text>
+        <Text w={500} className="mb-2">
+          Input Amount
+        </Text>
+        <Text>{params.amount}</Text>
+      </Box>
+
+      <Box className="p-4 space-y-4">
+        <Text w={500} className="mb-2">
+          Destination Chain
+        </Text>
+        <Text>{chainIdToName(dstChain)}</Text>
+        <Text w={500} className="mb-2">
+          Destination Token
+        </Text>
+        <Text>{getTokenByChainIdAndAddress(dstChain, dstToken)}</Text>
+        <Text w={500} className="mb-2">
+          Output Amount
+        </Text>
+        <Text>{amountOut}</Text>
+      </Box>
+    </SimpleGrid>
+  );
+}

src/components/Modal/Onboarding/index.ts

@@ -0,0 +1,3 @@
+export { OnboardingPreview } from "./OnboardingPreview";
+
+export { OnboardingInput, type OnboardingParams } from "./OnboardingInput";