Merge pull request #7 from okx/feat/bridgeTokenPair

Feat/bridge token pair

packages/dex-widget/src/types.ts

@@ -385,6 +385,7 @@ export interface IWidgetProps {
     providerType: ProviderType;
     walletType: WalletType;
     tokenPair?: IFormattedTokenPair;
+    bridgeTokenPair?: IFormattedTokenPair;
     lang?: string;
     chainIds?: string[];
 }
@@ -417,6 +418,8 @@ export interface IWidgetParams {
 
     tokenPair?: ITokenPair;
 
+    bridgeTokenPair?: ITokenPair;
+
     lang?: string;
 
     chainIds?: string[];

packages/dex-widget/src/updateIframeStyle.ts

@@ -71,7 +71,7 @@ function importWidthHeightStyle(width: number) {
 function updateIframeWidth(iframe: HTMLIFrameElement, width?: number) {
     const newWidth = Number(width);
     const { defaultClassName, specifiedClassName } = getStyleElementIdentifier();
-    if (width === undefined) {
+    if (!newWidth) {
         importWidthHeightStyle(DEFAULT_WIDTH);
         iframe.className = defaultClassName;
     } else {

packages/dex-widget/src/verifyParamsUtils.ts

@@ -7,6 +7,7 @@ export const ERROR_MSG = {
     INVALID_FEE_CONFIG: 'FeeConfig MUST be an object',
     INVALID_FEE_PERCENT: 'FeePercent MUST be a number > 0 and <= 3',
     INVALID_TOKEN_PAIR: 'Invalid tokenPair',
+    INVALID_BRIDGE_TOKEN_PAIR: 'Invalid bridgeTokenPair',
     INVALID_PROVIDER_TYPE: 'Invalid providerType',
     INVALID_WIDGET_VERSION: 'WIDGET_VERSION IS REQUIRED',
 };
@@ -68,7 +69,7 @@ export const checkTokenPairChain = (tokenPair: ITokenPair) => {
     return verifyChainId(tokenPair?.fromChain) && verifyChainId(tokenPair?.toChain);
 };
 
-export const verifyWidgetParams = ({ widgetVersion, feeConfig = {}, tokenPair, providerType }) => {
+export const verifyWidgetParams = ({ widgetVersion, feeConfig = {}, tokenPair, bridgeTokenPair, providerType }) => {
     const walletType = WALLET_TYPE[providerType];
 
     if (!widgetVersion) {
@@ -80,6 +81,9 @@ export const verifyWidgetParams = ({ widgetVersion, feeConfig = {}, tokenPair, p
     if (tokenPair && !checkTokenPairChain(tokenPair)) {
         throw new Error(ERROR_MSG.INVALID_TOKEN_PAIR);
     }
+    if (bridgeTokenPair && !checkTokenPairChain(bridgeTokenPair)) {
+        throw new Error(ERROR_MSG.INVALID_BRIDGE_TOKEN_PAIR);
+    }
     const errorTips = checkFeeConfig(feeConfig);
     if (errorTips) {
         throw new Error(errorTips);

packages/dex-widget/src/widgetHelp.ts

@@ -24,34 +24,71 @@ export const WALLET_TYPE: TWalletTypeRecord = {
 
 export const SOLANA_CHAIN_ID = 501;
 
-export function getSupportTradeTypeAndRoute(
+
+export const formatTokenPair = (tokenPair?: ITokenPair): IFormattedTokenPair => {
+    return tokenPair
+        ? {
+            inputChain: tokenPair.fromChain,
+            outputChain: tokenPair.toChain,
+            inputCurrency: tokenPair.fromToken,
+            outputCurrency: tokenPair.toToken,
+        }
+        : null;
+};
+
+// this function is designed to determine the supported trade types and the appropriate route based on the provided trade type and token pairs.
+// It returns an object containing the supported trade types, the route, and formatted token pairs.
+export function formatDefaultConfig(
     tradeType: TradeType,
     tokenPair?: ITokenPair,
-): { supportTradeType: TradeType[]; route: string } {
-    let supportTradeType = [];
-    let route = '';
+    bridgeTokenPair?: ITokenPair,
+): {
+    supportTradeType: TradeType[];
+    route: string;
+    defaultTokenPair?: IFormattedTokenPair,
+    formattedTokenPair?: IFormattedTokenPair,
+    formattedBridgeTokenPair?: IFormattedTokenPair
+} {
+    const formattedTokenPair = formatTokenPair(tokenPair);
+    const formattedBridgeTokenPair = formatTokenPair(bridgeTokenPair);
+
     if (tradeType === TradeType.SWAP) {
-        supportTradeType = [TradeType.SWAP];
-        route = WIDGET_ROUTE_CONSTANTS.SWAP;
-    } else if (tradeType === TradeType.BRIDGE) {
-        supportTradeType = [TradeType.BRIDGE];
-        route = WIDGET_ROUTE_CONSTANTS.BRIDGE;
-    } else {
-        supportTradeType = [TradeType.SWAP, TradeType.BRIDGE];
-
-        route =
-            !tokenPair || isSameChain(tokenPair)
-                ? WIDGET_ROUTE_CONSTANTS.SWAP
-                : WIDGET_ROUTE_CONSTANTS.BRIDGE;
+        return {
+            supportTradeType: [TradeType.SWAP],
+            route: WIDGET_ROUTE_CONSTANTS.SWAP,
+            defaultTokenPair: formattedTokenPair,
+            formattedTokenPair,
+            formattedBridgeTokenPair: null,
+        };
+    }
+
+    if (tradeType === TradeType.BRIDGE) {
+        return {
+            supportTradeType: [TradeType.BRIDGE],
+            route: WIDGET_ROUTE_CONSTANTS.BRIDGE,
+            defaultTokenPair: formattedBridgeTokenPair,
+            formattedTokenPair: null,
+            formattedBridgeTokenPair,
+        };
     }
+
+    const defaultIsBridge = !formattedTokenPair && formattedBridgeTokenPair;
+    const route = defaultIsBridge
+        ? WIDGET_ROUTE_CONSTANTS.BRIDGE
+        : WIDGET_ROUTE_CONSTANTS.SWAP;
+    const defaultTokenPair = defaultIsBridge ? formattedBridgeTokenPair : formattedTokenPair;
+
     return {
-        supportTradeType,
+        supportTradeType: [TradeType.SWAP, TradeType.BRIDGE],
         route,
+        defaultTokenPair,
+        formattedTokenPair,
+        formattedBridgeTokenPair,
     };
 }
 
 export const createWidgetParams = (widgetParams: IWidgetParams): IFormattedWidgetProps => {
-    const { baseUrl, feeConfig, tokenPair, providerType, tradeType, theme, lang, chainIds } =
+    const { baseUrl, feeConfig, tokenPair, bridgeTokenPair, providerType, tradeType, theme, lang, chainIds } =
         widgetParams;
 
     const widgetVersion = process.env.WIDGET_VERSION;
@@ -60,21 +97,18 @@ export const createWidgetParams = (widgetParams: IWidgetParams): IFormattedWidge
         widgetVersion,
         feeConfig,
         tokenPair,
+        bridgeTokenPair,
         providerType,
     });
 
-    // get trade type config and route
-    const { supportTradeType, route } = getSupportTradeTypeAndRoute(tradeType, tokenPair);
-
-    // trans token pair params for dex
-    const tokenPairParams: IFormattedTokenPair = tokenPair
-        ? {
-              inputChain: tokenPair.fromChain,
-              outputChain: tokenPair.toChain,
-              inputCurrency: tokenPair.fromToken,
-              outputCurrency: tokenPair.toToken,
-          }
-        : {};
+    // get trade type config, route, default token pair and formatted tokenPair/bridgeTokenPair config
+    const {
+        supportTradeType,
+        route,
+        defaultTokenPair,
+        formattedTokenPair,
+        formattedBridgeTokenPair,
+    } = formatDefaultConfig(tradeType, tokenPair, bridgeTokenPair);
 
     // define initial params
     const initParams = {
@@ -89,7 +123,7 @@ export const createWidgetParams = (widgetParams: IWidgetParams): IFormattedWidge
     // add token info to url params
     const urlParams = {
         ...initParams,
-        ...tokenPairParams,
+        ...defaultTokenPair,
     };
     const params = new URLSearchParams();
     // Append non-empty key-value pairs to URLSearchParams
@@ -110,7 +144,8 @@ export const createWidgetParams = (widgetParams: IWidgetParams): IFormattedWidge
     // add tokenPair, feeConfig, providerType to generate data
     const data = {
         ...initParams,
-        tokenPair: tokenPairParams,
+        tokenPair: formattedTokenPair,
+        bridgeTokenPair: formattedBridgeTokenPair,
         feeConfig,
         providerType,
     };

packages/widget-configurator/src/app/configurator/controls/TokenPairControl.tsx

@@ -3,16 +3,16 @@ import FormControl from '@mui/material/FormControl';
 import { Dispatch, SetStateAction } from 'react';
 import debounce from '@mui/material/utils/debounce';
 
-const TokenPairControl = ({ state, widgetHandler, params }: { state: [string, Dispatch<SetStateAction<string>>], params: any, widgetHandler: any }) => {
+const TokenPairControl = ({ state, widgetHandler, params, tokenPairKey }: { state: [string, Dispatch<SetStateAction<string>>], params: any, widgetHandler: any, tokenPairKey: 'tokenPair' | 'bridgeTokenPair' }) => {
     const [tokenPair, setTokenPair] = state;
     const updateTokenPair = debounce((value) => {
         if (!value) {
-            widgetHandler.current?.reload({ ...params, tokenPair: null })
+            widgetHandler.current?.reload({ ...params, [tokenPairKey]: null })
             return;
         }
         try {
             const tokenPairObj = JSON.parse(value)
-            widgetHandler.current?.reload({ ...params, tokenPair: tokenPairObj })
+            widgetHandler.current?.reload({ ...params, [tokenPairKey]: tokenPairObj })
         } catch (error) {
             console.log(error);
         }
@@ -31,7 +31,7 @@ const TokenPairControl = ({ state, widgetHandler, params }: { state: [string, Di
                 maxRows={4}
                 multiline
                 fullWidth
-                label="TokenPair"
+                label={tokenPairKey}
                 placeholder={JSON.stringify(
                     {
                         fromChain: 1,

packages/widget-configurator/src/app/configurator/controls/WidthControl.tsx

@@ -0,0 +1,33 @@
+import { Dispatch, SetStateAction, useCallback } from 'react';
+import TextField from '@mui/material/TextField';
+import FormControl from '@mui/material/FormControl';
+import debounce from '@mui/material/utils/debounce';
+
+const WidthControl = ({ state, widgetHandler, params }: { state: [string, Dispatch<SetStateAction<string>>], widgetHandler: any, params: any }) => {
+    const [width, setWidth] = state;
+
+    const updateWidth = debounce((width: string) => {
+        widgetHandler.current?.updateParams({ ...params, width: width })
+    }, 500);
+
+    const handleChange = useCallback((event: any) => {
+        const width = event.target.value;
+        setWidth(width)
+        updateWidth(width);
+    }, [params]);
+
+    return (
+        <FormControl fullWidth>
+            <TextField
+                size='small'
+                value={width}
+                fullWidth
+                label='Width'
+                placeholder='number'
+                onChange={handleChange}
+            />
+        </FormControl>
+    );
+};
+
+export default WidthControl;

packages/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts

@@ -11,9 +11,11 @@ export function useWidgetParams(configuratorState: ConfiguratorState) {
             providerType,
             lang,
             tokenPair,
+            bridgeTokenPair,
             feeConfig,
             provider,
             baseUrl,
+            width,
         } = configuratorState;
         const params: any = {
             chainIds: chainIds ? chainIds.split(',') : [],
@@ -23,11 +25,14 @@ export function useWidgetParams(configuratorState: ConfiguratorState) {
             lang,
             provider,
             baseUrl,
+            width,
+            bridgeTokenPair,
         };
 
-        let parseTokenPair, parseFeeConfig;
+        let parseTokenPair, parseBridgeTokenPair, parseFeeConfig;
         try {
             parseTokenPair = tokenPair ? JSON.parse(tokenPair) : null;
+            parseBridgeTokenPair = bridgeTokenPair ? JSON.parse(bridgeTokenPair) : null;
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
         } catch (error) {
             parseTokenPair = null;
@@ -42,6 +47,10 @@ export function useWidgetParams(configuratorState: ConfiguratorState) {
             params.tokenPair = parseTokenPair;
         }
 
+        if (parseBridgeTokenPair) {
+            params.bridgeTokenPair = parseBridgeTokenPair;
+        }
+
         if (parseFeeConfig) {
             params.feeConfig = parseFeeConfig;
         }