@wheelx/widget 0.0.1

package/dist/internal/SwapAndBridge/Timer.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Text } from '../ui';
+const Timer = ({ stop, onTick, valueStyle }) => {
+    const [seconds, setSeconds] = useState(0);
+    const [isRunning, setIsRunning] = useState(false);
+    const timer = useRef(null);
+    const formatTime = (totalSeconds) => {
+        return `${totalSeconds} s`;
+    };
+    const startTimer = useCallback(() => {
+        if (!isRunning) {
+            setIsRunning(true);
+            setSeconds(0);
+        }
+    }, [isRunning]);
+    useEffect(() => {
+        startTimer();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        if (onTick) {
+            onTick(seconds);
+        }
+    }, [seconds, onTick]);
+    useEffect(() => {
+        if (isRunning) {
+            timer.current = setInterval(() => {
+                setSeconds((prev) => prev + 1);
+            }, 1000);
+        }
+        return () => {
+            if (timer.current) {
+                clearInterval(timer.current);
+            }
+        };
+    }, [isRunning]);
+    useEffect(() => {
+        if (stop) {
+            setIsRunning(false);
+            if (timer.current) {
+                clearInterval(timer.current);
+                timer.current = null;
+            }
+        }
+    }, [stop]);
+    return (_jsx(Text, { variant: {
+            base: 'content8',
+            md: 'content7'
+        }, color: '#15003E', ...(valueStyle || {}), children: formatTime(seconds) }));
+};
+export default Timer;
+//# sourceMappingURL=Timer.js.map

package/dist/internal/SwapAndBridge/Timer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timer.js","sourceRoot":"","sources":["../../../src/internal/SwapAndBridge/Timer.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAQ5B,MAAM,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAS,EAAE,EAAE;IACpD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IACjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAC1D,MAAM,KAAK,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAA;IAEjD,MAAM,UAAU,GAAG,CAAC,YAAoB,EAAU,EAAE;QAClD,OAAO,GAAG,YAAY,IAAI,CAAA;IAC5B,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,YAAY,CAAC,IAAI,CAAC,CAAA;YAClB,UAAU,CAAC,CAAC,CAAC,CAAA;QACf,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,EAAE,CAAA;QACZ,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,OAAO,CAAC,CAAA;QACjB,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;IAErB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE,CAAC;YACd,KAAK,CAAC,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;gBAC/B,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAA;YAChC,CAAC,EAAE,IAAI,CAAC,CAAA;QACV,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;gBAClB,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;YAC9B,CAAC;QACH,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE,CAAC;YACT,YAAY,CAAC,KAAK,CAAC,CAAA;YACnB,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;gBAClB,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;gBAC5B,KAAK,CAAC,OAAO,GAAG,IAAI,CAAA;YACtB,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,OAAO,CACL,KAAC,IAAI,IACH,OAAO,EAAE;YACP,IAAI,EAAE,UAAU;YAChB,EAAE,EAAE,UAAU;SACf,EACD,KAAK,EAAE,SAAS,KACZ,CAAC,UAAU,IAAI,EAAE,CAAC,YAErB,UAAU,CAAC,OAAO,CAAC,GACf,CACR,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/internal/SwapAndBridge/TipsContent.d.ts

