-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patharchitecture.codediagram
1 lines (1 loc) · 157 KB
/
architecture.codediagram
1
{"id":-1,"name":"Onboarding diagram","userId":-1,"createdAt":"","updatedAt":"","content":{"items":[{"uid":"2vJzfGgV5m","position":{"x":-300,"y":-70},"sizes":{"width":399.53125,"height":299.5625},"autoheight":false,"blockContent":{"type":"doc","content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/app/layout.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"<html lang=\"en\">\n <body style={{ maxHeight: \"100vh\", margin: 0, padding: 0 }}>\n <RecoilRootWrapper>\n <WagmiProviders>\n <Entry children={children} />\n </WagmiProviders>\n </RecoilRootWrapper>\n </body>\n</html>"}]}]},"nodeType":"block"},{"uid":"QH2S7f9hb8","position":{"x":-370,"y":340},"sizes":{"width":559.5625,"height":587.375},"autoheight":false,"blockContent":{"type":"doc","content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/app/Entry.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"<>\n <GoogleAnalyticsScript />\n <QueryClientProvider client={queryClient}>\n <ApolloProvider client={apolloClient}>\n <ChakraProvidersForNextJs>\n <Flex flexDir={\"column\"} h={\"100vh\"}>\n <Header />\n <Flex flexDir={\"column\"} flexGrow={1}>\n <Flex\n justifyContent={\"center\"}\n alignItems={\"center\"}\n bg={\"#0F0F12\"}\n h={\"100%\"}\n >\n {children}\n </Flex>\n <Footer />\n </Flex>\n <GlobalComponents />\n <Drawers />\n <Modals />\n </Flex>\n </ChakraProvidersForNextJs>\n </ApolloProvider>\n </QueryClientProvider>\n</>"}]}]},"nodeType":"block"},{"uid":"lXa_U2X3zm","position":{"x":-700,"y":1200},"sizes":{"width":399.5,"height":363.890625},"autoheight":true,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/app/page.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"\"use client\";\n\nimport { Flex } from \"@chakra-ui/react\";\nimport BridgeSwap from \"./BridgeSwap/Index\";\n\nexport default function Page() {\n return (\n <Flex alignItems={\"center\"} h={\"100%\"}>\n <BridgeSwap />\n </Flex>\n );\n}\n"}]}]},"nodeType":"block"},{"uid":"GAbt65qMCh","position":{"x":-60,"y":1200},"sizes":{"width":399.515625,"height":451.375},"autoheight":true,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/app/pools/page.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"\"use client\";\n\nimport YourPools from \"@/pools/YourPools\";\nimport ComingPools from \"@/staging/components/cross-trade/components/core/coming/pool\";\nimport CrossTrade from \"@/staging/components/cross-trade/components/core/main\";\n\nimport { Flex } from \"@chakra-ui/react\";\n\nexport default function Page() {\n return (\n /** original code @Robert */\n // <Flex pt={\"134px\"} justifyContent={\"center\"} h={\"100%\"}>\n // <YourPools />\n // </Flex>\n <CrossTrade />\n );\n}\n"}]}]},"nodeType":"block"},{"uid":"o3Gc3vjl6j","position":{"x":-810,"y":1620},"sizes":{"width":399.515625,"height":503.875},"autoheight":true,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/app/BridgeSwap/Index.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"<Flex\n flexDir={\"column\"}\n w={{ base: \"100%\", lg: \"496px\" }}\n h={\"100%\"}\n pt={{ base: \"80px\", lg: 0 }}\n px={{ base: \"12px\", lg: 0 }}\n pb={{ base: \"16px\", lg: 0 }}\n>\n <Flex\n flexDir={\"column\"}\n alignItems={\"center\"}\n justifyContent={{ base: \"space-between\", lg: \"center\" }}\n w={\"100%\"}\n h={\"100%\"}\n >\n {/* <ServiceSuspensionBanner/> */}\n <MaintenanceBanner />\n <Swap />\n <Details />\n </Flex>\n</Flex>"}]}]},"nodeType":"block"},{"uid":"tsGQ5vTbDh","position":{"x":-950,"y":2430},"sizes":{"width":399.53125,"height":77.546875},"autoheight":false,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/app/BridgeSwap/Swap.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"export default function Swap() {\n const { mode } = useRecoilValue(actionMode);\n const [, setMethodStatus] = useRecoilState(actionMethodStatus);\n const [, setSettingStatus] = useRecoilState(swapSettingStatus);\n const { pcView } = useMediaView();\n\n const [inTokenRecoilValue, setInTokenRecoilValue] = useRecoilState(\n selectedInTokenStatus\n );\n const [outTokenRecoilValue, setOutTokenRecoilValue] = useRecoilState(\n selectedOutTokenStatus\n );\n\n const network = useConnectedNetwork();\n\n const invertTokenPair = useCallback(() => {\n if (mode == \"Deposit\" || mode == \"Withdraw\" || !mode) return;\n\n if (inTokenRecoilValue && outTokenRecoilValue) {\n const tempValue = inTokenRecoilValue;\n\n if (\n mode === \"Wrap\" ||\n mode === \"Unwrap\" ||\n mode === \"ETH-Unwrap\" ||\n mode === \"ETH-Wrap\"\n ) {\n setInTokenRecoilValue({\n ...outTokenRecoilValue,\n amountBN: tempValue.amountBN,\n parsedAmount: tempValue.parsedAmount,\n });\n } else {\n setInTokenRecoilValue(outTokenRecoilValue);\n }\n\n setOutTokenRecoilValue(tempValue);\n } else if (inTokenRecoilValue && !outTokenRecoilValue) {\n setOutTokenRecoilValue(inTokenRecoilValue);\n setInTokenRecoilValue(null);\n } else if (!inTokenRecoilValue && outTokenRecoilValue) {\n setInTokenRecoilValue(outTokenRecoilValue);\n setOutTokenRecoilValue(null);\n }\n }, [inTokenRecoilValue, outTokenRecoilValue, mode]);\n\n const switchable =\n mode === \"Swap\" ||\n mode === \"Wrap\" ||\n mode === \"Unwrap\" ||\n mode === \"ETH-Unwrap\" ||\n mode === \"ETH-Wrap\";\n\n return (\n <>\n {pcView ? (\n <Flex\n w={\"100%\"}\n justifyContent={\"space-between\"}\n columnGap={switchable ? \"6px\" : \"5px\"}\n >\n <InToken />\n <Flex\n justifyContent={\"center\"}\n alignItems={\"center\"}\n pt={mode === null ? \"65px\" : \"80px\"}\n >\n <Flex\n onClick={invertTokenPair}\n cursor={\n mode === \"Swap\" ||\n mode === \"Unwrap\" ||\n mode === \"Wrap\" ||\n mode === \"ETH-Unwrap\" ||\n mode === \"ETH-Wrap\"\n ? \"pointer\"\n : \"\"\n }\n bg={switchable ? \"#1F2128\" : \"transparent\"}\n w={\"36px\"}\n h={\"36px\"}\n justifyContent={\"center\"}\n alignItems={\"center\"}\n borderRadius={\"5px\"}\n _hover={{ border: switchable ? \"2px solid #313442\" : \"\" }}\n >\n <Image src={ArrowImg} alt={\"arrow\"} width={24} />\n </Flex>\n </Flex>\n {mode === null ? <SelectNetwork /> : <OutToken />}\n </Flex>\n ) : (\n <Box w={\"full\"} mt={\"16px\"}>\n <Flex w={\"full\"} justify={\"space-between\"} mb={\"12px\"}>\n <Flex\n columnGap={\"8px\"}\n cursor={\"pointer\"}\n onClick={() => setMethodStatus(true)}\n >\n <Text fontWeight={500} fontSize={24} userSelect={\"none\"}>\n {mode === null ? \"Swap\" : mode.replaceAll(\"ETH-\", \"\")}\n </Text>\n <Image src={arrow} alt=\"icon_arrow\" />\n </Flex>\n\n {mode === \"Swap\" && (\n <Image\n onClick={() => setSettingStatus(true)}\n src={SettingIcon}\n alt={\"SettingIcon\"}\n style={{ cursor: \"pointer\" }}\n />\n )}\n </Flex>\n\n <Flex\n w={\"100%\"}\n mx={\"auto\"}\n columnGap={\"8px\"}\n justify={\"center\"}\n align={\"center\"}\n >\n <MobileInToken />\n\n <Flex\n justifyContent={\"center\"}\n alignItems={\"center\"}\n onClick={invertTokenPair}\n rounded={\"5px\"}\n w={\"24px\"}\n h={\"24px\"}\n p={\"4px\"}\n bg={switchable ? \"#1F2128\" : \"transparent\"}\n >\n <Image src={ArrowImg} alt={\"arrow\"} />\n </Flex>\n\n <MobileOutToken />\n </Flex>\n\n <Flex direction=\"row\" justify=\"center\" w=\"full\">\n {network.isSupportedChain && (\n <>\n <MobileTokenBox inToken={true} visibilityType={false} />\n <MobileTokenBox inToken={false} visibilityType={false} />\n </>\n )}\n </Flex>\n </Box>\n )}\n </>\n );\n}"}]}]},"nodeType":"block"},{"uid":"WoRha4txRh","position":{"x":-1940,"y":-80},"sizes":{"width":319.5625,"height":99.609375},"autoheight":false,"blockContent":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"type":"text","marks":[{"type":"bold"}],"text":" Recoil Store"}]}]},"color":{"bgColor":"hsla(5, 100%, 88%, 1)","bgName":"red-l"},"nodeType":"block"},{"uid":"Ygj1CF1Tfb","position":{"x":-2440,"y":150},"sizes":{"width":399.546875,"height":293.90625},"autoheight":true,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/recoil/bridgeSwap/atom.ts"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"export const selectedInTokenStatus = atom<SelectedToken | null>({\n key: \"selectedInTokenStatus\",\n default: null,\n});\n\nexport const selectedOutTokenStatus = atom<SelectedToken | null>({\n key: \"selectedOutTokenStatus\",\n default: null,\n});"}]}]},"nodeType":"block"},{"uid":"RWZnYb6PLv","position":{"x":-2430,"y":560},"sizes":{"width":399.546875,"height":206.421875},"autoheight":true,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/recoil/bridgeSwap/atom.ts"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"export const actionMode = selector<{ mode: ActionMode; isReady: boolean }>({\n key: \"actionMode\",\n get: ({ get }) => {\n //more codes following..."}]}]},"nodeType":"block"},{"uid":"vwBXx9EqKf","position":{"x":-3400,"y":-80},"sizes":{"width":399.546875,"height":94.453125},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"type":"text","text":"Hooks"}]}]},"color":{"bgColor":"hsla(0, 31%, 31%, 1)","bgName":"red"},"nodeType":"block"},{"uid":"W9-qKFTn5e","position":{"x":-3130,"y":170},"sizes":{"width":399.484375,"height":258.921875},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/hooks/token/useInOutTokens.ts"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"export function useInOutTokens() {\n const [inTokenRecoilValue, setInTokenRecoilValue] = useRecoilState(\n selectedInTokenStatus\n );\n const [outTokenRecoilValue, setOutTokenRecoilValue] = useRecoilState(\n selectedOutTokenStatus\n );"}]}]},"nodeType":"block"},{"uid":"DMqKBqLetZ","position":{"x":-3120,"y":590},"sizes":{"width":399.546875,"height":206.421875},"autoheight":true,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/hooks/mode/useGetMode.ts"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"export function useGetMode() {\n const { mode, isReady } = useRecoilValue(actionMode);\n const poolsPage = useRecoilValue(ATOM_pool_page);\n"}]}]},"nodeType":"block"},{"uid":"Eazpu3F2DM","position":{"x":-3130,"y":90},"sizes":{"width":399.546875,"height":83.953125},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"It controlls token data everywhere in Tokamak Bridge"}]}]},"nodeType":"block"},{"uid":"Kq_wzVh-Hb","position":{"x":-3120,"y":490},"sizes":{"width":399.546875,"height":104.953125},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"The hook used to distinguish between modes (such as Deposit, Withdraw, Swap, etc.)"}]}]},"nodeType":"block"},{"uid":"0pNj9iYLZ8","position":{"x":-470,"y":2430},"sizes":{"width":399.5,"height":77.546875},"autoheight":false,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/app/BridgeSwap/Details.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"export function Details() {\n const { mode } = useGetMode();\n const { pcView, mobileView } = useMediaView();\n const { inToken, outToken } = useInOutTokens();\n const { isTONatPair } = useIsTon();\n const showWarning =\n !pcView && mode === \"Swap\" && inToken && outToken && isTONatPair;\n\n return (\n <Flex\n flexDir={\"column\"}\n justify={{ base: \"space-between\", lg: \"normal\" }}\n h={{ base: \"100%\", lg: \"fit-content\" }}\n w={\"100%\"}\n mt={{ sm: \"0px\", lg: \"24px\" }}\n rowGap={\"10px\"}\n >\n {mode !== null ? (\n <Flex w={\"100%\"} flexDir={\"column\"} rowGap={\"10px\"}>\n {pcView ? <Warning /> : !showWarning && <Warning />}\n <ApproveToken />\n <TransactionDetail />\n </Flex>\n ) : (\n <Box />\n )}\n {!mobileView ? (\n <ActionButton />\n ) : (\n <Flex direction='column' rowGap={\"12px\"}>\n {showWarning && <Warning />}\n <ActionButton />\n </Flex>\n )}\n </Flex>\n );\n}"}]}]},"nodeType":"block"},{"uid":"gS1BR40nwk","position":{"x":-950,"y":2350},"sizes":{"width":399.546875,"height":83.953125},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Main component including TokenCard and TokenInput"}]}]},"nodeType":"block"},{"uid":"H63LQhnw49","position":{"x":-470,"y":2350},"sizes":{"width":399.546875,"height":83.953125},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Button Area"}]}]},"nodeType":"block"},{"uid":"csVk7xrCEo","position":{"x":-200,"y":2540},"sizes":{"width":399.53125,"height":77.546875},"autoheight":false,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/app/BridgeSwap/Warning.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"export default function Warning() {\n const { isNotSupportForBridge, isNotSupportForSwap } = useBridgeSupport();\n const { inToken, outToken } = useInOutTokens();\n const { isBalanceOver } = useInputBalanceCheck();\n const { mode } = useGetMode();\n const { isTONatPair } = useIsTon();\n const { isConnectedToMainNetwork } = useConnectedNetwork();\n const { inNetwork, outNetwork } = useInOutNetwork();\n // const outTokenIsETH = isETH(outTokenInfo);\n\n // if (mode === \"Swap\" && outTokenIsETH !== undefined && outTokenIsETH) {\n // return (\n // <Flex color={\"#F9C03E\"} fontSize={12} columnGap={\"10px\"}>\n // <Image src={WARNING_ICON} alt={\"WARNING_ICON\"} />\n // <Text>\n // <Link\n // href=\"https://onther.notion.site/WETH-ETH-f9fbe0a04204404c9b4dbef23a795f68\"\n // isExternal\n // textDecor={\"underline\"}\n // >\n // Cannot swap to ETH right now.\n // </Link>{\" \"}\n // Swap to WETH\n // </Text>\n // </Flex>\n // );\n // }\n\n if (mode === \"Swap\" && inToken && outToken && isTONatPair) {\n if (\n outToken?.tokenAddress === MAINNET_CONTRACTS.TON_ADDRESS ||\n outToken?.tokenAddress === SEPOLIA_CONTRACTS.TON_ADDRESS\n ) {\n return (\n <WarningText\n label={\"TON is not supported to swap on L1. Please swap to WTON.\"}\n />\n );\n }\n return (\n <WarningText\n label={\"TON is not supported to swap on L1. Please wrap to WTON.\"}\n />\n );\n }\n\n if (isNotSupportForBridge) {\n if (\n inNetwork?.chainId &&\n inToken?.tokenAddress === WETH_ADDRESS_BY_CHAINID[inNetwork?.chainId]\n )\n return (\n <WarningText\n label={`Cannot deposit WETH to ${convertNetworkName(\n outNetwork?.chainName\n )}. Unwrap to ETH and deposit.`}\n />\n );\n\n if (\n inNetwork?.chainId &&\n inToken?.tokenAddress === WTON_ADDRESS_BY_CHAINID[inNetwork?.chainId]\n )\n return (\n <WarningText\n label={`WTON is not supported on L2. Please unwrap to TON and deposit`}\n />\n );\n\n if (inToken?.tokenAddress === TOKAMAK_CONTRACTS.WETH_ADDRESS)\n return (\n <WarningText\n label={`Cannot withdraw WETH to ${\n isConnectedToMainNetwork ? \"Ethereum\" : \"Goerli\"\n }. Unwrap to ETH and withdraw.`}\n />\n );\n }\n\n if (mode === \"Swap\" && isNotSupportForSwap) {\n return (\n <Flex color={\"#DD3A44\"} fontSize={12} columnGap={\"10px\"}>\n <Image src={WARNING_RED_ICON} alt={\"WARNING_ICON\"} />\n <Text>Swap route not found on this network</Text>\n </Flex>\n );\n }\n\n if (isBalanceOver) {\n return (\n <Flex color={\"#DD3A44\"} fontSize={12} columnGap={\"10px\"}>\n <Image src={WARNING_RED_ICON} alt={\"WARNING_ICON\"} />\n <Text>Insufficient ({inToken?.tokenSymbol}) balance </Text>\n </Flex>\n );\n }\n\n return null;\n}"}]}]},"nodeType":"block"},{"uid":"hv2GXMtiK2","position":{"x":-200,"y":2640},"sizes":{"width":399.53125,"height":77.546875},"autoheight":false,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/app/BridgeSwap/ApproveToken.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import useBridgeSupport from \"@/hooks/bridge/useBridgeSupport\";\nimport { useGetMode } from \"@/hooks/mode/useGetMode\";\nimport { useApprove } from \"@/hooks/token/useApproval\";\nimport { useInOutTokens } from \"@/hooks/token/useInOutTokens\";\nimport useIsTon from \"@/hooks/token/useIsTon\";\n// import { useTransaction } from \"@/hooks/tx/useTx\";\nimport Image from \"next/image\";\nimport { Button, Flex, Spinner, Text } from \"@chakra-ui/react\";\nimport { useAccount } from \"wagmi\";\nimport { accountDrawerStatus } from \"@/recoil/modal/atom\";\nimport { useRecoilState } from \"recoil\";\nimport { capitalizeFirstChar } from \"@/utils/trim/capitalizeChar\";\nimport useInputBalanceCheck from \"@/hooks/token/useInputCheck\";\nimport { useTransaction } from \"@/hooks/tx/useTx\";\nimport ConfirmedImage from \"assets/icons/confirm/success.svg\";\nimport commafy from \"@/utils/trim/commafy\";\nimport { ethers } from \"ethers\";\nimport { useMemo } from \"react\";\nimport CustomTooltip from \"@/components/tooltip/CustomTooltip\";\nimport QuestionIcon from \"assets/icons/question.svg\";\n\nexport default function ApproveToken() {\n const { inToken } = useInOutTokens();\n const { isApproved, callApprove, isLoading, isRevokeForUSDT } = useApprove();\n const { isNotSupportForBridge } = useBridgeSupport();\n const { isTONatPair } = useIsTon();\n const { mode } = useGetMode();\n const { isConnected } = useAccount();\n const { isBalanceOver, isInputZero } = useInputBalanceCheck();\n const { confirmedApproveTransaction, confirmedRevokeTransaction } =\n useTransaction();\n const [, setIsDrawerOpen] = useRecoilState(accountDrawerStatus);\n\n if (\n (isApproved ||\n isNotSupportForBridge ||\n !inToken ||\n (mode == \"Swap\" && isTONatPair) ||\n !isConnected ||\n isBalanceOver ||\n isInputZero) &&\n (confirmedApproveTransaction === undefined ||\n confirmedApproveTransaction?.tokenData?.[0]?.tokenAddress.toLowerCase() !==\n inToken?.tokenAddress.toLowerCase() ||\n isInputZero)\n ) {\n return null;\n }\n\n const parsedAmount =\n confirmedApproveTransaction?.tokenData?.[0]?.amount?.toString()\n ? ethers.utils.formatUnits(\n confirmedApproveTransaction.tokenData[0].amount.toString(),\n inToken?.token.decimals\n )\n : \"-\";\n\n const text =\n confirmedApproveTransaction && isApproved\n ? `${commafy(parsedAmount, 4)} ${inToken?.tokenSymbol} has been approved`\n : `${isRevokeForUSDT ? \"Revoke\" : \"Approve\"} ${\n inToken?.tokenSymbol\n } for ${capitalizeFirstChar(mode ?? undefined)}`;\n\n const afterApproved = isApproved && confirmedApproveTransaction;\n const beforeApproved = !isLoading && !afterApproved;\n\n return (\n <Flex\n w={\"100%\"}\n // h={isExpanded ? \"310px\" : \"48px\"}\n maxH={\"48px\"}\n bg={\"#1f2128\"}\n borderRadius={\"8px\"}\n borderWidth={beforeApproved ? \"1px\" : \"\"}\n borderColor={\"#59628D\"}\n px={\"20px\"}\n py={\"19px\"}\n justifyContent={\"space-between\"}\n alignItems={\"center\"}\n color={isLoading ? \"#8E8E92\" : \"\"}\n >\n <Flex columnGap={\"12px\"} alignItems={\"center\"}>\n <Text\n fontSize={{ base: 12, lg: 14 }}\n color={isLoading ? \"#A0A3AD\" : \"#fff\"}\n >\n {text}\n </Text>\n {isRevokeForUSDT && !isApproved && (\n <Flex ml={\"-5px\"}>\n <CustomTooltip\n content={<Image src={QuestionIcon} alt={\"QuestionIcon\"}></Image>}\n tooltipLabel={\n <Flex\n w={\"240px\"}\n h={\"45px\"}\n fontSize={11}\n textAlign={\"center\"}\n alignItems={\"center\"}\n justifyContent={\"center\"}\n >\n {\n <span>\n Approval for USDT must be revoked first <br />\n before a new amount is approved.\n </span>\n }\n </Flex>\n }\n style={{ px: \"-5px\", tooltipLineHeight: \"15x\", height: \"45px\" }}\n ></CustomTooltip>\n </Flex>\n )}\n </Flex>\n {isLoading && !isRevokeForUSDT ? (\n <Spinner w={\"24px\"} h={\"24px\"} color={\"#007AFF\"} />\n ) : afterApproved ? (\n <Flex>\n <Image src={ConfirmedImage} alt={\"ConfirmedImage\"} />\n </Flex>\n ) : (\n <Flex>\n {(isRevokeForUSDT || confirmedRevokeTransaction) && (\n <Button\n w={{ base: \"64px\", lg: \"96px\" }}\n h={\"28px\"}\n fontSize={{ base: 12, lg: 14 }}\n fontWeight={500}\n bgColor={\"#007AFF\"}\n color={\"#fff\"}\n _active={{}}\n _hover={{}}\n onClick={() => {\n callApprove();\n setIsDrawerOpen(false);\n }}\n isDisabled={!isRevokeForUSDT || isLoading}\n _disabled={{ bg: \"#15161D\", color: \"#8E8E92\" }}\n >\n {\"Revoke\"}\n {isLoading && isRevokeForUSDT && (\n <Flex w={\"20px\"} h={\"20px\"} ml={\"6px\"}>\n <Spinner\n w={\"20px\"}\n h={\"20px\"}\n maxW={\"20px\"}\n maxH={\"20px\"}\n color={\"#007AFF\"}\n />\n </Flex>\n )}\n {confirmedRevokeTransaction && (\n <Flex ml={\"6px\"} minW={\"18px\"} minH={\"18px\"}>\n <Image src={ConfirmedImage} alt={\"ConfirmedImage\"} />\n </Flex>\n )}\n </Button>\n )}\n <Button\n w={{ base: \"64px\", lg: isRevokeForUSDT ? \"80px\" : \"92px\" }}\n h={\"28px\"}\n ml={\"12px\"}\n fontSize={{ base: 12, lg: 14 }}\n fontWeight={500}\n bgColor={\"#007AFF\"}\n color={\"#fff\"}\n _active={{}}\n _hover={{}}\n onClick={() => {\n callApprove();\n setIsDrawerOpen(false);\n }}\n isDisabled={isLoading || isRevokeForUSDT}\n _disabled={{ bg: \"#15161D\", color: \"#8E8E92\" }}\n >\n {\"Approve\"}\n </Button>\n </Flex>\n )}\n </Flex>\n );\n}\n"}]}]},"nodeType":"block"},{"uid":"IrdYNfZi7D","position":{"x":-200,"y":2750},"sizes":{"width":399.515625,"height":77.546875},"autoheight":false,"blockContent":{"type":"doc","content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/app/BridgeSwap/TransactionDetail.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"export default function TransactionDetail(props: {\n isOnConfirm?: boolean;\n isMobile?: boolean;\n}) {\n const { isOnConfirm, isMobile } = props;\n const { isOpen } = useConfirm();\n\n // 해당 코드를 통해 모바일에서는 무조건 detail을 확장합니다.\n const { mobileView } = useMediaView();\n useEffect(() => {\n setIsExpended(isOpen || mobileView);\n }, [mobileView]);\n\n const [isExpanded, setIsExpended] = useState<boolean>(isOpen || mobileView);\n const { isNotSupportForBridge, isNotSupportForSwap } = useBridgeSupport();\n\n const { mode, isReady } = useGetMode();\n const { outToken } = useInOutTokens();\n const { isInputZero } = useInputBalanceCheck();\n const { isConnected } = useAccount();\n const { isTONatPair } = useIsTon();\n\n const isWrapUnwrap =\n mode === \"Wrap\" ||\n mode === \"Unwrap\" ||\n mode === \"ETH-Wrap\" ||\n mode === \"ETH-Unwrap\";\n\n if (\n !isReady ||\n isNotSupportForSwap ||\n isNotSupportForBridge ||\n (mode === \"Swap\" && outToken === null) ||\n isInputZero ||\n !isConnected ||\n (mode === \"Swap\" && isTONatPair) ||\n mode === \"Withdraw\"\n ) {\n return null;\n }\n\n return (\n <Flex\n w={\"100%\"}\n // h={isExpanded ? \"310px\" : \"48px\"}\n minH={{ base: \"40px\", lg: \"48px\" }}\n bg={\"#1f2128\"}\n borderRadius={\"8px\"}\n px={!isMobile ? { base: \"16px\", lg: \"20px\" } : \"\"}\n flexDir={\"column\"}\n pt={\n !isMobile\n ? {\n base: isExpanded ? \"11px\" : \"11px\",\n lg: isExpanded ? \"20px\" : \"14px\",\n }\n : \"\"\n }\n pb={{\n base: isExpanded ? \"12px\" : \"\",\n lg: isExpanded ? \"20px\" : \"\",\n }}\n >\n {!isMobile && (\n <Title isExpanded={isExpanded} setIsExpended={setIsExpended} />\n )}\n {(!mobileView ||\n isOnConfirm ||\n (mode !== \"Deposit\" && !(isWrapUnwrap && mobileView))) && (\n <Content\n isExpanded={isExpanded}\n isOnConfirm={isOnConfirm}\n isMobile={isMobile}\n ></Content>\n )}\n </Flex>\n );\n}\n"}]}]},"nodeType":"block"},{"uid":"NfAhbh-J4l","position":{"x":-1210,"y":2560},"sizes":{"width":399.53125,"height":77.546875},"autoheight":false,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/app/BridgeSwap/components/InToken.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import TokenCard from \"@/components/card/TokenCard\";\nimport NetworkDropdown from \"@/components/dropdown/Index\";\nimport SearchToken from \"@/components/search/SearchToken\";\nimport useTokenModal from \"@/hooks/modal/useTokenModal\";\nimport { actionMode } from \"@/recoil/bridgeSwap/atom\";\nimport { Box, Flex, Text } from \"@chakra-ui/layout\";\nimport { useRecoilValue } from \"recoil\";\nimport TokenInput from \"@/components/input/TokenInput\";\nimport { useMemo } from \"react\";\nimport { useInOutTokens } from \"@/hooks/token/useInOutTokens\";\n\nexport default function InToken() {\n const { inToken } = useInOutTokens();\n const { mode } = useRecoilValue(actionMode);\n const { onOpenInToken } = useTokenModal();\n\n const NetworkSwitcher = useMemo(() => {\n return (\n <Box w={\"200px\"} h={\"32px\"}>\n <NetworkDropdown inNetwork={true} width={\"200px\"} height=\"32px\" />\n </Box>\n );\n }, []);\n\n return (\n <Flex flexDir={\"column\"} rowGap={\"28px\"}>\n <Flex pos={\"relative\"} h={\"54px\"}>\n {mode && (\n <Text\n w={\"300px\"}\n fontSize={36}\n fontWeight={\"semibold\"}\n pos={\"absolute\"}\n >\n {mode.replaceAll(\"ETH-\", \"\")}\n </Text>\n )}\n </Flex>\n <Flex className=\"card-wrapper\" minW={\"224px\"} minH={\"386px\"}>\n {NetworkSwitcher}\n <Box\n w={\"200px\"}\n h={\"248px\"}\n mt={\"12px\"}\n mb={\"16px\"}\n onClick={onOpenInToken}\n >\n {inToken?.tokenName ? (\n <TokenCard\n tokenInfo={inToken}\n hasInput={true}\n inNetwork={true}\n forBridge={true}\n watch={true}\n />\n ) : (\n <Box\n className=\"card card-empty\"\n display={\"flex\"}\n flexDir={\"column\"}\n rowGap={\"70px\"}\n w={\"100%\"}\n h={\"100%\"}\n >\n <SearchToken />\n </Box>\n )}\n </Box>\n <Flex px={\"12px\"} mb={'-16px'}>\n {inToken !== null && (\n <TokenInput inToken={true} hasMaxButton={true} />\n )}\n </Flex>\n </Flex>\n </Flex>\n );\n}\n"}]}]},"nodeType":"block"},{"uid":"NBcNU25d1g","position":{"x":-1210,"y":2660},"sizes":{"width":399.515625,"height":77.546875},"autoheight":false,"blockContent":{"type":"doc","content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/app/BridgeSwap/components/OutToken.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import NetworkDropdown from \"@/components/dropdown/Index\";\nimport SearchToken from \"@/components/search/SearchToken\";\nimport { Box, Flex, Text } from \"@chakra-ui/layout\";\nimport ImageSymbol from \"@/components/image/TokenSymbol\";\nimport { useInOutNetwork } from \"@/hooks/network\";\nimport { ImageFileType } from \"@/types/style/imageFileType\";\nimport TokenInput from \"@/components/input/TokenInput\";\nimport useTokenModal from \"@/hooks/modal/useTokenModal\";\nimport TokenCard from \"@/components/card/TokenCard\";\nimport { useMemo } from \"react\";\nimport { useInOutTokens } from \"@/hooks/token/useInOutTokens\";\nimport Setting from \"@/components/Setting\";\nimport { useGetMode } from \"@/hooks/mode/useGetMode\";\nimport { convertNetworkName } from \"@/utils/network/convertNetworkName\";\n\nexport const SelectedNetwork = () => {\n const { outNetwork } = useInOutNetwork();\n\n return (\n <Box\n className=\"card card-empty\"\n display={\"flex\"}\n flexDir={\"column\"}\n rowGap={\"16px\"}\n justifyContent={\"center\"}\n alignItems={\"center\"}\n mt={\"15px\"}\n >\n <ImageSymbol\n ImgFile={outNetwork?.networkImage as ImageFileType}\n w={48}\n h={48}\n />\n <Text\n w={\"156px\"}\n maxH={\"44px\"}\n fontSize={18}\n fontWeight={500}\n textAlign={\"center\"}\n >\n {convertNetworkName(outNetwork?.chainName)}\n </Text>\n </Box>\n );\n};\n\nexport const SearchTokenComponent = () => {\n const { outToken } = useInOutTokens();\n\n const { onOpenOutToken } = useTokenModal();\n\n if (outToken?.tokenName) {\n return (\n <TokenCard\n h={\"248px\"}\n w={\"200px\"}\n tokenInfo={outToken}\n hasInput={true}\n inNetwork={false}\n style={{ marginTop: \"12px\", minHeight: \"248px\" }}\n onClick={onOpenOutToken}\n forBridge={true}\n watch={true}\n />\n );\n }\n return (\n <Box\n className=\"card card-empty\"\n display={\"flex\"}\n flexDir={\"column\"}\n rowGap={\"70px\"}\n mt={\"12px\"}\n >\n <SearchToken onClick={onOpenOutToken} />\n </Box>\n );\n};\n\nexport default function OutToken() {\n const { mode, swapSection } = useGetMode();\n const { outToken } = useInOutTokens();\n\n const NetworkSwitcher = useMemo(() => {\n return (\n <Box minW={\"200px\"} h={\"32px\"}>\n <NetworkDropdown inNetwork={false} width={\"200px\"} height=\"32px\" />\n </Box>\n );\n }, []);\n\n return (\n <Flex flexDir={\"column\"} rowGap={\"28px\"}>\n <Flex justifyContent={\"space-between\"} alignItems={\"center\"}>\n <Text fontSize={36} fontWeight={\"semibold\"} h={\"54px\"}>\n {mode === \"Swap\" ? \"For\" : \"To\"}\n </Text>\n {mode === \"Swap\" && <Setting />}\n </Flex>\n\n <Flex className=\"card-wrapper\" w={\"224px\"} h={\"386px\"}>\n {NetworkSwitcher}\n {swapSection && <SearchTokenComponent />}\n {(mode === \"Deposit\" || mode === \"Withdraw\") && <SelectedNetwork />}\n {outToken !== null && (\n <TokenInput\n inToken={false}\n isDisabled={false}\n style={{\n marginTop: \"16px\",\n width: \"100%\",\n paddingLeft: \"12px\",\n paddingRight: \"12px\",\n }}\n />\n )}\n </Flex>\n </Flex>\n );\n}\n"}]}]},"nodeType":"block"},{"uid":"-2R4dKe-nf","position":{"x":-200,"y":2850},"sizes":{"width":429.6875,"height":77.546875},"autoheight":false,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/app/BridgeSwap/components/ActionButton.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import { useEffect, useState } from \"react\";\nimport { actionMode } from \"@/recoil/bridgeSwap/atom\";\nimport { Button } from \"@chakra-ui/react\";\nimport { useRecoilValue } from \"recoil\";\nimport { useAccount } from \"wagmi\";\nimport { useApprove } from \"@/hooks/token/useApproval\";\nimport useBridgeSupport from \"@/hooks/bridge/useBridgeSupport\";\nimport useConfirmModal from \"@/hooks/modal/useConfirmModal\";\nimport useCallBridgeSwapAction from \"@/hooks/contracts/useCallBridgeSwapActions\";\nimport useIsLoading from \"@/hooks/ui/useIsLoading\";\nimport useInputBalanceCheck from \"@/hooks/token/useInputCheck\";\nimport useConnectWallet from \"@/hooks/account/useConnectWallet\";\nimport { useInOutTokens } from \"@/hooks/token/useInOutTokens\";\nimport useIsTon from \"@/hooks/token/useIsTon\";\nimport { confirmWithdrawStats } from \"@/recoil/modal/atom\";\nimport { useRecoilState } from \"recoil\";\nimport { bannerStatus } from \"@/recoil/bridgeSwap/atom\";\nimport { useInOutNetwork } from \"@/hooks/network\";\nimport \"@fontsource/poppins/600.css\";\nimport { txPendingStatus } from \"@/recoil/global/transaction\";\nimport { Action, Status } from \"@/staging/types/transaction\";\n\nimport { useHandleConfirm } from \"@/staging/components/new-confirm/hooks/useDepositWithdrawHandleConfirm\";\nimport useSwapConfirmModal from \"@/staging/components/new-confirm/hooks/useSwapConfirmModal\";\n\n// FW UI test @Robert\nimport useCTOptionModal from \"@/staging/components/cross-trade/hooks/useCTOptionModal\";\n\nexport default function ActionButton() {\n const { isConnected } = useAccount();\n const { mode, isReady } = useRecoilValue(actionMode);\n const { isApproved } = useApprove();\n const { isNotSupportForSwap } = useBridgeSupport();\n const [isLoading] = useIsLoading();\n\n const [isDisabled, setIsDisabled] = useState<boolean>(true);\n const { isBalanceOver, isInputZero } = useInputBalanceCheck();\n const txPending = useRecoilValue(txPendingStatus);\n const { outToken, inToken } = useInOutTokens();\n const { isTONatPair } = useIsTon();\n const status = useRecoilValue(bannerStatus);\n const { inNetwork, outNetwork } = useInOutNetwork();\n\n const needToOpenWithdrawModal = mode === \"Withdraw\";\n const needToOpenDepositModal = mode === \"Deposit\";\n const needToOpenSwapModal = mode === \"Swap\";\n\n const isL2 = inNetwork?.layer === \"L2\" || outNetwork?.layer === \"L2\"; //checks if the action is L2\n\n const deactivateButton = status === \"Active\" && isL2; //when the maintenance banner is active, this will disable the action button related to all L2 actions\n useEffect(() => {\n const timeoutId = setTimeout(() => {\n const disabled =\n !isReady ||\n isApproved === false ||\n (mode === \"Swap\" && isLoading) ||\n isNotSupportForSwap ||\n isBalanceOver ||\n txPending ||\n (mode === \"Swap\" && outToken === null) ||\n isInputZero ||\n (mode === \"Swap\" && isTONatPair) ||\n deactivateButton;\n setIsDisabled(disabled);\n }, 200);\n\n return () => {\n clearTimeout(timeoutId);\n };\n }, [\n isReady,\n isApproved,\n isLoading,\n isNotSupportForSwap,\n isBalanceOver,\n txPending,\n isTONatPair,\n isInputZero,\n mode,\n outToken,\n ]);\n const { onClick } = useCallBridgeSwapAction();\n const { connetAndDisconntWallet } = useConnectWallet();\n\n {\n /** add coming code @Robert */\n }\n const { onOpenCTOptionModal } = useCTOptionModal();\n const handleConfirm = useHandleConfirm();\n const { onOpenSwapConfirmModal } = useSwapConfirmModal();\n\n return (\n <>\n {/** FW UI test End @Robert*/}\n <Button\n w={\"100%\"}\n h={\"48px\"}\n fontSize={16}\n fontWeight={600}\n _active={{}}\n _hover={{}}\n _disabled={{}}\n bgColor={!isConnected ? \"#007AFF\" : isDisabled ? \"#17181D\" : \"#007AFF\"}\n color={!isConnected ? \"fff\" : isDisabled ? \"#8E8E92\" : \"#fff\"}\n isDisabled={!isConnected ? false : isDisabled}\n onClick={\n isConnected === false\n ? () => connetAndDisconntWallet()\n : needToOpenWithdrawModal\n ? () => onOpenCTOptionModal()\n : needToOpenDepositModal\n ? () => handleConfirm(Action.Deposit, Status.Initiate)\n : needToOpenSwapModal\n ? () => onOpenSwapConfirmModal()\n : onClick\n }\n >\n {!isConnected && \"Connect Wallet\"}\n {!isConnected\n ? null\n : isConnected && mode === null\n ? \"Select Network\"\n : mode === \"Withdraw\"\n ? \"Next\"\n : mode?.replaceAll(\"ETH-\", \"\")}{\" \"}\n <span style={{ fontSize: \"10px\", marginLeft: \"3px\", marginTop: \"3px\" }}>\n {deactivateButton ? \"(Service under maintenance)\" : \"\"}\n {/* {'(Service under maintenance)'} */}\n </span>\n </Button>\n </>\n );\n}\n"}]}]},"nodeType":"block"},{"uid":"x5c0q2SqDz","position":{"x":-3120,"y":890},"sizes":{"width":479.546875,"height":77.546875},"autoheight":false,"blockContent":{"type":"doc","content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/hooks/contracts/useCallBridgeSwapActions.ts"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import { useCallback, useEffect } from \"react\";\nimport { useAccount } from \"wagmi\";\nimport useConnectWallet from \"../account/useConnectWallet\";\nimport { useInOutTokens } from \"../token/useInOutTokens\";\nimport { useGetMode } from \"../mode/useGetMode\";\nimport { useInOutNetwork } from \"../network\";\nimport { SupportedChainId } from \"@/types/network/supportedNetwork\";\nimport { supportedTokens } from \"@/types/token/supportedToken\";\nimport useCallDeposit from \"../bridge/actions/useCallDeposit\";\nimport useCallWithdraw from \"../bridge/actions/useCallWithdraw\";\nimport { useAmountOut } from \"../swap/useSwapTokens\";\nimport useWrap from \"../swap/useTonWrap\";\nimport { predeploys } from \"@eth-optimism/contracts\";\nimport useTxConfirmModal from \"../modal/useTxConfirmModal\";\nimport { useGasFee } from \"./fee/getGasFee\";\nimport { Hash } from \"viem\";\nimport { calculateGasMargin } from \"@/utils/txn/calculateGasMargin\";\nimport { BigNumber } from \"ethers\";\n\nexport default function useCallBridgeSwapAction() {\n const { isConnected, address } = useAccount();\n const { connectToWallet } = useConnectWallet();\n const { inToken } = useInOutTokens();\n const { mode } = useGetMode();\n const { inNetwork, outNetwork } = useInOutNetwork();\n\n const {\n write: _depositETH,\n contract: _depositETH_contract,\n isError,\n } = useCallDeposit(\"depositETH\");\n const { write: _depositERC20, isError: _depositERC20Error } =\n useCallDeposit(\"depositERC20\");\n const {\n write: _withdraw,\n isError: _withdrawError,\n contract: _withdrawContract,\n } = useCallWithdraw(\"withdraw\");\n const { callTokenSwap } = useAmountOut();\n const { wrapTON, unwrapWTON, wrapETH, unwrapWETH } = useWrap();\n const { setModalOpen, setIsOpen } = useTxConfirmModal();\n const { gasLimit } = useGasFee();\n\n const onClick = useCallback(async () => {\n if (!isConnected) {\n return connectToWallet();\n }\n if (inToken && inToken.amountBN && inNetwork && outNetwork) {\n const isETH = inToken.isNativeCurrency?.includes(\n SupportedChainId.MAINNET\n );\n const parsedAmount = inToken.amountBN;\n if (\n mode === \"Wrap\" ||\n mode === \"Unwrap\" ||\n mode === \"ETH-Wrap\" ||\n mode === \"ETH-Unwrap\"\n ) {\n } else {\n setIsOpen(true);\n setModalOpen(\"confirming\");\n }\n\n switch (mode) {\n case \"Deposit\":\n const supportedOutToken = supportedTokens.filter(\n (token) => token.address === inToken.address\n )[0];\n const outTokenAddress =\n supportedOutToken.address[outNetwork.chainName];\n\n if (isETH) {\n return _depositETH({\n args: [200000, \"0x\"],\n //need to put gasAmount with gasOrcale later\n value: parsedAmount as bigint,\n gas: gasLimit,\n });\n }\n\n return _depositERC20({\n args: [\n inToken.address[inNetwork.chainName],\n outTokenAddress,\n parsedAmount,\n 200000,\n \"0x\",\n ],\n gas: gasLimit,\n });\n case \"Withdraw\":\n if (isETH) {\n const txData = [predeploys.OVM_ETH, parsedAmount, 1_300_000, \"0x\"];\n const gasLimitForL2 = await _withdrawContract.estimateGas.withdraw({\n //@ts-ignore\n account: address as Hash,\n args: txData,\n });\n return _withdraw({\n args: txData,\n gas: calculateGasMargin(BigNumber.from(gasLimitForL2)).toBigInt(),\n });\n }\n const txData = [\n inToken.address[inNetwork.chainName],\n parsedAmount,\n 0,\n \"0x\",\n ];\n const gasLimitForL2 = await _withdrawContract.estimateGas.withdraw({\n //@ts-ignore\n account: address as Hash,\n args: txData,\n });\n return _withdraw({\n args: txData,\n gas: calculateGasMargin(BigNumber.from(gasLimitForL2)).toBigInt(),\n });\n case \"Swap\":\n return callTokenSwap();\n case \"Wrap\":\n return wrapTON();\n case \"Unwrap\":\n return unwrapWTON();\n case \"ETH-Wrap\":\n return wrapETH();\n case \"ETH-Unwrap\":\n return unwrapWETH();\n default:\n return console.error(\"action mode is not found\");\n }\n }\n }, [isConnected, connectToWallet, mode, inToken, address, gasLimit]);\n\n useEffect(() => {\n if (isError || _depositERC20Error || _withdrawError) {\n setModalOpen(\"error\");\n }\n }, [isError, _depositERC20Error, _withdrawError]);\n\n return { onClick };\n}\n"}]}]},"nodeType":"block"},{"uid":"-zHA7jffoA","position":{"x":310,"y":2930},"sizes":{"width":549.5625,"height":77.546875},"autoheight":false,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/staging/components/new-confirm/hooks/useSwapConfirmModal.ts"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import { swapConfirmModalStatus } from \"@/recoil/modal/atom\";\nimport { useRecoilState } from \"recoil\";\nimport { useCallback } from \"react\";\n\nexport default function useSwapConfirm() {\n const [swapConfirmModal, setSwapConfirmModal] = useRecoilState(\n swapConfirmModalStatus\n );\n\n const onOpenSwapConfirmModal = () => {\n setSwapConfirmModal(true);\n };\n\n const onCloseSwapConfirmModal = useCallback(() => {\n setSwapConfirmModal(false);\n }, []);\n\n return {\n swapConfirmModal,\n onOpenSwapConfirmModal,\n onCloseSwapConfirmModal,\n };\n}\n"}]}]},"nodeType":"block"},{"uid":"IsdYGMJPDt","position":{"x":-130,"y":3100},"sizes":{"width":399.53125,"height":77.546875},"autoheight":false,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/app/Modals.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import { SelectCardModal } from \"@/components/card/SelectCard\";\nimport ActionConfirmModal from \"@/components/modal/ActionConfirmModal\";\nimport Confirmation from \"@/components/modal/Confirmation\";\nimport TutorialModal from \"@/components/modal/TutorialModal\";\nimport ActionOptionModal from \"@/components/modal/ActionOptionModal\";\nimport SwapSettingModal from \"@/components/modal/SwapSettingModal\";\nimport SelectTokenModal from \"@/components/mobile/modal/SelectTokenModal\";\nimport useMediaView from \"@/hooks/mediaView/useMediaView\";\nimport AmountInputModal from \"@/components/mobile/modal/AmountInputModal\";\nimport DepositWithdrawConfirmModal from \"@/staging/components/new-confirm/components/core/other\";\nimport SwapConfirmModal from \"@/staging/components/new-confirm/components/core/swap\";\nimport CTOptionModal from \"@/staging/components/cross-trade/components/core/option\";\nimport CTModal from \"@/staging/components/cross-trade/components/core/comfirm\";\nimport CTFeeUpdateModal from \"@/staging/components/cross-trade/components/core/updateFee\";\n\nexport default function Modals() {\n const { mobileView } = useMediaView();\n\n return (\n <>\n {mobileView ? (\n <>\n <SelectTokenModal />\n <AmountInputModal />\n </>\n ) : (\n <SelectCardModal />\n )}\n <Confirmation />\n <TutorialModal />\n <ActionOptionModal />\n <SwapSettingModal />\n\n {/**new confirm modal @Robert */}\n {/*\n * <ConfirmWithdraw />\n * <ActionConfirmModal />\n */}\n <DepositWithdrawConfirmModal />\n <SwapConfirmModal />\n\n {/* <CTComingModal /> */}\n <CTOptionModal />\n <CTModal />\n <CTFeeUpdateModal />\n </>\n );\n}\n"}]}]},"nodeType":"block"},{"uid":"85fY7mDmzc","position":{"x":-130,"y":3020},"sizes":{"width":399.546875,"height":83.953125},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"All modals should be located here"}]}]},"nodeType":"block"},{"uid":"kc92rzClj4","position":{"x":310,"y":3100},"sizes":{"width":559.5625,"height":77.546875},"autoheight":false,"blockContent":{"type":"doc","content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/staging/components/new-confirm/components/core/other/index.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import React, { useMemo, useState } from \"react\";\nimport {\n Modal,\n Flex,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalBody,\n ModalFooter,\n Box,\n Text,\n Button,\n} from \"@chakra-ui/react\";\nimport { useAccount } from \"wagmi\";\nimport { trimAddress } from \"@/utils/trim\";\nimport { Action, Status, GasCostData } from \"@/staging/types/transaction\";\nimport useDepositWithdrawConfirmModal from \"@/staging/components/new-confirm/hooks/useDepositWithdrawConfirmModal\";\nimport TimeLine from \"./TimeLine\";\nimport CloseButton from \"@/components/button/CloseButton\";\nimport NetworkSymbol from \"@/staging/components/new-confirm/components/NetworkSymbol\";\nimport { Tooltip } from \"@/staging/components/common/Tooltip\";\nimport ConfirmDetails from \"@/staging/components/new-confirm/components/core/other/ConfirmDetails\";\nimport { STATUS_CONFIG } from \"@/staging/constants/status\";\nimport StatusComponent from \"@/staging/components/new-confirm/components/core/other/StatusComponent\";\nimport ConditionalBox from \"@/staging/components/new-confirm/components/core/other/ConditionalBox\";\nimport { useGasFee } from \"@/hooks/contracts/fee/getGasFee\";\nimport useRelayGas from \"@/staging/components/new-confirm/hooks/useGetGas\";\nimport ConfirmInitiateFooter from \"@/staging/components/new-confirm/components/core/other/ConfirmInitiateFooter\";\nimport { SupportedChainId } from \"@/types/network/supportedNetwork\";\nimport useCallBridgeSwapAction from \"@/hooks/contracts/useCallBridgeSwapActions\";\n\nimport {\n getLineType,\n getType,\n getWaitMessage,\n} from \"@/staging/components/new-confirm/utils/getConfirmType\";\nimport { getGasCostText } from \"@/utils/number/compareNumbers\";\n\nexport default function DepositWithdrawConfirmModal() {\n const { depositWithdrawConfirmModal, onCloseDepositWithdrawConfirmModal } =\n useDepositWithdrawConfirmModal();\n const transactionData = depositWithdrawConfirmModal.transaction;\n\n const { address } = useAccount();\n const { onClick } = useCallBridgeSwapAction();\n const { totalGasCost, gasCostUS } = useGasFee();\n\n /**\n * Lakmi src/components/history/modalComponents/Step4.tsx @Robert\n * Removed interval, added gasLimit parameter.\n * Replaced 600000 and 1000000 with gasLimit parameter.\n * Changed fixed chainId to chainId parameter.\n */\n const CLAIM_GAS_USED = 1000000;\n const withdrawCost = useRelayGas(CLAIM_GAS_USED, SupportedChainId[\"MAINNET\"]);\n\n const gasCostData: GasCostData = useMemo(() => {\n const formatValue = (value: string | undefined | null) =>\n value == null || value === \"0\" || value === \"-\" ? \"NA\" : value;\n\n if (transactionData?.action === Action.Deposit) {\n return {\n depositInitiateGasCostText: formatValue(getGasCostText(totalGasCost)),\n depositGasCostUS: formatValue(gasCostUS),\n };\n }\n if (transactionData?.action === Action.Withdraw) {\n return {\n withdrawInitiateGasCostText: formatValue(getGasCostText(totalGasCost)),\n withdrawInitiateGasCostUS: formatValue(gasCostUS),\n withdrawClaimGasCostText: formatValue(\n getGasCostText(withdrawCost.totalGasCost)\n ),\n withdrawClaimGasCostUS: formatValue(withdrawCost.usGasCost),\n };\n }\n return {};\n }, [transactionData, totalGasCost, gasCostUS, withdrawCost]);\n\n if (!transactionData) {\n return null;\n }\n\n const lineType = getLineType(transactionData);\n\n const statuses: Status[] =\n transactionData.action === Action.Withdraw\n ? STATUS_CONFIG.WITHDRAW\n : STATUS_CONFIG.DEPOSIT;\n\n {\n /**\n * The renderStatusComponents function iterates over the statuses array @Robert\n * and renders a StatusComponent and, conditionally, a ConditionalBox\n * component for each status. The ConditionalBox component is rendered\n * between the StatusComponent elements based on the length of the statuses array.\n *\n * - For WITHDRAW (length 3): Two ConditionalBox components are inserted between the StatusComponent elements.\n * - For DEPOSIT (length 2): One ConditionalBox component is inserted between the StatusComponent elements.\n */\n }\n const renderStatusComponents = (statuses: Status[]) => {\n return statuses.map((statusKey, index) => {\n const lineType = getLineType(transactionData);\n const typeValue = getType(lineType, index);\n const waitMessage = getWaitMessage(lineType, index);\n\n return (\n <React.Fragment key={index}>\n <StatusComponent\n label={statusKey}\n transactionData={transactionData}\n lineType={lineType}\n gasCostData={gasCostData}\n />\n {(statuses.length === 2 && index === 0) ||\n (statuses.length === 3 && index < 2)\n ? typeValue !== undefined && (\n <ConditionalBox\n type={typeValue}\n transactionData={transactionData}\n waitMessage={waitMessage}\n />\n )\n : null}\n </React.Fragment>\n );\n });\n };\n\n const isButtonVisible =\n !(transactionData.action === Action.Deposit) &&\n !(\n transactionData.action === Action.Withdraw &&\n transactionData.status === Status.Completed\n );\n\n return (\n <Modal\n isOpen={depositWithdrawConfirmModal.isOpen}\n onClose={onCloseDepositWithdrawConfirmModal}\n isCentered\n >\n <ModalOverlay />\n <ModalContent\n width={\"404px\"}\n bg=\"#1F2128\"\n p={\"20px\"}\n borderRadius={\"16px\"}\n >\n <ModalHeader px={0} pt={0} pb={\"12px\"}>\n <Text fontSize={\"20px\"} fontWeight={\"500\"} lineHeight={\"30px\"}>\n Confirm{\" \"}\n {transactionData?.action === Action.Withdraw\n ? \"Withdraw\"\n : \"Deposit\"}\n </Text>\n </ModalHeader>\n <Box pos={\"absolute\"} right={4} top={\"15px\"}>\n <CloseButton onClick={onCloseDepositWithdrawConfirmModal} />\n </Box>\n <ModalBody p={0}>\n <Box\n px={\"16px\"}\n py={\"12px\"}\n border={\"1px solid #313442\"}\n borderRadius={\"8px\"}\n bg=\"#0F0F12\"\n >\n <Box>\n <ConfirmDetails\n isInNetwork={true}\n transactionHistory={transactionData}\n />\n <ConfirmDetails\n isInNetwork={false}\n transactionHistory={transactionData}\n />\n </Box>\n <Box borderTop=\"1px solid #313442\" mt={\"16px\"} pt={\"16px\"}>\n <Flex justifyContent={\"space-between\"} alignItems={\"center\"}>\n <Text\n fontWeight={400}\n fontSize={\"12px\"}\n lineHeight={\"18px\"}\n color={\"#A0A3AD\"}\n >\n Bridge\n </Text>\n <Flex>\n <NetworkSymbol networkI={55004} networkH={16} networkW={16} />\n <Text\n ml={\"4px\"}\n fontWeight={500}\n fontSize={\"12px\"}\n lineHeight={\"18px\"}\n color={\"#FFFFFF\"}\n >\n Titan Standard bridge\n </Text>\n </Flex>\n </Flex>\n <Flex\n mt={\"6px\"}\n justifyContent={\"space-between\"}\n alignItems={\"center\"}\n >\n <Text\n fontWeight={400}\n fontSize={\"12px\"}\n lineHeight={\"18px\"}\n color={\"#A0A3AD\"}\n >\n {transactionData?.action === Action.Withdraw\n ? \"Withdraw\"\n : \"Deposit\"}\n {/** Add a space */ \" \"}\n to\n </Text>\n <Text\n fontWeight={600}\n fontSize={\"12px\"}\n lineHeight={\"18px\"}\n color={\"#FFFFFF\"}\n >\n {trimAddress({ address: address, firstChar: 6 })}\n </Text>\n </Flex>\n </Box>\n </Box>\n <Box\n my={\"12px\"}\n px={\"20px\"}\n pt={\"16px\"}\n borderRadius={\"8px\"}\n bg=\"#15161D\"\n >\n <Flex>\n <Box>\n <TimeLine lineType={lineType} />\n </Box>\n <Box ml={\"10px\"}>{renderStatusComponents(statuses)}</Box>\n </Flex>\n </Box>\n </ModalBody>\n <ModalFooter p={0} display=\"block\">\n {transactionData.status === Status.Initiate ? (\n <ConfirmInitiateFooter\n onClick={onClick}\n onCloseDepositWithdrawConfirmModal={\n onCloseDepositWithdrawConfirmModal\n }\n />\n ) : (\n <>\n <Box mb={isButtonVisible ? \"12px\" : undefined} pb={\"4px\"}>\n <Text fontWeight={400} fontSize={\"13px\"} lineHeight={\"20px\"}>\n Estimated Time of Arrival: ~1 day\n </Text>\n <Text fontWeight={400} fontSize={\"13px\"} lineHeight={\"20px\"}>\n Estimated Time of Arrival: ~1 day\n </Text>\n </Box>\n {isButtonVisible && (\n <Button\n width=\"full\"\n height={\"48px\"}\n borderRadius={\"8px\"}\n sx={{\n backgroundColor: lineType !== 3 ? \"#17181D\" : \"#007AFF\",\n color: lineType !== 3 ? \"#8E8E92\" : \"#FFFFFF\",\n }}\n _active={{}}\n _hover={{}}\n _focus={{}}\n >\n <Flex alignItems={\"center\"}>\n <Text\n fontWeight={600}\n fontSize={\"16px\"}\n lineHeight={\"24px\"}\n >\n Finalize\n </Text>\n <Tooltip\n tooltipLabel={\"text will be changed\"}\n style={{ marginLeft: \"2px\" }}\n type={lineType !== 3 ? \"grey\" : \"white\"}\n />\n </Flex>\n </Button>\n )}\n </>\n )}\n </ModalFooter>\n </ModalContent>\n </Modal>\n );\n}\n"}]}]},"nodeType":"block"},{"uid":"WTeOPcGpus","position":{"x":400,"y":3320},"sizes":{"width":399.5,"height":77.546875},"autoheight":false,"blockContent":{"type":"doc","content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/hooks/contracts/useCallBridgeSwapActions.ts"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import { useCallback, useEffect } from \"react\";\nimport { useAccount } from \"wagmi\";\nimport useConnectWallet from \"../account/useConnectWallet\";\nimport { useInOutTokens } from \"../token/useInOutTokens\";\nimport { useGetMode } from \"../mode/useGetMode\";\nimport { useInOutNetwork } from \"../network\";\nimport { SupportedChainId } from \"@/types/network/supportedNetwork\";\nimport { supportedTokens } from \"@/types/token/supportedToken\";\nimport useCallDeposit from \"../bridge/actions/useCallDeposit\";\nimport useCallWithdraw from \"../bridge/actions/useCallWithdraw\";\nimport { useAmountOut } from \"../swap/useSwapTokens\";\nimport useWrap from \"../swap/useTonWrap\";\nimport { predeploys } from \"@eth-optimism/contracts\";\nimport useTxConfirmModal from \"../modal/useTxConfirmModal\";\nimport { useGasFee } from \"./fee/getGasFee\";\nimport { Hash } from \"viem\";\nimport { calculateGasMargin } from \"@/utils/txn/calculateGasMargin\";\nimport { BigNumber } from \"ethers\";\n\nexport default function useCallBridgeSwapAction() {\n const { isConnected, address } = useAccount();\n const { connectToWallet } = useConnectWallet();\n const { inToken } = useInOutTokens();\n const { mode } = useGetMode();\n const { inNetwork, outNetwork } = useInOutNetwork();\n\n const {\n write: _depositETH,\n contract: _depositETH_contract,\n isError,\n } = useCallDeposit(\"depositETH\");\n const { write: _depositERC20, isError: _depositERC20Error } =\n useCallDeposit(\"depositERC20\");\n const {\n write: _withdraw,\n isError: _withdrawError,\n contract: _withdrawContract,\n } = useCallWithdraw(\"withdraw\");\n const { callTokenSwap } = useAmountOut();\n const { wrapTON, unwrapWTON, wrapETH, unwrapWETH } = useWrap();\n const { setModalOpen, setIsOpen } = useTxConfirmModal();\n const { gasLimit } = useGasFee();\n\n const onClick = useCallback(async () => {\n if (!isConnected) {\n return connectToWallet();\n }\n if (inToken && inToken.amountBN && inNetwork && outNetwork) {\n const isETH = inToken.isNativeCurrency?.includes(\n SupportedChainId.MAINNET\n );\n const parsedAmount = inToken.amountBN;\n if (\n mode === \"Wrap\" ||\n mode === \"Unwrap\" ||\n mode === \"ETH-Wrap\" ||\n mode === \"ETH-Unwrap\"\n ) {\n } else {\n setIsOpen(true);\n setModalOpen(\"confirming\");\n }\n\n switch (mode) {\n case \"Deposit\":\n const supportedOutToken = supportedTokens.filter(\n (token) => token.address === inToken.address\n )[0];\n const outTokenAddress =\n supportedOutToken.address[outNetwork.chainName];\n\n if (isETH) {\n return _depositETH({\n args: [200000, \"0x\"],\n //need to put gasAmount with gasOrcale later\n value: parsedAmount as bigint,\n gas: gasLimit,\n });\n }\n\n return _depositERC20({\n args: [\n inToken.address[inNetwork.chainName],\n outTokenAddress,\n parsedAmount,\n 200000,\n \"0x\",\n ],\n gas: gasLimit,\n });\n case \"Withdraw\":\n if (isETH) {\n const txData = [predeploys.OVM_ETH, parsedAmount, 1_300_000, \"0x\"];\n const gasLimitForL2 = await _withdrawContract.estimateGas.withdraw({\n //@ts-ignore\n account: address as Hash,\n args: txData,\n });\n return _withdraw({\n args: txData,\n gas: calculateGasMargin(BigNumber.from(gasLimitForL2)).toBigInt(),\n });\n }\n const txData = [\n inToken.address[inNetwork.chainName],\n parsedAmount,\n 0,\n \"0x\",\n ];\n const gasLimitForL2 = await _withdrawContract.estimateGas.withdraw({\n //@ts-ignore\n account: address as Hash,\n args: txData,\n });\n return _withdraw({\n args: txData,\n gas: calculateGasMargin(BigNumber.from(gasLimitForL2)).toBigInt(),\n });\n case \"Swap\":\n return callTokenSwap();\n case \"Wrap\":\n return wrapTON();\n case \"Unwrap\":\n return unwrapWTON();\n case \"ETH-Wrap\":\n return wrapETH();\n case \"ETH-Unwrap\":\n return unwrapWETH();\n default:\n return console.error(\"action mode is not found\");\n }\n }\n }, [isConnected, connectToWallet, mode, inToken, address, gasLimit]);\n\n useEffect(() => {\n if (isError || _depositERC20Error || _withdrawError) {\n setModalOpen(\"error\");\n }\n }, [isError, _depositERC20Error, _withdrawError]);\n\n return { onClick };\n}\n"}]}]},"nodeType":"block"},{"uid":"UyvfkRJTFs","position":{"x":510,"y":340},"sizes":{"width":399.53125,"height":77.546875},"autoheight":false,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/components/history/AccountHistory.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import {\n Drawer,\n DrawerContent,\n DrawerOverlay,\n Flex,\n Text,\n Box,\n Button,\n} from \"@chakra-ui/react\";\nimport Image from \"next/image\";\nimport { useAccount } from \"wagmi\";\nimport { useMemo, useEffect } from \"react\";\nimport DrawerCloseIcon from \"assets/icons/accountHistory/drawerClose.svg\";\nimport { useRecoilState } from \"recoil\";\nimport { accountDrawerStatus } from \"@/recoil/modal/atom\";\nimport AccountContainer from \"./AccountContainer\";\nimport useMediaView from \"@/hooks/mediaView/useMediaView\";\nimport Account from \"../header/Account\";\nimport { confirmWithdrawStats } from \"@/recoil/modal/atom\";\nimport AccountHistoryNew from \"@/staging/components/new-history/components/core\";\nimport {\n selectedTab,\n selectedTransactionCategory,\n} from \"@/recoil/history/transaction\";\nimport { Action, CT_ACTION, HISTORY_SORT } from \"@/staging/types/transaction\";\nimport { useHistoryTab } from \"@/staging/hooks/useHistoryTab\";\n\nexport default function AccountHistory() {\nconst [isOpen, setIsOpen] = useRecoilState(accountDrawerStatus);\n const [withdrawStatus] = useRecoilState(confirmWithdrawStats);\n const { address } = useAccount();\n const { mobileView } = useMediaView();\n const [, setSelectedTab] = useRecoilState(selectedTab);\n const { isOnOfficialStandard, isOnCrossTrade } = useHistoryTab();\n const [_selectedTransactionCategory, setSelectedTransactionCategory] =\n useRecoilState(selectedTransactionCategory);\n\n useEffect(() => {\n if (address === undefined) {\n setIsOpen(false);\n }\n }, [address]);\n\n const subCategoryButtons = useMemo(() => {\n if (!isOnOfficialStandard) {\n const isRequest = _selectedTransactionCategory === CT_ACTION.REQUEST;\n return (\n <Flex mt={\"16px\"} mb={\"12px\"} columnGap={\"8px\"}>\n <Button\n w={\"77px\"}\n h={\"32px\"}\n textAlign={\"center\"}\n fontSize={13}\n fontWeight={400}\n color={isRequest ? \"none\" : \"#A0A3AD\"}\n bg={isRequest ? \"#007AFF\" : \"#15161D\"}\n border={isRequest ? \"none\" : \"1px solid #313442\"}\n lineHeight={\"32px\"}\n _hover={{}}\n _active={{}}\n onClick={() => setSelectedTransactionCategory(CT_ACTION.REQUEST)}\n >\n Request\n </Button>\n <Button\n w={\"73px\"}\n h={\"32px\"}\n textAlign={\"center\"}\n fontSize={13}\n fontWeight={400}\n color={!isRequest ? \"none\" : \"#A0A3AD\"}\n bg={!isRequest ? \"#007AFF\" : \"#15161D\"}\n border={!isRequest ? \"none\" : \"1px solid #313442\"}\n lineHeight={\"32px\"}\n _hover={{}}\n _active={{}}\n onClick={() => setSelectedTransactionCategory(CT_ACTION.PROVIDE)}\n >\n Provide\n </Button>\n </Flex>\n );\n }\n const isDeposit = _selectedTransactionCategory === \"Deposit\";\n return (\n <Flex mt={\"16px\"} mb={\"12px\"} columnGap={\"8px\"}>\n <Button\n w={\"74px\"}\n h={\"32px\"}\n textAlign={\"center\"}\n fontSize={13}\n fontWeight={400}\n color={isDeposit ? \"none\" : \"#A0A3AD\"}\n bg={isDeposit ? \"#007AFF\" : \"none\"}\n border={isDeposit ? \"none\" : \"1px solid #313442\"}\n lineHeight={\"32px\"}\n _hover={{}}\n _active={{}}\n onClick={() => setSelectedTransactionCategory(Action.Deposit)}\n >\n Deposit\n </Button>\n <Button\n w={\"87px\"}\n h={\"32px\"}\n textAlign={\"center\"}\n fontSize={13}\n fontWeight={400}\n color={!isDeposit ? \"none\" : \"#A0A3AD\"}\n bg={!isDeposit ? \"#007AFF\" : \"none\"}\n border={!isDeposit ? \"none\" : \"1px solid #313442\"}\n lineHeight={\"32px\"}\n _hover={{}}\n _active={{}}\n onClick={() => setSelectedTransactionCategory(Action.Withdraw)}\n >\n Withdraw\n </Button>\n </Flex>\n );\n }, [isOnOfficialStandard, _selectedTransactionCategory]);\n\n return (\n <Drawer\n isOpen={isOpen && address !== undefined}\n placement=\"right\"\n onClose={() => {\n setIsOpen(false);\n }}\n variant=\"clickThrough\"\n trapFocus={false}\n useInert={true}\n >\n <DrawerOverlay\n bg={{ base: \"#000000F0\", lg: \"none\" }}\n onClick={() => (mobileView ? setIsOpen(false) : \"\")}\n />\n\n {mobileView && !withdrawStatus.isOpen && (\n <Box\n zIndex={10000}\n w={\"fit-content\"}\n h={\"fit-content\"}\n pos={\"fixed\"}\n right={\"52px\"}\n top={\"24px\"}\n >\n <Account />\n </Box>\n )}\n <DrawerContent\n px=\"12px\"\n pb=\"0px\"\n mt={{ base: \"64px\", lg: \"0px\" }}\n minW={{ base: \"100%\", lg: \"360px\" }}\n maxW={{ base: \"100%\", lg: \"360px\" }}\n bgColor={\"#1F2128\"}\n rounded={{ base: \"16px 16px 0px 0px\", lg: \"0\" }}\n >\n <Flex direction=\"column\" height=\"100%\" overflow=\"hidden\">\n {!mobileView && <AccountContainer />}\n <Flex\n w={\"336px\"}\n h={\"40px\"}\n alignItems={\"center\"}\n justifyContent={\"center\"}\n mt={\"16px\"}\n >\n <Box\n w={\"50%\"}\n textAlign={\"center\"}\n fontSize={14}\n fontWeight={600}\n py={isOnOfficialStandard ? \"9px\" : \"10px\"}\n cursor={\"pointer\"}\n color={isOnOfficialStandard ? \"#007AFF\" : \"#565B72\"}\n borderBottomColor={isOnOfficialStandard ? \"#007AFF\" : \"#565B72\"}\n borderBottomWidth={isOnOfficialStandard ? \"2px\" : \"1px\"}\n onClick={() => {\n setSelectedTransactionCategory(Action.Deposit);\n setSelectedTab(HISTORY_SORT.STANDARD);\n }}\n >\n Standard\n </Box>\n <Box\n w={\"50%\"}\n textAlign={\"center\"}\n fontSize={14}\n fontWeight={600}\n py={isOnCrossTrade ? \"9px\" : \"10px\"}\n cursor={\"pointer\"}\n color={isOnCrossTrade ? \"#007AFF\" : \"#565B72\"}\n borderBottomColor={isOnCrossTrade ? \"#007AFF\" : \"#565B72\"}\n borderBottomWidth={isOnCrossTrade ? \"2px\" : \"1px\"}\n onClick={() => {\n setSelectedTransactionCategory(CT_ACTION.REQUEST);\n setSelectedTab(HISTORY_SORT.CROSS_TRADE);\n }}\n >\n Cross Trade\n </Box>\n </Flex>\n {subCategoryButtons}\n <Flex mt={{ base: \"0px\", lg: \"12px\" }} flex=\"1\" overflow=\"hidden\">\n <Box\n flex=\"1\"\n overflowY=\"auto\"\n css={{\n \"&::-webkit-scrollbar\": {\n width: \"6px\",\n },\n \"&::-webkit-scrollbar-track\": {\n background: \"transparent\",\n borderRadius: \"4px\",\n },\n \"&::-webkit-scrollbar-thumb\": {\n background: \"#343741\",\n borderRadius: \"3px\",\n },\n }}\n mr=\"-6px\"\n >\n <AccountHistoryNew />\n </Box>\n </Flex>\n </Flex>\n\n {/**\n * Drawer Footer\n */}\n <Flex\n pos={\"absolute\"}\n left={\"-72px\"}\n height={\"100%\"}\n bg=\"transparent\"\n justifyContent={\"center\"}\n // border={\"1px solid red\"}\n // w={\"72px\"}\n _hover={{\n transform: \"translate(8px)\",\n\n bg: \"rgba(31, 33, 40, 0.50)\",\n zIndex: -1,\n }}\n onClick={() => {\n setIsOpen(false);\n }}\n cursor={\"pointer\"}\n // transform={\"translate(-7px)\"}\n transition={\"background 250ms ease 0s, transform 250ms ease 0s\"}\n >\n <Flex\n m={\"16px 20px 16px 12px\"}\n w={\"40px\"}\n h={\"40px\"}\n border={\"1px solid #313442\"}\n borderRadius={\"8px\"}\n bgColor={\"transparent\"}\n justifyContent={\"center\"}\n >\n <Image src={DrawerCloseIcon} alt={\"DrawerCloseIcon\"}></Image>\n </Flex>\n </Flex>\n </DrawerContent>\n </Drawer>\n );\n}\n"}]}]},"nodeType":"block"},{"uid":"RC9-KFYwYr","position":{"x":1090,"y":340},"sizes":{"width":539.5625,"height":77.546875},"autoheight":false,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/staging/components/new-history/components/core/index.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import React, { useMemo } from \"react\";\nimport { Flex, Box, Text } from \"@chakra-ui/react\";\nimport {\n Action,\n CT_ACTION,\n CT_PROVIDE,\n CT_REQUEST,\n CT_REQUEST_CANCEL,\n Status,\n} from \"@/staging/types/transaction\";\nimport Pending from \"@/staging/components/new-history/components/core/pending\";\nimport Complete from \"@/staging/components/new-history/components/core/complete\";\nimport { useBridgeHistory } from \"@/staging/hooks/useBridgeHistory\";\nimport { useRecoilValue } from \"recoil\";\nimport { selectedTransactionCategory } from \"@/recoil/history/transaction\";\nimport GradientSpinner from \"@/components/ui/GradientSpinner\";\nimport Image from \"next/image\";\nimport NoAcitivity from \"@/assets/icons/accountHistory/noActivityIcon.svg\";\n\nconst NoAcitivityComponent = () => {\n return (\n <Flex\n flexDir={\"column\"}\n rowGap={\"24px\"}\n alignItems={\"center\"}\n justifyContent={\"center\"}\n h={\"640px\"}\n >\n <Image src={NoAcitivity} alt={\"noActivityIcon\"}></Image>\n <Text>No activity yet</Text>\n </Flex>\n );\n};\n\nconst LoadingSpinner = () => {\n const components = new Array(5).fill(null).map((_, index) => (\n <Box\n key={`${Math.random()}_${index}`}\n w={\"336px\"}\n px={\"12px\"}\n py={\"8px\"}\n borderRadius={\"8px\"}\n border={\"1px solid #313442\"}\n bg={\"#15161D\"}\n >\n <Flex key={index} w={\"336px\"} h={\"78px\"}>\n <Box w={\"92%\"}>\n <GradientSpinner minW=\"50%\" />\n </Box>\n </Flex>\n </Box>\n ));\n\n return <>{components}</>;\n};\n\nexport default function AccountHistoryNew() {\n const { depositHistory, withdrawHistory, requestHistory, provideHistory } =\n useBridgeHistory();\n const _selectedTransactionCategory = useRecoilValue(\n selectedTransactionCategory\n );\n\n const historyData = useMemo(() => {\n switch (_selectedTransactionCategory) {\n case Action.Deposit:\n return depositHistory;\n case Action.Withdraw:\n return withdrawHistory;\n case CT_ACTION.REQUEST:\n return requestHistory;\n case CT_ACTION.PROVIDE:\n return provideHistory;\n default:\n return;\n }\n }, [\n _selectedTransactionCategory,\n depositHistory,\n withdrawHistory,\n requestHistory,\n provideHistory,\n ]);\n\n return (\n <Flex flexDirection=\"column\" gap=\"2\" h={\"100%\"}>\n {!historyData && <LoadingSpinner />}\n {historyData?.length === 0 && <NoAcitivityComponent />}\n {historyData?.map((transaction, index) => {\n return (\n <Box\n key={`${transaction.action}-${index}`}\n w={\"336px\"}\n px={\"12px\"}\n py={\"8px\"}\n borderRadius={\"8px\"}\n border={\"1px solid #313442\"}\n bg={\"#15161D\"}\n >\n {/** In the history, Pending shows the current incomplete screen, and Complete shows the completed screen. */}\n {transaction.status === Status.Completed ||\n transaction.status === CT_REQUEST.Completed ||\n transaction.status === CT_REQUEST_CANCEL.Completed ||\n transaction.status === CT_PROVIDE.Completed ? (\n <Complete {...transaction} />\n ) : (\n <Pending transaction={transaction} />\n )}\n </Box>\n );\n })}\n </Flex>\n );\n}\n"}]}]},"nodeType":"block"},{"uid":"685-CoK-lw","position":{"x":950,"y":550},"sizes":{"width":399.546875,"height":83.953125},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Standard (Deposit / Withdraw)"}]}]},"nodeType":"block"},{"uid":"iUhzlSXJXO","position":{"x":1370,"y":550},"sizes":{"width":399.546875,"height":83.953125},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Cross Trade (Request / Provide)"}]}]},"nodeType":"block"},{"uid":"nmRJkS6X3K","position":{"x":1150,"y":790},"sizes":{"width":399.53125,"height":77.546875},"autoheight":false,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src/staging/hooks/useBridgeHistory.ts"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport {\n Action,\n CT_ACTION,\n CT_History,\n CT_PROVIDE,\n CT_Provide_History,\n CT_REQUEST,\n CT_REQUEST_CANCEL,\n CT_Request_History,\n DepositTransactionHistory,\n ERROR_CODE,\n HISTORY_SORT,\n isInCT_REQUEST_CANCEL,\n TransactionHistory,\n WithdrawTransactionHistory,\n} from \"../types/transaction\";\nimport { ApolloError, useQuery } from \"@apollo/client\";\nimport { useAccount } from \"wagmi\";\nimport { subgraphApolloClientsForHistory } from \"@/graphql/thegraph/apolloForHistory\";\nimport useConnectedNetwork from \"@/hooks/network\";\nimport { SupportedChainId } from \"@/types/network/supportedNetwork\";\nimport { MAINNET_CONTRACTS, SEPOLIA_CONTRACTS } from \"@/constant/contracts\";\nimport {\n FETCH_USER_TRANSACTIONS_L1,\n FETCH_USER_TRANSACTIONS_L2,\n} from \"@/graphql/queries/history\";\nimport { Resolved, SentMessages } from \"@/types/activity/history\";\nimport {\n getCurrentDepositStatus,\n getCurretStatus,\n} from \"@/utils/history/getCurrentStatus\";\nimport { useProvier } from \"@/hooks/provider/useProvider\";\nimport { utils } from \"ethers\";\nimport { getDecodeLog } from \"@/utils/history/getDecodeLog\";\nimport { formatAddress } from \"@/utils/trim/formatAddress\";\nimport {\n getStatus,\n getTransaction,\n getTransactionToken,\n} from \"@/utils/history/getTransaction\";\nimport { useCrossTradeData_L1, useCrossTradeData_L2 } from \"./useCrossTrade\";\nimport {\n getEditCTTransaction,\n getProvideErrorMessage,\n getRequestBlockTimestamp,\n getRequestErrorMessage,\n getRequestStatus,\n getRequestTransactionHash,\n getTokenInfo,\n isRequestEdited,\n} from \"../utils/getRequestStatus\";\nimport {\n getL2TransactionsBySaleCount,\n getProvideBlockTimestamp,\n getProvideStatus,\n getProvideTransactionHash,\n} from \"../utils/getProvideStatus\";\n\nconst getApolloClient = (chainId: number) => {\n return subgraphApolloClientsForHistory[chainId];\n};\n\nconst useGetApolloClient = () => {\n const { isConnectedToMainNetwork } = useConnectedNetwork();\n const apolloClient = useMemo(() => {\n if (isConnectedToMainNetwork) {\n return {\n L1_CLIENT: getApolloClient(SupportedChainId.MAINNET),\n L2_CLIENT: getApolloClient(SupportedChainId.TITAN),\n };\n }\n return {\n L1_CLIENT: getApolloClient(SupportedChainId.SEPOLIA),\n L2_CLIENT: getApolloClient(SupportedChainId.TITAN_SEPOLIA),\n };\n }, [isConnectedToMainNetwork]);\n\n return apolloClient;\n};\n\nconst errorHandler = (error: ApolloError) => {\n if (error) {\n // Log the error to the console for debugging\n console.error(\"Apollo Error occurred:\", error);\n\n // Check for GraphQL errors\n if (error.graphQLErrors.length > 0) {\n error.graphQLErrors.forEach(({ message, locations, path }) =>\n console.log(\n `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`\n )\n );\n }\n\n // Check for network errors\n if (error.networkError) {\n console.log(`[Network error]: ${error.networkError}`);\n }\n\n // Here, you can also update your UI accordingly\n // For example, show an error message to the user\n }\n};\n\nexport const useSubgraph = () => {\n const { address } = useAccount();\n const { L1_CLIENT, L2_CLIENT } = useGetApolloClient();\n const { isConnectedToMainNetwork } = useConnectedNetwork();\n\n const L1Bridge = isConnectedToMainNetwork\n ? MAINNET_CONTRACTS.L1Bridge\n : SEPOLIA_CONTRACTS.L1Bridge_TITAN_SEPOLIA;\n\n const {\n data: _l1Data,\n loading: _l1Loading,\n error: _l1Error,\n } = useQuery(FETCH_USER_TRANSACTIONS_L1, {\n variables: {\n formattedAddress: formatAddress(address),\n L1Bridge,\n account: address,\n },\n pollInterval: 13000,\n client: L1_CLIENT,\n });\n const {\n data: _l2Data,\n loading: _l2Loading,\n error: _l2Error,\n } = useQuery(FETCH_USER_TRANSACTIONS_L2, {\n variables: {\n formattedAddress: formatAddress(address),\n L1Bridge,\n account: address,\n },\n pollInterval: 13000,\n client: L2_CLIENT,\n });\n\n useEffect(() => {\n if (_l1Error) {\n errorHandler(_l1Error);\n }\n if (_l2Error) {\n errorHandler(_l2Error);\n }\n }, [_l1Error, _l2Error]);\n\n return {\n l1Data: _l1Data,\n l1Loading: _l1Loading,\n l1error: _l1Error,\n l2Data: _l2Data,\n l2Loading: _l2Loading,\n l2_error: _l2Error,\n };\n};\n\nexport const useWithdrawData = () => {\n const [withdrawHistory, setWithdrawHistory] = useState<\n WithdrawTransactionHistory[] | [] | null\n >(null);\n\n const { l2Data } = useSubgraph();\n const { isConnectedToMainNetwork } = useConnectedNetwork();\n const { L2Provider } = useProvier();\n\n const fetchData = useCallback(async () => {\n if (l2Data && isConnectedToMainNetwork !== undefined && L2Provider) {\n const l2SentMessges = l2Data.sentMessages;\n const result: WithdrawTransactionHistory[] = await Promise.all(\n l2SentMessges.map(async (sentMessage: SentMessages) => {\n const resolved: Resolved = {\n target: sentMessage.target,\n sender: sentMessage.sender,\n message: sentMessage.message,\n messageNonce: sentMessage.messageNonce,\n };\n\n const { currentStatus, stateBatchAppended, relayedMessageTx } =\n await getCurretStatus(\n Number(sentMessage.blockNumber),\n resolved,\n isConnectedToMainNetwork\n );\n\n const l2TxReceipt = await L2Provider.getTransactionReceipt(\n sentMessage.transactionHash\n );\n\n //using the logs of the tx receipt, we can determine the l1 token address and the l2 token address of the withdraw tx\n if (l2TxReceipt.logs[3] === undefined || !currentStatus) {\n return new Error(\"Invalid transaction\");\n }\n\n const logs = utils.defaultAbiCoder.decode(\n [\"address\", \"uint256\", \"bytes\"],\n l2TxReceipt.logs[3] && l2TxReceipt.logs[3]?.data\n );\n const l1TokenAddress = utils.defaultAbiCoder.decode(\n [\"address\"],\n l2TxReceipt.logs[3] && l2TxReceipt.logs[3]?.topics[1]\n )[0];\n const l2TokenAddress = utils.defaultAbiCoder.decode(\n [\"address\"],\n l2TxReceipt.logs[3] && l2TxReceipt.logs[3]?.topics[2]\n )[0];\n const amount = BigInt(logs[1]).toString();\n const { l1Token, l2Token } = getTransactionToken(\n l1TokenAddress,\n l2TokenAddress,\n amount,\n false\n );\n const status = getStatus(currentStatus);\n const { blockTimestamps, transactionHashes } = getTransaction({\n currentStatus,\n sentMessage,\n stateBatchAppended,\n relayMessage: relayedMessageTx,\n });\n\n if (blockTimestamps instanceof Error) {\n return;\n }\n\n const result: WithdrawTransactionHistory = {\n category: HISTORY_SORT.STANDARD,\n action: Action.Withdraw,\n status: status,\n inNetwork: SupportedChainId.TITAN,\n outNetwork: SupportedChainId.MAINNET,\n inToken: l2Token,\n outToken: l1Token,\n blockNumber: Number(sentMessage.blockNumber),\n blockTimestamps,\n transactionHashes,\n resolved,\n stateBatchAppended,\n };\n\n return result;\n })\n );\n\n const filteredResult = result.filter(\n (tx) => !(tx instanceof Error) || tx !== undefined\n );\n const sortedResult = filteredResult.sort(\n (currentTx, previousTx) =>\n previousTx.blockTimestamps.initialCompletedTimestamp -\n currentTx.blockTimestamps.initialCompletedTimestamp\n );\n\n if (sortedResult) return setWithdrawHistory(sortedResult);\n return setWithdrawHistory([]);\n }\n }, [l2Data, isConnectedToMainNetwork, L2Provider]);\n\n useEffect(() => {\n fetchData().catch((error) => {\n console.error(\"Error in fetching withdraw data\", error);\n });\n }, [l2Data, isConnectedToMainNetwork, L2Provider]);\n\n return { withdrawHistory };\n};\n\nexport const useDepositData = () => {\n const [depositHistory, setDepositHistory] = useState<\n DepositTransactionHistory[] | [] | null\n >(null);\n const { isConnectedToMainNetwork } = useConnectedNetwork();\n const { l1Data } = useSubgraph();\n const { L1Provider } = useProvier();\n\n const fetchData = useCallback(async () => {\n if (l1Data && isConnectedToMainNetwork !== undefined && L1Provider) {\n const l1SentMessges = l1Data.sentMessages;\n const result: DepositTransactionHistory[] = await Promise.all(\n l1SentMessges.map(async (sentMessage: SentMessages) => {\n const resolved: Resolved = {\n target: sentMessage.target,\n sender: sentMessage.sender,\n message: sentMessage.message,\n messageNonce: sentMessage.messageNonce,\n };\n const { currentStatus, relayedMessageTx } =\n await getCurrentDepositStatus(resolved, isConnectedToMainNetwork);\n\n const l1TxReceipt = await L1Provider.getTransactionReceipt(\n sentMessage.transactionHash\n );\n\n //using the logs of the tx receipt, we can determine the l1 token address and the l2 token address of the withdraw tx\n if (!l1TxReceipt || !currentStatus) {\n new Error(`Invalid transaction (${sentMessage.transactionHash})`);\n return;\n }\n\n const logIndex = l1TxReceipt.logs.length - 1;\n const isERC20Deposit = logIndex > 2;\n const log = l1TxReceipt.logs[logIndex];\n const { l1TokenAddress, l2TokenAddress, amount } = getDecodeLog(\n isERC20Deposit,\n log\n );\n\n const { l1Token, l2Token } = getTransactionToken(\n l1TokenAddress,\n l2TokenAddress,\n amount,\n true\n );\n\n const status = getStatus(currentStatus);\n const { blockTimestamps, transactionHashes } = getTransaction({\n currentStatus,\n sentMessage,\n relayMessage: relayedMessageTx,\n });\n\n if (blockTimestamps instanceof Error) {\n return;\n }\n\n const result: DepositTransactionHistory = {\n category: HISTORY_SORT.STANDARD,\n action: Action.Deposit,\n status: status,\n inNetwork: SupportedChainId.MAINNET,\n outNetwork: SupportedChainId.TITAN,\n inToken: l2Token,\n outToken: l1Token,\n blockTimestamps,\n transactionHashes,\n };\n return result;\n })\n );\n\n const filteredResult = result.filter((tx) => {\n if (!(tx instanceof Error) || tx !== undefined) return tx;\n });\n const sortedResult = filteredResult.sort(\n (currentTx, previousTx) =>\n previousTx.blockTimestamps.initialCompletedTimestamp -\n currentTx.blockTimestamps.initialCompletedTimestamp\n );\n\n if (sortedResult) return setDepositHistory(sortedResult);\n return setDepositHistory([]);\n }\n }, [l1Data, isConnectedToMainNetwork, L1Provider]);\n\n useEffect(() => {\n fetchData().catch((error) => {\n console.error(\"Error in fetching deposit data\", error);\n });\n }, [l1Data, isConnectedToMainNetwork, L1Provider]);\n\n return { depositHistory };\n};\n\nexport const useRequestHistoryData = () => {\n const [requestHistory, setRequestHistory] = useState<\n CT_Request_History[] | [] | null\n >(null);\n const { data: l2Data } = useCrossTradeData_L2({\n isHistory: true,\n });\n const { data: l1Data } = useCrossTradeData_L1({\n isHistory: true,\n });\n const { isConnectedToMainNetwork } = useConnectedNetwork();\n\n useEffect(() => {\n if (l2Data && l1Data) {\n const requestCTs = l2Data.requestCTs;\n const cancelCTs = l2Data.cancelCTs;\n const providerClaimCTs = l2Data.providerClaimCTs;\n const editCTs = l1Data.editCTs;\n\n const trimedData = requestCTs.map((requestData) => {\n const {\n _l1token,\n _l2token,\n _requester,\n _totalAmount,\n _ctAmount,\n _saleCount,\n _hashValue,\n _l2chainId,\n blockTimestamp,\n } = requestData;\n\n const status = getRequestStatus({\n requestData,\n cancelCTs,\n providerClaimCTs,\n editCTs,\n });\n\n const isUpdateFee = isRequestEdited({\n editCTs,\n saleCount: _saleCount,\n });\n const editCT = getEditCTTransaction({\n editCTs,\n saleCount: _saleCount,\n })[0];\n\n const blockTimestamps = getRequestBlockTimestamp({\n status,\n requestData,\n cancelCTs,\n providerClaimCTs,\n editCTs,\n });\n const inToken = getTokenInfo({ requestData });\n const outToken = getTokenInfo({\n requestData,\n ctAmount: true,\n _editedctAmount: isUpdateFee ? editCT._ctAmount : undefined,\n });\n const transactionHashes = getRequestTransactionHash({\n status,\n requestData,\n cancelCTs,\n providerClaimCTs,\n editCTs,\n });\n const ctAmount = isUpdateFee\n ? BigInt(editCT._ctAmount)\n : BigInt(_ctAmount);\n const serviceFee = BigInt(_totalAmount) - ctAmount;\n\n if (!blockTimestamps || !transactionHashes) return null;\n\n const hasMultipleUpdateFees = () => {\n if (!isUpdateFee) return false;\n if (blockTimestamps && blockTimestamps.updateFee)\n return blockTimestamps.updateFee.length > 1;\n };\n\n const result: CT_Request_History = {\n category: HISTORY_SORT.CROSS_TRADE,\n action: CT_ACTION.REQUEST,\n isCanceled: isInCT_REQUEST_CANCEL(status),\n status,\n blockTimestamps,\n inNetwork: Number(_l2chainId),\n outNetwork: isConnectedToMainNetwork\n ? SupportedChainId.MAINNET\n : SupportedChainId.SEPOLIA,\n inToken,\n outToken,\n transactionHashes,\n serviceFee,\n L2_subgraphData: requestData,\n isUpdateFee,\n hasMultipleUpdateFees: hasMultipleUpdateFees(),\n errorMessage: getRequestErrorMessage(status, blockTimestamps),\n };\n return result;\n });\n\n const result = trimedData.filter((data) => data !== null);\n setRequestHistory(result as CT_Request_History[]);\n }\n }, [l1Data, l2Data, isConnectedToMainNetwork]);\n\n return { requestHistory };\n};\n\nexport const useProvideData = () => {\n const [provideHistory, setProvideHistory] = useState<\n CT_Provide_History[] | [] | null\n >(null);\n const { isConnectedToMainNetwork } = useConnectedNetwork();\n const { data: l1Data } = useCrossTradeData_L1({\n isHistory: true,\n });\n const { data: l2Data } = useCrossTradeData_L2({\n isHistory: true,\n });\n\n useEffect(() => {\n if (l1Data && l2Data) {\n const requestCTs = l2Data.requestCTs;\n const providerClaimCTs = l2Data.providerClaimCTs;\n const provideCTs = l1Data.provideCTs;\n\n const trimedData: CT_Provide_History[] = provideCTs.map((provideCT) => {\n const {\n _l1token,\n _l2token,\n _provider,\n _totalAmount,\n _ctAmount,\n _saleCount,\n _l2chainId,\n blockTimestamp,\n } = provideCT;\n const saleCount = _saleCount;\n\n const status = getProvideStatus({\n providerClaimCTs,\n provideCT,\n });\n const providerClaimCTTransaction = getL2TransactionsBySaleCount({\n transactions: providerClaimCTs,\n saleCount,\n });\n const blockTimestamps = getProvideBlockTimestamp({\n status,\n provideCT,\n providerClaimCT: providerClaimCTTransaction,\n });\n const inToken = getTokenInfo({\n requestData: provideCT,\n ctAmount: true,\n });\n const outToken = getTokenInfo({\n requestData: provideCT,\n });\n const transactionHashes = getProvideTransactionHash({\n status,\n provideCT,\n providerClaimCT: providerClaimCTTransaction,\n });\n const serviceFee = BigInt(_totalAmount) - BigInt(_ctAmount);\n\n return {\n category: HISTORY_SORT.CROSS_TRADE,\n action: CT_ACTION.PROVIDE,\n status,\n blockTimestamps,\n inNetwork: isConnectedToMainNetwork\n ? SupportedChainId.MAINNET\n : SupportedChainId.SEPOLIA,\n outNetwork: Number(_l2chainId),\n inToken,\n outToken,\n transactionHashes,\n serviceFee,\n errorMessage: getProvideErrorMessage(status, blockTimestamps),\n };\n });\n\n setProvideHistory(trimedData);\n }\n }, [l1Data, l2Data]);\n\n return { provideHistory };\n};\n\nexport const useBridgeHistory = () => {\n const { depositHistory } = useDepositData();\n const { withdrawHistory } = useWithdrawData();\n const { requestHistory } = useRequestHistoryData();\n const { provideHistory } = useProvideData();\n\n const bridgeHistoryData = useMemo(() => {\n if (depositHistory && withdrawHistory) {\n // Ensure both arrays are of a compatible type\n const combinedHistory: TransactionHistory[] = [\n ...(depositHistory as TransactionHistory[]),\n ...(withdrawHistory as TransactionHistory[]),\n ];\n\n return combinedHistory;\n }\n }, [depositHistory, withdrawHistory]);\n\n const CT_HistoryData = useMemo(() => {\n if (requestHistory && provideHistory) {\n // Ensure both arrays are of a compatible type\n const combinedHistory: CT_History[] = [\n ...(requestHistory as CT_Request_History[]),\n ...(provideHistory as CT_Provide_History[]),\n ];\n\n return combinedHistory;\n }\n }, [requestHistory, provideHistory]);\n\n return {\n depositHistory,\n withdrawHistory,\n bridgeHistoryData,\n requestHistory,\n provideHistory,\n CT_HistoryData,\n };\n};\n"}]}]},"nodeType":"block"},{"uid":"RCi7s7_U1S","position":{"x":850,"y":980},"sizes":{"width":399.546875,"height":129.4375},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"useDepositData"}]}]},"nodeType":"block"},{"uid":"CkqP16PFsg","position":{"x":850,"y":1140},"sizes":{"width":399.546875,"height":129.4375},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"useWithdrawData"}]}]},"nodeType":"block"},{"uid":"9dbpHju4zz","position":{"x":1470,"y":980},"sizes":{"width":399.546875,"height":129.4375},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"useRequestHistoryData"}]}]},"nodeType":"block"},{"uid":"oaSneJGSTL","position":{"x":1470,"y":1140},"sizes":{"width":399.546875,"height":129.4375},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"useProvideData"}]}]},"nodeType":"block"},{"uid":"zmSGp7rY8S","position":{"x":620,"y":1450},"sizes":{"width":399.546875,"height":146.9375},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"codeBlock","attrs":{"language":"properties"},"content":[{"type":"text","text":"NEXT_PUBLIC_SUBGRAPH_ETHEREUM_HISTORY\nNEXT_PUBLIC_L2MESSENGER_TITAN"}]}]},"nodeType":"block"},{"uid":"A79axUhLqq","position":{"x":1070,"y":1450},"sizes":{"width":399.546875,"height":139.5625},"autoheight":false,"blockContent":{"type":"doc","content":[{"type":"codeBlock","attrs":{"language":"properties"},"content":[{"type":"text","text":"NEXT_PUBLIC_SUBGRAPH_SEPOLIA_HISTORY\nNEXT_PUBLIC_SUBGRAPH_TITAN_SEPOLIA_HISTORY"}]}]},"nodeType":"block"},{"uid":"rMoZksymSr","position":{"x":620,"y":1370},"sizes":{"width":399.546875,"height":83.953125},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"\bProduction"}]}]},"nodeType":"block"},{"uid":"VhKNqx-fLX","position":{"x":1070,"y":1370},"sizes":{"width":399.546875,"height":83.953125},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Test network"}]}]},"nodeType":"block"},{"uid":"JUS3CD0QHV","position":{"x":620,"y":1590},"sizes":{"width":399.546875,"height":125.9375},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Subgraph on Ethereum has been published on Arbitrum, and it should be queried with our api key(rate limit 100,000 per a month)"}]}]},"nodeType":"block"},{"uid":"oRgiZf0ZRL","position":{"x":-3680,"y":890},"sizes":{"width":399.578125,"height":77.59375},"autoheight":false,"blockContent":{"type":"doc","content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src\\hooks\\contracts\\useContract.ts"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import useConnectedNetwork, { useInOutNetwork } from \"@/hooks/network\";\r\nimport {\r\n MAINNET_CONTRACTS,\r\n TOKAMAK_CONTRACTS,\r\n SEPOLIA_CONTRACTS,\r\n TITAN_SEPOLIA_CONTRACTS,\r\n THANOS_SEPOLIA_CONTRACTS,\r\n} from \"@/constant/contracts\";\r\nimport { useUniswapContracts } from \"@/hooks/uniswap/useUniswapContracts\";\r\nimport { SupportedChainId } from \"@/types/network/supportedNetwork\";\r\nimport {\r\n L1_ETHEREUM_CT,\r\n L1_SEPOLIA_CT,\r\n L2_TITAN_CT,\r\n L2_TITAN_SEPOLIA_CT,\r\n} from \"@/constant/contracts/crossTrade\";\r\n\r\nexport default function useContract() {\r\n const { isConnectedToMainNetwork } = useConnectedNetwork();\r\n const { UNISWAP_CONTRACT } = useUniswapContracts();\r\n const { outNetwork } = useInOutNetwork();\r\n\r\n const L1BRIDGE_CONTRACT = isConnectedToMainNetwork\r\n ? MAINNET_CONTRACTS.L1Bridge\r\n : outNetwork?.chainId === SupportedChainId[\"THANOS_SEPOLIA\"]\r\n ? SEPOLIA_CONTRACTS.L1Bridge\r\n : SEPOLIA_CONTRACTS.L1Bridge_TITAN_SEPOLIA;\r\n const L2BRIDGE_CONTRACT = isConnectedToMainNetwork\r\n ? TOKAMAK_CONTRACTS.L2Bridge\r\n : outNetwork?.chainId === SupportedChainId[\"THANOS_SEPOLIA\"]\r\n ? THANOS_SEPOLIA_CONTRACTS.L2Bridge\r\n : TITAN_SEPOLIA_CONTRACTS.L2Bridge;\r\n\r\n const WTON_CONTRACT = isConnectedToMainNetwork\r\n ? MAINNET_CONTRACTS.WTON_ADDRESS\r\n : SEPOLIA_CONTRACTS.WTON_ADDRESS;\r\n\r\n const L1MESSENGER_CONTRACT = isConnectedToMainNetwork\r\n ? MAINNET_CONTRACTS.L1Messenger\r\n : outNetwork?.chainId === SupportedChainId[\"THANOS_SEPOLIA\"]\r\n ? SEPOLIA_CONTRACTS.L1Messenger\r\n : SEPOLIA_CONTRACTS.L1Messenger_TITAN_SEPOLIA;\r\n\r\n const L1CrossTrade_CONTRACT = isConnectedToMainNetwork\r\n ? L1_ETHEREUM_CT\r\n : L1_SEPOLIA_CT;\r\n const L2CrossTrade_CONTRACT = isConnectedToMainNetwork\r\n ? L2_TITAN_CT\r\n : L2_TITAN_SEPOLIA_CT;\r\n\r\n return {\r\n UNISWAP_CONTRACT,\r\n L1BRIDGE_CONTRACT,\r\n L2BRIDGE_CONTRACT,\r\n WTON_CONTRACT,\r\n L1MESSENGER_CONTRACT,\r\n L1CrossTrade_CONTRACT,\r\n L2CrossTrade_CONTRACT,\r\n };\r\n}\r\n"}]}]},"nodeType":"block"},{"uid":"6rVonZ7fyR","position":{"x":-3680,"y":1190},"sizes":{"width":399.609375,"height":77.625},"autoheight":false,"blockContent":{"type":"doc","content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src\\hooks\\modal\\useTxConfirmModal.ts"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import {\r\n confirmModalStatus,\r\n confirmWithdrawData,\r\n transactionModalOpenStatus,\r\n transactionModalStatus,\r\n} from \"@/recoil/modal/atom\";\r\nimport { useCallback } from \"react\";\r\nimport { useRecoilState, useRecoilValue } from \"recoil\";\r\nimport { accountDrawerStatus, claimModalStatus } from \"@/recoil/modal/atom\";\r\nimport { useToast } from \"@chakra-ui/react\";\r\n\r\nexport default function useTxConfirmModal() {\r\n const [modalOpen, setModalOpen] = useRecoilState(transactionModalStatus);\r\n const [isOpen, setIsOpen] = useRecoilState(transactionModalOpenStatus);\r\n const isHistoryDrawerOpen = useRecoilValue(accountDrawerStatus);\r\n const [claimModalState, setClaimModalState] =\r\n useRecoilState(claimModalStatus);\r\n const [, setWithdrawData] = useRecoilState(confirmWithdrawData);\r\n const { closeAll } = useToast();\r\n\r\n const isConfirming = modalOpen === \"confirming\";\r\n const isConfirmed = modalOpen === \"confirmed\";\r\n const isError = modalOpen === \"error\";\r\n const isClaiming = isHistoryDrawerOpen === true;\r\n const isClaimWaiting = claimModalState === true;\r\n\r\n const closeModal = useCallback(() => {\r\n if (!isClaimWaiting) {\r\n setModalOpen(null);\r\n setIsOpen(false);\r\n setClaimModalState(false);\r\n setWithdrawData({\r\n modalData: null,\r\n });\r\n //close toast for transaction\r\n closeAll();\r\n }\r\n }, [setModalOpen, setIsOpen, isClaimWaiting, closeAll]);\r\n\r\n return {\r\n isOpen,\r\n setIsOpen,\r\n isConfirming,\r\n isConfirmed,\r\n isError,\r\n closeModal,\r\n isClaiming,\r\n setModalOpen,\r\n isClaimWaiting,\r\n };\r\n}\r\n"}]}]},"nodeType":"block"},{"uid":"gZOdVaFUj8","position":{"x":-3680,"y":1110},"sizes":{"width":399.625,"height":83.953125},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hook for controlling Transaction Confirming modals "}]}]},"nodeType":"block"},{"uid":"Cq25YxnAwd","position":{"x":-3680,"y":1330},"sizes":{"width":399.625,"height":104.953125},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hook for monitoring transaction loading status, results, and errors"}]}]},"nodeType":"block"},{"uid":"UPu87YEv2v","position":{"x":-3680,"y":1430},"sizes":{"width":399.609375,"height":77.625},"autoheight":false,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src\\hooks\\tx\\useTx.ts"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import { TxSort, ActionSort } from \"@/types/tx/txType\";\r\nimport { ethers } from \"ethers\";\r\nimport { useEffect, useMemo } from \"react\";\r\nimport { useWaitForTransaction } from \"wagmi\";\r\nimport L1BridgeAbi from \"@/abis/L1StandardBridge.json\";\r\nimport L2BridgeAbi from \"@/abis/L2StandardBridge.json\";\r\nimport ERC20Abi from \"@/abis/erc20.json\";\r\nimport WTON_ABI from \"@/abis/WTON.json\";\r\nimport UniswapV3PoolAbi from \"@/abis/IUniswapV3Pool.json\";\r\nimport NONFUNGIBLE_POSITION_MANAGER_ABI from \"@/abis/NONFUNGIBLE_POSITION_MANAGER_ABI.json\";\r\nimport L1CrossDomainMessengerAbi from \"constant/abis/L1CrossDomainMessenger.json\";\r\nimport WethABi from \"constant/abis/WETH.json\";\r\nimport UniswapV3Pool from \"constant/abis/IUniswapV3Pool.json\";\r\nimport USDTAbi from \"constant/abis/USDT.json\";\r\nimport { getWETHAddressByChainId } from \"@/utils/token/isETH\";\r\nimport { useRecoilState } from \"recoil\";\r\nimport {\r\n txDataStatus,\r\n txHashLog,\r\n txHashStatus,\r\n txPendingStatus,\r\n} from \"@/recoil/global/transaction\";\r\nimport useConnectedNetwork from \"../network\";\r\nimport {\r\n TON_ADDRESS_BY_CHAINID,\r\n WETH_ADDRESS_BY_CHAINID,\r\n WTON_ADDRESS_BY_CHAINID,\r\n} from \"@/constant/contracts/tokens\";\r\nimport { Log } from \"viem\";\r\nimport { useGetMode } from \"../mode/useGetMode\";\r\nimport useTxConfirmModal from \"../modal/useTxConfirmModal\";\r\nimport L1CrossTradeAbi from \"@/abis/L1CrossTrade.json\";\r\nimport L2CrossTradeAbi from \"@/abis/L2CrossTrade.json\";\r\nimport { SupportedChainId } from \"@/types/network/supportedNetwork\";\r\n\r\nconst getInterface = () => {\r\n const l1BridgeI = new ethers.utils.Interface(L1BridgeAbi);\r\n const l2BridgeI = new ethers.utils.Interface(L2BridgeAbi);\r\n const swapRouterI = new ethers.utils.Interface(UniswapV3PoolAbi);\r\n const erc20I = new ethers.utils.Interface(ERC20Abi.abi);\r\n const USDT_I = new ethers.utils.Interface(USDTAbi);\r\n const WTON_I = new ethers.utils.Interface(WTON_ABI.abi);\r\n const nonFungiblePositionManagerI = new ethers.utils.Interface(\r\n NONFUNGIBLE_POSITION_MANAGER_ABI\r\n );\r\n const UniswapV3PoolI = new ethers.utils.Interface(UniswapV3Pool);\r\n const L1CrossDomainMessengerI = new ethers.utils.Interface(\r\n L1CrossDomainMessengerAbi\r\n );\r\n const ETHSwapperI = new ethers.utils.Interface(WethABi);\r\n const CrossTradeProxyL1_I = new ethers.utils.Interface(L1CrossTradeAbi.abi);\r\n const CrossTradeProxyL2_I = new ethers.utils.Interface(L2CrossTradeAbi.abi);\r\n\r\n return {\r\n l1BridgeI,\r\n l2BridgeI,\r\n swapRouterI,\r\n erc20I,\r\n WTON_I,\r\n nonFungiblePositionManagerI,\r\n UniswapV3PoolI,\r\n L1CrossDomainMessengerI,\r\n ETHSwapperI,\r\n USDT_I,\r\n CrossTradeProxyL1_I,\r\n CrossTradeProxyL2_I,\r\n };\r\n};\r\n\r\nconst getEventSignature = () => {\r\n return {\r\n deposit: ethers.utils.id(\"Deposit(address,address,uint256)\"),\r\n withdraw: ethers.utils.id(\"Withdraw(address,address,uint256)\"),\r\n wrap: ethers.utils.id(\"Wrap(address,uint256)\"),\r\n unwrap: ethers.utils.id(\"Unwrap(address,uint256)\"),\r\n approve: ethers.utils.id(\"Approval(address,address,uint256)\"),\r\n addLiquidity: ethers.utils.id(\r\n \"IncreaseLiquidity(uint256,uint128,uint256,uint256)\"\r\n ),\r\n increaseLiquidity: ethers.utils.id(\r\n \"IncreaseLiquidity(uint256,uint128,uint256,uint256)\"\r\n ),\r\n removeLiquidity: ethers.utils.id(\r\n \"Collect(uint256,address,uint256,uint256)\"\r\n ),\r\n };\r\n};\r\n\r\nconst getETHWrapEventSignature = () => {\r\n return ethers.utils.id(\"Deposit(address,uint256)\");\r\n};\r\nconst getWETHUnwrapEventSignature = () => {\r\n return ethers.utils.id(\"Withdrawal(address,uint256)\");\r\n};\r\n\r\nconst getEvent = (logs: Log<bigint, number>[], txSort: TxSort) => {\r\n const eventSignature = getEventSignature();\r\n switch (txSort) {\r\n case \"Add Liquidity\":\r\n return logs.filter((log) => {\r\n return log.topics[0] === eventSignature.addLiquidity;\r\n });\r\n case \"Increase Liquidity\":\r\n return logs.filter((log) => {\r\n return log.topics[0] === eventSignature.increaseLiquidity;\r\n });\r\n case \"Remove Liquidity\":\r\n return logs.filter((log) => {\r\n return log.topics[0] === eventSignature.removeLiquidity;\r\n });\r\n case \"Collect Fee\":\r\n return logs.filter((log) => {\r\n return log.topics[0] === eventSignature.removeLiquidity;\r\n });\r\n case \"Approve\" || \"Revoke\":\r\n return logs.filter((log) => {\r\n return log.topics[0] === eventSignature.approve;\r\n });\r\n default:\r\n return undefined;\r\n }\r\n};\r\n\r\nconst getETHWrapEvent = (logs: Log<bigint, number>[]) => {\r\n const eventSignature = getETHWrapEventSignature();\r\n return (\r\n logs.filter((log) => {\r\n return log.topics[0] === eventSignature;\r\n }).length > 0\r\n );\r\n};\r\n\r\nconst getWETHUnwrapEvent = (logs: Log<bigint, number>[]) => {\r\n const eventSignature = getWETHUnwrapEventSignature();\r\n return (\r\n logs.filter((log) => {\r\n return log.topics[0] === eventSignature;\r\n }).length > 0\r\n );\r\n};\r\n\r\nconst getTokenAddress = (\r\n tokenAddress: `0x${string}` | undefined,\r\n chainId: number,\r\n isETH: boolean\r\n) => {\r\n const WETHAddress = getWETHAddressByChainId(chainId);\r\n return isETH && WETHAddress === tokenAddress ? \"ETH\" : tokenAddress ?? \"0x\";\r\n};\r\n\r\nexport function useTransaction() {\r\n const [txData] = useRecoilState(txDataStatus);\r\n\r\n const pendingTransactionToApprove = useMemo(() => {\r\n if (txData)\r\n return Object.entries(txData).filter(([, value]) => {\r\n return (\r\n (value.txSort === \"Approve\" || value.txSort === \"Revoke\") &&\r\n value.transactionHash === undefined\r\n );\r\n });\r\n }, [txData]);\r\n\r\n const pendingTransaction = useMemo(() => {\r\n if (txData)\r\n return Object.entries(txData).filter(([, value]) => {\r\n return value.transactionHash === undefined;\r\n });\r\n return undefined;\r\n }, [txData]);\r\n\r\n const isPending = useMemo(() => {\r\n if (pendingTransaction && pendingTransaction.length > 0) {\r\n return true;\r\n }\r\n return false;\r\n }, [pendingTransaction, txData]);\r\n\r\n const confirmedTransaction = useMemo(() => {\r\n if (txData)\r\n return Object.entries(txData).filter(([, value]) => {\r\n return value.transactionHash !== undefined ? value : undefined;\r\n });\r\n }, [txData]);\r\n\r\n const confirmedApproveTransaction = useMemo(() => {\r\n if (txData) {\r\n const filteredData = Object.entries(txData).filter(([, value]) => {\r\n return (\r\n value.txSort === \"Approve\" && value.transactionState === \"success\"\r\n );\r\n })[0];\r\n if (filteredData && filteredData[1]) {\r\n return filteredData[1];\r\n }\r\n }\r\n }, [txData]);\r\n\r\n const confirmedRevokeTransaction = useMemo(() => {\r\n if (txData) {\r\n const filteredData = Object.entries(txData).filter(([, value]) => {\r\n return (\r\n value.txSort === \"Revoke\" && value.transactionState === \"success\"\r\n );\r\n })[0];\r\n if (filteredData && filteredData[1]) {\r\n return filteredData[1];\r\n }\r\n }\r\n }, [txData]);\r\n\r\n // useEffect(() => {\r\n // setTxData(undefined);\r\n // }, [connectedChainId]);\r\n\r\n return {\r\n allTransaction: txData,\r\n pendingTransaction,\r\n isPending,\r\n pendingTransactionToApprove,\r\n confirmedTransaction,\r\n confirmedApproveTransaction,\r\n confirmedRevokeTransaction,\r\n };\r\n}\r\n\r\nexport function useTx(params: {\r\n hash: `0x${string}` | undefined;\r\n txSort: TxSort;\r\n tokenAddress?: `0x${string}`;\r\n tokenOutAddress?: `0x${string}`;\r\n actionSort?: ActionSort;\r\n}) {\r\n const { hash, txSort, tokenAddress, tokenOutAddress, actionSort } = params;\r\n const { connectedChainId, layer } = useConnectedNetwork();\r\n const { data, isLoading, isSuccess, isError } = useWaitForTransaction({\r\n hash,\r\n chainId: connectedChainId,\r\n });\r\n\r\n const { mode, subMode } = useGetMode();\r\n const [, setTxData] = useRecoilState(txDataStatus);\r\n const [, setTxPending] = useRecoilState(txPendingStatus);\r\n const [, setTxHash] = useRecoilState(txHashStatus);\r\n const [, setTxLog] = useRecoilState(txHashLog);\r\n const { setModalOpen } = useTxConfirmModal();\r\n\r\n useEffect(() => {\r\n if (isLoading && !isError) {\r\n return setTxPending(true);\r\n }\r\n return setTxPending(false);\r\n }, [isLoading, connectedChainId, isError]);\r\n\r\n const { confirmedTransaction } = useTransaction();\r\n\r\n useEffect(() => {\r\n //@ts-ignore\r\n if (isSuccess && confirmedTransaction?.includes(hash as string)) {\r\n if (mode === \"Pool\" && layer === \"L2\") {\r\n const delayTime = subMode.add ? 4000 : 2000;\r\n setTimeout(() => {\r\n return setModalOpen(\"confirmed\");\r\n }, delayTime);\r\n }\r\n return setModalOpen(\"confirmed\");\r\n }\r\n }, [isSuccess, layer, mode, subMode, confirmedTransaction, hash]);\r\n\r\n useEffect(() => {\r\n if (isError) {\r\n setTxPending(false);\r\n return setModalOpen(\"error\");\r\n }\r\n }, [isError]);\r\n\r\n useEffect(() => {\r\n if (data?.transactionHash) return setTxHash(data.transactionHash);\r\n }, [data]);\r\n\r\n useEffect(() => {\r\n if (hash === undefined) return setTxPending(false);\r\n }, [hash]);\r\n\r\n //initialize txData when chainId is changed\r\n useEffect(() => {\r\n setTxData(undefined);\r\n }, [connectedChainId]);\r\n\r\n useEffect(() => {\r\n try {\r\n if (isError) {\r\n return;\r\n }\r\n if (\r\n data &&\r\n (txSort === \"Add Liquidity\" ||\r\n txSort === \"Increase Liquidity\" ||\r\n txSort === \"Remove Liquidity\")\r\n ) {\r\n const { logs } = data;\r\n const { nonFungiblePositionManagerI } = getInterface();\r\n\r\n const result = nonFungiblePositionManagerI.parseLog(\r\n logs[logs.length - 1]\r\n );\r\n const { args } = result;\r\n setTxLog({\r\n txSort,\r\n logs: args,\r\n });\r\n }\r\n } catch (e) {\r\n console.log(\"**nonFungiblePositionManagerI.parseLog**\");\r\n console.log(e);\r\n }\r\n }, [isSuccess, isError, txSort, data, hash]);\r\n\r\n useEffect(() => {\r\n if (isLoading && connectedChainId && hash) {\r\n return setTxData({\r\n [hash]: {\r\n transactionHash: undefined,\r\n txSort,\r\n transactionState: undefined,\r\n tokenData: undefined,\r\n network: connectedChainId,\r\n isToasted: false,\r\n actionSort,\r\n },\r\n });\r\n }\r\n }, [isLoading, hash, connectedChainId, txSort, actionSort]);\r\n\r\n useEffect(() => {\r\n if (isSuccess && data && connectedChainId && hash) {\r\n const { logs, transactionHash } = data;\r\n const {\r\n l1BridgeI,\r\n l2BridgeI,\r\n swapRouterI,\r\n erc20I,\r\n WTON_I,\r\n nonFungiblePositionManagerI,\r\n ETHSwapperI,\r\n CrossTradeProxyL1_I,\r\n CrossTradeProxyL2_I,\r\n } = getInterface();\r\n setModalOpen(\"confirmed\");\r\n\r\n switch (txSort) {\r\n case \"Add Liquidity\":\r\n {\r\n const event = getEvent(logs, txSort);\r\n if (event === undefined || event.length === 0) {\r\n return;\r\n }\r\n const result = nonFungiblePositionManagerI.parseLog(event[0]);\r\n const { args } = result;\r\n const { amount0, amount1 } = args;\r\n const isETH = getETHWrapEvent(logs);\r\n\r\n setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: getTokenAddress(\r\n tokenAddress,\r\n connectedChainId,\r\n isETH\r\n ),\r\n amount: amount0.toBigInt(),\r\n },\r\n {\r\n tokenAddress: getTokenAddress(\r\n tokenOutAddress,\r\n connectedChainId,\r\n isETH\r\n ),\r\n amount: amount1.toBigInt(),\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n actionSort,\r\n },\r\n });\r\n }\r\n return;\r\n case \"Increase Liquidity\": {\r\n {\r\n const event = getEvent(logs, txSort);\r\n if (event === undefined || event.length === 0) {\r\n return;\r\n }\r\n const result = nonFungiblePositionManagerI.parseLog(event[0]);\r\n const { args } = result;\r\n const { amount0, amount1 } = args;\r\n const isETH = getETHWrapEvent(logs);\r\n\r\n setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: getTokenAddress(\r\n tokenAddress,\r\n connectedChainId,\r\n isETH\r\n ),\r\n amount: amount0.toBigInt(),\r\n },\r\n {\r\n tokenAddress: getTokenAddress(\r\n tokenOutAddress,\r\n connectedChainId,\r\n isETH\r\n ),\r\n amount: amount1.toBigInt(),\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n actionSort,\r\n },\r\n });\r\n }\r\n return;\r\n }\r\n case \"Remove Liquidity\":\r\n {\r\n const event = getEvent(logs, txSort);\r\n\r\n if (event === undefined || event.length === 0) {\r\n return;\r\n }\r\n\r\n const result = nonFungiblePositionManagerI.parseLog(event[0]);\r\n const { args } = result;\r\n const { amount0, amount1 } = args;\r\n const isETH = getWETHUnwrapEvent(logs);\r\n\r\n setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: getTokenAddress(\r\n tokenAddress,\r\n connectedChainId,\r\n isETH\r\n ),\r\n amount: amount0.toBigInt(),\r\n },\r\n {\r\n tokenAddress: getTokenAddress(\r\n tokenOutAddress,\r\n connectedChainId,\r\n isETH\r\n ),\r\n amount: amount1.toBigInt(),\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n actionSort,\r\n },\r\n });\r\n }\r\n return;\r\n case \"Swap\": {\r\n try {\r\n const result = swapRouterI.parseLog(logs[logs.length - 1]);\r\n let trasferedOutResult;\r\n try {\r\n trasferedOutResult = erc20I.parseLog(logs[1]);\r\n } catch (e) {\r\n trasferedOutResult = erc20I.parseLog(logs[2]);\r\n }\r\n // const transferedInResult = erc20I.parseLog(logs[4]);\r\n\r\n const { args } = result;\r\n const { amount0, amount1 } = args;\r\n const transferedValue = trasferedOutResult.args.value;\r\n // const transferedInValue = transferedInResult.args.value;\r\n const isETH = getETHWrapEvent(logs);\r\n const isWETH = getWETHUnwrapEvent(logs);\r\n\r\n setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: getTokenAddress(\r\n tokenAddress,\r\n connectedChainId,\r\n isETH || isWETH\r\n ),\r\n amount: transferedValue.toBigInt(),\r\n },\r\n {\r\n tokenAddress: getTokenAddress(\r\n tokenOutAddress,\r\n connectedChainId,\r\n isETH || isWETH\r\n ),\r\n amount: amount1.toBigInt(),\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n actionSort,\r\n },\r\n });\r\n } catch (e) {}\r\n }\r\n\r\n case \"Collect Fee\":\r\n {\r\n const event = getEvent(logs, txSort);\r\n if (event === undefined || event.length === 0) {\r\n return;\r\n }\r\n const result = nonFungiblePositionManagerI.parseLog(event[0]);\r\n const { args } = result;\r\n const { amount0, amount1 } = args;\r\n const isETH = getWETHUnwrapEvent(logs);\r\n\r\n setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: getTokenAddress(\r\n tokenAddress,\r\n connectedChainId,\r\n isETH\r\n ),\r\n amount: amount0.toBigInt(),\r\n },\r\n {\r\n tokenAddress: getTokenAddress(\r\n tokenOutAddress,\r\n connectedChainId,\r\n isETH\r\n ),\r\n amount: amount1.toBigInt(),\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n actionSort,\r\n },\r\n });\r\n }\r\n return;\r\n //bridge\r\n case \"Deposit\": {\r\n const result = l1BridgeI.parseLog(logs[logs.length - 1]);\r\n const { args } = result;\r\n const { _l1Token, _l2Token, _amount } = args;\r\n\r\n if (_l1Token === undefined) {\r\n return setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: \"ETH\",\r\n amount: _amount,\r\n },\r\n {\r\n tokenAddress: \"ETH\",\r\n amount: _amount,\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n actionSort,\r\n },\r\n });\r\n }\r\n\r\n return setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: _l1Token,\r\n amount: _amount,\r\n },\r\n {\r\n tokenAddress: _l1Token,\r\n amount: _amount,\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n actionSort,\r\n },\r\n });\r\n }\r\n\r\n case \"Withdraw\": {\r\n const result = l2BridgeI.parseLog(logs[logs.length - 1]);\r\n const { args } = result;\r\n const { _l1Token, _l2Token, _amount } = args;\r\n\r\n return setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: _l2Token,\r\n amount: _amount,\r\n },\r\n {\r\n tokenAddress: _l2Token,\r\n amount: _amount,\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n },\r\n });\r\n }\r\n //wrap\r\n case \"Wrap\": {\r\n const result = WTON_I.parseLog(logs[logs.length - 2]);\r\n const { args } = result;\r\n const WTON_ADDRESS = WTON_ADDRESS_BY_CHAINID[connectedChainId];\r\n return setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: tokenAddress ?? \"0x\",\r\n amount: args.value.toBigInt(),\r\n },\r\n {\r\n tokenAddress: WTON_ADDRESS ?? \"0x\",\r\n amount: args.value.toBigInt(),\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n },\r\n });\r\n }\r\n case \"Unwrap\": {\r\n const result = WTON_I.parseLog(logs[logs.length - 2]);\r\n const { args } = result;\r\n const TON_ADDRESS = TON_ADDRESS_BY_CHAINID[connectedChainId];\r\n return setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: tokenAddress ?? \"0x\",\r\n amount: args.value.toBigInt(),\r\n },\r\n {\r\n tokenAddress: TON_ADDRESS,\r\n amount: args.value.toBigInt(),\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n },\r\n });\r\n }\r\n\r\n case \"ETH-Wrap\": {\r\n const result = ETHSwapperI.parseLog(logs[logs.length - 1]);\r\n const { args } = result;\r\n const WETH_ADDRESS = WETH_ADDRESS_BY_CHAINID[connectedChainId];\r\n return setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: \"ETH\",\r\n amount: args.wad.toBigInt(),\r\n },\r\n {\r\n tokenAddress: WETH_ADDRESS,\r\n amount: args.wad.toBigInt(),\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n },\r\n });\r\n }\r\n\r\n case \"ETH-Unwrap\": {\r\n const result = ETHSwapperI.parseLog(logs[logs.length - 1]);\r\n const { args } = result;\r\n const WETH_ADDRESS = WETH_ADDRESS_BY_CHAINID[connectedChainId];\r\n return setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: WETH_ADDRESS,\r\n amount: args.wad.toBigInt(),\r\n },\r\n {\r\n tokenAddress: \"ETH\",\r\n amount: args.wad.toBigInt(),\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n },\r\n });\r\n }\r\n\r\n //CrossTrade\r\n case \"Request\": {\r\n const result = CrossTradeProxyL2_I.parseLog(logs[logs.length - 1]);\r\n console.log(result);\r\n const { args } = result;\r\n const { _l1token, _l2token, _totalAmount, _ctAmount, _amount } = args;\r\n\r\n return setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: _l2token,\r\n amount: _totalAmount,\r\n },\r\n {\r\n tokenAddress: _l2token,\r\n amount: _ctAmount,\r\n },\r\n ],\r\n network: connectedChainId,\r\n outNetwork: SupportedChainId.MAINNET,\r\n isToasted: false,\r\n actionSort: \"Cross Trade\",\r\n },\r\n });\r\n }\r\n\r\n case \"Provide\": {\r\n const result = CrossTradeProxyL1_I.parseLog(logs[logs.length - 1]);\r\n console.log(result);\r\n const { args } = result;\r\n const { _l1token, _l2token, _totalAmount, _ctAmount } = args;\r\n\r\n return setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: _l1token,\r\n amount: _ctAmount,\r\n },\r\n {\r\n tokenAddress: _l1token,\r\n amount: _totalAmount,\r\n },\r\n ],\r\n network: connectedChainId,\r\n outNetwork: SupportedChainId.TITAN,\r\n isToasted: false,\r\n actionSort: \"Cross Trade\",\r\n },\r\n });\r\n }\r\n\r\n case \"UpdateFee\": {\r\n const result = CrossTradeProxyL1_I.parseLog(logs[logs.length - 1]);\r\n console.log(result);\r\n const { args } = result;\r\n const { _l1token } = args;\r\n\r\n return setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: _l1token,\r\n amount: BigInt(0),\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n actionSort: \"Cross Trade\",\r\n },\r\n });\r\n }\r\n\r\n case \"CancelRequest\": {\r\n const result = CrossTradeProxyL1_I.parseLog(logs[logs.length - 1]);\r\n console.log(result);\r\n const { args } = result;\r\n const { _l1token } = args;\r\n\r\n return setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: _l1token,\r\n amount: BigInt(0),\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n actionSort: \"Cross Trade\",\r\n },\r\n });\r\n }\r\n\r\n //etc\r\n case \"Approve\": {\r\n const result = erc20I.parseLog(logs[logs.length - 1]);\r\n const { args } = result;\r\n return setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: tokenAddress ?? \"0x\",\r\n amount: args.value.toBigInt(),\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n actionSort,\r\n },\r\n });\r\n }\r\n case \"Revoke\": {\r\n const result = erc20I.parseLog(logs[logs.length - 1]);\r\n const { args } = result;\r\n return setTxData({\r\n [hash]: {\r\n transactionHash,\r\n txSort,\r\n transactionState: \"success\",\r\n tokenData: [\r\n {\r\n tokenAddress: tokenAddress ?? \"0x\",\r\n amount: args.value.toBigInt(),\r\n },\r\n ],\r\n network: connectedChainId,\r\n isToasted: false,\r\n actionSort,\r\n },\r\n });\r\n }\r\n default:\r\n break;\r\n }\r\n }\r\n if (isError && data && connectedChainId && hash) {\r\n setModalOpen(\"error\");\r\n }\r\n }, [isSuccess, isError, data, tokenAddress, hash]);\r\n\r\n return { isLoading };\r\n}\r\n"}]}]},"nodeType":"block"},{"uid":"4DJBgWT7rz","position":{"x":-3120,"y":1620},"sizes":{"width":399.609375,"height":77.625},"autoheight":false,"blockContent":{"content":[{"type":"filePathNode","content":[{"type":"text","marks":[{"type":"bold"}],"text":"src\\components\\modal\\TxToast.tsx"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"type":"text","text":"import { Box, Flex, Text, useToast, Link } from \"@chakra-ui/react\";\r\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\r\nimport { useTransaction } from \"@/hooks/tx/useTx\";\r\nimport \"@/css/toast.css\";\r\nimport { TxInterface } from \"@/types/tx/txType\";\r\nimport TokenSymbolWithNetwork from \"../image/TokenSymbolWithNetwork\";\r\nimport { useErc20Decimals, useErc20Symbol } from \"@/generated\";\r\nimport { ethers } from \"ethers\";\r\nimport { WagmiProviders } from \"@/providers/wagmiProvider\";\r\nimport { trimAmount } from \"@/utils/trim\";\r\nimport ARROW_ICON from \"assets/icons/toast/toastArrow.svg\";\r\nimport PLUS_ICON from \"assets/icons/toast/toastPlus.svg\";\r\nimport CLOSE_ICON from \"assets/icons/toast/close.svg\";\r\nimport useConnectedNetwork from \"@/hooks/network\";\r\nimport { accountDrawerStatus } from \"@/recoil/modal/atom\";\r\nimport Image from \"next/image\";\r\nimport { useRecoilState } from \"recoil\";\r\nimport { isZeroAddress } from \"@/utils/contract/isZeroAddress\";\r\n\r\ntype TransactionToastProp = TxInterface;\r\n\r\nfunction TxTokenInfo(props: TransactionToastProp & { isToken0: boolean }) {\r\n const { tokenData, isToken0, network, txSort, actionSort } = props;\r\n\r\n if (\r\n tokenData === undefined ||\r\n (isToken0 === false &&\r\n (tokenData[1] === null || tokenData[1] === undefined))\r\n ) {\r\n return <Box w={\"136px\"}></Box>;\r\n }\r\n\r\n const { otherLayerChainInfo } = useConnectedNetwork();\r\n const tokenIndex = isToken0 ? 0 : 1;\r\n const { data: symbol } = useErc20Symbol({\r\n address: tokenData[tokenIndex].tokenAddress as `0x${string}`,\r\n });\r\n const { data: decimals } = useErc20Decimals({\r\n address: tokenData[tokenIndex].tokenAddress as `0x${string}`,\r\n });\r\n const parsedAmount = ethers.utils.formatUnits(\r\n tokenData[tokenIndex].amount.toString(),\r\n (tokenIndex === 1 && txSort === \"Wrap\"\r\n ? 18\r\n : tokenIndex === 1 && txSort === \"Unwrap\"\r\n ? 27\r\n : decimals) ?? 18\r\n );\r\n const convertParsedAmount = parsedAmount.replaceAll(\"-\", \"\");\r\n\r\n const targetChainId = useMemo(() => {\r\n const isForOtherLayer =\r\n txSort === \"Deposit\" ||\r\n txSort === \"Withdraw\" ||\r\n txSort === \"Request\" ||\r\n txSort === \"Provide\";\r\n const isNotInToken = isToken0 === false;\r\n\r\n if (isForOtherLayer && isNotInToken) return otherLayerChainInfo?.chainId;\r\n return network;\r\n }, [txSort, isToken0, otherLayerChainInfo?.chainId, network]);\r\n\r\n const noNeedToShowAmount = useMemo(() => {\r\n return (\r\n txSort === \"Revoke\" ||\r\n txSort === \"UpdateFee\" ||\r\n txSort === \"CancelRequest\"\r\n );\r\n }, [txSort]);\r\n\r\n if (\r\n symbol === \"WETH\" ||\r\n tokenData[tokenIndex].tokenAddress === \"ETH\" ||\r\n isZeroAddress(tokenData[tokenIndex].tokenAddress)\r\n ) {\r\n return (\r\n <Flex\r\n w={\"92px\"}\r\n minW={\"92px\"}\r\n rowGap={\"8px\"}\r\n flexDir={\"column\"}\r\n py={\"18px\"}\r\n justifyContent={\"center\"}\r\n alignItems={\"center\"}\r\n >\r\n {/**\r\n * need to change with chainId\r\n * support for multi chain\r\n */}\r\n <TokenSymbolWithNetwork\r\n tokenSymbol={symbol === \"WETH\" ? \"WETH\" : \"ETH\"}\r\n chainId={targetChainId}\r\n bottom={0}\r\n />\r\n <Text fontSize={11} fontWeight={400} textAlign={\"center\"}>\r\n {trimAmount(convertParsedAmount)} {symbol === \"WETH\" ? \"WETH\" : \"ETH\"}\r\n </Text>\r\n </Flex>\r\n );\r\n }\r\n\r\n if (symbol && decimals)\r\n return (\r\n <Flex\r\n w={\"92px\"}\r\n minW={\"92px\"}\r\n rowGap={\"8px\"}\r\n flexDir={\"column\"}\r\n py={\"18px\"}\r\n justifyContent={\"center\"}\r\n alignItems={\"center\"}\r\n >\r\n <TokenSymbolWithNetwork\r\n tokenSymbol={symbol}\r\n chainId={targetChainId}\r\n bottom={0}\r\n />\r\n <Text fontSize={11} fontWeight={400} textAlign={\"center\"} w={\"94px\"}>\r\n {noNeedToShowAmount ? \"\" : trimAmount(convertParsedAmount)} {symbol}\r\n </Text>\r\n </Flex>\r\n );\r\n return null;\r\n}\r\n\r\nfunction ToastIcon(props: TransactionToastProp) {\r\n const { txSort } = props;\r\n\r\n const hasArrow = useMemo(() => {\r\n return (\r\n txSort === \"Swap\" ||\r\n txSort === \"Wrap\" ||\r\n txSort === \"Unwrap\" ||\r\n txSort === \"Deposit\" ||\r\n txSort === \"Withdraw\" ||\r\n txSort === \"ETH-Wrap\" ||\r\n txSort === \"ETH-Unwrap\" ||\r\n txSort === \"Request\" ||\r\n txSort === \"Provide\"\r\n );\r\n }, [txSort]);\r\n\r\n const hasPlus = useMemo(() => {\r\n return (\r\n txSort === \"Add Liquidity\" ||\r\n txSort === \"Collect Fee\" ||\r\n txSort === \"Increase Liquidity\" ||\r\n txSort === \"Remove Liquidity\"\r\n );\r\n }, [txSort]);\r\n\r\n if (hasArrow) {\r\n return <Image src={ARROW_ICON} alt={\"ARROW_ICON\"} />;\r\n }\r\n if (hasPlus) {\r\n return <Image src={PLUS_ICON} alt={\"PLUS_ICON\"} />;\r\n }\r\n return null;\r\n}\r\n\r\nfunction TransactionToast(props: TransactionToastProp) {\r\n const { txSort, transactionHash, actionSort } = props;\r\n const toast = useToast();\r\n const { blockExplorer } = useConnectedNetwork();\r\n const [historyTabOpen, setHistoryTabOpen] =\r\n useRecoilState(accountDrawerStatus);\r\n\r\n const needToOpenHistoryTab = txSort === \"Deposit\" || txSort === \"Withdraw\";\r\n\r\n const clickTitle = useCallback(() => {\r\n needToOpenHistoryTab\r\n ? setHistoryTabOpen(true)\r\n : window.open(`${blockExplorer}/tx/${transactionHash}`, \"_blank\");\r\n }, [props, blockExplorer, needToOpenHistoryTab]);\r\n\r\n useEffect(() => {\r\n if (historyTabOpen) toast.closeAll();\r\n }, [historyTabOpen]);\r\n\r\n const txSortMessage = useMemo(() => {\r\n switch (txSort) {\r\n case \"ETH-Wrap\":\r\n return \"Wrap\";\r\n case \"ETH-Unwrap\":\r\n return \"Unwrap\";\r\n case \"Add Liquidity\":\r\n return \"Add\";\r\n case \"Increase Liquidity\":\r\n return \"Add\";\r\n case \"Collect Fee\":\r\n return \"Claim\";\r\n case \"Remove Liquidity\":\r\n return \"Remove\";\r\n case \"Revoke\":\r\n return \"Revoke\";\r\n case \"UpdateFee\":\r\n return \"Update\";\r\n case \"CancelRequest\":\r\n return \"Cancel\";\r\n default:\r\n return txSort;\r\n }\r\n }, [txSort]);\r\n\r\n const hasSubTitle = useMemo(() => {\r\n return (\r\n txSort === \"Approve\" ||\r\n txSort === \"Request\" ||\r\n txSort === \"Provide\" ||\r\n txSort === \"UpdateFee\" ||\r\n txSort === \"CancelRequest\"\r\n );\r\n }, [txSort]);\r\n\r\n return (\r\n <WagmiProviders>\r\n <Flex\r\n w={\"340px\"}\r\n h={\"84px\"}\r\n borderRadius={\"8px\"}\r\n border={\"1px solid #313442\"}\r\n bgColor={\"#1F2128\"}\r\n alignItems={\"center\"}\r\n pl={\"20px\"}\r\n pr={\"25px\"}\r\n // columnGap={\"25px\"}\r\n pos={\"relative\"}\r\n justifyContent={\"space-between\"}\r\n >\r\n <Flex\r\n w={\"92px\"}\r\n h={\"44px\"}\r\n flexDir={\"column\"}\r\n justifyContent={\"center\"}\r\n >\r\n <Text cursor={\"pointer\"} onClick={clickTitle}>\r\n {txSortMessage}\r\n </Text>\r\n {hasSubTitle && (\r\n <Text fontSize={12} color={\"#A0A3AD\"} lineHeight={\"26px\"}>\r\n ({actionSort})\r\n </Text>\r\n )}\r\n </Flex>\r\n\r\n <Flex w={\"208px\"}>\r\n <TxTokenInfo isToken0={true} {...props} />\r\n <ToastIcon {...props} />\r\n <TxTokenInfo isToken0={false} {...props} />\r\n </Flex>\r\n <Box pos={\"absolute\"} right={\"8px\"} bottom={\"60px\"} cursor={\"pointer\"}>\r\n <Image\r\n src={CLOSE_ICON}\r\n alt={\"CLOSE_ICON\"}\r\n onClick={() => toast.close(transactionHash as string)}\r\n />\r\n </Box>\r\n </Flex>\r\n </WagmiProviders>\r\n );\r\n}\r\n\r\nfunction TxToast() {\r\n const toast = useToast();\r\n const [isToasted, setIsToasted] = useState<string[]>([]);\r\n const { confirmedTransaction } = useTransaction();\r\n\r\n const [historyTabOpen, setHistoryTabOpen] =\r\n useRecoilState(accountDrawerStatus);\r\n\r\n const makeToast = useMemo(() => {\r\n confirmedTransaction?.map((transaction) => {\r\n const txHash = transaction[0];\r\n\r\n if (\r\n toast.isActive(txHash) === false &&\r\n isToasted.includes(txHash) === false\r\n ) {\r\n setHistoryTabOpen(false);\r\n toast({\r\n position: \"top-right\",\r\n variant: \"solid\",\r\n isClosable: true,\r\n id: txHash,\r\n duration: 5000000000000,\r\n render: () => <TransactionToast {...transaction[1]} />,\r\n });\r\n setIsToasted([...isToasted, txHash]);\r\n }\r\n });\r\n }, [confirmedTransaction]);\r\n\r\n return <>{makeToast}</>;\r\n}\r\n\r\nexport default TxToast;\r\n"}]}]},"nodeType":"block"},{"uid":"xKefgmmPKf","position":{"x":-3120,"y":1540},"sizes":{"width":399.625,"height":83.953125},"autoheight":true,"blockContent":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Toast Message Component"}]}]},"nodeType":"block"}],"configs":{"centerX":290.1563670604838,"centerY":-276.8855054308491,"zoomLevel":0.292901229564225},"arrowData":{"arrowsMap":{"arrow-point-bI0wBh3Ufk-bottom-point-PSPLIYKa9J-top":{"to":"point-PSPLIYKa9J-top","from":"point-bI0wBh3Ufk-bottom","label":"Normal Box","direction":"ft","selectable":true},"arrow-point-bI0wBh3Ufk-bottom-point-ytXK_ayIc1-top":{"to":"point-ytXK_ayIc1-top","from":"point-bI0wBh3Ufk-bottom","label":"Code Box","direction":"ft","selectable":true},"arrow-point-hyyRZE3E8u-right-point-6ZopTaEaDZ-left":{"to":"point-6ZopTaEaDZ-left","from":"point-hyyRZE3E8u-right","label":"call","direction":"ft","selectable":true}},"pointsMap":{"point-PSPLIYKa9J-top":{"x":805.9999797489683,"y":60,"id":"point-PSPLIYKa9J-top","direction":"top"},"point-ytXK_ayIc1-top":{"x":205.99999493724206,"y":60,"id":"point-ytXK_ayIc1-top","direction":"top"},"point-6ZopTaEaDZ-left":{"x":220,"y":605.9999898744841,"id":"point-6ZopTaEaDZ-left","direction":"left"},"point-hyyRZE3E8u-right":{"x":100,"y":606,"id":"point-hyyRZE3E8u-right","direction":"right"},"point-bI0wBh3Ufk-bottom":{"x":515.9999797489683,"y":-40,"id":"point-bI0wBh3Ufk-bottom","direction":"bottom"}},"edgesMap":{"edge-2vJzfGgV5m-2vJzfGgV5m-bottom-QH2S7f9hb8-QH2S7f9hb8-top":{"uid":"edge-2vJzfGgV5m-2vJzfGgV5m-bottom-QH2S7f9hb8-QH2S7f9hb8-top","fromNodeId":"2vJzfGgV5m","fromHandleId":"2vJzfGgV5m-bottom","toNodeId":"QH2S7f9hb8","toHandleId":"QH2S7f9hb8-top","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-QH2S7f9hb8-QH2S7f9hb8-bottom-lXa_U2X3zm-lXa_U2X3zm-top":{"uid":"edge-QH2S7f9hb8-QH2S7f9hb8-bottom-lXa_U2X3zm-lXa_U2X3zm-top","fromNodeId":"QH2S7f9hb8","fromHandleId":"QH2S7f9hb8-bottom","toNodeId":"lXa_U2X3zm","toHandleId":"lXa_U2X3zm-top","direction":"ft","selectable":true,"type":"solid","content":{"label":"Bridge"}},"edge-QH2S7f9hb8-QH2S7f9hb8-bottom-GAbt65qMCh-GAbt65qMCh-top":{"uid":"edge-QH2S7f9hb8-QH2S7f9hb8-bottom-GAbt65qMCh-GAbt65qMCh-top","fromNodeId":"QH2S7f9hb8","fromHandleId":"QH2S7f9hb8-bottom","toNodeId":"GAbt65qMCh","toHandleId":"GAbt65qMCh-top","direction":"ft","selectable":true,"type":"solid","content":{"label":"Pools"}},"edge-lXa_U2X3zm-lXa_U2X3zm-bottom-o3Gc3vjl6j-o3Gc3vjl6j-top":{"uid":"edge-lXa_U2X3zm-lXa_U2X3zm-bottom-o3Gc3vjl6j-o3Gc3vjl6j-top","fromNodeId":"lXa_U2X3zm","fromHandleId":"lXa_U2X3zm-bottom","toNodeId":"o3Gc3vjl6j","toHandleId":"o3Gc3vjl6j-top","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-o3Gc3vjl6j-o3Gc3vjl6j-bottom-tsGQ5vTbDh-tsGQ5vTbDh-top":{"uid":"edge-o3Gc3vjl6j-o3Gc3vjl6j-bottom-tsGQ5vTbDh-tsGQ5vTbDh-top","fromNodeId":"o3Gc3vjl6j","fromHandleId":"o3Gc3vjl6j-bottom","toNodeId":"tsGQ5vTbDh","toHandleId":"tsGQ5vTbDh-top","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-vwBXx9EqKf-vwBXx9EqKf-bottom-W9-qKFTn5e-W9-qKFTn5e-top":{"uid":"edge-vwBXx9EqKf-vwBXx9EqKf-bottom-W9-qKFTn5e-W9-qKFTn5e-top","fromNodeId":"vwBXx9EqKf","fromHandleId":"vwBXx9EqKf-bottom","toNodeId":"W9-qKFTn5e","toHandleId":"W9-qKFTn5e-top","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-WoRha4txRh-WoRha4txRh-bottom-Ygj1CF1Tfb-Ygj1CF1Tfb-top":{"uid":"edge-WoRha4txRh-WoRha4txRh-bottom-Ygj1CF1Tfb-Ygj1CF1Tfb-top","fromNodeId":"WoRha4txRh","fromHandleId":"WoRha4txRh-bottom","toNodeId":"Ygj1CF1Tfb","toHandleId":"Ygj1CF1Tfb-top","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-RWZnYb6PLv-RWZnYb6PLv-top-WoRha4txRh-WoRha4txRh-bottom":{"uid":"edge-RWZnYb6PLv-RWZnYb6PLv-top-WoRha4txRh-WoRha4txRh-bottom","fromNodeId":"RWZnYb6PLv","fromHandleId":"RWZnYb6PLv-top","toNodeId":"WoRha4txRh","toHandleId":"WoRha4txRh-bottom","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-W9-qKFTn5e-W9-qKFTn5e-right-Ygj1CF1Tfb-Ygj1CF1Tfb-left":{"uid":"edge-W9-qKFTn5e-W9-qKFTn5e-right-Ygj1CF1Tfb-Ygj1CF1Tfb-left","fromNodeId":"W9-qKFTn5e","fromHandleId":"W9-qKFTn5e-right","toNodeId":"Ygj1CF1Tfb","toHandleId":"Ygj1CF1Tfb-left","direction":"ft","selectable":true,"type":"solid","content":{"label":"call"}},"edge-DMqKBqLetZ-DMqKBqLetZ-right-RWZnYb6PLv-RWZnYb6PLv-left":{"uid":"edge-DMqKBqLetZ-DMqKBqLetZ-right-RWZnYb6PLv-RWZnYb6PLv-left","fromNodeId":"DMqKBqLetZ","fromHandleId":"DMqKBqLetZ-right","toNodeId":"RWZnYb6PLv","toHandleId":"RWZnYb6PLv-left","direction":"ft","selectable":true,"type":"solid","content":{"label":"call"}},"edge-vwBXx9EqKf-vwBXx9EqKf-bottom-DMqKBqLetZ-DMqKBqLetZ-top":{"uid":"edge-vwBXx9EqKf-vwBXx9EqKf-bottom-DMqKBqLetZ-DMqKBqLetZ-top","fromNodeId":"vwBXx9EqKf","fromHandleId":"vwBXx9EqKf-bottom","toNodeId":"DMqKBqLetZ","toHandleId":"DMqKBqLetZ-top","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-o3Gc3vjl6j-o3Gc3vjl6j-bottom-0pNj9iYLZ8-0pNj9iYLZ8-top":{"uid":"edge-o3Gc3vjl6j-o3Gc3vjl6j-bottom-0pNj9iYLZ8-0pNj9iYLZ8-top","fromNodeId":"o3Gc3vjl6j","fromHandleId":"o3Gc3vjl6j-bottom","toNodeId":"0pNj9iYLZ8","toHandleId":"0pNj9iYLZ8-top","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-0pNj9iYLZ8-0pNj9iYLZ8-bottom-csVk7xrCEo-csVk7xrCEo-left":{"uid":"edge-0pNj9iYLZ8-0pNj9iYLZ8-bottom-csVk7xrCEo-csVk7xrCEo-left","fromNodeId":"0pNj9iYLZ8","fromHandleId":"0pNj9iYLZ8-bottom","toNodeId":"csVk7xrCEo","toHandleId":"csVk7xrCEo-left","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-0pNj9iYLZ8-0pNj9iYLZ8-bottom-hv2GXMtiK2-hv2GXMtiK2-left":{"uid":"edge-0pNj9iYLZ8-0pNj9iYLZ8-bottom-hv2GXMtiK2-hv2GXMtiK2-left","fromNodeId":"0pNj9iYLZ8","fromHandleId":"0pNj9iYLZ8-bottom","toNodeId":"hv2GXMtiK2","toHandleId":"hv2GXMtiK2-left","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-0pNj9iYLZ8-0pNj9iYLZ8-bottom-IrdYNfZi7D-IrdYNfZi7D-left":{"uid":"edge-0pNj9iYLZ8-0pNj9iYLZ8-bottom-IrdYNfZi7D-IrdYNfZi7D-left","fromNodeId":"0pNj9iYLZ8","fromHandleId":"0pNj9iYLZ8-bottom","toNodeId":"IrdYNfZi7D","toHandleId":"IrdYNfZi7D-left","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-tsGQ5vTbDh-tsGQ5vTbDh-bottom-NfAhbh-J4l-NfAhbh-J4l-right":{"uid":"edge-tsGQ5vTbDh-tsGQ5vTbDh-bottom-NfAhbh-J4l-NfAhbh-J4l-right","fromNodeId":"tsGQ5vTbDh","fromHandleId":"tsGQ5vTbDh-bottom","toNodeId":"NfAhbh-J4l","toHandleId":"NfAhbh-J4l-right","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-tsGQ5vTbDh-tsGQ5vTbDh-bottom-NBcNU25d1g-NBcNU25d1g-right":{"uid":"edge-tsGQ5vTbDh-tsGQ5vTbDh-bottom-NBcNU25d1g-NBcNU25d1g-right","fromNodeId":"tsGQ5vTbDh","fromHandleId":"tsGQ5vTbDh-bottom","toNodeId":"NBcNU25d1g","toHandleId":"NBcNU25d1g-right","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-0pNj9iYLZ8-0pNj9iYLZ8-bottom--2R4dKe-nf--2R4dKe-nf-left":{"uid":"edge-0pNj9iYLZ8-0pNj9iYLZ8-bottom--2R4dKe-nf--2R4dKe-nf-left","fromNodeId":"0pNj9iYLZ8","fromHandleId":"0pNj9iYLZ8-bottom","toNodeId":"-2R4dKe-nf","toHandleId":"-2R4dKe-nf-left","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge--2R4dKe-nf--2R4dKe-nf-right--zHA7jffoA--zHA7jffoA-left":{"uid":"edge--2R4dKe-nf--2R4dKe-nf-right--zHA7jffoA--zHA7jffoA-left","fromNodeId":"-2R4dKe-nf","fromHandleId":"-2R4dKe-nf-right","toNodeId":"-zHA7jffoA","toHandleId":"-zHA7jffoA-left","direction":"ft","selectable":true,"type":"solid","content":{"label":"call"}},"edge--zHA7jffoA--zHA7jffoA-bottom-kc92rzClj4-kc92rzClj4-top":{"uid":"edge--zHA7jffoA--zHA7jffoA-bottom-kc92rzClj4-kc92rzClj4-top","fromNodeId":"-zHA7jffoA","fromHandleId":"-zHA7jffoA-bottom","toNodeId":"kc92rzClj4","toHandleId":"kc92rzClj4-top","direction":"ft","selectable":true,"type":"solid","content":{"label":"open"}},"edge-kc92rzClj4-kc92rzClj4-bottom-WTeOPcGpus-WTeOPcGpus-top":{"uid":"edge-kc92rzClj4-kc92rzClj4-bottom-WTeOPcGpus-WTeOPcGpus-top","fromNodeId":"kc92rzClj4","fromHandleId":"kc92rzClj4-bottom","toNodeId":"WTeOPcGpus","toHandleId":"WTeOPcGpus-top","direction":"ft","selectable":true,"type":"solid","content":{"label":"call"}},"edge-QH2S7f9hb8-QH2S7f9hb8-right-UyvfkRJTFs-UyvfkRJTFs-left":{"uid":"edge-QH2S7f9hb8-QH2S7f9hb8-right-UyvfkRJTFs-UyvfkRJTFs-left","fromNodeId":"QH2S7f9hb8","fromHandleId":"QH2S7f9hb8-right","toNodeId":"UyvfkRJTFs","toHandleId":"UyvfkRJTFs-left","direction":"ft","selectable":true,"type":"solid","content":{"label":"History Tab"}},"edge-UyvfkRJTFs-UyvfkRJTFs-right-RC9-KFYwYr-RC9-KFYwYr-left":{"uid":"edge-UyvfkRJTFs-UyvfkRJTFs-right-RC9-KFYwYr-RC9-KFYwYr-left","fromNodeId":"UyvfkRJTFs","fromHandleId":"UyvfkRJTFs-right","toNodeId":"RC9-KFYwYr","toHandleId":"RC9-KFYwYr-left","direction":"ft","selectable":true,"type":"solid","content":{"label":"content area"}},"edge-RC9-KFYwYr-RC9-KFYwYr-bottom-685-CoK-lw-685-CoK-lw-top":{"uid":"edge-RC9-KFYwYr-RC9-KFYwYr-bottom-685-CoK-lw-685-CoK-lw-top","fromNodeId":"RC9-KFYwYr","fromHandleId":"RC9-KFYwYr-bottom","toNodeId":"685-CoK-lw","toHandleId":"685-CoK-lw-top","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-RC9-KFYwYr-RC9-KFYwYr-bottom-iUhzlSXJXO-iUhzlSXJXO-top":{"uid":"edge-RC9-KFYwYr-RC9-KFYwYr-bottom-iUhzlSXJXO-iUhzlSXJXO-top","fromNodeId":"RC9-KFYwYr","fromHandleId":"RC9-KFYwYr-bottom","toNodeId":"iUhzlSXJXO","toHandleId":"iUhzlSXJXO-top","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-685-CoK-lw-685-CoK-lw-bottom-nmRJkS6X3K-nmRJkS6X3K-top":{"uid":"edge-685-CoK-lw-685-CoK-lw-bottom-nmRJkS6X3K-nmRJkS6X3K-top","fromNodeId":"685-CoK-lw","fromHandleId":"685-CoK-lw-bottom","toNodeId":"nmRJkS6X3K","toHandleId":"nmRJkS6X3K-top","direction":"ft","selectable":true,"type":"solid","content":{"label":"call"}},"edge-iUhzlSXJXO-iUhzlSXJXO-bottom-nmRJkS6X3K-nmRJkS6X3K-top":{"uid":"edge-iUhzlSXJXO-iUhzlSXJXO-bottom-nmRJkS6X3K-nmRJkS6X3K-top","fromNodeId":"iUhzlSXJXO","fromHandleId":"iUhzlSXJXO-bottom","toNodeId":"nmRJkS6X3K","toHandleId":"nmRJkS6X3K-top","direction":"ft","selectable":true,"type":"solid","content":{"label":"call"}},"edge-nmRJkS6X3K-nmRJkS6X3K-bottom-RCi7s7_U1S-RCi7s7_U1S-right":{"uid":"edge-nmRJkS6X3K-nmRJkS6X3K-bottom-RCi7s7_U1S-RCi7s7_U1S-right","fromNodeId":"nmRJkS6X3K","fromHandleId":"nmRJkS6X3K-bottom","toNodeId":"RCi7s7_U1S","toHandleId":"RCi7s7_U1S-right","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-nmRJkS6X3K-nmRJkS6X3K-bottom-CkqP16PFsg-CkqP16PFsg-right":{"uid":"edge-nmRJkS6X3K-nmRJkS6X3K-bottom-CkqP16PFsg-CkqP16PFsg-right","fromNodeId":"nmRJkS6X3K","fromHandleId":"nmRJkS6X3K-bottom","toNodeId":"CkqP16PFsg","toHandleId":"CkqP16PFsg-right","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-nmRJkS6X3K-nmRJkS6X3K-bottom-9dbpHju4zz-9dbpHju4zz-left":{"uid":"edge-nmRJkS6X3K-nmRJkS6X3K-bottom-9dbpHju4zz-9dbpHju4zz-left","fromNodeId":"nmRJkS6X3K","fromHandleId":"nmRJkS6X3K-bottom","toNodeId":"9dbpHju4zz","toHandleId":"9dbpHju4zz-left","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-nmRJkS6X3K-nmRJkS6X3K-bottom-oaSneJGSTL-oaSneJGSTL-left":{"uid":"edge-nmRJkS6X3K-nmRJkS6X3K-bottom-oaSneJGSTL-oaSneJGSTL-left","fromNodeId":"nmRJkS6X3K","fromHandleId":"nmRJkS6X3K-bottom","toNodeId":"oaSneJGSTL","toHandleId":"oaSneJGSTL-left","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-CkqP16PFsg-CkqP16PFsg-bottom-rMoZksymSr-rMoZksymSr-top":{"uid":"edge-CkqP16PFsg-CkqP16PFsg-bottom-rMoZksymSr-rMoZksymSr-top","fromNodeId":"CkqP16PFsg","fromHandleId":"CkqP16PFsg-bottom","toNodeId":"rMoZksymSr","toHandleId":"rMoZksymSr-top","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-RCi7s7_U1S-RCi7s7_U1S-bottom-rMoZksymSr-rMoZksymSr-top":{"uid":"edge-RCi7s7_U1S-RCi7s7_U1S-bottom-rMoZksymSr-rMoZksymSr-top","fromNodeId":"RCi7s7_U1S","fromHandleId":"RCi7s7_U1S-bottom","toNodeId":"rMoZksymSr","toHandleId":"rMoZksymSr-top","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-CkqP16PFsg-CkqP16PFsg-bottom-VhKNqx-fLX-VhKNqx-fLX-top":{"uid":"edge-CkqP16PFsg-CkqP16PFsg-bottom-VhKNqx-fLX-VhKNqx-fLX-top","fromNodeId":"CkqP16PFsg","fromHandleId":"CkqP16PFsg-bottom","toNodeId":"VhKNqx-fLX","toHandleId":"VhKNqx-fLX-top","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-RCi7s7_U1S-RCi7s7_U1S-bottom-VhKNqx-fLX-VhKNqx-fLX-top":{"uid":"edge-RCi7s7_U1S-RCi7s7_U1S-bottom-VhKNqx-fLX-VhKNqx-fLX-top","fromNodeId":"RCi7s7_U1S","fromHandleId":"RCi7s7_U1S-bottom","toNodeId":"VhKNqx-fLX","toHandleId":"VhKNqx-fLX-top","direction":"ft","selectable":true,"type":"solid","content":{"label":""}},"edge-x5c0q2SqDz-x5c0q2SqDz-left-oRgiZf0ZRL-oRgiZf0ZRL-right":{"uid":"edge-x5c0q2SqDz-x5c0q2SqDz-left-oRgiZf0ZRL-oRgiZf0ZRL-right","fromNodeId":"x5c0q2SqDz","fromHandleId":"x5c0q2SqDz-left","toNodeId":"oRgiZf0ZRL","toHandleId":"oRgiZf0ZRL-right","direction":"ft","selectable":true,"type":"solid","content":{"label":"call"}},"edge-x5c0q2SqDz-x5c0q2SqDz-left-6rVonZ7fyR-6rVonZ7fyR-right":{"uid":"edge-x5c0q2SqDz-x5c0q2SqDz-left-6rVonZ7fyR-6rVonZ7fyR-right","fromNodeId":"x5c0q2SqDz","fromHandleId":"x5c0q2SqDz-left","toNodeId":"6rVonZ7fyR","toHandleId":"6rVonZ7fyR-right","direction":"ft","selectable":true,"type":"solid","content":{"label":"call"}},"edge-x5c0q2SqDz-x5c0q2SqDz-left-UPu87YEv2v-UPu87YEv2v-right":{"uid":"edge-x5c0q2SqDz-x5c0q2SqDz-left-UPu87YEv2v-UPu87YEv2v-right","fromNodeId":"x5c0q2SqDz","fromHandleId":"x5c0q2SqDz-left","toNodeId":"UPu87YEv2v","toHandleId":"UPu87YEv2v-right","direction":"ft","selectable":true,"type":"solid","content":{"label":"call"}},"edge-UPu87YEv2v-UPu87YEv2v-bottom-4DJBgWT7rz-4DJBgWT7rz-left":{"uid":"edge-UPu87YEv2v-UPu87YEv2v-bottom-4DJBgWT7rz-4DJBgWT7rz-left","fromNodeId":"UPu87YEv2v","fromHandleId":"UPu87YEv2v-bottom","toNodeId":"4DJBgWT7rz","toHandleId":"4DJBgWT7rz-left","direction":"ft","selectable":true,"type":"solid","content":{"label":"triger"}}}}}}