fix: add swap extra data show (#4112)

OneKeyHQ · Feb 2, 2024 · 9bfc51d · 9bfc51d
1 parent 0b5b0be
commit 9bfc51d
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 4 deletions.
diff --git a/packages/kit/src/views/Swap/Main/Swap/SwapContent.tsx b/packages/kit/src/views/Swap/Main/Swap/SwapContent.tsx
@@ -137,7 +137,7 @@ export const SwapContent = () => {
   const { wallet, network } = useActiveWalletAccount();
   const swapMaintain = useAppSelector((s) => s.swapTransactions.swapMaintain);
   const { formattedAmounts } = useDerivedSwapState();
-
+  const quote = useAppSelector((s) => s.swap.quote);
   const isDisabled = !wallet || !network || swapMaintain;
 
   const onSelectInput = useCallback(() => {
@@ -219,6 +219,7 @@ export const SwapContent = () => {
             onChange={onChangeOutput}
             onPress={onSelectOutput}
             containerProps={containerProps.lower}
+            extraData={quote?.quoteExtraData}
           />
         </Box>
         {isDisabled ? (

diff --git a/packages/kit/src/views/Swap/components/ReceivingTokenInput/index.tsx b/packages/kit/src/views/Swap/components/ReceivingTokenInput/index.tsx
@@ -1,14 +1,16 @@
 import type { ComponentProps, FC, ReactElement } from 'react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useFocusEffect } from '@react-navigation/native';
+import BigNumber from 'bignumber.js';
 import { useIntl } from 'react-intl';
 import { StyleSheet, View } from 'react-native';
 
 import {
   Box,
   CustomSkeleton,
   Icon,
+  Image,
   NumberInput,
   Pressable,
   Switch,
@@ -36,6 +38,8 @@ import {
 } from '../../utils';
 import { TokenDisplay } from '../TokenDisplay';
 
+import type { IQouterExtraData } from '../../quoter/socket';
+
 type TokenInputProps = {
   type: 'INPUT' | 'OUTPUT';
   label?: string;
@@ -44,6 +48,7 @@ type TokenInputProps = {
   onChange?: (text: string) => void;
   containerProps?: ComponentProps<typeof Box>;
   isDisabled?: boolean;
+  extraData?: IQouterExtraData;
 };
 
 const TokenInputReceivingAddress: FC = () => {
@@ -389,14 +394,50 @@ const TokenInput: FC<TokenInputProps> = ({
   onPress,
   onChange,
   containerProps,
+  extraData,
   isDisabled,
 }) => {
   const intl = useIntl();
   const token = useAppSelector((s) => s.swap.outputToken);
   const price = useTokenPrice(token);
   const loading = useAppSelector((s) => s.swap.loading);
   const independentField = useAppSelector((s) => s.swap.independentField);
-
+  const extraDataContent = useMemo(() => {
+    if (!extraData?.socketBridgeExtraData?.arbRebateData) return null;
+    const { arbRebateData } = extraData.socketBridgeExtraData;
+    const {
+      amountInUsd,
+      amount,
+      asset: { decimals, logoURI },
+    } = arbRebateData;
+    const amountParsed = new BigNumber(amount)
+      .shiftedBy(-decimals)
+      .decimalPlaces(4, BigNumber.ROUND_DOWN)
+      .toFixed();
+    return (
+      <>
+        <Typography.Body2
+          textAlign="center"
+          bold
+        >{`+${amountParsed}`}</Typography.Body2>
+        <Box
+          justifyContent="center"
+          alignItems="center"
+          size={4}
+          mx="2px"
+          borderRadius="full"
+          backgroundColor="black"
+        >
+          <Image source={{ uri: logoURI }} size={3} />
+        </Box>
+        <Typography.Body2 textAlign="center">{`($${amountInUsd.toFixed(
+          2,
+        )})${intl.formatMessage({
+          id: 'title__reward',
+        })}`}</Typography.Body2>
+      </>
+    );
+  }, [extraData?.socketBridgeExtraData, intl]);
   return (
     <Box {...containerProps} position="relative">
       <Box position="relative">
@@ -455,6 +496,7 @@ const TokenInput: FC<TokenInputProps> = ({
                   <Box position="absolute" bottom="26px" right={2}>
                     <Box pointerEvents="none">
                       <Typography.Body2 color="text-subdued" numberOfLines={2}>
+                        {extraDataContent}
                         <FormatCurrency
                           numbers={[price ?? 0, inputValue ?? 0]}
                           render={(ele) => (

diff --git a/packages/kit/src/views/Swap/quoter/index.ts b/packages/kit/src/views/Swap/quoter/index.ts
@@ -55,6 +55,7 @@ import type {
   TransactionDetails,
   TransactionProgress,
 } from '../typings';
+import type { IQouterExtraData } from './socket';
 import type { AxiosResponse } from 'axios';
 
 type TransactionOrder = {
@@ -143,6 +144,7 @@ type FetchQuoteHttpResult = {
   estimatedPriceImpact?: string;
   onChainSatsPerVbyte?: string;
   notImpactBySlippage?: boolean;
+  quoterExtraData?: IQouterExtraData;
 };
 
 type FetchQuoteHttpLimit = {
@@ -387,6 +389,7 @@ export class SwapQuoter {
         estimatedPriceImpact: fetchQuote.estimatedPriceImpact,
         onChainSatsPerVbyte: fetchQuote.onChainSatsPerVbyte,
         notImpactBySlippage: fetchQuote.notImpactBySlippage,
+        quoteExtraData: fetchQuote.quoterExtraData,
       };
 
       if (data.allowanceTarget && spendersAllowance) {

diff --git a/packages/kit/src/views/Swap/quoter/socket.ts b/packages/kit/src/views/Swap/quoter/socket.ts
@@ -13,7 +13,7 @@ import type {
 } from '../typings';
 import type { Axios } from 'axios';
 
-interface SocketAsset {
+export interface SocketAsset {
   address: string;
   chainId: number;
   decimals: number;
@@ -23,6 +23,20 @@ interface SocketAsset {
   symbol: string;
 }
 
+export interface ISocketArbRebateData {
+  amount: string;
+  amountInUsd: number;
+  asset: SocketAsset;
+}
+
+interface ISocketExtraData {
+  arbRebateData: ISocketArbRebateData;
+}
+
+export interface IQouterExtraData {
+  socketBridgeExtraData?: ISocketExtraData;
+}
+
 interface SocketUserTxs {
   chainId: number;
   txType: string;
@@ -48,6 +62,7 @@ export interface SocketRoute {
   usedDexName?: string;
   isOnlySwapRoute?: boolean;
   userTxs?: SocketUserTxs[];
+  extraData?: ISocketExtraData;
 }
 
 export type SocketRouteStatus =

diff --git a/packages/kit/src/views/Swap/typings.ts b/packages/kit/src/views/Swap/typings.ts
@@ -4,6 +4,7 @@ import type { Token } from '@onekeyhq/engine/src/types/token';
 import type { IEncodedTx } from '@onekeyhq/engine/src/vaults/types';
 
 import type { SendConfirmPayloadBase } from '../Send/types';
+import type { IQouterExtraData } from './quoter/socket';
 
 export enum SwapRoutes {
   Swap = 'Swap',
@@ -197,6 +198,7 @@ export type QuoteData = {
   estimatedPriceImpact?: string;
   onChainSatsPerVbyte?: string;
   notImpactBySlippage?: boolean;
+  quoteExtraData?: IQouterExtraData;
 };
 
 type WrapperTransactionType = 'Withdraw' | 'Deposite';