@@ -0,0 +1,18 @@
+import { TokenInfo } from '../api';
+interface TipsContentProps {
+    priceImpact: {
+        bridgeFee: string;
+        dstGasFee: string;
+        swapFee: string;
+        before_discount_fee: string;
+        discount_percentage: string | undefined;
+    };
+    toTokenInfo: TokenInfo;
+    fromTokenInfo: TokenInfo;
+    router_type: string | null | undefined;
+    fromAmountToUsd: string | null | undefined;
+    toAmountToUsd: string | null | undefined;
+}
+export declare const TipsContent: ({ priceImpact, fromTokenInfo, toTokenInfo, fromAmountToUsd, toAmountToUsd }: TipsContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TipsContent.d.ts.map

package/dist/internal/SwapAndBridge/TipsContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TipsContent.d.ts","sourceRoot":"","sources":["../../../src/internal/SwapAndBridge/TipsContent.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAGlC,UAAU,gBAAgB;IACxB,WAAW,EAAE;QACX,SAAS,EAAE,MAAM,CAAA;QACjB,SAAS,EAAE,MAAM,CAAA;QACjB,OAAO,EAAE,MAAM,CAAA;QACf,mBAAmB,EAAE,MAAM,CAAA;QAC3B,mBAAmB,EAAE,MAAM,GAAG,SAAS,CAAA;KACxC,CAAA;IACD,WAAW,EAAE,SAAS,CAAA;IACtB,aAAa,EAAE,SAAS,CAAA;IACxB,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IACtC,eAAe,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAC1C,aAAa,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;CACzC;AAED,eAAO,MAAM,WAAW,GAAI,6EAOzB,gBAAgB,4CAmclB,CAAA"}

package/dist/internal/SwapAndBridge/TipsContent.js

@@ -0,0 +1,217 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { HStack, VStack, Icon, Box } from '@chakra-ui/react';
+import { Heading, Text } from '../ui';
+import { Fraction } from 'bi-fraction';
+import { FaGasPump } from 'react-icons/fa6';
+import { useEffect, useState } from 'react';
+export const TipsContent = ({ priceImpact, fromTokenInfo, toTokenInfo, 
+// router_type,
+fromAmountToUsd, toAmountToUsd }) => {
+    const { chain_id: toChainId /*symbol: toTokenSymbol*/ } = toTokenInfo;
+    const { chain_id: fromChainId /*symbol: fromTokenSymbol*/ } = fromTokenInfo;
+    const totalPriceImpact = new Fraction(priceImpact.bridgeFee)
+        .add(priceImpact.dstGasFee)
+        .add(priceImpact.swapFee);
+    const [hasDiscount, setHasDiscount] = useState(false);
+    useEffect(() => {
+        if (priceImpact) {
+            if (priceImpact.before_discount_fee &&
+                priceImpact.before_discount_fee !== priceImpact.swapFee &&
+                // priceImpact.swapFee !== '0' &&
+                priceImpact.before_discount_fee !== '0') {
+                setHasDiscount(true);
+            }
+            else {
+                setHasDiscount(false);
+            }
+        }
+    }, [priceImpact]);
+    const renderTotalPriceImpact = () => {
+        if (toAmountToUsd === null) {
+            return '-';
+        }
+        // only exact match 0, return free, if 0.00000 is not free
+        if (priceImpact.bridgeFee === '0' &&
+            priceImpact.dstGasFee === '0' &&
+            priceImpact.swapFee === '0') {
+            return 'Free';
+        }
+        const priceImpactValue = +totalPriceImpact.toFormat({ decimalPlaces: 2 });
+        const sif = +swapImpactFee();
+        // console.log('priceImpactValue:', priceImpactValue, 'sif:', sif)
+        const total = -priceImpactValue + -sif;
+        if (total < 0) {
+            return `-$${(-total).toFixed(2)}`;
+        }
+        return `+$${total.toFixed(2)}`;
+    };
+    // const renderTotalPriceImpact = () => {
+    //   // only exact match 0, return free, if 0.00000 is not free
+    //   if (
+    //     +fromAmountToUsd - +toAmountToUsd === 0 ||
+    //     +fromAmountToUsd - +toAmountToUsd < 0
+    //   ) {
+    //     return 'Free'
+    //   }
+    //   return `-$${(+fromAmountToUsd - +toAmountToUsd).toFixed(2)} `
+    // }
+    const renderDiscount = (beforeFee, afterFee) => {
+        if (beforeFee && afterFee) {
+            return (_jsxs(HStack, { gap: 0, children: [_jsxs(Box, { color: 'brand-purple', marginRight: '3px', children: ["-$", new Fraction(afterFee).toFormat({ decimalPlaces: 2 })] }), _jsxs(Box, { textDecoration: 'line-through', color: "gray", children: ["$", new Fraction(beforeFee).toFormat({ decimalPlaces: 2 })] }), renderDiscountPercentage()] }));
+        }
+        return null;
+    };
+    const renderDiscountPercentage = () => {
+        if (priceImpact.discount_percentage) {
+            return (_jsxs(Box, { color: '#000', backgroundColor: '#ffd400', width: '30px', borderRadius: '4px', textAlign: 'center', fontSize: '10px', marginLeft: '3px', children: [priceImpact.discount_percentage, "%"] }));
+        }
+        return null;
+    };
+    const renderFee = (fee) => {
+        if (fee === '0') {
+            return (_jsx(Text, { variant: 'content9', color: 'white', bg: '#00CBB3', p: '3px', borderRadius: '4px', children: "Free" }));
+        }
+        return (_jsxs(Text, { variant: {
+                base: 'content9',
+                md: 'content8'
+            }, color: 'brand-grey1', children: ["-$", new Fraction(fee).toFormat({ decimalPlaces: 2 })] }));
+    };
+    const swapImpactFee = () => {
+        const i = fromAmountToUsd ? +fromAmountToUsd.replace(/,/g, '') : 0;
+        const o = toAmountToUsd ? +toAmountToUsd.replace(/,/g, '') : 0;
+        const fee = +totalPriceImpact.toFormat({ decimalPlaces: 2 });
+        const fio = i - (o + fee);
+        return fio.toFixed(2);
+    };
+    const renderSwapImpactFee = () => {
+        const sif = +swapImpactFee();
+        if (toAmountToUsd === null) {
+            return (_jsx(Text, { variant: {
+                    base: 'content9',
+                    md: 'content8'
+                }, color: 'brand-grey1', children: "-" }));
+        }
+        // console.log('sif:', sif)
+        if (sif > 0 || sif === 0) {
+            return (_jsxs(Text, { variant: {
+                    base: 'content9',
+                    md: 'content8'
+                }, color: 'brand-grey1', children: ["-$", sif] }));
+        }
+        return (_jsxs(Text, { variant: {
+                base: 'content9',
+                md: 'content8'
+            }, color: 'brand-grey1', children: ["+$", -sif] }));
+    };
+    // if (
+    //   router_type === 'bridge' &&
+    //   fromTokenSymbol === 'ETH' &&
+    //   toTokenSymbol === 'ETH'
+    // ) {
+    //   // console.log('Cross-chain only (ETH only)')
+    //   return (
+    //     <VStack p={4}>
+    //       <Heading
+    //         variant={{
+    //           base: 'heading13',
+    //           md: 'heading12'
+    //         }}
+    //         borderBottom={'1px solid #B5B5B5'}
+    //         pb={2}
+    //         w={'100%'}
+    //         textAlign={'center'}
+    //       >
+    //         Total Price Impact: {renderTotalPriceImpact()}
+    //       </Heading>
+    //       {/* <HStack justify={'space-between'} w={'100%'}>
+    //         <Text
+    //           variant={{
+    //             base: 'content9',
+    //             md: 'content8'
+    //           }}
+    //           color={'brand-grey4'}
+    //         >
+    //           Provider Fee
+    //         </Text>
+    //         {renderFee(priceImpact.swapFee)}
+    //       </HStack> */}
+    //       <HStack justify={'space-between'} w={'100%'}>
+    //         <Text
+    //           variant={{
+    //             base: 'content9',
+    //             md: 'content8'
+    //           }}
+    //           color={'brand-grey4'}
+    //         >
+    //           Dst. Gas Fee
+    //         </Text>
+    //         <HStack gap={1}>
+    //           {priceImpact.dstGasFee !== '0' && (
+    //             <Icon boxSize={'10px'} as={FaGasPump} color={'#c1c8cd'} />
+    //           )}
+    //           {renderFee(priceImpact.dstGasFee)}
+    //         </HStack>
+    //       </HStack>
+    //       <HStack justify={'space-between'} w={'100%'}>
+    //         <Text
+    //           variant={{
+    //             base: 'content9',
+    //             md: 'content8'
+    //           }}
+    //           color={'brand-grey4'}
+    //         >
+    //           WheelX Fee
+    //         </Text>
+    //         {priceImpact.bridgeFee === '0' && priceImpact.swapFee === '0' ? (
+    //           <Text
+    //             variant={'content9'}
+    //             color={'white'}
+    //             bg={'#00CBB3'}
+    //             p={'3px'}
+    //             borderRadius={'4px'}
+    //           >
+    //             Free
+    //           </Text>
+    //         ) : hasDiscount ? (
+    //           renderDiscount(
+    //             priceImpact.before_discount_fee,
+    //             priceImpact.bridgeFee + priceImpact.swapFee
+    //           )
+    //         ) : (
+    //           <>
+    //             {renderFee(priceImpact.bridgeFee + priceImpact.swapFee)}
+    //             {renderDiscountPercentage()}
+    //           </>
+    //         )}
+    //       </HStack>
+    //     </VStack>
+    //   )
+    // }
+    if (fromChainId === toChainId) {
+        return (_jsxs(VStack, { p: 4, children: [_jsxs(Heading, { variant: {
+                        base: 'heading13',
+                        md: 'heading12'
+                    }, borderBottom: '1px solid #B5B5B5', pb: 2, w: '100%', textAlign: 'center', children: ["Total Price Impact: ", renderTotalPriceImpact()] }), _jsxs(HStack, { justify: 'space-between', w: '100%', children: [_jsx(Text, { variant: {
+                                base: 'content9',
+                                md: 'content8'
+                            }, color: 'brand-grey4', children: "Swap Impact" }), _jsx(HStack, { gap: 1, children: renderSwapImpactFee() })] }), _jsxs(HStack, { justify: 'space-between', w: '100%', children: [_jsx(Text, { variant: {
+                                base: 'content9',
+                                md: 'content8'
+                            }, color: 'brand-grey4', children: "WheelX Fee" }), priceImpact.bridgeFee === '0' && priceImpact.swapFee === '0' ? (_jsx(Text, { variant: 'content9', color: 'white', bg: '#00CBB3', p: '3px', borderRadius: '4px', children: "Free" })) : hasDiscount ? (renderDiscount(priceImpact.before_discount_fee, priceImpact.bridgeFee + priceImpact.swapFee)) : (_jsxs(_Fragment, { children: [renderFee(priceImpact.bridgeFee + priceImpact.swapFee), renderDiscountPercentage()] }))] })] }));
+    }
+    return (_jsxs(VStack, { p: 4, children: [_jsxs(Heading, { variant: {
+                    base: 'heading13',
+                    md: 'heading12'
+                }, borderBottom: '1px solid #B5B5B5', pb: 2, w: '100%', textAlign: 'center', children: ["Total Price Impact: ", renderTotalPriceImpact()] }), _jsxs(HStack, { justify: 'space-between', w: '100%', children: [_jsx(Text, { variant: {
+                            base: 'content9',
+                            md: 'content8'
+                        }, color: 'brand-grey4', children: "Swap Impact" }), _jsx(HStack, { gap: 1, children: renderSwapImpactFee() })] }), _jsxs(HStack, { justify: 'space-between', w: '100%', children: [_jsx(Text, { variant: {
+                            base: 'content9',
+                            md: 'content8'
+                        }, color: 'brand-grey4', children: "Dst. Gas Fee" }), _jsxs(HStack, { gap: 1, children: [priceImpact.dstGasFee !== '0' && (_jsx(Icon, { boxSize: '10px', as: FaGasPump, color: '#c1c8cd' })), renderFee(priceImpact.dstGasFee)] })] }), _jsxs(HStack, { justify: 'space-between', w: '100%', children: [_jsx(Text, { variant: {
+                            base: 'content9',
+                            md: 'content8'
+                        }, color: 'brand-grey4', children: "WheelX Fee" }), priceImpact.bridgeFee === '0' && priceImpact.swapFee === '0' ? (_jsx(Text, { variant: 'content9', color: 'white', bg: '#00CBB3', p: '3px', borderRadius: '4px', children: "Free" })) : hasDiscount ? (renderDiscount(priceImpact.before_discount_fee, priceImpact.bridgeFee + priceImpact.swapFee)) : (_jsxs(_Fragment, { children: [renderFee(priceImpact.bridgeFee + priceImpact.swapFee), renderDiscountPercentage()] }))] })] }));
+};
+//# sourceMappingURL=TipsContent.js.map

package/dist/internal/SwapAndBridge/TipsContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TipsContent.js","sourceRoot":"","sources":["../../../src/internal/SwapAndBridge/TipsContent.tsx"],"names":[],"mappings":"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"}

package/dist/internal/SwapAndBridge/TokenInfoCom.d.ts

@@ -0,0 +1,7 @@
+import { TokenInfo } from '../api';
+interface Props {
+    tokenInfo: TokenInfo;
+}
+export declare const TokenInfoCom: ({ tokenInfo }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TokenInfoCom.d.ts.map

package/dist/internal/SwapAndBridge/TokenInfoCom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenInfoCom.d.ts","sourceRoot":"","sources":["../../../src/internal/SwapAndBridge/TokenInfoCom.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAOlC,UAAU,KAAK;IACb,SAAS,EAAE,SAAS,CAAA;CACrB;AAED,eAAO,MAAM,YAAY,GAAI,eAAe,KAAK,4CAiDhD,CAAA"}

package/dist/internal/SwapAndBridge/TokenInfoCom.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HStack, VStack } from '@chakra-ui/react';
+import { useChainsStore } from '../stores';
+import { TokenIconWithNetworkLogo } from '../commons/TokenIconWithNetworkLogo';
+import { Heading, Text } from '../ui';
+import { useWheelxWidgetStyles } from '../../config';
+export const TokenInfoCom = ({ tokenInfo }) => {
+    const widgetStyles = useWheelxWidgetStyles();
+    const { chain_id, symbol, platform_id } = tokenInfo;
+    const { chains } = useChainsStore();
+    const chainInfo = chains?.find((chain) => {
+        if (platform_id && platform_id > 0) {
+            return chain.platform_id === platform_id;
+        }
+        else {
+            return chain.chain_id === chain_id;
+        }
+    });
+    // console.log('#######chainInfo#########:', chainInfo)
+    return (_jsxs(HStack, { children: [_jsx(TokenIconWithNetworkLogo, { tokenInfo: tokenInfo, customChainLogo: chainInfo?.chain_icon }), _jsxs(VStack, { align: 'start', gap: 1, flex: 1, children: [_jsx(Heading, { variant: {
+                            base: 'heading11',
+                            md: 'heading10'
+                        }, color: 'brand-grey1', lineClamp: 1, wordBreak: 'break-all', ...widgetStyles.tokenPrimaryText, children: symbol }), _jsx(Text, { variant: {
+                            base: 'content9',
+                            md: 'content8'
+                        }, color: 'brand-grey4', lineClamp: 1, wordBreak: 'break-all', ...widgetStyles.tokenSecondaryText, children: chainInfo?.name })] })] }));
+};
+//# sourceMappingURL=TokenInfoCom.js.map

package/dist/internal/SwapAndBridge/TokenInfoCom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenInfoCom.js","sourceRoot":"","sources":["../../../src/internal/SwapAndBridge/TokenInfoCom.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAGjD,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAE1C,OAAO,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAA;AAC9E,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAMpD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAS,EAAE,EAAE;IACnD,MAAM,YAAY,GAAG,qBAAqB,EAAE,CAAA;IAC5C,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,CAAA;IAEnD,MAAM,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE,CAAA;IACnC,MAAM,SAAS,GAAG,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;QACvC,IAAI,WAAW,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;YACnC,OAAO,KAAK,CAAC,WAAW,KAAK,WAAW,CAAA;QAC1C,CAAC;aAAM,CAAC;YACN,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,CAAA;QACpC,CAAC;IACH,CAAC,CAAC,CAAA;IAEF,uDAAuD;IAEvD,OAAO,CACL,MAAC,MAAM,eACL,KAAC,wBAAwB,IACvB,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,SAAS,EAAE,UAAU,GACtC,EACF,MAAC,MAAM,IAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,aACrC,KAAC,OAAO,IACN,OAAO,EAAE;4BACP,IAAI,EAAE,WAAW;4BACjB,EAAE,EAAE,WAAW;yBAChB,EACD,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,WAAW,KAClB,YAAY,CAAC,gBAAgB,YAEhC,MAAM,GACC,EACV,KAAC,IAAI,IACH,OAAO,EAAE;4BACP,IAAI,EAAE,UAAU;4BAChB,EAAE,EAAE,UAAU;yBACf,EACD,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,WAAW,KAClB,YAAY,CAAC,kBAAkB,YAElC,SAAS,EAAE,IAAI,GACX,IACA,IACF,CACV,CAAA;AACH,CAAC,CAAA"}

package/dist/internal/SwapAndBridge/TokenSelectAndInput.d.ts

@@ -0,0 +1,18 @@
+import { Fraction } from 'bi-fraction';
+import { TokenInfo } from '../api';
+interface TokenSelectAndInputProps {
+    text: 'From' | 'To';
+    onClick: () => void;
+    amount: string;
+    onChange: (value: string) => void;
+    userBalance: Fraction;
+    tokenInfo: TokenInfo;
+    usdPrice?: Fraction;
+    totalGasFee?: bigint;
+    isLoadingFeeData?: boolean;
+    isInsufficientBalance?: boolean;
+    onOpenDialog?: () => void;
+}
+export declare const TokenSelectAndInput: ({ text, tokenInfo, onClick, amount, onChange, userBalance, usdPrice, totalGasFee, isLoadingFeeData, isInsufficientBalance, onOpenDialog }: TokenSelectAndInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TokenSelectAndInput.d.ts.map

package/dist/internal/SwapAndBridge/TokenSelectAndInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenSelectAndInput.d.ts","sourceRoot":"","sources":["../../../src/internal/SwapAndBridge/TokenSelectAndInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAwBlC,UAAU,wBAAwB;IAChC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,EAAE,QAAQ,CAAA;IACrB,SAAS,EAAE,SAAS,CAAA;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B;AAED,eAAO,MAAM,mBAAmB,GAAI,2IAYjC,wBAAwB,4CAggB1B,CAAA"}

package/dist/internal/SwapAndBridge/TokenSelectAndInput.js

@@ -0,0 +1,257 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, HStack, Icon, Input, Image } from '@chakra-ui/react';
+import { VStack } from '@chakra-ui/react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Fraction } from 'bi-fraction';
+import { TokenInfoCom } from './TokenInfoCom';
+import ArrowDownIcon from '../assets/icons/arrow-down.svg';
+import { Heading, Text } from '../ui';
+import { debounce, hyperliquidChainId, toBigInt } from './utils';
+import { formatTokenAmount, sliceAddress } from '../utils';
+import { zeroAddress } from 'viem';
+import { useAccount } from 'wagmi';
+import { useSwapAndBridgeContextStore, useTokenBalance } from './hooks';
+import { FiEdit } from 'react-icons/fi';
+import { useDifferentAddressStore } from '../stores/useDifferentAddressStore';
+import MetamaskIcon from '../assets/icons/metamask.svg';
+import { useHyperliquidBalance } from '../api/useHyperliquid';
+import { useWheelxWidgetStyles } from '../../config';
+export const TokenSelectAndInput = ({ text, tokenInfo, onClick, amount, onChange, userBalance, usdPrice, totalGasFee, isLoadingFeeData, isInsufficientBalance, onOpenDialog }) => {
+    const { address, connector } = useAccount();
+    const widgetStyles = useWheelxWidgetStyles();
+    const quickHalfButtonStyles = widgetStyles.quickHalfButton || {};
+    const quickMaxButtonStyles = widgetStyles.quickMaxButton || {};
+    const [isFocused, setIsFocused] = useState(false);
+    const [isNative, setIsNative] = useState(false);
+    // set value to state immediately to avoid the input value is not updated immediately when use debounce
+    const [value, setValue] = useState(amount);
+    const { setFromAmountToUsd, setToAmountToUsd, fromAmountToUsd, toAmountToUsd } = useSwapAndBridgeContextStore();
+    useEffect(() => {
+        setValue(amount);
+    }, [amount]);
+    const isFrom = text === 'From';
+    const { differentAddress, isDepositPlatformToken } = useDifferentAddressStore();
+    const toTokenDifferentAddressBalance = useTokenBalance({
+        chainId: tokenInfo.chain_id,
+        tokenAddress: tokenInfo.address === zeroAddress ? undefined : tokenInfo.address,
+        connectAddress: differentAddress ? differentAddress : address
+    });
+    const [isToHyperChain, setIsToHyperChain] = useState(false);
+    const { data: toTokenBalanceHyperBack } = useHyperliquidBalance(differentAddress ? differentAddress : address, isToHyperChain);
+    const toTokenBalanceHyper = {
+        decimals: 6,
+        formatted: toTokenBalanceHyperBack?.withdrawable,
+        symbol: 'USDC',
+        value: toBigInt(toTokenBalanceHyperBack?.withdrawable
+            ? toTokenBalanceHyperBack?.withdrawable
+            : '0', 6)
+    };
+    useEffect(() => {
+        if (!isFrom) {
+            if (tokenInfo.chain_id === hyperliquidChainId) {
+                setIsToHyperChain(true);
+            }
+            else {
+                setIsToHyperChain(false);
+            }
+        }
+    }, [tokenInfo, isFrom]);
+    const toDifferentAddressBalance = isToHyperChain
+        ? new Fraction(toTokenBalanceHyper?.value ?? 0n)
+        : new Fraction(toTokenDifferentAddressBalance?.value ?? 0n);
+    const differentAddressBalance = formatTokenAmount({
+        amount: toDifferentAddressBalance,
+        decimals: tokenInfo.decimals
+    });
+    const walletIcon = useMemo(() => {
+        return connector?.icon ? (_jsx(Image, { src: connector.icon, alt: "connector", boxSize: {
+                base: '12px',
+                md: '14px'
+            }, borderRadius: 'full' })) : (_jsx(Icon, { boxSize: {
+                base: '12px',
+                md: '14px'
+            }, as: MetamaskIcon }));
+    }, [connector]);
+    // console.log('######differentAddressBalance######:', differentAddressBalance)
+    useEffect(() => {
+        if (isFrom) {
+            const { tags } = tokenInfo;
+            if (tags.includes('native')) {
+                setIsNative(true);
+            }
+            else {
+                setIsNative(false);
+            }
+        }
+    }, [tokenInfo, isFrom]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debouncedOnChange = useCallback(debounce(onChange, 500), [onChange]);
+    const handleValueChange = useCallback((e) => {
+        const value = e.target.value;
+        if (value === '.') {
+            setValue('0.');
+            return;
+        }
+        if (value === '' || /^\d*\.?\d*$/.test(value)) {
+            // set value to state immediately
+            setValue(value);
+            // debounce the onChange function
+            const isSame = new Fraction(value).eq(amount);
+            if (!isSame) {
+                debouncedOnChange(value);
+            }
+        }
+    }, [amount, debouncedOnChange]);
+    const handleFocus = useCallback(() => {
+        setIsFocused(true);
+    }, []);
+    const handleBlur = useCallback(() => {
+        setIsFocused(false);
+    }, []);
+    const handleQuickInput = useCallback(async (value) => {
+        const plusGasFee = new Fraction('0.00008')
+            .shl(tokenInfo.decimals)
+            .add(totalGasFee ?? 0n);
+        const maxValue = (tokenInfo.address === zeroAddress || isNative) &&
+            userBalance.gt(plusGasFee)
+            ? userBalance.sub(plusGasFee)
+            : userBalance;
+        const _value = value === '50%' ? userBalance.div(2) : maxValue;
+        if (value === 'Max' && isLoadingFeeData) {
+            return;
+        }
+        const _amount = formatTokenAmount({
+            amount: _value,
+            decimals: tokenInfo.decimals,
+            useGroupSeparator: false
+        });
+        if (_amount !== amount) {
+            onChange(_amount);
+        }
+    }, [
+        amount,
+        isLoadingFeeData,
+        isNative,
+        onChange,
+        tokenInfo.address,
+        tokenInfo.decimals,
+        totalGasFee,
+        userBalance
+    ]);
+    const balance = formatTokenAmount({
+        amount: userBalance,
+        decimals: tokenInfo.decimals
+    });
+    // useEffect(() => {
+    //   if (isFrom) {
+    //     console.log('######userBalance.gt(0)######:', userBalance.gt(0))
+    //     console.log('######isFrom######:', isFrom)
+    //   }
+    // }, [isFrom, userBalance])
+    const usdValue = usdPrice && amount && usdPrice.gt(0)
+        ? new Fraction(amount).mul(usdPrice).toFormat({
+            decimalPlaces: 2
+        })
+        : null;
+    useEffect(() => {
+        if (isFrom) {
+            setFromAmountToUsd(usdValue);
+        }
+        else {
+            setToAmountToUsd(usdValue);
+        }
+    }, [isFrom, setFromAmountToUsd, setToAmountToUsd, usdValue]);
+    const renderLossWarning = () => {
+        if (!isFrom && fromAmountToUsd && toAmountToUsd) {
+            if (+fromAmountToUsd > 50 && +fromAmountToUsd > +toAmountToUsd) {
+                const loss = -(+toAmountToUsd - +fromAmountToUsd) / +fromAmountToUsd;
+                if (loss >= 0.1) {
+                    // console.log('###loss###:', loss)
+                    return (_jsx(Text, { as: 'span', color: '#ff4267', children: ` (-${(loss * 100).toFixed(2)}%)` }));
+                }
+                return _jsx(_Fragment, {});
+            }
+            return _jsx(_Fragment, {});
+        }
+        return _jsx(_Fragment, {});
+    };
+    const FiEditDom = () => {
+        return (_jsx(FiEdit, { cursor: 'pointer', width: '16px', height: '16px', onClick: () => {
+                onOpenDialog?.();
+            } }));
+    };
+    const renderDifferentAddress = () => {
+        if (address && !isFrom) {
+            if (isDepositPlatformToken) {
+                if (differentAddress) {
+                    return (_jsxs(HStack, { gap: 1, children: [walletIcon, _jsx(Text, { variant: 'content8', backgroundColor: '#fff', padding: '2px', ...widgetStyles.balanceText, children: sliceAddress(differentAddress) }), FiEditDom()] }));
+                }
+                return (_jsxs(HStack, { gap: 1, children: [_jsx(Text, { variant: 'content8', backgroundColor: '#fff', padding: '2px 6px', borderRadius: '14px', cursor: 'pointer', onClick: () => {
+                                onOpenDialog?.();
+                            }, ...widgetStyles.balanceText, children: "Enter Address" }), FiEditDom()] }));
+            }
+            return (_jsxs(HStack, { gap: 1, children: [walletIcon, _jsx(Text, { variant: 'content8', backgroundColor: '#fff', padding: '2px', ...widgetStyles.balanceText, children: sliceAddress(differentAddress ? differentAddress : address) }), FiEditDom()] }));
+        }
+        return null;
+    };
+    return (_jsxs(VStack, { align: 'start', w: '100%', bg: '#F5F6FF', px: {
+            base: 2,
+            md: 4
+        }, paddingBottom: {
+            base: isFrom ? 2 : 7,
+            md: isFrom ? 3 : 8
+        }, paddingTop: {
+            base: 2,
+            md: 3
+        }, borderRadius: {
+            base: '8px',
+            md: '16px'
+        }, gap: '0', ...widgetStyles.sectionContainer, children: [_jsxs(HStack, { w: '100%', justify: 'space-between', color: '#81728C', marginBottom: [2], children: [_jsx(Heading, { variant: 'heading11', height: '18px', ...widgetStyles.sectionLabelText, children: text }), address ? (_jsx(_Fragment, { children: isFrom && userBalance.gt(0) ? (_jsxs(HStack, { color: '#15003E', children: [_jsx(Button, { variant: 'outline', minW: '30px', h: {
+                                        base: '18px'
+                                    }, borderRadius: '4px', border: '1px solid', borderColor: 'brand-purple', onClick: () => handleQuickInput('50%'), ...quickHalfButtonStyles, children: _jsx(Text, { variant: 'content9', ...widgetStyles.balanceText, children: "50%" }) }), _jsx(Button, { minW: '30px', h: {
+                                        base: '18px'
+                                    }, borderRadius: '4px', bg: 'brand-purple', onClick: () => handleQuickInput('Max'), ...quickMaxButtonStyles, children: _jsx(Text, { variant: 'content9', ...widgetStyles.balanceText, children: "Max" }) }), _jsxs(Text, { variant: 'content8', color: '#81728C', ...widgetStyles.balanceText, children: ["Balance: ", balance] })] })) : (_jsx(_Fragment, {})) })) : null, renderDifferentAddress()] }), _jsxs(HStack, { w: '100%', justify: 'space-between', align: 'center', gap: {
+                    base: 2.5,
+                    md: 6
+                }, children: [_jsxs(HStack, { gap: {
+                            base: 1,
+                            md: 3
+                        }, onClick: onClick, cursor: 'pointer', justify: 'space-between', px: {
+                            base: 1.5,
+                            md: 2.5
+                        }, py: {
+                            base: 2.5
+                        }, bg: '#E3E4FA', borderRadius: {
+                            base: '8px',
+                            md: '12px'
+                        }, w: '50%', ...widgetStyles.tokenSelector, children: [_jsx(TokenInfoCom, { tokenInfo: tokenInfo }), _jsx(Icon, { boxSize: {
+                                    base: '20px',
+                                    md: '24px'
+                                }, as: ArrowDownIcon })] }), _jsxs(VStack, { w: '50%', pb: 2, h: {
+                            base: '48px',
+                            md: '52px'
+                        }, border: '1px solid', borderColor: isFocused ? '#8143FF' : '#B5B5B5', bg: 'white', borderRadius: {
+                            base: '8px',
+                            md: '12px'
+                        }, align: 'flex-end', position: 'relative', ...widgetStyles.amountInputContainer, children: [_jsx(Input, { id: `${text.toLowerCase()}-input`, px: {
+                                    base: 2,
+                                    md: 3
+                                }, textAlign: 'right', fontWeight: '600', fontSize: {
+                                    base: '16px',
+                                    md: '18px'
+                                }, _placeholder: {
+                                    color: 'brand-grey3'
+                                }, onBlur: handleBlur, onFocus: handleFocus, disabled: !isFrom, color: isInsufficientBalance ? 'red' : 'brand-grey1', _disabled: {
+                                    color: 'brand-grey1',
+                                    opacity: 1
+                                }, border: 'none', _focus: {
+                                    outlineWidth: '0px'
+                                }, placeholder: "0", onChange: handleValueChange, value: value, inputMode: "decimal", type: "text", autoComplete: "off", ...widgetStyles.amountInputText }), _jsxs(Text, { variant: {
+                                    base: 'content9',
+                                    md: 'content8'
+                                }, color: 'brand-grey4', pos: 'absolute', right: {
+                                    base: 2,
+                                    md: 3
+                                }, bottom: '5px', ...widgetStyles.amountUsdText, children: [usdValue ? `～$${usdValue}` : null, renderLossWarning()] })] })] }), _jsx(HStack, { w: '100%', justify: 'flex-end', color: '#81728C', height: '18px', overflow: 'hidden', lineHeight: '18px', position: 'absolute', bottom: ['6px', '8px'], left: 0, paddingRight: [2, 4], children: address && (_jsx(_Fragment, { children: !isFrom && !isDepositPlatformToken && (_jsxs(Text, { variant: 'content8', children: ["Balance: ", differentAddressBalance] })) })) })] }));
+};
+//# sourceMappingURL=TokenSelectAndInput.js.map