\n \n Approval submitted! View status. \n \n
\n
\n );\n if (onApproveSubmitted) {\n onApproveSubmitted();\n }\n if (getTokenInfo && infoTokens && pendingTxns && setPendingTxns) {\n const token = getTokenInfo(infoTokens, tokenAddress);\n const pendingTxn = {\n hash: res.hash,\n message: includeMessage ? t`${token.symbol} Approved!` : false,\n };\n setPendingTxns([...pendingTxns, pendingTxn]);\n }\n })\n .catch((e) => {\n console.error(e);\n let failMsg;\n if (\n [\"not enough funds for gas\", \"failed to execute call with revert code InsufficientGasFunds\"].includes(\n e.data?.message\n )\n ) {\n failMsg = (\n \n
\n \n There is not enough ETH in your account on Arbitrum to send this transaction.\n
\n
\nBridge ETH to Arbitrum \n \n
\n );\n } else if (e.message?.includes(\"User denied transaction signature\")) {\n failMsg = t`Approval was cancelled`;\n } else {\n failMsg = t`Approval failed`;\n }\n helperToast.error(failMsg);\n })\n .finally(() => {\n setIsApproving(false);\n });\n}\n","export const SELECTED_NETWORK_LOCAL_STORAGE_KEY = \"SELECTED_NETWORK\";\nexport const WALLET_CONNECT_LOCALSTORAGE_KEY = \"walletconnect\";\nexport const WALLET_LINK_LOCALSTORAGE_PREFIX = \"-walletlink\";\nexport const SHOULD_EAGER_CONNECT_LOCALSTORAGE_KEY = \"eagerconnect\";\nexport const CURRENT_PROVIDER_LOCALSTORAGE_KEY = \"currentprovider\";\nexport const LANGUAGE_LOCALSTORAGE_KEY = \"LANGUAGE_KEY\";\nexport const SLIPPAGE_BPS_KEY = \"Exchange-swap-slippage-basis-points-v3\";\nexport const CLOSE_POSITION_RECEIVE_TOKEN_KEY = \"Close-position-receive-token\";\nexport const IS_PNL_IN_LEVERAGE_KEY = \"Exchange-swap-is-pnl-in-leverage\";\nexport const SHOW_PNL_AFTER_FEES_KEY = \"Exchange-swap-show-pnl-after-fees\";\nexport const DISABLE_ORDER_VALIDATION_KEY = \"disable-order-validation\";\nexport const SHOULD_SHOW_POSITION_LINES_KEY = \"Exchange-swap-should-show-position-lines\";\nexport const REFERRAL_CODE_KEY = \"FXDX-referralCode\";\nexport const REFERRALS_SELECTED_TAB_KEY = \"Referrals-selected-tab\";\n","import { useWeb3React } from \"@web3-react/core\";\nimport { SELECTED_NETWORK_LOCAL_STORAGE_KEY } from \"config/localStorage\";\nimport { DEFAULT_CHAIN_ID, SUPPORTED_CHAIN_IDS } from \"config/chains\";\n\nexport function useChainId() {\n let { chainId } = useWeb3React();\n\n if (!chainId) {\n const chainIdFromLocalStorage = localStorage.getItem(SELECTED_NETWORK_LOCAL_STORAGE_KEY);\n if (chainIdFromLocalStorage) {\n chainId = parseInt(chainIdFromLocalStorage);\n if (!chainId) {\n // localstorage value is invalid\n localStorage.removeItem(SELECTED_NETWORK_LOCAL_STORAGE_KEY);\n }\n }\n }\n\n if (!chainId || !SUPPORTED_CHAIN_IDS.includes(chainId)) {\n chainId = DEFAULT_CHAIN_ID;\n }\n\n return { chainId };\n}\n","import { format as formatDateFn } from \"date-fns\";\n\nexport function formatDateTime(time: number) {\n return formatDateFn(time * 1000, \"dd MMM yyyy, h:mm a\");\n}\n\nexport function formatDate(time: number) {\n return formatDateFn(time * 1000, \"dd MMM yyyy\");\n}\n\nexport function getTimeRemaining(time: number) {\n const now = parseInt(String(Date.now() / 1000));\n if (time < now) {\n return \"0h 0m\";\n }\n const diff = time - now;\n const hours = parseInt(String(diff / (60 * 60)));\n const minutes = parseInt(String((diff - hours * 60 * 60) / 60));\n return `${hours}h ${minutes}m`;\n}\n\nexport function isValidTimestamp(timestamp: any) {\n return new Date(timestamp).getTime() > 0;\n}\n","import { useEffect, useState } from \"react\";\nimport { useWeb3React } from \"@web3-react/core\";\nimport { ethers } from \"ethers\";\nimport { getContract } from \"config/contracts\";\nimport useSWR from \"swr\";\n\nimport OrderBookReader from \"abis/OrderBookReader.json\";\nimport OrderBook from \"abis/OrderBook.json\";\n\nimport { CHAIN_ID, getExplorerUrl, IS_TESTNET } from \"config/chains\";\nimport { getServerBaseUrl } from \"config/backend\";\nimport { getMostAbundantStableToken } from \"domain/tokens\";\nimport { getTokenInfo } from \"domain/tokens/utils\";\nimport { getProvider } from \"./rpc\";\nimport { bigNumberify, expandDecimals, formatAmount } from \"./numbers\";\nimport { isValidToken } from \"config/tokens\";\nimport { useChainId } from \"./chains\";\nimport { isValidTimestamp } from \"./dates\";\nimport { t } from \"@lingui/macro\";\n\nconst { AddressZero } = ethers.constants;\n\n// use a random placeholder account instead of the zero address as the zero address might have tokens\nexport const PLACEHOLDER_ACCOUNT = ethers.Wallet.createRandom().address;\n\nexport const MIN_PROFIT_TIME = 0;\n\nexport const USDF_ADDRESS = getContract(CHAIN_ID, \"USDF\");\nexport const MAX_LEVERAGE = 100 * 10000;\n\nexport const MAX_PRICE_DEVIATION_BASIS_POINTS = 750;\nexport const DEFAULT_GAS_LIMIT = 1 * 1000 * 1000;\nexport const SECONDS_PER_YEAR = 31536000;\nexport const USDF_DECIMALS = 18;\nexport const USD_DECIMALS = 30;\nexport const BASIS_POINTS_DIVISOR = 10000;\nexport const DEPOSIT_FEE = 30;\nexport const DUST_BNB = \"2000000000000000\";\nexport const DUST_USD = expandDecimals(1, USD_DECIMALS);\nexport const PRECISION = expandDecimals(1, 30);\nexport const FLP_DECIMALS = 18;\nexport const FXDX_DECIMALS = 18;\nexport const DEFAULT_MAX_USDF_AMOUNT = expandDecimals(200 * 1000 * 1000, 18);\n\nexport const TAX_BASIS_POINTS = 50;\nexport const STABLE_TAX_BASIS_POINTS = 5;\nexport const MINT_BURN_FEE_BASIS_POINTS = 25;\nexport const SWAP_FEE_BASIS_POINTS = 30;\nexport const STABLE_SWAP_FEE_BASIS_POINTS = 1;\nexport const MARGIN_FEE_BASIS_POINTS = 10;\n\nexport const LIQUIDATION_FEE = expandDecimals(5, USD_DECIMALS);\n\nexport const TRADES_PAGE_SIZE = 100;\n\nexport const FLP_COOLDOWN_DURATION = 15 * 60;\nexport const THRESHOLD_REDEMPTION_VALUE = expandDecimals(993, 27); // 0.993\nexport const FUNDING_RATE_PRECISION = 1000000;\n\nexport const SWAP = \"Swap\";\nexport const INCREASE = \"Increase\";\nexport const DECREASE = \"Decrease\";\nexport const LONG = \"Long\";\nexport const SHORT = \"Short\";\n\nexport const MARKET = \"Market\";\nexport const LIMIT = \"Limit\";\nexport const STOP = \"Stop\";\nexport const LEVERAGE_ORDER_OPTIONS = [MARKET, LIMIT, STOP];\nexport const SWAP_ORDER_OPTIONS = [MARKET, LIMIT];\nexport const SWAP_OPTIONS = [LONG, SHORT, SWAP];\nexport const DEFAULT_SLIPPAGE_AMOUNT = 30;\nexport const DEFAULT_HIGHER_SLIPPAGE_AMOUNT = 100;\n\nexport const REFERRAL_CODE_QUERY_PARAM = \"ref\";\nexport const MAX_REFERRAL_CODE_LENGTH = 20;\n\nexport const MIN_PROFIT_BIPS = 0;\n\nexport function deserialize(data) {\n for (const [key, value] of Object.entries(data)) {\n if (value._type === \"BigNumber\") {\n data[key] = bigNumberify(value.value);\n }\n }\n return data;\n}\n\nexport function isHomeSite() {\n return process.env.REACT_APP_IS_HOME_SITE === \"true\";\n}\n\nexport function getLiquidationPriceFromDelta({ liquidationAmount, size, collateral, averagePrice, isLong }) {\n if (!size || size.eq(0)) {\n return;\n }\n\n if (liquidationAmount.gt(collateral)) {\n const liquidationDelta = liquidationAmount.sub(collateral);\n const priceDelta = liquidationDelta.mul(averagePrice).div(size);\n return isLong ? averagePrice.add(priceDelta) : averagePrice.sub(priceDelta);\n }\n\n const liquidationDelta = collateral.sub(liquidationAmount);\n const priceDelta = liquidationDelta.mul(averagePrice).div(size);\n\n return isLong ? averagePrice.sub(priceDelta) : averagePrice.add(priceDelta);\n}\n\nexport function getMarginFee(sizeDelta) {\n if (!sizeDelta) {\n return bigNumberify(0);\n }\n const afterFeeUsd = sizeDelta.mul(BASIS_POINTS_DIVISOR - MARGIN_FEE_BASIS_POINTS).div(BASIS_POINTS_DIVISOR);\n return sizeDelta.sub(afterFeeUsd);\n}\n\nexport function isTriggerRatioInverted(fromTokenInfo, toTokenInfo) {\n if (!toTokenInfo || !fromTokenInfo) return false;\n if (toTokenInfo.isStable || toTokenInfo.isUsdf) return true;\n if (toTokenInfo.maxPrice) return toTokenInfo.maxPrice.lt(fromTokenInfo.maxPrice);\n return false;\n}\n\nexport function getExchangeRate(tokenAInfo, tokenBInfo, inverted) {\n if (!tokenAInfo || !tokenAInfo.minPrice || !tokenBInfo || !tokenBInfo.maxPrice) {\n return;\n }\n if (inverted) {\n return tokenAInfo.minPrice.mul(PRECISION).div(tokenBInfo.maxPrice);\n }\n return tokenBInfo.maxPrice.mul(PRECISION).div(tokenAInfo.minPrice);\n}\n\nexport function shouldInvertTriggerRatio(tokenA, tokenB) {\n if (tokenB.isStable || tokenB.isUsdf) return true;\n if (tokenB.maxPrice && tokenA.maxPrice && tokenB.maxPrice.lt(tokenA.maxPrice)) return true;\n return false;\n}\n\nexport function getExchangeRateDisplay(rate, tokenA, tokenB, opts = {}) {\n if (!rate || !tokenA || !tokenB) return \"...\";\n if (shouldInvertTriggerRatio(tokenA, tokenB)) {\n [tokenA, tokenB] = [tokenB, tokenA];\n rate = PRECISION.mul(PRECISION).div(rate);\n }\n const rateValue = formatAmount(rate, USD_DECIMALS, tokenA.isStable || tokenA.isUsdf ? 2 : 4, true);\n if (opts.omitSymbols) {\n return rateValue;\n }\n return `${rateValue} ${tokenA.symbol} / ${tokenB.symbol}`;\n}\n\nconst adjustForDecimalsFactory = (n) => (number) => {\n if (n === 0) {\n return number;\n }\n if (n > 0) {\n return number.mul(expandDecimals(1, n));\n }\n return number.div(expandDecimals(1, -n));\n};\n\nexport function adjustForDecimals(amount, divDecimals, mulDecimals) {\n return amount.mul(expandDecimals(1, mulDecimals)).div(expandDecimals(1, divDecimals));\n}\n\nexport function getTargetUsdfAmount(token, usdfSupply, totalTokenWeights) {\n if (!token || !token.weight || !usdfSupply) {\n return;\n }\n\n if (usdfSupply.eq(0)) {\n return bigNumberify(0);\n }\n\n return token.weight.mul(usdfSupply).div(totalTokenWeights);\n}\n\nexport function getFeeBasisPoints(\n token,\n usdfDelta,\n feeBasisPoints,\n taxBasisPoints,\n increment,\n usdfSupply,\n totalTokenWeights\n) {\n if (!token || !token.usdfAmount || !usdfSupply || !totalTokenWeights) {\n return 0;\n }\n\n feeBasisPoints = bigNumberify(feeBasisPoints);\n taxBasisPoints = bigNumberify(taxBasisPoints);\n\n const initialAmount = token.usdfAmount;\n let nextAmount = initialAmount.add(usdfDelta);\n if (!increment) {\n nextAmount = usdfDelta.gt(initialAmount) ? bigNumberify(0) : initialAmount.sub(usdfDelta);\n }\n\n const targetAmount = getTargetUsdfAmount(token, usdfSupply, totalTokenWeights);\n if (!targetAmount || targetAmount.eq(0)) {\n return feeBasisPoints.toNumber();\n }\n\n const initialDiff = initialAmount.gt(targetAmount)\n ? initialAmount.sub(targetAmount)\n : targetAmount.sub(initialAmount);\n const nextDiff = nextAmount.gt(targetAmount) ? nextAmount.sub(targetAmount) : targetAmount.sub(nextAmount);\n\n if (nextDiff.lt(initialDiff)) {\n const rebateBps = taxBasisPoints.mul(initialDiff).div(targetAmount);\n return rebateBps.gt(feeBasisPoints) ? 0 : feeBasisPoints.sub(rebateBps).toNumber();\n }\n\n let averageDiff = initialDiff.add(nextDiff).div(2);\n if (averageDiff.gt(targetAmount)) {\n averageDiff = targetAmount;\n }\n const taxBps = taxBasisPoints.mul(averageDiff).div(targetAmount);\n return feeBasisPoints.add(taxBps).toNumber();\n}\n\nexport function getBuyFlpToAmount(fromAmount, swapTokenAddress, infoTokens, flpPrice, usdfSupply, totalTokenWeights) {\n const defaultValue = { amount: bigNumberify(0), feeBasisPoints: 0 };\n if (!fromAmount || !swapTokenAddress || !infoTokens || !flpPrice || !usdfSupply || !totalTokenWeights) {\n return defaultValue;\n }\n\n const swapToken = getTokenInfo(infoTokens, swapTokenAddress);\n if (!swapToken || !swapToken.minPrice) {\n return defaultValue;\n }\n\n let flpAmount = fromAmount.mul(swapToken.minPrice).div(flpPrice);\n flpAmount = adjustForDecimals(flpAmount, swapToken.decimals, USDF_DECIMALS);\n\n let usdfAmount = fromAmount.mul(swapToken.minPrice).div(PRECISION);\n usdfAmount = adjustForDecimals(usdfAmount, swapToken.decimals, USDF_DECIMALS);\n const feeBasisPoints = getFeeBasisPoints(\n swapToken,\n usdfAmount,\n MINT_BURN_FEE_BASIS_POINTS,\n TAX_BASIS_POINTS,\n true,\n usdfSupply,\n totalTokenWeights\n );\n\n flpAmount = flpAmount.mul(BASIS_POINTS_DIVISOR - feeBasisPoints).div(BASIS_POINTS_DIVISOR);\n\n return { amount: flpAmount, feeBasisPoints };\n}\n\nexport function getSellFlpFromAmount(toAmount, swapTokenAddress, infoTokens, flpPrice, usdfSupply, totalTokenWeights) {\n const defaultValue = { amount: bigNumberify(0), feeBasisPoints: 0 };\n if (!toAmount || !swapTokenAddress || !infoTokens || !flpPrice || !usdfSupply || !totalTokenWeights) {\n return defaultValue;\n }\n\n const swapToken = getTokenInfo(infoTokens, swapTokenAddress);\n if (!swapToken || !swapToken.maxPrice) {\n return defaultValue;\n }\n\n let flpAmount = toAmount.mul(swapToken.maxPrice).div(flpPrice);\n flpAmount = adjustForDecimals(flpAmount, swapToken.decimals, USDF_DECIMALS);\n\n let usdfAmount = toAmount.mul(swapToken.maxPrice).div(PRECISION);\n usdfAmount = adjustForDecimals(usdfAmount, swapToken.decimals, USDF_DECIMALS);\n const feeBasisPoints = getFeeBasisPoints(\n swapToken,\n usdfAmount,\n MINT_BURN_FEE_BASIS_POINTS,\n TAX_BASIS_POINTS,\n false,\n usdfSupply,\n totalTokenWeights\n );\n\n flpAmount = flpAmount.mul(BASIS_POINTS_DIVISOR).div(BASIS_POINTS_DIVISOR - feeBasisPoints);\n\n return { amount: flpAmount, feeBasisPoints };\n}\n\nexport function getBuyFlpFromAmount(toAmount, fromTokenAddress, infoTokens, flpPrice, usdfSupply, totalTokenWeights) {\n const defaultValue = { amount: bigNumberify(0) };\n if (!toAmount || !fromTokenAddress || !infoTokens || !flpPrice || !usdfSupply || !totalTokenWeights) {\n return defaultValue;\n }\n\n const fromToken = getTokenInfo(infoTokens, fromTokenAddress);\n if (!fromToken || !fromToken.minPrice) {\n return defaultValue;\n }\n\n let fromAmount = toAmount.mul(flpPrice).div(fromToken.minPrice);\n fromAmount = adjustForDecimals(fromAmount, FLP_DECIMALS, fromToken.decimals);\n\n const usdfAmount = toAmount.mul(flpPrice).div(PRECISION);\n const feeBasisPoints = getFeeBasisPoints(\n fromToken,\n usdfAmount,\n MINT_BURN_FEE_BASIS_POINTS,\n TAX_BASIS_POINTS,\n true,\n usdfSupply,\n totalTokenWeights\n );\n\n fromAmount = fromAmount.mul(BASIS_POINTS_DIVISOR).div(BASIS_POINTS_DIVISOR - feeBasisPoints);\n\n return { amount: fromAmount, feeBasisPoints };\n}\n\nexport function getSellFlpToAmount(toAmount, fromTokenAddress, infoTokens, flpPrice, usdfSupply, totalTokenWeights) {\n const defaultValue = { amount: bigNumberify(0) };\n if (!toAmount || !fromTokenAddress || !infoTokens || !flpPrice || !usdfSupply || !totalTokenWeights) {\n return defaultValue;\n }\n\n const fromToken = getTokenInfo(infoTokens, fromTokenAddress);\n if (!fromToken || !fromToken.maxPrice) {\n return defaultValue;\n }\n\n let fromAmount = toAmount.mul(flpPrice).div(fromToken.maxPrice);\n fromAmount = adjustForDecimals(fromAmount, FLP_DECIMALS, fromToken.decimals);\n\n const usdfAmount = toAmount.mul(flpPrice).div(PRECISION);\n const feeBasisPoints = getFeeBasisPoints(\n fromToken,\n usdfAmount,\n MINT_BURN_FEE_BASIS_POINTS,\n TAX_BASIS_POINTS,\n false,\n usdfSupply,\n totalTokenWeights\n );\n\n fromAmount = fromAmount.mul(BASIS_POINTS_DIVISOR - feeBasisPoints).div(BASIS_POINTS_DIVISOR);\n\n return { amount: fromAmount, feeBasisPoints };\n}\n\nexport function getNextFromAmount(\n chainId,\n toAmount,\n fromTokenAddress,\n toTokenAddress,\n infoTokens,\n toTokenPriceUsd,\n ratio,\n usdfSupply,\n totalTokenWeights,\n forSwap\n) {\n const defaultValue = { amount: bigNumberify(0) };\n\n if (!toAmount || !fromTokenAddress || !toTokenAddress || !infoTokens) {\n return defaultValue;\n }\n\n if (fromTokenAddress === toTokenAddress) {\n return { amount: toAmount };\n }\n\n const fromToken = getTokenInfo(infoTokens, fromTokenAddress);\n const toToken = getTokenInfo(infoTokens, toTokenAddress);\n\n if (fromToken.isNative && toToken.isWrapped) {\n return { amount: toAmount };\n }\n\n if (fromToken.isWrapped && toToken.isNative) {\n return { amount: toAmount };\n }\n\n // the realtime price should be used if it is for a transaction to open / close a position\n // or if the transaction involves doing a swap and opening / closing a position\n // otherwise use the contract price instead of realtime price for swaps\n\n let fromTokenMinPrice;\n if (fromToken) {\n fromTokenMinPrice = forSwap ? fromToken.contractMinPrice : fromToken.minPrice;\n }\n\n let toTokenMaxPrice;\n if (toToken) {\n toTokenMaxPrice = forSwap ? toToken.contractMaxPrice : toToken.maxPrice;\n }\n\n if (!fromToken || !fromTokenMinPrice || !toToken || !toTokenMaxPrice) {\n return defaultValue;\n }\n\n const adjustDecimals = adjustForDecimalsFactory(fromToken.decimals - toToken.decimals);\n\n let fromAmountBasedOnRatio;\n if (ratio && !ratio.isZero()) {\n fromAmountBasedOnRatio = toAmount.mul(ratio).div(PRECISION);\n }\n\n const fromAmount =\n ratio && !ratio.isZero() ? fromAmountBasedOnRatio : toAmount.mul(toTokenMaxPrice).div(fromTokenMinPrice);\n\n let usdfAmount = fromAmount.mul(fromTokenMinPrice).div(PRECISION);\n usdfAmount = adjustForDecimals(usdfAmount, toToken.decimals, USDF_DECIMALS);\n const swapFeeBasisPoints =\n fromToken.isStable && toToken.isStable ? STABLE_SWAP_FEE_BASIS_POINTS : SWAP_FEE_BASIS_POINTS;\n const taxBasisPoints = fromToken.isStable && toToken.isStable ? STABLE_TAX_BASIS_POINTS : TAX_BASIS_POINTS;\n const feeBasisPoints0 = getFeeBasisPoints(\n fromToken,\n usdfAmount,\n swapFeeBasisPoints,\n taxBasisPoints,\n true,\n usdfSupply,\n totalTokenWeights\n );\n const feeBasisPoints1 = getFeeBasisPoints(\n toToken,\n usdfAmount,\n swapFeeBasisPoints,\n taxBasisPoints,\n false,\n usdfSupply,\n totalTokenWeights\n );\n const feeBasisPoints = feeBasisPoints0 > feeBasisPoints1 ? feeBasisPoints0 : feeBasisPoints1;\n\n return {\n amount: adjustDecimals(fromAmount.mul(BASIS_POINTS_DIVISOR).div(BASIS_POINTS_DIVISOR - feeBasisPoints)),\n feeBasisPoints,\n };\n}\n\nexport function getNextToAmount(\n chainId,\n fromAmount,\n fromTokenAddress,\n toTokenAddress,\n infoTokens,\n toTokenPriceUsd,\n ratio,\n usdfSupply,\n totalTokenWeights,\n forSwap\n) {\n const defaultValue = { amount: bigNumberify(0) };\n if (!fromAmount || !fromTokenAddress || !toTokenAddress || !infoTokens) {\n return defaultValue;\n }\n\n if (fromTokenAddress === toTokenAddress) {\n return { amount: fromAmount };\n }\n\n const fromToken = getTokenInfo(infoTokens, fromTokenAddress);\n const toToken = getTokenInfo(infoTokens, toTokenAddress);\n\n if (fromToken.isNative && toToken.isWrapped) {\n return { amount: fromAmount };\n }\n\n if (fromToken.isWrapped && toToken.isNative) {\n return { amount: fromAmount };\n }\n\n // the realtime price should be used if it is for a transaction to open / close a position\n // or if the transaction involves doing a swap and opening / closing a position\n // otherwise use the contract price instead of realtime price for swaps\n\n let fromTokenMinPrice;\n if (fromToken) {\n fromTokenMinPrice = forSwap ? fromToken.contractMinPrice : fromToken.minPrice;\n }\n\n let toTokenMaxPrice;\n if (toToken) {\n toTokenMaxPrice = forSwap ? toToken.contractMaxPrice : toToken.maxPrice;\n }\n\n if (!fromTokenMinPrice || !toTokenMaxPrice) {\n return defaultValue;\n }\n\n const adjustDecimals = adjustForDecimalsFactory(toToken.decimals - fromToken.decimals);\n\n let toAmountBasedOnRatio = bigNumberify(0);\n if (ratio && !ratio.isZero()) {\n toAmountBasedOnRatio = fromAmount.mul(PRECISION).div(ratio);\n }\n\n if (toTokenAddress === USDF_ADDRESS) {\n const feeBasisPoints = getSwapFeeBasisPoints(fromToken.isStable);\n\n if (ratio && !ratio.isZero()) {\n const toAmount = toAmountBasedOnRatio;\n return {\n amount: adjustDecimals(toAmount.mul(BASIS_POINTS_DIVISOR - feeBasisPoints).div(BASIS_POINTS_DIVISOR)),\n feeBasisPoints,\n };\n }\n\n const toAmount = fromAmount.mul(fromTokenMinPrice).div(PRECISION);\n return {\n amount: adjustDecimals(toAmount.mul(BASIS_POINTS_DIVISOR - feeBasisPoints).div(BASIS_POINTS_DIVISOR)),\n feeBasisPoints,\n };\n }\n\n if (fromTokenAddress === USDF_ADDRESS) {\n const redemptionValue = toToken.redemptionAmount\n .mul(toTokenPriceUsd || toTokenMaxPrice)\n .div(expandDecimals(1, toToken.decimals));\n\n if (redemptionValue.gt(THRESHOLD_REDEMPTION_VALUE)) {\n const feeBasisPoints = getSwapFeeBasisPoints(toToken.isStable);\n\n const toAmount =\n ratio && !ratio.isZero()\n ? toAmountBasedOnRatio\n : fromAmount.mul(toToken.redemptionAmount).div(expandDecimals(1, toToken.decimals));\n\n return {\n amount: adjustDecimals(toAmount.mul(BASIS_POINTS_DIVISOR - feeBasisPoints).div(BASIS_POINTS_DIVISOR)),\n feeBasisPoints,\n };\n }\n\n const expectedAmount = fromAmount;\n\n const stableToken = getMostAbundantStableToken(chainId, infoTokens);\n if (!stableToken || stableToken.availableAmount.lt(expectedAmount)) {\n const toAmount =\n ratio && !ratio.isZero()\n ? toAmountBasedOnRatio\n : fromAmount.mul(toToken.redemptionAmount).div(expandDecimals(1, toToken.decimals));\n const feeBasisPoints = getSwapFeeBasisPoints(toToken.isStable);\n return {\n amount: adjustDecimals(toAmount.mul(BASIS_POINTS_DIVISOR - feeBasisPoints).div(BASIS_POINTS_DIVISOR)),\n feeBasisPoints,\n };\n }\n\n const feeBasisPoints0 = getSwapFeeBasisPoints(true);\n const feeBasisPoints1 = getSwapFeeBasisPoints(false);\n\n if (ratio && !ratio.isZero()) {\n const toAmount = toAmountBasedOnRatio\n .mul(BASIS_POINTS_DIVISOR - feeBasisPoints0 - feeBasisPoints1)\n .div(BASIS_POINTS_DIVISOR);\n return {\n amount: adjustDecimals(toAmount),\n path: [USDF_ADDRESS, stableToken.address, toToken.address],\n feeBasisPoints: feeBasisPoints0 + feeBasisPoints1,\n };\n }\n\n // get toAmount for USDF => stableToken\n let toAmount = fromAmount.mul(PRECISION).div(stableToken.maxPrice);\n // apply USDF => stableToken fees\n toAmount = toAmount.mul(BASIS_POINTS_DIVISOR - feeBasisPoints0).div(BASIS_POINTS_DIVISOR);\n\n // get toAmount for stableToken => toToken\n toAmount = toAmount.mul(stableToken.minPrice).div(toTokenPriceUsd || toTokenMaxPrice);\n // apply stableToken => toToken fees\n toAmount = toAmount.mul(BASIS_POINTS_DIVISOR - feeBasisPoints1).div(BASIS_POINTS_DIVISOR);\n\n return {\n amount: adjustDecimals(toAmount),\n path: [USDF_ADDRESS, stableToken.address, toToken.address],\n feeBasisPoints: feeBasisPoints0 + feeBasisPoints1,\n };\n }\n\n const toAmount =\n ratio && !ratio.isZero()\n ? toAmountBasedOnRatio\n : fromAmount.mul(fromTokenMinPrice).div(toTokenPriceUsd || toTokenMaxPrice);\n\n let usdfAmount = fromAmount.mul(fromTokenMinPrice).div(PRECISION);\n usdfAmount = adjustForDecimals(usdfAmount, fromToken.decimals, USDF_DECIMALS);\n const swapFeeBasisPoints =\n fromToken.isStable && toToken.isStable ? STABLE_SWAP_FEE_BASIS_POINTS : SWAP_FEE_BASIS_POINTS;\n const taxBasisPoints = fromToken.isStable && toToken.isStable ? STABLE_TAX_BASIS_POINTS : TAX_BASIS_POINTS;\n const feeBasisPoints0 = getFeeBasisPoints(\n fromToken,\n usdfAmount,\n swapFeeBasisPoints,\n taxBasisPoints,\n true,\n usdfSupply,\n totalTokenWeights\n );\n const feeBasisPoints1 = getFeeBasisPoints(\n toToken,\n usdfAmount,\n swapFeeBasisPoints,\n taxBasisPoints,\n false,\n usdfSupply,\n totalTokenWeights\n );\n const feeBasisPoints = feeBasisPoints0 > feeBasisPoints1 ? feeBasisPoints0 : feeBasisPoints1;\n\n return {\n amount: adjustDecimals(toAmount.mul(BASIS_POINTS_DIVISOR - feeBasisPoints).div(BASIS_POINTS_DIVISOR)),\n feeBasisPoints,\n };\n}\n\nexport function getProfitPrice(closePrice, position) {\n let profitPrice;\n if (position && position.averagePrice && closePrice) {\n profitPrice = position.isLong\n ? position.averagePrice.mul(BASIS_POINTS_DIVISOR + MIN_PROFIT_BIPS).div(BASIS_POINTS_DIVISOR)\n : position.averagePrice.mul(BASIS_POINTS_DIVISOR - MIN_PROFIT_BIPS).div(BASIS_POINTS_DIVISOR);\n }\n return profitPrice;\n}\n\nexport function calculatePositionDelta(\n price,\n { size, collateral, isLong, averagePrice, lastIncreasedTime },\n sizeDelta\n) {\n if (!sizeDelta) {\n sizeDelta = size;\n }\n const priceDelta = averagePrice.gt(price) ? averagePrice.sub(price) : price.sub(averagePrice);\n let delta = sizeDelta.mul(priceDelta).div(averagePrice);\n const pendingDelta = delta;\n\n const minProfitExpired = lastIncreasedTime + MIN_PROFIT_TIME < Date.now() / 1000;\n const hasProfit = isLong ? price.gt(averagePrice) : price.lt(averagePrice);\n if (!minProfitExpired && hasProfit && delta.mul(BASIS_POINTS_DIVISOR).lte(size.mul(MIN_PROFIT_BIPS))) {\n delta = bigNumberify(0);\n }\n\n const deltaPercentage = delta.mul(BASIS_POINTS_DIVISOR).div(collateral);\n const pendingDeltaPercentage = pendingDelta.mul(BASIS_POINTS_DIVISOR).div(collateral);\n\n return {\n delta,\n pendingDelta,\n pendingDeltaPercentage,\n hasProfit,\n deltaPercentage,\n };\n}\n\nexport function getDeltaStr({ delta, deltaPercentage, hasProfit }) {\n let deltaStr;\n let deltaPercentageStr;\n\n if (delta.gt(0)) {\n deltaStr = hasProfit ? \"+\" : \"-\";\n deltaPercentageStr = hasProfit ? \"+\" : \"-\";\n } else {\n deltaStr = \"\";\n deltaPercentageStr = \"\";\n }\n deltaStr += `$${formatAmount(delta, USD_DECIMALS, 2, true)}`;\n deltaPercentageStr += `${formatAmount(deltaPercentage, 2, 2)}%`;\n\n return { deltaStr, deltaPercentageStr };\n}\n\nexport function getLeverage({\n size,\n sizeDelta,\n increaseSize,\n collateral,\n collateralDelta,\n increaseCollateral,\n entryFundingRate,\n cumulativeFundingRate,\n hasProfit,\n delta,\n includeDelta,\n}) {\n if (!size && !sizeDelta) {\n return;\n }\n if (!collateral && !collateralDelta) {\n return;\n }\n\n let nextSize = size ? size : bigNumberify(0);\n if (sizeDelta) {\n if (increaseSize) {\n nextSize = size.add(sizeDelta);\n } else {\n if (sizeDelta.gte(size)) {\n return;\n }\n nextSize = size.sub(sizeDelta);\n }\n }\n\n let remainingCollateral = collateral ? collateral : bigNumberify(0);\n if (collateralDelta) {\n if (increaseCollateral) {\n remainingCollateral = collateral.add(collateralDelta);\n } else {\n if (collateralDelta.gte(collateral)) {\n return;\n }\n remainingCollateral = collateral.sub(collateralDelta);\n }\n }\n\n if (delta && includeDelta) {\n if (hasProfit) {\n remainingCollateral = remainingCollateral.add(delta);\n } else {\n if (delta.gt(remainingCollateral)) {\n return;\n }\n\n remainingCollateral = remainingCollateral.sub(delta);\n }\n }\n\n if (remainingCollateral.eq(0)) {\n return;\n }\n\n remainingCollateral = sizeDelta\n ? remainingCollateral.mul(BASIS_POINTS_DIVISOR - MARGIN_FEE_BASIS_POINTS).div(BASIS_POINTS_DIVISOR)\n : remainingCollateral;\n if (entryFundingRate && cumulativeFundingRate) {\n const fundingFee = size.mul(cumulativeFundingRate.sub(entryFundingRate)).div(FUNDING_RATE_PRECISION);\n remainingCollateral = remainingCollateral.sub(fundingFee);\n }\n\n return nextSize.mul(BASIS_POINTS_DIVISOR).div(remainingCollateral);\n}\n\nexport function getLiquidationPrice(data) {\n let {\n isLong,\n size,\n collateral,\n averagePrice,\n entryFundingRate,\n cumulativeFundingRate,\n sizeDelta,\n collateralDelta,\n increaseCollateral,\n increaseSize,\n delta,\n hasProfit,\n includeDelta,\n } = data;\n if (!size || !collateral || !averagePrice) {\n return;\n }\n\n let nextSize = size ? size : bigNumberify(0);\n let remainingCollateral = collateral;\n\n if (sizeDelta) {\n if (increaseSize) {\n nextSize = size.add(sizeDelta);\n } else {\n if (sizeDelta.gte(size)) {\n return;\n }\n nextSize = size.sub(sizeDelta);\n }\n\n if (includeDelta && !hasProfit) {\n const adjustedDelta = sizeDelta.mul(delta).div(size);\n remainingCollateral = remainingCollateral.sub(adjustedDelta);\n }\n }\n\n if (collateralDelta) {\n if (increaseCollateral) {\n remainingCollateral = remainingCollateral.add(collateralDelta);\n } else {\n if (collateralDelta.gte(remainingCollateral)) {\n return;\n }\n remainingCollateral = remainingCollateral.sub(collateralDelta);\n }\n }\n\n let positionFee = getMarginFee(size).add(LIQUIDATION_FEE);\n if (entryFundingRate && cumulativeFundingRate) {\n const fundingFee = size.mul(cumulativeFundingRate.sub(entryFundingRate)).div(FUNDING_RATE_PRECISION);\n positionFee = positionFee.add(fundingFee);\n }\n\n const liquidationPriceForFees = getLiquidationPriceFromDelta({\n liquidationAmount: positionFee,\n size: nextSize,\n collateral: remainingCollateral,\n averagePrice,\n isLong,\n });\n\n const liquidationPriceForMaxLeverage = getLiquidationPriceFromDelta({\n liquidationAmount: nextSize.mul(BASIS_POINTS_DIVISOR).div(MAX_LEVERAGE),\n size: nextSize,\n collateral: remainingCollateral,\n averagePrice,\n isLong,\n });\n\n if (!liquidationPriceForFees) {\n return liquidationPriceForMaxLeverage;\n }\n if (!liquidationPriceForMaxLeverage) {\n return liquidationPriceForFees;\n }\n\n if (isLong) {\n // return the higher price\n return liquidationPriceForFees.gt(liquidationPriceForMaxLeverage)\n ? liquidationPriceForFees\n : liquidationPriceForMaxLeverage;\n }\n\n // return the lower price\n return liquidationPriceForFees.lt(liquidationPriceForMaxLeverage)\n ? liquidationPriceForFees\n : liquidationPriceForMaxLeverage;\n}\n\nexport function getPositionKey(account, collateralTokenAddress, indexTokenAddress, isLong, nativeTokenAddress) {\n const tokenAddress0 = collateralTokenAddress === AddressZero ? nativeTokenAddress : collateralTokenAddress;\n const tokenAddress1 = indexTokenAddress === AddressZero ? nativeTokenAddress : indexTokenAddress;\n return account + \":\" + tokenAddress0 + \":\" + tokenAddress1 + \":\" + isLong;\n}\n\nexport function getPositionContractKey(account, collateralToken, indexToken, isLong) {\n return ethers.utils.solidityKeccak256(\n [\"address\", \"address\", \"address\", \"bool\"],\n [account, collateralToken, indexToken, isLong]\n );\n}\n\nexport function getSwapFeeBasisPoints(isStable) {\n return isStable ? STABLE_SWAP_FEE_BASIS_POINTS : SWAP_FEE_BASIS_POINTS;\n}\n\nexport function shortenAddress(address, length) {\n if (!length) {\n return \"\";\n }\n if (!address) {\n return address;\n }\n if (address.length < 10) {\n return address;\n }\n let left = Math.floor((length - 3) / 2) + 1;\n return address.substring(0, left) + \"...\" + address.substring(address.length - (length - (left + 3)), address.length);\n}\n\nexport function useENS(address) {\n const [ensName, setENSName] = useState();\n\n useEffect(() => {\n async function resolveENS() {\n if (address) {\n const provider = new ethers.providers.JsonRpcProvider(\"https://rpc.ankr.com/eth\");\n const name = await provider.lookupAddress(address.toLowerCase());\n if (name) setENSName(name);\n }\n }\n resolveENS();\n }, [address]);\n\n return { ensName };\n}\n\nfunction _parseOrdersData(ordersData, account, indexes, extractor, uintPropsLength, addressPropsLength) {\n if (!ordersData || ordersData.length === 0) {\n return [];\n }\n const [uintProps, addressProps] = ordersData;\n const count = uintProps.length / uintPropsLength;\n\n const orders = [];\n for (let i = 0; i < count; i++) {\n const sliced = addressProps\n .slice(addressPropsLength * i, addressPropsLength * (i + 1))\n .concat(uintProps.slice(uintPropsLength * i, uintPropsLength * (i + 1)));\n\n if (sliced[0] === AddressZero && sliced[1] === AddressZero) {\n continue;\n }\n\n const order = extractor(sliced);\n order.index = indexes[i];\n order.account = account;\n orders.push(order);\n }\n\n return orders;\n}\n\nfunction parseDecreaseOrdersData(chainId, decreaseOrdersData, account, indexes) {\n const extractor = (sliced) => {\n const isLong = sliced[4].toString() === \"1\";\n return {\n collateralToken: sliced[0],\n indexToken: sliced[1],\n collateralDelta: sliced[2],\n sizeDelta: sliced[3],\n isLong,\n triggerPrice: sliced[5],\n triggerAboveThreshold: sliced[6].toString() === \"1\",\n type: DECREASE,\n };\n };\n return _parseOrdersData(decreaseOrdersData, account, indexes, extractor, 5, 2).filter((order) => {\n return isValidToken(chainId, order.collateralToken) && isValidToken(chainId, order.indexToken);\n });\n}\n\nfunction parseIncreaseOrdersData(chainId, increaseOrdersData, account, indexes) {\n const extractor = (sliced) => {\n const isLong = sliced[5].toString() === \"1\";\n return {\n purchaseToken: sliced[0],\n collateralToken: sliced[1],\n indexToken: sliced[2],\n purchaseTokenAmount: sliced[3],\n sizeDelta: sliced[4],\n isLong,\n triggerPrice: sliced[6],\n triggerAboveThreshold: sliced[7].toString() === \"1\",\n type: INCREASE,\n };\n };\n return _parseOrdersData(increaseOrdersData, account, indexes, extractor, 5, 3).filter((order) => {\n return (\n isValidToken(chainId, order.purchaseToken) &&\n isValidToken(chainId, order.collateralToken) &&\n isValidToken(chainId, order.indexToken)\n );\n });\n}\n\nfunction parseSwapOrdersData(chainId, swapOrdersData, account, indexes) {\n if (!swapOrdersData || !swapOrdersData.length) {\n return [];\n }\n\n const extractor = (sliced) => {\n const triggerAboveThreshold = sliced[6].toString() === \"1\";\n const shouldUnwrap = sliced[7].toString() === \"1\";\n\n return {\n path: [sliced[0], sliced[1], sliced[2]].filter((address) => address !== AddressZero),\n amountIn: sliced[3],\n minOut: sliced[4],\n triggerRatio: sliced[5],\n triggerAboveThreshold,\n type: SWAP,\n shouldUnwrap,\n };\n };\n return _parseOrdersData(swapOrdersData, account, indexes, extractor, 5, 3).filter((order) => {\n return order.path.every((token) => isValidToken(chainId, token));\n });\n}\n\nexport function getOrderKey(order) {\n return `${order.type}-${order.account}-${order.index}`;\n}\n\nexport function useAccountOrders(flagOrdersEnabled, overrideAccount) {\n const { library, account: connectedAccount } = useWeb3React();\n const active = true; // this is used in Actions.js so set active to always be true\n const account = overrideAccount || connectedAccount;\n\n const { chainId } = useChainId();\n const shouldRequest = active && account && flagOrdersEnabled;\n\n const orderBookAddress = getContract(chainId, \"OrderBook\");\n const orderBookReaderAddress = getContract(chainId, \"OrderBookReader\");\n const key = shouldRequest ? [active, chainId, orderBookAddress, account] : false;\n const {\n data: orders = [],\n mutate: updateOrders,\n error: ordersError,\n } = useSWR(key, {\n dedupingInterval: 5000,\n fetcher: async (active, chainId, orderBookAddress, account) => {\n const provider = getProvider(library, chainId);\n const orderBookContract = new ethers.Contract(orderBookAddress, OrderBook.abi, provider);\n const orderBookReaderContract = new ethers.Contract(orderBookReaderAddress, OrderBookReader.abi, provider);\n\n const fetchIndexesFromServer = () => {\n const ordersIndexesUrl = `${getServerBaseUrl(chainId)}/orders_indices?account=${account}`;\n return fetch(ordersIndexesUrl)\n .then(async (res) => {\n const json = await res.json();\n const ret = {};\n for (const key of Object.keys(json)) {\n ret[key.toLowerCase()] = json[key].map((val) => parseInt(val.value)).sort((a, b) => a - b);\n }\n\n return ret;\n })\n .catch(() => ({ swap: [], increase: [], decrease: [] }));\n };\n\n const fetchLastIndex = async (type) => {\n const method = type.toLowerCase() + \"OrdersIndex\";\n return await orderBookContract[method](account).then((res) => bigNumberify(res._hex).toNumber());\n };\n\n const fetchLastIndexes = async () => {\n const [swap, increase, decrease] = await Promise.all([\n fetchLastIndex(\"swap\"),\n fetchLastIndex(\"increase\"),\n fetchLastIndex(\"decrease\"),\n ]);\n\n return { swap, increase, decrease };\n };\n\n const getRange = (to, from) => {\n const LIMIT = 10;\n const _indexes = [];\n from = from || Math.max(to - LIMIT, 0);\n for (let i = to - 1; i >= from; i--) {\n _indexes.push(i);\n }\n return _indexes;\n };\n\n const getIndexes = (knownIndexes, lastIndex) => {\n if (knownIndexes.length === 0) {\n return getRange(lastIndex);\n }\n return [\n ...knownIndexes,\n ...getRange(lastIndex, knownIndexes[knownIndexes.length - 1] + 1).sort((a, b) => b - a),\n ];\n };\n\n const getOrders = async (method, knownIndexes, lastIndex, parseFunc) => {\n const indexes = getIndexes(knownIndexes, lastIndex);\n const ordersData = await orderBookReaderContract[method](orderBookAddress, account, indexes);\n const orders = parseFunc(chainId, ordersData, account, indexes);\n\n return orders;\n };\n\n try {\n const [serverIndexes, lastIndexes] = await Promise.all([fetchIndexesFromServer(), fetchLastIndexes()]);\n const [swapOrders = [], increaseOrders = [], decreaseOrders = []] = await Promise.all([\n getOrders(\"getSwapOrders\", serverIndexes.swap, lastIndexes.swap, parseSwapOrdersData),\n getOrders(\"getIncreaseOrders\", serverIndexes.increase, lastIndexes.increase, parseIncreaseOrdersData),\n getOrders(\"getDecreaseOrders\", serverIndexes.decrease, lastIndexes.decrease, parseDecreaseOrdersData),\n ]);\n return [...swapOrders, ...increaseOrders, ...decreaseOrders];\n } catch (ex) {\n console.error(ex);\n }\n },\n });\n\n return [orders, updateOrders, ordersError];\n}\n\nexport function getAccountUrl(chainId, account) {\n if (!account) {\n return getExplorerUrl(chainId);\n }\n return getExplorerUrl(chainId) + \"address/\" + account;\n}\n\nexport function isMobileDevice(navigator) {\n return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);\n}\n\nexport const CHART_PERIODS = {\n \"5m\": 60 * 5,\n \"15m\": 60 * 15,\n \"1h\": 60 * 60,\n \"4h\": 60 * 60 * 4,\n \"1d\": 60 * 60 * 24,\n};\n\nexport function getTotalVolumeSum(volumes) {\n if (!volumes || volumes.length === 0) {\n return bigNumberify(0);\n }\n\n let volume = bigNumberify(0);\n\n for (let i = 0; i < volumes.length; i++) {\n volume = volume.add(volumes[i].data.volume);\n }\n\n return volume;\n}\n\nexport function getBalanceAndSupplyData(balances) {\n if (!balances || balances.length === 0) {\n return {};\n }\n\n const keys = [\"fxdx\", \"esFxdx\", \"flp\", \"stakedFxdxTracker\"];\n const balanceData = {};\n const supplyData = {};\n const propsLength = 2;\n\n for (let i = 0; i < keys.length; i++) {\n const key = keys[i];\n balanceData[key] = balances[i * propsLength];\n supplyData[key] = balances[i * propsLength + 1];\n }\n\n return { balanceData, supplyData };\n}\n\nexport function getDepositBalanceData(depositBalances) {\n if (!depositBalances || depositBalances.length === 0) {\n return;\n }\n\n const keys = [\n \"fxdxInStakedFxdx\",\n \"esFxdxInStakedFxdx\",\n \"stakedFxdxInBonusFxdx\",\n \"bonusFxdxInFeeFxdx\",\n \"bnFxdxInFeeFxdx\",\n \"flpInStakedFlp\",\n ];\n const data = {};\n\n for (let i = 0; i < keys.length; i++) {\n const key = keys[i];\n data[key] = depositBalances[i];\n }\n\n return data;\n}\n\nexport function getVestingData(vestingInfo) {\n if (!vestingInfo || vestingInfo.length === 0) {\n return;\n }\n\n const keys = [\"fxdxVester\", \"flpVester\"];\n const data = {};\n const propsLength = 7;\n\n for (let i = 0; i < keys.length; i++) {\n const key = keys[i];\n data[key] = {\n pairAmount: vestingInfo[i * propsLength],\n vestedAmount: vestingInfo[i * propsLength + 1],\n escrowedBalance: vestingInfo[i * propsLength + 2],\n claimedAmounts: vestingInfo[i * propsLength + 3],\n claimable: vestingInfo[i * propsLength + 4],\n maxVestableAmount: vestingInfo[i * propsLength + 5],\n averageStakedAmount: vestingInfo[i * propsLength + 6],\n };\n\n data[key + \"PairAmount\"] = data[key].pairAmount;\n data[key + \"VestedAmount\"] = data[key].vestedAmount;\n data[key + \"EscrowedBalance\"] = data[key].escrowedBalance;\n data[key + \"ClaimSum\"] = data[key].claimedAmounts.add(data[key].claimable);\n data[key + \"Claimable\"] = data[key].claimable;\n data[key + \"MaxVestableAmount\"] = data[key].maxVestableAmount;\n data[key + \"AverageStakedAmount\"] = data[key].averageStakedAmount;\n }\n\n return data;\n}\n\nexport function getStakingData(stakingInfo) {\n if (!stakingInfo || stakingInfo.length === 0) {\n return;\n }\n\n const keys = [\"stakedFxdxTracker\", \"bonusFxdxTracker\", \"feeFxdxTracker\", \"stakedFlpTracker\", \"feeFlpTracker\"];\n const data = {};\n const propsLength = 5;\n\n for (let i = 0; i < keys.length; i++) {\n const key = keys[i];\n data[key] = {\n claimable: stakingInfo[i * propsLength],\n tokensPerInterval: stakingInfo[i * propsLength + 1],\n averageStakedAmounts: stakingInfo[i * propsLength + 2],\n cumulativeRewards: stakingInfo[i * propsLength + 3],\n totalSupply: stakingInfo[i * propsLength + 4],\n };\n }\n\n return data;\n}\n\nexport function getProcessedData(\n balanceData,\n supplyData,\n depositBalanceData,\n stakingData,\n vestingData,\n aum,\n nativeTokenPrice,\n stakedFxdxSupply,\n fxdxPrice,\n fxdxSupply\n) {\n if (\n !balanceData ||\n !supplyData ||\n !depositBalanceData ||\n !stakingData ||\n !vestingData ||\n !aum ||\n !nativeTokenPrice ||\n !stakedFxdxSupply ||\n !fxdxPrice ||\n !fxdxSupply\n ) {\n return {};\n }\n\n const data = {};\n\n data.fxdxBalance = balanceData.fxdx;\n data.fxdxBalanceUsd = balanceData.fxdx.mul(fxdxPrice).div(expandDecimals(1, 18));\n\n data.fxdxSupply = bigNumberify(fxdxSupply);\n\n data.fxdxSupplyUsd = data.fxdxSupply.mul(fxdxPrice).div(expandDecimals(1, 18));\n data.stakedFxdxSupply = stakedFxdxSupply;\n data.stakedFxdxSupplyUsd = stakedFxdxSupply.mul(fxdxPrice).div(expandDecimals(1, 18));\n data.fxdxInStakedFxdx = depositBalanceData.fxdxInStakedFxdx;\n data.fxdxInStakedFxdxUsd = depositBalanceData.fxdxInStakedFxdx.mul(fxdxPrice).div(expandDecimals(1, 18));\n\n data.esFxdxBalance = balanceData.esFxdx;\n data.esFxdxBalanceUsd = balanceData.esFxdx.mul(fxdxPrice).div(expandDecimals(1, 18));\n\n data.stakedFxdxTrackerSupply = supplyData.stakedFxdxTracker;\n data.stakedFxdxTrackerSupplyUsd = supplyData.stakedFxdxTracker.mul(fxdxPrice).div(expandDecimals(1, 18));\n data.stakedEsFxdxSupply = data.stakedFxdxTrackerSupply.sub(data.stakedFxdxSupply);\n data.stakedEsFxdxSupplyUsd = data.stakedEsFxdxSupply.mul(fxdxPrice).div(expandDecimals(1, 18));\n\n data.esFxdxInStakedFxdx = depositBalanceData.esFxdxInStakedFxdx;\n data.esFxdxInStakedFxdxUsd = depositBalanceData.esFxdxInStakedFxdx.mul(fxdxPrice).div(expandDecimals(1, 18));\n\n data.bnFxdxInFeeFxdx = depositBalanceData.bnFxdxInFeeFxdx;\n data.bonusFxdxInFeeFxdx = depositBalanceData.bonusFxdxInFeeFxdx;\n data.feeFxdxSupply = stakingData.feeFxdxTracker.totalSupply;\n data.feeFxdxSupplyUsd = data.feeFxdxSupply.mul(fxdxPrice).div(expandDecimals(1, 18));\n\n data.stakedFxdxTrackerRewards = stakingData.stakedFxdxTracker.claimable;\n data.stakedFxdxTrackerRewardsUsd = stakingData.stakedFxdxTracker.claimable.mul(fxdxPrice).div(expandDecimals(1, 18));\n\n data.bonusFxdxTrackerRewards = stakingData.bonusFxdxTracker.claimable;\n\n data.feeFxdxTrackerRewards = stakingData.feeFxdxTracker.claimable;\n data.feeFxdxTrackerRewardsUsd = stakingData.feeFxdxTracker.claimable.mul(nativeTokenPrice).div(expandDecimals(1, 18));\n\n data.boostBasisPoints = bigNumberify(0);\n if (data && data.bnFxdxInFeeFxdx && data.bonusFxdxInFeeFxdx && data.bonusFxdxInFeeFxdx.gt(0)) {\n data.boostBasisPoints = data.bnFxdxInFeeFxdx.mul(BASIS_POINTS_DIVISOR).div(data.bonusFxdxInFeeFxdx);\n }\n\n data.stakedFxdxTrackerAnnualRewardsUsd = stakingData.stakedFxdxTracker.tokensPerInterval\n .mul(SECONDS_PER_YEAR)\n .mul(fxdxPrice)\n .div(expandDecimals(1, 18));\n data.fxdxAprForEsFxdx =\n data.stakedFxdxTrackerSupplyUsd && data.stakedFxdxTrackerSupplyUsd.gt(0)\n ? data.stakedFxdxTrackerAnnualRewardsUsd.mul(BASIS_POINTS_DIVISOR).div(data.stakedFxdxTrackerSupplyUsd)\n : bigNumberify(0);\n data.feeFxdxTrackerAnnualRewardsUsd = stakingData.feeFxdxTracker.tokensPerInterval\n .mul(SECONDS_PER_YEAR)\n .mul(nativeTokenPrice)\n .div(expandDecimals(1, 18));\n data.fxdxAprForNativeToken =\n data.feeFxdxSupplyUsd && data.feeFxdxSupplyUsd.gt(0)\n ? data.feeFxdxTrackerAnnualRewardsUsd.mul(BASIS_POINTS_DIVISOR).div(data.feeFxdxSupplyUsd)\n : bigNumberify(0);\n data.fxdxBoostAprForNativeToken = data.fxdxAprForNativeToken.mul(data.boostBasisPoints).div(BASIS_POINTS_DIVISOR);\n data.fxdxAprTotal = data.fxdxAprForNativeToken.add(data.fxdxAprForEsFxdx);\n data.fxdxAprTotalWithBoost = data.fxdxAprForNativeToken.add(data.fxdxBoostAprForNativeToken).add(data.fxdxAprForEsFxdx);\n data.fxdxAprForNativeTokenWithBoost = data.fxdxAprForNativeToken.add(data.fxdxBoostAprForNativeToken);\n\n data.totalFxdxRewardsUsd = data.stakedFxdxTrackerRewardsUsd.add(data.feeFxdxTrackerRewardsUsd);\n\n data.flpSupply = supplyData.flp;\n data.flpPrice =\n data.flpSupply && data.flpSupply.gt(0)\n ? aum.mul(expandDecimals(1, FLP_DECIMALS)).div(data.flpSupply)\n : bigNumberify(0);\n\n data.flpSupplyUsd = supplyData.flp.mul(data.flpPrice).div(expandDecimals(1, 18));\n\n data.flpBalance = depositBalanceData.flpInStakedFlp;\n data.flpBalanceUsd = depositBalanceData.flpInStakedFlp.mul(data.flpPrice).div(expandDecimals(1, FLP_DECIMALS));\n\n data.stakedFlpTrackerRewards = stakingData.stakedFlpTracker.claimable;\n data.stakedFlpTrackerRewardsUsd = stakingData.stakedFlpTracker.claimable.mul(fxdxPrice).div(expandDecimals(1, 18));\n\n data.feeFlpTrackerRewards = stakingData.feeFlpTracker.claimable;\n data.feeFlpTrackerRewardsUsd = stakingData.feeFlpTracker.claimable.mul(nativeTokenPrice).div(expandDecimals(1, 18));\n\n data.stakedFlpTrackerAnnualRewardsUsd = stakingData.stakedFlpTracker.tokensPerInterval\n .mul(SECONDS_PER_YEAR)\n .mul(fxdxPrice)\n .div(expandDecimals(1, 18));\n data.flpAprForEsFxdx =\n data.flpSupplyUsd && data.flpSupplyUsd.gt(0)\n ? data.stakedFlpTrackerAnnualRewardsUsd.mul(BASIS_POINTS_DIVISOR).div(data.flpSupplyUsd)\n : bigNumberify(0);\n data.feeFlpTrackerAnnualRewardsUsd = stakingData.feeFlpTracker.tokensPerInterval\n .mul(SECONDS_PER_YEAR)\n .mul(nativeTokenPrice)\n .div(expandDecimals(1, 18));\n data.flpAprForNativeToken =\n data.flpSupplyUsd && data.flpSupplyUsd.gt(0)\n ? data.feeFlpTrackerAnnualRewardsUsd.mul(BASIS_POINTS_DIVISOR).div(data.flpSupplyUsd)\n : bigNumberify(0);\n data.flpAprTotal = data.flpAprForNativeToken.add(data.flpAprForEsFxdx);\n\n data.totalFlpRewardsUsd = data.stakedFlpTrackerRewardsUsd.add(data.feeFlpTrackerRewardsUsd);\n\n data.totalEsFxdxRewards = data.stakedFxdxTrackerRewards.add(data.stakedFlpTrackerRewards);\n data.totalEsFxdxRewardsUsd = data.stakedFxdxTrackerRewardsUsd.add(data.stakedFlpTrackerRewardsUsd);\n\n data.fxdxVesterRewards = vestingData.fxdxVester.claimable;\n data.flpVesterRewards = vestingData.flpVester.claimable;\n data.totalVesterRewards = data.fxdxVesterRewards.add(data.flpVesterRewards);\n data.totalVesterRewardsUsd = data.totalVesterRewards.mul(fxdxPrice).div(expandDecimals(1, 18));\n\n data.totalNativeTokenRewards = data.feeFxdxTrackerRewards.add(data.feeFlpTrackerRewards);\n data.totalNativeTokenRewardsUsd = data.feeFxdxTrackerRewardsUsd.add(data.feeFlpTrackerRewardsUsd);\n\n data.totalRewardsUsd = data.totalEsFxdxRewardsUsd.add(data.totalNativeTokenRewardsUsd).add(data.totalVesterRewardsUsd);\n\n return data;\n}\n\nexport function getPageTitle(data) {\n return `${data} | Decentralized\n Perpetual Exchange | FXDX`;\n}\n\nexport function isHashZero(value) {\n return value === ethers.constants.HashZero;\n}\nexport function isAddressZero(value) {\n return value === ethers.constants.AddressZero;\n}\n\nexport function isDevelopment() {\n return !window.location.host?.includes(\"fxdx.exchange\") && !window.location.host?.includes(\"ipfs.io\");\n}\n\nexport function isLocal() {\n return window.location.host?.includes(\"localhost\");\n}\n\nexport function getHomeUrl() {\n if (isLocal()) {\n return \"http://localhost:3010\";\n }\n\n return \"https://fxdx.exchange\";\n}\n\nexport function getAppBaseUrl() {\n if (isLocal()) {\n return \"http://localhost:3011/#\";\n }\n\n return IS_TESTNET ? \"https://test.fxdx.exchange\" : \"https://app.fxdx.exchange/\";\n}\n\nexport function getRootShareApiUrl() {\n if (isLocal()) {\n return \"https://fxdxs.vercel.app\";\n }\n\n return \"https://share.fxdx.exchange\";\n}\n\nexport function getTradePageUrl() {\n if (isLocal()) {\n return \"http://localhost:3011/trade\";\n }\n\n return IS_TESTNET ? \"https://test.fxdx.exchange/trade\" : \"https://app.fxdx.exchange/trade\";\n}\n\nexport function importImage(name) {\n let tokenImage = null;\n try {\n tokenImage = require(\"img/\" + name);\n } catch (error) {\n console.error(error);\n }\n return tokenImage.default;\n}\n\nexport function getTwitterIntentURL(text, url = \"\", hashtag = \"\") {\n let finalURL = \"https://twitter.com/intent/tweet?text=\";\n if (text.length > 0) {\n finalURL += Array.isArray(text) ? text.map((t) => encodeURIComponent(t)).join(\"%0a%0a\") : encodeURIComponent(text);\n if (hashtag.length > 0) {\n finalURL += \"&hashtags=\" + encodeURIComponent(hashtag.replace(/#/g, \"\"));\n }\n if (url.length > 0) {\n finalURL += \"&url=\" + encodeURIComponent(url);\n }\n }\n return finalURL;\n}\n\nexport function getPositionForOrder(account, order, positionsMap) {\n const key = getPositionKey(account, order.collateralToken, order.indexToken, order.isLong);\n const position = positionsMap[key];\n return position && position.size && position.size.gt(0) ? position : null;\n}\n\nexport function getOrderError(account, order, positionsMap, position) {\n if (order.type !== DECREASE) {\n return;\n }\n\n const positionForOrder = position ? position : getPositionForOrder(account, order, positionsMap);\n\n if (!positionForOrder) {\n return t`No open position, order cannot be executed unless a position is opened`;\n }\n if (positionForOrder.size.lt(order.sizeDelta)) {\n return t`Order size is bigger than position, will only be executable if position increases`;\n }\n\n if (positionForOrder.size.gt(order.sizeDelta)) {\n if (positionForOrder.size.sub(order.sizeDelta).lt(positionForOrder.collateral.sub(order.collateralDelta))) {\n return t`Order cannot be executed as it would reduce the position's leverage below 1`;\n }\n if (positionForOrder.size.sub(order.sizeDelta).lt(expandDecimals(5, USD_DECIMALS))) {\n return t`Order cannot be executed as the remaining position would be smaller than $5.00`;\n }\n }\n}\n\nexport function arrayURLFetcher(...urlArr) {\n const fetcher = (url) => fetch(url).then((res) => res.json());\n return Promise.all(urlArr.map(fetcher));\n}\n\nexport function shouldShowRedirectModal(timestamp) {\n const thirtyDays = 1000 * 60 * 60 * 24 * 30;\n const expiryTime = timestamp + thirtyDays;\n return !isValidTimestamp(timestamp) || Date.now() > expiryTime;\n}\n","import React from \"react\";\nimport cx from \"classnames\";\nimport { t } from \"@lingui/macro\";\nimport \"./Footer.css\";\n// import logoImg from \"img/ic_fxdx_footer.svg\";\nimport twitterIcon from \"img/ic_twitter.svg\";\nimport discordIcon from \"img/ic_discord.svg\";\nimport telegramIcon from \"img/ic_telegram.svg\";\nimport githubIcon from \"img/ic_github.svg\";\nimport mediumIcon from \"img/ic_medium.svg\";\nimport { NavLink } from \"react-router-dom\";\nimport { isHomeSite, getAppBaseUrl, shouldShowRedirectModal } from \"lib/legacy\";\n\nconst footerLinks = {\n home: [\n { text: t`Terms and Conditions`, link: \"/terms-and-conditions\" },\n { text: t`Referral Terms`, link: \"/referral-terms\" },\n { text: t`Media Kit`, link: \"https://fxdx.gitbook.io/fxdx/media-kit\", external: true },\n // { text: \"Jobs\", link: \"/jobs\", isAppLink: true },\n ],\n app: [\n { text: t`Media Kit`, link: \"https://fxdx.gitbook.io/fxdx/media-kit\", external: true },\n // { text: \"Jobs\", link: \"/jobs\" },\n ],\n};\n\nconst socialLinks = [\n { link: \"https://twitter.com/fxdxdex\", name: \"Twitter\", icon: twitterIcon },\n { link: \"https://fxdxdex.medium.com\", name: \"Medium\", icon: mediumIcon },\n { link: \"https://github.com/fxdxdex\", name: \"Github\", icon: githubIcon },\n { link: \"https://t.me/fxdxdex\", name: \"Telegram\", icon: telegramIcon },\n { link: \"https://discord.gg/duDxNgKGaX\", name: \"Discord\", icon: discordIcon },\n];\n\nexport default function Footer({ showRedirectModal, redirectPopupTimestamp }) {\n const isHome = isHomeSite();\n\n return (\n \n
\n
\n
\n );\n}\n","export const REDIRECT_POPUP_TIMESTAMP_KEY = \"redirect-popup-timestamp\";\n\nexport const IS_TOUCH = \"ontouchstart\" in window;\n\nexport const UI_VERSION = \"1.4\";\n\nexport const TRIGGER_PREFIX_ABOVE = \">\";\nexport const TRIGGER_PREFIX_BELOW = \"<\";\n","import { ApolloClient, InMemoryCache } from \"@apollo/client\";\n\nexport function createClient(uri: string) {\n return new ApolloClient({\n uri,\n cache: new InMemoryCache(),\n });\n}\n","import { ARBITRUM, AVALANCHE, GOERLI, MOONBEAM, MUMBAI } from \"./chains\";\n\nexport const SUBGRAPH_URLS = {\n [GOERLI]: {\n stats: \"https://api.thegraph.com/subgraphs/name/nuthan2x/fxdx-goerli-stats\",\n referrals: \"https://api.thegraph.com/subgraphs/name/nuthan2x/fxdx-goerli-referrals\",\n },\n \n [ARBITRUM]: {\n stats: \"https://api.thegraph.com/subgraphs/name/fxdx-io/fxdx-stats\",\n referrals: \"https://api.thegraph.com/subgraphs/name/fxdxdex/fxdx-arbitrum-referrals\",\n nissohVault: \"https://api.thegraph.com/subgraphs/name/nissoh/fxdx-vault\",\n },\n \n [AVALANCHE]: {\n stats: \"https://api.thegraph.com/subgraphs/name/fxdx-io/fxdx-avalanche-stats\",\n referrals: \"https://api.thegraph.com/subgraphs/name/fxdxdex/fxdx-avalanche-referrals\",\n },\n \n [MOONBEAM]: {\n stats: \"https://api.thegraph.com/subgraphs/name/danielsmith0630/fxdx-moonbeam-stats\",\n referrals: \"https://api.thegraph.com/subgraphs/name/danielsmith0630/fxdx-moonbeam-referrals\",\n },\n \n [MUMBAI]: {\n stats: \"https://api.thegraph.com/subgraphs/name/nuthan2x/fxdx-mumbai-stats\",\n referrals: \"https://api.thegraph.com/subgraphs/name/nuthan2x/fxdx-mumbai-referrals\",\n },\n common: {\n chainLink: \"https://api.thegraph.com/subgraphs/name/deividask/chainlink\",\n },\n};\n","import { createClient } from \"./utils\";\nimport { SUBGRAPH_URLS } from \"config/subgraph\";\nimport { ARBITRUM, ARBITRUM_TESTNET, AVALANCHE, GOERLI, MOONBEAM, MUMBAI } from \"config/chains\";\n\nexport const chainlinkClient = createClient(SUBGRAPH_URLS.common.chainLink);\n\nexport const goerliGraphClient = createClient(SUBGRAPH_URLS[GOERLI].stats);\nexport const goerliReferralsGraphClient = createClient(SUBGRAPH_URLS[GOERLI].referrals);\n\nexport const arbitrumGraphClient = createClient(SUBGRAPH_URLS[ARBITRUM].stats);\nexport const arbitrumReferralsGraphClient = createClient(SUBGRAPH_URLS[ARBITRUM].referrals);\nexport const nissohGraphClient = createClient(SUBGRAPH_URLS[ARBITRUM].nissohVault);\n\nexport const avalancheGraphClient = createClient(SUBGRAPH_URLS[AVALANCHE].stats);\nexport const avalancheReferralsGraphClient = createClient(SUBGRAPH_URLS[AVALANCHE].referrals);\n\nexport const moonbeamGraphClient = createClient(SUBGRAPH_URLS[MOONBEAM].stats);\nexport const moonbeamReferralsGraphClient = createClient(SUBGRAPH_URLS[MOONBEAM].referrals);\n\nexport const mumbaiGraphClient = createClient(SUBGRAPH_URLS[GOERLI].stats);\nexport const mumbaiReferralsGraphClient = createClient(SUBGRAPH_URLS[GOERLI].referrals);\n\nexport function getFxdxGraphClient(chainId: number) {\n if (chainId === GOERLI) {\n return goerliGraphClient;\n } else if (chainId === ARBITRUM) {\n return arbitrumGraphClient;\n } else if (chainId === AVALANCHE) {\n return avalancheGraphClient;\n } else if (chainId === ARBITRUM_TESTNET) {\n return null;\n } else if (chainId === MOONBEAM) {\n return moonbeamGraphClient;\n } else if (chainId === MUMBAI) {\n return mumbaiGraphClient;\n }\n\n throw new Error(`Unsupported chain ${chainId}`);\n}\n","export function sleep(ms) {\n return new Promise((resolve) => resolve(), ms);\n}\n","import { useMemo } from \"react\";\nimport { gql } from \"@apollo/client\";\nimport useSWR from \"swr\";\nimport { ethers } from \"ethers\";\n\nimport { CHART_PERIODS } from \"lib/legacy\";\nimport { FXDX_STATS_API_URL } from \"config/backend\";\nimport { chainlinkClient } from \"lib/subgraph/clients\";\nimport { sleep } from \"lib/sleep\";\nimport { formatPrice } from \"lib/numbers\";\n\nconst BigNumber = ethers.BigNumber;\n\n// Ethereum network, Chainlink Aggregator contracts\nconst FEED_ID_MAP = {\n BTC_USD: \"0xae74faa92cb67a95ebcab07358bc222e33a34da7\",\n ETH_USD: \"0x37bc7498f4ff12c19678ee8fe19d713b87f6a9e6\",\n BNB_USD: \"0xc45ebd0f901ba6b2b8c7e70b717778f055ef5e6d\",\n LINK_USD: \"0xdfd03bfc3465107ce570a0397b247f546a42d0fa\",\n UNI_USD: \"0x68577f915131087199fe48913d8b416b3984fd38\",\n SUSHI_USD: \"0x7213536a36094cd8a768a5e45203ec286cba2d74\",\n AVAX_USD: \"0x0fc3657899693648bba4dbd2d8b33b82e875105d\",\n AAVE_USD: \"0xe3f0dede4b499c07e12475087ab1a084b5f93bc0\",\n YFI_USD: \"0x8a4d74003870064d41d4f84940550911fbfccf04\",\n SPELL_USD: \"0x8640b23468815902e011948f3ab173e1e83f9879\",\n};\nconst timezoneOffset = -new Date().getTimezoneOffset() * 60;\n\nfunction fillGaps(prices, periodSeconds) {\n if (prices.length < 2) {\n return prices;\n }\n\n const newPrices = [prices[0]];\n let prevTime = prices[0].time;\n for (let i = 1; i < prices.length; i++) {\n const { time, open } = prices[i];\n if (prevTime) {\n let j = (time - prevTime) / periodSeconds - 1;\n while (j > 0) {\n newPrices.push({\n time: time - j * periodSeconds,\n open,\n close: open,\n high: open * 1.0003,\n low: open * 0.9996,\n });\n j--;\n }\n }\n\n prevTime = time;\n newPrices.push(prices[i]);\n }\n\n return newPrices;\n}\n\nasync function getChartPricesFromStats(chainId, symbol, period) {\n if ([\"WBTC\", \"WETH\", \"WAVAX\", \"WGLMR\"].includes(symbol)) {\n symbol = symbol.substr(1);\n } else if ([\"BTC.b\", \"WBTC(M)\", \"WBTC(W)\"].includes(symbol)) {\n symbol = \"BTC\";\n }\n\n const timeDiff = CHART_PERIODS[period] * 3000;\n const from = Math.floor(Date.now() / 1000 - timeDiff);\n const url = `${FXDX_STATS_API_URL}/candles/${symbol}?preferableChainId=${chainId}&period=${period}&from=${from}&preferableSource=fast`;\n\n const TIMEOUT = 5000;\n const res = await new Promise(async (resolve, reject) => {\n let done = false;\n setTimeout(() => {\n done = true;\n reject(new Error(`request timeout ${url}`));\n }, TIMEOUT);\n\n let lastEx;\n for (let i = 0; i < 3; i++) {\n if (done) return;\n try {\n const res = await fetch(url);\n resolve(res);\n return;\n } catch (ex) {\n await sleep(300);\n lastEx = ex;\n }\n }\n reject(lastEx);\n });\n if (!res.ok) {\n throw new Error(`request failed ${res.status} ${res.statusText}`);\n }\n const json = await res.json();\n let prices = json?.prices;\n if (!prices || prices.length < 10) {\n throw new Error(`not enough prices data: ${prices?.length}`);\n }\n\n const OBSOLETE_THRESHOLD = Date.now() / 1000 - 60 * 30; // 30 min ago\n const updatedAt = json?.updatedAt || 0;\n if (updatedAt < OBSOLETE_THRESHOLD) {\n throw new Error(\n \"chart data is obsolete, last price record at \" +\n new Date(updatedAt * 1000).toISOString() +\n \" now: \" +\n new Date().toISOString()\n );\n }\n\n prices = prices.map(({ t, o: open, c: close, h: high, l: low }) => ({\n time: t + timezoneOffset,\n open,\n close,\n high,\n low,\n }));\n return prices;\n}\n\nfunction getCandlesFromPrices(prices, period) {\n const periodTime = CHART_PERIODS[period];\n\n if (prices.length < 2) {\n return [];\n }\n\n const candles = [];\n const first = prices[0];\n let prevTsGroup = Math.floor(first[0] / periodTime) * periodTime;\n let prevPrice = first[1];\n let o = prevPrice;\n let h = prevPrice;\n let l = prevPrice;\n let c = prevPrice;\n for (let i = 1; i < prices.length; i++) {\n const [ts, price] = prices[i];\n const tsGroup = Math.floor(ts / periodTime) * periodTime;\n if (prevTsGroup !== tsGroup) {\n candles.push({ t: prevTsGroup + timezoneOffset, o, h, l, c });\n o = c;\n h = Math.max(o, c);\n l = Math.min(o, c);\n }\n c = price;\n h = Math.max(h, price);\n l = Math.min(l, price);\n prevTsGroup = tsGroup;\n }\n\n return candles.map(({ t: time, o: open, c: close, h: high, l: low }) => ({\n time,\n open,\n close,\n high,\n low,\n }));\n}\n\nfunction getChainlinkChartPricesFromGraph(tokenSymbol, period) {\n if ([\"WBTC\", \"WETH\", \"WAVAX\"].includes(tokenSymbol)) {\n tokenSymbol = tokenSymbol.substr(1);\n }\n const marketName = tokenSymbol + \"_USD\";\n const feedId = FEED_ID_MAP[marketName];\n if (!feedId) {\n throw new Error(`undefined marketName ${marketName}`);\n }\n\n const PER_CHUNK = 1000;\n const CHUNKS_TOTAL = 6;\n const requests = [];\n for (let i = 0; i < CHUNKS_TOTAL; i++) {\n const query = gql(`{\n rounds(\n first: ${PER_CHUNK},\n skip: ${i * PER_CHUNK},\n orderBy: unixTimestamp,\n orderDirection: desc,\n where: {feed: \"${feedId}\"}\n ) {\n unixTimestamp,\n value\n }\n }`);\n requests.push(chainlinkClient.query({ query }));\n }\n\n return Promise.all(requests)\n .then((chunks) => {\n let prices = [];\n const uniqTs = new Set();\n chunks.forEach((chunk) => {\n chunk.data.rounds.forEach((item) => {\n if (uniqTs.has(item.unixTimestamp)) {\n return;\n }\n\n uniqTs.add(item.unixTimestamp);\n prices.push([item.unixTimestamp, Number(item.value) / 1e8]);\n });\n });\n\n prices.sort(([timeA], [timeB]) => timeA - timeB);\n prices = getCandlesFromPrices(prices, period);\n return prices;\n })\n .catch((err) => {\n console.error(err);\n });\n}\n\nexport function useChartPrices(chainId, symbol, isStable, period, currentAveragePrice) {\n const swrKey = !isStable && symbol ? [\"getChartCandles\", chainId, symbol, period] : null;\n let { data: prices, mutate: updatePrices } = useSWR(swrKey, {\n fetcher: async (...args) => {\n try {\n return await getChartPricesFromStats(chainId, symbol, period);\n } catch (ex) {\n console.warn(ex);\n console.warn(\"Switching to graph chainlink data\");\n try {\n return await getChainlinkChartPricesFromGraph(symbol, period);\n } catch (ex2) {\n console.warn(\"getChainlinkChartPricesFromGraph failed\");\n console.warn(ex2);\n return [];\n }\n }\n },\n dedupingInterval: 60000,\n focusThrottleInterval: 60000 * 10,\n });\n\n const currentAveragePriceString = currentAveragePrice && currentAveragePrice.toString();\n const retPrices = useMemo(() => {\n if (isStable) {\n return getStablePriceData(period);\n }\n\n if (!prices) {\n return [];\n }\n\n let _prices = [...prices];\n if (currentAveragePriceString && prices.length) {\n _prices = appendCurrentAveragePrice(_prices, BigNumber.from(currentAveragePriceString), period);\n }\n\n return fillGaps(_prices, CHART_PERIODS[period]);\n }, [prices, isStable, currentAveragePriceString, period]);\n\n return [retPrices, updatePrices];\n}\n\nfunction appendCurrentAveragePrice(prices, currentAveragePrice, period) {\n const periodSeconds = CHART_PERIODS[period];\n const currentCandleTime = Math.floor(Date.now() / 1000 / periodSeconds) * periodSeconds + timezoneOffset;\n const last = prices[prices.length - 1];\n const averagePriceValue = parseFloat(formatPrice(currentAveragePrice));\n if (currentCandleTime === last.time) {\n last.close = averagePriceValue;\n last.high = Math.max(last.high, averagePriceValue);\n last.low = Math.max(last.low, averagePriceValue);\n return prices;\n } else {\n const newCandle = {\n time: currentCandleTime,\n open: last.close,\n close: averagePriceValue,\n high: averagePriceValue,\n low: averagePriceValue,\n };\n return [...prices, newCandle];\n }\n}\n\nfunction getStablePriceData(period) {\n const periodSeconds = CHART_PERIODS[period];\n const now = Math.floor(Date.now() / 1000 / periodSeconds) * periodSeconds;\n let priceData = [];\n for (let i = 100; i > 0; i--) {\n priceData.push({\n time: now - i * periodSeconds,\n open: 1,\n close: 1,\n high: 1,\n low: 1,\n });\n }\n return priceData;\n}\n","import { ethers } from \"ethers\";\nimport { gql } from \"@apollo/client\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n// import { Token as UniToken } from \"@uniswap/sdk-core\";\n// import { Pool } from \"@uniswap/v3-sdk\";\nimport useSWR from \"swr\";\n\nimport OrderBook from \"abis/OrderBook.json\";\nimport PositionManager from \"abis/PositionManager.json\";\nimport Vault from \"abis/Vault.json\";\nimport Router from \"abis/Router.json\";\n// import UniPool from \"abis/UniPool.json\";\n// import UniswapV2 from \"abis/UniswapV2.json\";\nimport Token from \"abis/Token.json\";\nimport PositionRouter from \"abis/PositionRouter.json\";\n\nimport { getContract } from \"config/contracts\";\nimport {\n ARBITRUM,\n ARBITRUM_TESTNET,\n AVALANCHE,\n getConstant,\n getHighExecutionFee,\n GOERLI,\n MUMBAI,\n IS_TESTNET,\n MAINNET,\n MOONBEAM\n} from \"config/chains\";\nimport { DECREASE, getOrderKey, INCREASE, SWAP, USD_DECIMALS } from \"lib/legacy\";\n\nimport { groupBy } from \"lodash\";\nimport { UI_VERSION } from \"config/ui\";\nimport { getServerBaseUrl, getServerUrl } from \"config/backend\";\nimport { getFxdxGraphClient } from \"lib/subgraph/clients\";\nimport { callContract, contractFetcher } from \"lib/contracts\";\nimport { replaceNativeTokenAddress } from \"./tokens\";\nimport { getUsd } from \"./tokens/utils\";\nimport { getProvider } from \"lib/rpc\";\nimport { bigNumberify, expandDecimals } from \"lib/numbers\";\n// import { getTokenBySymbol } from \"config/tokens\";\nimport { t } from \"@lingui/macro\";\n\nexport * from \"./prices\";\n\nconst { AddressZero } = ethers.constants;\n\nexport function useAllOrdersStats(chainId) {\n const query = gql(`{\n orderStat(id: \"total\") {\n openSwap\n openIncrease\n openDecrease\n executedSwap\n executedIncrease\n executedDecrease\n cancelledSwap\n cancelledIncrease\n cancelledDecrease\n }\n }`);\n\n const [res, setRes] = useState();\n\n useEffect(() => {\n const graphClient = getFxdxGraphClient(chainId);\n if (graphClient) {\n graphClient.query({ query }).then(setRes).catch(console.warn);\n }\n }, [setRes, query, chainId]);\n\n return res ? res.data.orderStat : null;\n}\n\nexport function useUserStat(chainId) {\n const query = gql(`{\n userStat(id: \"total\") {\n id\n uniqueCount\n }\n }`);\n\n const [res, setRes] = useState();\n\n useEffect(() => {\n getFxdxGraphClient(chainId).query({ query }).then(setRes).catch(console.warn);\n }, [setRes, query, chainId]);\n\n return res ? res.data.userStat : null;\n}\n\nexport function useLiquidationsData(chainId, account) {\n const [data, setData] = useState(null);\n useEffect(() => {\n if (account) {\n const query = gql(`{\n liquidatedPositions(\n where: {account: \"${account.toLowerCase()}\"}\n first: 100\n orderBy: timestamp\n orderDirection: desc\n ) {\n key\n timestamp\n borrowFee\n loss\n collateral\n size\n markPrice\n type\n }\n }`);\n const graphClient = getFxdxGraphClient(chainId);\n if (!graphClient) {\n return;\n }\n\n graphClient\n .query({ query })\n .then((res) => {\n const _data = res.data.liquidatedPositions.map((item) => {\n return {\n ...item,\n size: bigNumberify(item.size),\n collateral: bigNumberify(item.collateral),\n markPrice: bigNumberify(item.markPrice),\n };\n });\n setData(_data);\n })\n .catch(console.warn);\n }\n }, [setData, chainId, account]);\n\n return data;\n}\n\nexport function useAllPositions(chainId, library) {\n // const count = 1000;\n // const query = gql(`{\n // aggregatedTradeOpens(\n // first: ${count}\n // ) {\n // account\n // initialPosition{\n // indexToken\n // collateralToken\n // isLong\n // sizeDelta\n // }\n // increaseList {\n // sizeDelta\n // }\n // decreaseList {\n // sizeDelta\n // }\n // }\n // }`);\n\n // const [res, setRes] = useState();\n\n // useEffect(() => {\n // nissohGraphClient.query({ query }).then(setRes).catch(console.warn);\n // }, [setRes, query]);\n\n // const key = res ? `allPositions${count}__` : false;\n // const { data: positions = [] } = useSWR(key, async () => {\n // const provider = getProvider(library, chainId);\n // const vaultAddress = getContract(chainId, \"Vault\");\n // const contract = new ethers.Contract(vaultAddress, Vault.abi, provider);\n // const ret = await Promise.all(\n // res.data.aggregatedTradeOpens.map(async (dataItem) => {\n // try {\n // const { indexToken, collateralToken, isLong } = dataItem.initialPosition;\n // const positionData = await contract.getPosition(dataItem.account, collateralToken, indexToken, isLong);\n // const position = {\n // size: bigNumberify(positionData[0]),\n // collateral: bigNumberify(positionData[1]),\n // entryFundingRate: bigNumberify(positionData[3]),\n // account: dataItem.account,\n // };\n // position.fundingFee = await contract.getFundingFee(collateralToken, position.size, position.entryFundingRate);\n // position.marginFee = position.size.div(1000);\n // position.fee = position.fundingFee.add(position.marginFee);\n\n // const THRESHOLD = 5000;\n // const collateralDiffPercent = position.fee.mul(10000).div(position.collateral);\n // position.danger = collateralDiffPercent.gt(THRESHOLD);\n\n // return position;\n // } catch (ex) {\n // console.error(ex);\n // }\n // })\n // );\n\n // return ret.filter(Boolean);\n // });\n\n // return positions;\n return [];\n}\n\nexport function useAllOrders(chainId, library) {\n const query = gql(`{\n orders(\n first: 1000,\n orderBy: createdTimestamp,\n orderDirection: desc,\n where: {status: \"open\"}\n ) {\n type\n account\n index\n status\n createdTimestamp\n }\n }`);\n\n const [res, setRes] = useState();\n\n useEffect(() => {\n getFxdxGraphClient(chainId).query({ query }).then(setRes);\n }, [setRes, query, chainId]);\n\n const key = res ? res.data.orders.map((order) => `${order.type}-${order.account}-${order.index}`) : null;\n const { data: orders = [] } = useSWR(key, () => {\n const provider = getProvider(library, chainId);\n const orderBookAddress = getContract(chainId, \"OrderBook\");\n const contract = new ethers.Contract(orderBookAddress, OrderBook.abi, provider);\n return Promise.all(\n res.data.orders.map(async (order) => {\n try {\n const type = order.type.charAt(0).toUpperCase() + order.type.substring(1);\n const method = `get${type}Order`;\n const orderFromChain = await contract[method](order.account, order.index);\n const ret = {};\n for (const [key, val] of Object.entries(orderFromChain)) {\n ret[key] = val;\n }\n if (order.type === \"swap\") {\n ret.path = [ret.path0, ret.path1, ret.path2].filter((address) => address !== AddressZero);\n }\n ret.type = type;\n ret.index = order.index;\n ret.account = order.account;\n ret.createdTimestamp = order.createdTimestamp;\n return ret;\n } catch (ex) {\n console.error(ex);\n }\n })\n );\n });\n\n return orders.filter(Boolean);\n}\n\nexport function usePositionsForOrders(chainId, library, orders) {\n const key = orders ? orders.map((order) => getOrderKey(order) + \"____\") : null;\n const { data: positions = {} } = useSWR(key, async () => {\n const provider = getProvider(library, chainId);\n const vaultAddress = getContract(chainId, \"Vault\");\n const contract = new ethers.Contract(vaultAddress, Vault.abi, provider);\n const data = await Promise.all(\n orders.map(async (order) => {\n try {\n const position = await contract.getPosition(\n order.account,\n order.collateralToken,\n order.indexToken,\n order.isLong\n );\n if (position[0].eq(0)) {\n return [null, order];\n }\n return [position, order];\n } catch (ex) {\n console.error(ex);\n }\n })\n );\n return data.reduce((memo, [position, order]) => {\n memo[getOrderKey(order)] = position;\n return memo;\n }, {});\n });\n\n return positions;\n}\n\nfunction invariant(condition, errorMsg) {\n if (!condition) {\n throw new Error(errorMsg);\n }\n}\n\nexport function useTrades(chainId, account, forSingleAccount, afterId) {\n let url =\n account && account.length > 0\n ? `${getServerBaseUrl(chainId)}/actions?account=${account}`\n : !forSingleAccount && `${getServerBaseUrl(chainId)}/actions`;\n\n if (afterId && afterId.length > 0) {\n const urlItem = new URL(url);\n urlItem.searchParams.append(\"after\", afterId);\n url = urlItem.toString();\n }\n\n const { data: trades, mutate: updateTrades } = useSWR(url && url, {\n dedupingInterval: 10000,\n fetcher: (...args) => fetch(...args).then((res) => res.json()),\n });\n\n if (trades) {\n trades.sort((item0, item1) => {\n const data0 = item0.data;\n const data1 = item1.data;\n const time0 = parseInt(data0.timestamp);\n const time1 = parseInt(data1.timestamp);\n if (time1 > time0) {\n return 1;\n }\n if (time1 < time0) {\n return -1;\n }\n\n const block0 = parseInt(data0.blockNumber);\n const block1 = parseInt(data1.blockNumber);\n\n if (isNaN(block0) && isNaN(block1)) {\n return 0;\n }\n\n if (isNaN(block0)) {\n return 1;\n }\n\n if (isNaN(block1)) {\n return -1;\n }\n\n if (block1 > block0) {\n return 1;\n }\n\n if (block1 < block0) {\n return -1;\n }\n\n return 0;\n });\n }\n\n return { trades, updateTrades };\n}\n\nexport function useMinExecutionFee(library, active, chainId, infoTokens) {\n const positionRouterAddress = getContract(chainId, \"PositionRouter\");\n const nativeTokenAddress = getContract(chainId, \"NATIVE_TOKEN\");\n\n const { data: minExecutionFee } = useSWR([active, chainId, positionRouterAddress, \"minExecutionFee\"], {\n fetcher: contractFetcher(library, PositionRouter),\n });\n\n const { data: gasPrice } = useSWR([\"gasPrice\", chainId], {\n fetcher: () => {\n return new Promise(async (resolve, reject) => {\n const provider = getProvider(library, chainId);\n if (!provider) {\n resolve(undefined);\n return;\n }\n\n try {\n const gasPrice = await provider.getGasPrice();\n resolve(gasPrice);\n } catch (e) {\n console.error(e);\n }\n });\n },\n });\n\n let multiplier;\n\n // multiplier for Ethereum is just the average gas usage\n if (chainId === MAINNET || chainId === MUMBAI) {\n multiplier = 700000;\n }\n\n // if gas prices on Arbitrum are high, the main transaction costs would come from the L2 gas usage\n // for executing positions this is around 65,000 gas\n // if gas prices on Ethereum are high, than the gas usage might be higher, this calculation doesn't deal with that\n // case yet\n if (chainId === ARBITRUM || chainId === ARBITRUM_TESTNET) {\n multiplier = 65000;\n }\n\n // multiplier for Avalanche is just the average gas usage\n if (chainId === AVALANCHE) {\n multiplier = 700000;\n }\n\n if (chainId === MOONBEAM) {\n multiplier = 700000;\n }\n\n let finalExecutionFee = minExecutionFee;\n\n if (gasPrice && minExecutionFee) {\n const estimatedExecutionFee = gasPrice.mul(multiplier);\n if (estimatedExecutionFee.gt(minExecutionFee)) {\n finalExecutionFee = estimatedExecutionFee;\n }\n }\n\n const finalExecutionFeeUSD = getUsd(finalExecutionFee, nativeTokenAddress, false, infoTokens);\n const isFeeHigh = finalExecutionFeeUSD?.gt(expandDecimals(getHighExecutionFee(chainId), USD_DECIMALS));\n const errorMessage =\n isFeeHigh &&\n `The network cost to send transactions is high at the moment, please check the \"Execution Fee\" value before proceeding.`;\n\n return {\n minExecutionFee: finalExecutionFee,\n minExecutionFeeUSD: finalExecutionFeeUSD,\n minExecutionFeeErrorMessage: errorMessage,\n };\n}\n\n// export function useStakedFxdxSupply(library, active) {\n// const fxdxAddressArb = getContract(ARBITRUM, \"FXDX\");\n// const stakedFxdxTrackerAddressArb = getContract(ARBITRUM, \"StakedFxdxTracker\");\n\n// const { data: arbData, mutate: arbMutate } = useSWR(\n// [`StakeV2:stakedFxdxSupply:${active}`, ARBITRUM, fxdxAddressArb, \"balanceOf\", stakedFxdxTrackerAddressArb],\n// {\n// fetcher: contractFetcher(library, Token),\n// }\n// );\n\n// const fxdxAddressAvax = getContract(AVALANCHE, \"FXDX\");\n// const stakedFxdxTrackerAddressAvax = getContract(AVALANCHE, \"StakedFxdxTracker\");\n\n// const { data: avaxData, mutate: avaxMutate } = useSWR(\n// [`StakeV2:stakedFxdxSupply:${active}`, AVALANCHE, fxdxAddressAvax, \"balanceOf\", stakedFxdxTrackerAddressAvax],\n// {\n// fetcher: contractFetcher(undefined, Token),\n// }\n// );\n\n// let data;\n// if (arbData && avaxData) {\n// data = arbData.add(avaxData);\n// }\n\n// const mutate = () => {\n// arbMutate();\n// avaxMutate();\n// };\n\n// return { data, mutate };\n// }\n\nexport function useHasOutdatedUi() {\n const url = getServerUrl(MUMBAI, \"/ui_version\");\n const { data, mutate } = useSWR([url], {\n fetcher: (...args) => fetch(...args).then((res) => res.text()),\n });\n\n let hasOutdatedUi = false;\n\n if (data && parseFloat(data) > parseFloat(UI_VERSION)) {\n hasOutdatedUi = true;\n }\n\n return { data: hasOutdatedUi, mutate };\n}\n\nexport function useFxdxPrice(chainId, libraries, active) {\n // const arbitrumLibrary = libraries && libraries.arbitrum ? libraries.arbitrum : undefined;\n // const { data: fxdxPriceFromArbitrum, mutate: mutateFromArbitrum } = useFxdxPriceFromArbitrum(arbitrumLibrary, active);\n // const { data: fxdxPriceFromAvalanche, mutate: mutateFromAvalanche } = useFxdxPriceFromAvalanche();\n\n // const fxdxPrice = chainId === ARBITRUM ? fxdxPriceFromArbitrum : fxdxPriceFromAvalanche;\n // const mutate = useCallback(() => {\n // mutateFromAvalanche();\n // mutateFromArbitrum();\n // }, [mutateFromAvalanche, mutateFromArbitrum]);\n\n // return {\n // fxdxPrice,\n // fxdxPriceFromArbitrum,\n // fxdxPriceFromAvalanche,\n // mutate,\n // };\n return {\n fxdxPrice: expandDecimals(5, 29),\n fxdxPriceFromEthereum: expandDecimals(5, 29),\n fxdxPriceFromMoonBeam: expandDecimals(5, 29),\n };\n}\n\n// use only the supply endpoint on arbitrum, it includes the supply on avalanche\nexport function useTotalFxdxSupply() {\n const fxdxSupplyUrl = getServerUrl(IS_TESTNET ? MUMBAI : MOONBEAM, \"/fxdx_supply\");\n\n const { data: fxdxSupply, mutate: updateFxdxSupply } = useSWR([fxdxSupplyUrl], {\n fetcher: (...args) => fetch(...args).then((res) => res.text()),\n });\n\n return {\n total: fxdxSupply ? bigNumberify(fxdxSupply) : undefined,\n mutate: updateFxdxSupply,\n };\n}\n\nexport function useTotalFxdxStaked() {\n let totalStakedFxdx = useRef(bigNumberify(0));\n\n const etherChainId = MUMBAI;\n const stakedFxdxTrackerAddressEthereum = getContract(etherChainId, \"StakedFxdxTracker\");\n const { data: stakedFxdxSupplyEthereum, mutate: updateStakedFxdxSupplyEthereum } = useSWR(\n IS_TESTNET && [\n `StakeV2:stakedFxdxSupply:${etherChainId}`,\n etherChainId,\n getContract(etherChainId, \"FXDX\"),\n \"balanceOf\",\n stakedFxdxTrackerAddressEthereum,\n ],\n {\n fetcher: contractFetcher(undefined, Token),\n }\n );\n\n const stakedFxdxTrackerAddressMoonBeam = getContract(MOONBEAM, \"StakedFxdxTracker\");\n const { data: stakedFxdxSupplyMoonBeam, mutate: updateStakedFxdxSupplyMoonBeam } = useSWR(\n !IS_TESTNET && [\n `StakeV2:stakedFxdxSupply:${MOONBEAM}`,\n MOONBEAM,\n getContract(MOONBEAM, \"FXDX\"),\n \"balanceOf\",\n stakedFxdxTrackerAddressMoonBeam,\n ],\n {\n fetcher: contractFetcher(undefined, Token),\n }\n );\n\n const mutate = useCallback(() => {\n updateStakedFxdxSupplyEthereum();\n updateStakedFxdxSupplyMoonBeam();\n }, [\n updateStakedFxdxSupplyEthereum,\n updateStakedFxdxSupplyMoonBeam\n ]);\n\n if (IS_TESTNET && stakedFxdxSupplyEthereum) {\n let total = bigNumberify(stakedFxdxSupplyEthereum);\n totalStakedFxdx.current = total;\n } else if (!IS_TESTNET && stakedFxdxSupplyMoonBeam) {\n let total = bigNumberify(stakedFxdxSupplyMoonBeam);\n totalStakedFxdx.current = total;\n }\n\n return {\n ethereum: stakedFxdxSupplyEthereum,\n moonbeam: stakedFxdxSupplyMoonBeam,\n total: totalStakedFxdx.current,\n mutate,\n };\n\n // const stakedFxdxTrackerAddressArbitrum = getContract(ARBITRUM, \"StakedFxdxTracker\");\n // const { data: stakedFxdxSupplyArbitrum, mutate: updateStakedFxdxSupplyArbitrum } = useSWR(\n // [\n // `StakeV2:stakedFxdxSupply:${ARBITRUM}`,\n // ARBITRUM,\n // getContract(ARBITRUM, \"FXDX\"),\n // \"balanceOf\",\n // stakedFxdxTrackerAddressArbitrum,\n // ],\n // {\n // fetcher: contractFetcher(undefined, Token),\n // }\n // );\n\n // const stakedFxdxTrackerAddressAvax = getContract(AVALANCHE, \"StakedFxdxTracker\");\n // const { data: stakedFxdxSupplyAvax, mutate: updateStakedFxdxSupplyAvax } = useSWR(\n // [\n // `StakeV2:stakedFxdxSupply:${AVALANCHE}`,\n // AVALANCHE,\n // getContract(AVALANCHE, \"FXDX\"),\n // \"balanceOf\",\n // stakedFxdxTrackerAddressAvax,\n // ],\n // {\n // fetcher: contractFetcher(undefined, Token),\n // }\n // );\n\n // const mutate = useCallback(() => {\n // updateStakedFxdxSupplyArbitrum();\n // updateStakedFxdxSupplyAvax();\n // }, [\n // updateStakedFxdxSupplyArbitrum,\n // updateStakedFxdxSupplyAvax\n // ]);\n\n // if (stakedFxdxSupplyArbitrum && stakedFxdxSupplyAvax) {\n // let total = bigNumberify(stakedFxdxSupplyArbitrum).add(stakedFxdxSupplyAvax);\n // totalStakedFxdx.current = total;\n // }\n\n // return {\n // avax: stakedFxdxSupplyAvax,\n // arbitrum: stakedFxdxSupplyArbitrum,\n // total: totalStakedFxdx.current,\n // mutate,\n // };\n}\n\nexport function useTotalFxdxInLiquidity() {\n // let poolAddressArbitrum = getContract(ARBITRUM, \"UniswapFxdxEthPool\");\n // let poolAddressAvax = getContract(AVALANCHE, \"TraderJoeFxdxAvaxPool\");\n // let totalFXDX = useRef(bigNumberify(0));\n\n // const { data: fxdxInLiquidityOnArbitrum, mutate: mutateFXDXInLiquidityOnArbitrum } = useSWR(\n // [`StakeV2:fxdxInLiquidity:${ARBITRUM}`, ARBITRUM, getContract(ARBITRUM, \"FXDX\"), \"balanceOf\", poolAddressArbitrum],\n // {\n // fetcher: contractFetcher(undefined, Token),\n // }\n // );\n // const { data: fxdxInLiquidityOnAvax, mutate: mutateFXDXInLiquidityOnAvax } = useSWR(\n // [`StakeV2:fxdxInLiquidity:${AVALANCHE}`, AVALANCHE, getContract(AVALANCHE, \"FXDX\"), \"balanceOf\", poolAddressAvax],\n // {\n // fetcher: contractFetcher(undefined, Token),\n // }\n // );\n // const mutate = useCallback(() => {\n // mutateFXDXInLiquidityOnArbitrum();\n // mutateFXDXInLiquidityOnAvax();\n // }, [mutateFXDXInLiquidityOnArbitrum, mutateFXDXInLiquidityOnAvax]);\n\n // if (fxdxInLiquidityOnAvax && fxdxInLiquidityOnArbitrum) {\n // let total = bigNumberify(fxdxInLiquidityOnArbitrum).add(fxdxInLiquidityOnAvax);\n // totalFXDX.current = total;\n // }\n // return {\n // avax: fxdxInLiquidityOnAvax,\n // arbitrum: fxdxInLiquidityOnArbitrum,\n // total: totalFXDX.current,\n // mutate,\n // };\n return {\n ethereum: bigNumberify(0),\n moonbeam: bigNumberify(0),\n total: bigNumberify(0),\n };\n}\n\n// function useFxdxPriceFromAvalanche() {\n// const poolAddress = getContract(AVALANCHE, \"TraderJoeFxdxAvaxPool\");\n\n// const { data, mutate: updateReserves } = useSWR([\"TraderJoeFxdxAvaxReserves\", AVALANCHE, poolAddress, \"getReserves\"], {\n// fetcher: contractFetcher(undefined, UniswapV2),\n// });\n// const { _reserve0: fxdxReserve, _reserve1: avaxReserve } = data || {};\n\n// const vaultAddress = getContract(AVALANCHE, \"Vault\");\n// const avaxAddress = getTokenBySymbol(AVALANCHE, \"WAVAX\").address;\n// const { data: avaxPrice, mutate: updateAvaxPrice } = useSWR(\n// [`StakeV2:avaxPrice`, AVALANCHE, vaultAddress, \"getMinPrice\", avaxAddress],\n// {\n// fetcher: contractFetcher(undefined, Vault),\n// }\n// );\n\n// const PRECISION = bigNumberify(10).pow(18);\n// let fxdxPrice;\n// if (avaxReserve && fxdxReserve && avaxPrice) {\n// fxdxPrice = avaxReserve.mul(PRECISION).div(fxdxReserve).mul(avaxPrice).div(PRECISION);\n// }\n\n// const mutate = useCallback(() => {\n// updateReserves(undefined, true);\n// updateAvaxPrice(undefined, true);\n// }, [updateReserves, updateAvaxPrice]);\n\n// return { data: fxdxPrice, mutate };\n// }\n\n// function useFxdxPriceFromArbitrum(library, active) {\n// const poolAddress = getContract(ARBITRUM, \"UniswapFxdxEthPool\");\n// const { data: uniPoolSlot0, mutate: updateUniPoolSlot0 } = useSWR(\n// [`StakeV2:uniPoolSlot0:${active}`, ARBITRUM, poolAddress, \"slot0\"],\n// {\n// fetcher: contractFetcher(library, UniPool),\n// }\n// );\n\n// const vaultAddress = getContract(ARBITRUM, \"Vault\");\n// const ethAddress = getTokenBySymbol(ARBITRUM, \"WETH\").address;\n// const { data: ethPrice, mutate: updateEthPrice } = useSWR(\n// [`StakeV2:ethPrice:${active}`, ARBITRUM, vaultAddress, \"getMinPrice\", ethAddress],\n// {\n// fetcher: contractFetcher(library, Vault),\n// }\n// );\n\n// const fxdxPrice = useMemo(() => {\n// if (uniPoolSlot0 && ethPrice) {\n// const tokenA = new UniToken(ARBITRUM, ethAddress, 18, \"SYMBOL\", \"NAME\");\n\n// const fxdxAddress = getContract(ARBITRUM, \"FXDX\");\n// const tokenB = new UniToken(ARBITRUM, fxdxAddress, 18, \"SYMBOL\", \"NAME\");\n\n// const pool = new Pool(\n// tokenA, // tokenA\n// tokenB, // tokenB\n// 10000, // fee\n// uniPoolSlot0.sqrtPriceX96, // sqrtRatioX96\n// 1, // liquidity\n// uniPoolSlot0.tick, // tickCurrent\n// []\n// );\n\n// const poolTokenPrice = pool.priceOf(tokenB).toSignificant(6);\n// const poolTokenPriceAmount = parseValue(poolTokenPrice, 18);\n// return poolTokenPriceAmount.mul(ethPrice).div(expandDecimals(1, 18));\n// }\n// }, [ethPrice, uniPoolSlot0, ethAddress]);\n\n// const mutate = useCallback(() => {\n// updateUniPoolSlot0(undefined, true);\n// updateEthPrice(undefined, true);\n// }, [updateEthPrice, updateUniPoolSlot0]);\n\n// return { data: fxdxPrice, mutate };\n// }\n\nexport async function approvePlugin(\n chainId,\n pluginAddress,\n { library, pendingTxns, setPendingTxns, sentMsg, failMsg }\n) {\n const routerAddress = getContract(chainId, \"Router\");\n const contract = new ethers.Contract(routerAddress, Router.abi, library.getSigner());\n return callContract(chainId, contract, \"approvePlugin\", [pluginAddress], {\n sentMsg,\n failMsg,\n pendingTxns,\n setPendingTxns,\n });\n}\n\nexport async function createSwapOrder(\n chainId,\n library,\n path,\n amountIn,\n minOut,\n triggerRatio,\n nativeTokenAddress,\n opts = {}\n) {\n const executionFee = getConstant(chainId, \"SWAP_ORDER_EXECUTION_GAS_FEE\");\n const triggerAboveThreshold = false;\n let shouldWrap = false;\n let shouldUnwrap = false;\n opts.value = executionFee;\n\n if (path[0] === AddressZero) {\n shouldWrap = true;\n opts.value = opts.value.add(amountIn);\n }\n if (path[path.length - 1] === AddressZero) {\n shouldUnwrap = true;\n }\n path = replaceNativeTokenAddress(path, nativeTokenAddress);\n\n const params = [path, amountIn, minOut, triggerRatio, triggerAboveThreshold, executionFee, shouldWrap, shouldUnwrap];\n\n const orderBookAddress = getContract(chainId, \"OrderBook\");\n const contract = new ethers.Contract(orderBookAddress, OrderBook.abi, library.getSigner());\n\n return callContract(chainId, contract, \"createSwapOrder\", params, opts);\n}\n\nexport async function createIncreaseOrder(\n chainId,\n library,\n nativeTokenAddress,\n path,\n amountIn,\n indexTokenAddress,\n minOut,\n sizeDelta,\n collateralTokenAddress,\n isLong,\n triggerPrice,\n opts = {}\n) {\n invariant(!isLong || indexTokenAddress === collateralTokenAddress, \"invalid token addresses\");\n invariant(indexTokenAddress !== AddressZero, \"indexToken is 0\");\n invariant(collateralTokenAddress !== AddressZero, \"collateralToken is 0\");\n\n const fromETH = path[0] === AddressZero;\n\n path = replaceNativeTokenAddress(path, nativeTokenAddress);\n const shouldWrap = fromETH;\n const triggerAboveThreshold = !isLong;\n const executionFee = getConstant(chainId, \"INCREASE_ORDER_EXECUTION_GAS_FEE\");\n\n const params = [\n path,\n amountIn,\n indexTokenAddress,\n minOut,\n sizeDelta,\n collateralTokenAddress,\n isLong,\n triggerPrice,\n triggerAboveThreshold,\n executionFee,\n shouldWrap,\n ];\n\n if (!opts.value) {\n opts.value = fromETH ? amountIn.add(executionFee) : executionFee;\n }\n\n const orderBookAddress = getContract(chainId, \"OrderBook\");\n const contract = new ethers.Contract(orderBookAddress, OrderBook.abi, library.getSigner());\n\n return callContract(chainId, contract, \"createIncreaseOrder\", params, opts);\n}\n\nexport async function createDecreaseOrder(\n chainId,\n library,\n indexTokenAddress,\n sizeDelta,\n collateralTokenAddress,\n collateralDelta,\n isLong,\n triggerPrice,\n triggerAboveThreshold,\n opts = {}\n) {\n invariant(!isLong || indexTokenAddress === collateralTokenAddress, \"invalid token addresses\");\n invariant(indexTokenAddress !== AddressZero, \"indexToken is 0\");\n invariant(collateralTokenAddress !== AddressZero, \"collateralToken is 0\");\n\n const executionFee = getConstant(chainId, \"DECREASE_ORDER_EXECUTION_GAS_FEE\");\n\n const params = [\n indexTokenAddress,\n sizeDelta,\n collateralTokenAddress,\n collateralDelta,\n isLong,\n triggerPrice,\n triggerAboveThreshold,\n ];\n opts.value = executionFee;\n const orderBookAddress = getContract(chainId, \"OrderBook\");\n const contract = new ethers.Contract(orderBookAddress, OrderBook.abi, library.getSigner());\n\n return callContract(chainId, contract, \"createDecreaseOrder\", params, opts);\n}\n\nexport async function cancelSwapOrder(chainId, library, index, opts) {\n const params = [index];\n const method = \"cancelSwapOrder\";\n const orderBookAddress = getContract(chainId, \"OrderBook\");\n const contract = new ethers.Contract(orderBookAddress, OrderBook.abi, library.getSigner());\n\n return callContract(chainId, contract, method, params, opts);\n}\n\nexport async function cancelDecreaseOrder(chainId, library, index, opts) {\n const params = [index];\n const method = \"cancelDecreaseOrder\";\n const orderBookAddress = getContract(chainId, \"OrderBook\");\n const contract = new ethers.Contract(orderBookAddress, OrderBook.abi, library.getSigner());\n\n return callContract(chainId, contract, method, params, opts);\n}\n\nexport async function cancelIncreaseOrder(chainId, library, index, opts) {\n const params = [index];\n const method = \"cancelIncreaseOrder\";\n const orderBookAddress = getContract(chainId, \"OrderBook\");\n const contract = new ethers.Contract(orderBookAddress, OrderBook.abi, library.getSigner());\n\n return callContract(chainId, contract, method, params, opts);\n}\n\nexport function handleCancelOrder(chainId, library, order, opts) {\n let func;\n if (order.type === SWAP) {\n func = cancelSwapOrder;\n } else if (order.type === INCREASE) {\n func = cancelIncreaseOrder;\n } else if (order.type === DECREASE) {\n func = cancelDecreaseOrder;\n }\n\n return func(chainId, library, order.index, {\n successMsg: t`Order cancelled.`,\n failMsg: t`Cancel failed.`,\n sentMsg: t`Cancel submitted.`,\n pendingTxns: opts.pendingTxns,\n setPendingTxns: opts.setPendingTxns,\n });\n}\n\nexport async function cancelMultipleOrders(chainId, library, allIndexes = [], opts) {\n const ordersWithTypes = groupBy(allIndexes, (v) => v.split(\"-\")[0]);\n function getIndexes(key) {\n if (!ordersWithTypes[key]) return;\n return ordersWithTypes[key].map((d) => d.split(\"-\")[1]);\n }\n // params order => swap, increase, decrease\n const params = [\"Swap\", \"Increase\", \"Decrease\"].map((key) => getIndexes(key) || []);\n const method = \"cancelMultiple\";\n const orderBookAddress = getContract(chainId, \"OrderBook\");\n const contract = new ethers.Contract(orderBookAddress, OrderBook.abi, library.getSigner());\n return callContract(chainId, contract, method, params, opts);\n}\n\nexport async function updateDecreaseOrder(\n chainId,\n library,\n index,\n collateralDelta,\n sizeDelta,\n triggerPrice,\n triggerAboveThreshold,\n opts\n) {\n const params = [index, collateralDelta, sizeDelta, triggerPrice, triggerAboveThreshold];\n const method = \"updateDecreaseOrder\";\n const orderBookAddress = getContract(chainId, \"OrderBook\");\n const contract = new ethers.Contract(orderBookAddress, OrderBook.abi, library.getSigner());\n\n return callContract(chainId, contract, method, params, opts);\n}\n\nexport async function updateIncreaseOrder(\n chainId,\n library,\n index,\n sizeDelta,\n triggerPrice,\n triggerAboveThreshold,\n opts\n) {\n const params = [index, sizeDelta, triggerPrice, triggerAboveThreshold];\n const method = \"updateIncreaseOrder\";\n const orderBookAddress = getContract(chainId, \"OrderBook\");\n const contract = new ethers.Contract(orderBookAddress, OrderBook.abi, library.getSigner());\n\n return callContract(chainId, contract, method, params, opts);\n}\n\nexport async function updateSwapOrder(chainId, library, index, minOut, triggerRatio, triggerAboveThreshold, opts) {\n const params = [index, minOut, triggerRatio, triggerAboveThreshold];\n const method = \"updateSwapOrder\";\n const orderBookAddress = getContract(chainId, \"OrderBook\");\n const contract = new ethers.Contract(orderBookAddress, OrderBook.abi, library.getSigner());\n\n return callContract(chainId, contract, method, params, opts);\n}\n\nexport async function _executeOrder(chainId, library, method, account, index, feeReceiver, opts) {\n const params = [account, index, feeReceiver];\n const positionManagerAddress = getContract(chainId, \"PositionManager\");\n const contract = new ethers.Contract(positionManagerAddress, PositionManager.abi, library.getSigner());\n return callContract(chainId, contract, method, params, opts);\n}\n\nexport function executeSwapOrder(chainId, library, account, index, feeReceiver, opts) {\n return _executeOrder(chainId, library, \"executeSwapOrder\", account, index, feeReceiver, opts);\n}\n\nexport function executeIncreaseOrder(chainId, library, account, index, feeReceiver, opts) {\n return _executeOrder(chainId, library, \"executeIncreaseOrder\", account, index, feeReceiver, opts);\n}\n\nexport function executeDecreaseOrder(chainId, library, account, index, feeReceiver, opts) {\n return _executeOrder(chainId, library, \"executeDecreaseOrder\", account, index, feeReceiver, opts);\n}\n","import React from \"react\";\n\nimport useSWR from \"swr\";\n\nimport {\n PLACEHOLDER_ACCOUNT,\n getBalanceAndSupplyData,\n getDepositBalanceData,\n getVestingData,\n getStakingData,\n getProcessedData,\n} from \"lib/legacy\";\n\nimport Vault from \"abis/Vault.json\";\nimport Reader from \"abis/Reader.json\";\nimport RewardReader from \"abis/RewardReader.json\";\nimport Token from \"abis/Token.json\";\nimport FlpManager from \"abis/FlpManager.json\";\n\nimport { useWeb3React } from \"@web3-react/core\";\n\nimport { useFxdxPrice } from \"domain/legacy\";\n\nimport { getContract } from \"config/contracts\";\nimport { getServerUrl } from \"config/backend\";\nimport { contractFetcher } from \"lib/contracts\";\nimport { formatKeyAmount } from \"lib/numbers\";\n\nexport default function APRLabel({ chainId, label }) {\n let { active } = useWeb3React();\n\n const rewardReaderAddress = getContract(chainId, \"RewardReader\");\n const readerAddress = getContract(chainId, \"Reader\");\n\n const vaultAddress = getContract(chainId, \"Vault\");\n const nativeTokenAddress = getContract(chainId, \"NATIVE_TOKEN\");\n const fxdxAddress = getContract(chainId, \"FXDX\");\n const esFxdxAddress = getContract(chainId, \"ES_FXDX\");\n const bnFxdxAddress = getContract(chainId, \"BN_FXDX\");\n const flpAddress = getContract(chainId, \"FLP\");\n\n const stakedFxdxTrackerAddress = getContract(chainId, \"StakedFxdxTracker\");\n const bonusFxdxTrackerAddress = getContract(chainId, \"BonusFxdxTracker\");\n const feeFxdxTrackerAddress = getContract(chainId, \"FeeFxdxTracker\");\n\n const stakedFlpTrackerAddress = getContract(chainId, \"StakedFlpTracker\");\n const feeFlpTrackerAddress = getContract(chainId, \"FeeFlpTracker\");\n\n const flpManagerAddress = getContract(chainId, \"FlpManager\");\n\n const fxdxVesterAddress = getContract(chainId, \"FxdxVester\");\n const flpVesterAddress = getContract(chainId, \"FlpVester\");\n\n const vesterAddresses = [fxdxVesterAddress, flpVesterAddress];\n\n const walletTokens = [fxdxAddress, esFxdxAddress, flpAddress, stakedFxdxTrackerAddress];\n const depositTokens = [\n fxdxAddress,\n esFxdxAddress,\n stakedFxdxTrackerAddress,\n bonusFxdxTrackerAddress,\n bnFxdxAddress,\n flpAddress,\n ];\n const rewardTrackersForDepositBalances = [\n stakedFxdxTrackerAddress,\n stakedFxdxTrackerAddress,\n bonusFxdxTrackerAddress,\n feeFxdxTrackerAddress,\n feeFxdxTrackerAddress,\n feeFlpTrackerAddress,\n ];\n const rewardTrackersForStakingInfo = [\n stakedFxdxTrackerAddress,\n bonusFxdxTrackerAddress,\n feeFxdxTrackerAddress,\n stakedFlpTrackerAddress,\n feeFlpTrackerAddress,\n ];\n\n const { data: walletBalances } = useSWR(\n [`StakeV2:walletBalances:${active}`, chainId, readerAddress, \"getTokenBalancesWithSupplies\", PLACEHOLDER_ACCOUNT],\n {\n fetcher: contractFetcher(undefined, Reader, [walletTokens]),\n }\n );\n\n const { data: depositBalances } = useSWR(\n [`StakeV2:depositBalances:${active}`, chainId, rewardReaderAddress, \"getDepositBalances\", PLACEHOLDER_ACCOUNT],\n {\n fetcher: contractFetcher(undefined, RewardReader, [depositTokens, rewardTrackersForDepositBalances]),\n }\n );\n\n const { data: stakingInfo } = useSWR(\n [`StakeV2:stakingInfo:${active}`, chainId, rewardReaderAddress, \"getStakingInfo\", PLACEHOLDER_ACCOUNT],\n {\n fetcher: contractFetcher(undefined, RewardReader, [rewardTrackersForStakingInfo]),\n }\n );\n\n const { data: stakedFxdxSupply } = useSWR(\n [`StakeV2:stakedFxdxSupply:${active}`, chainId, fxdxAddress, \"balanceOf\", stakedFxdxTrackerAddress],\n {\n fetcher: contractFetcher(undefined, Token),\n }\n );\n\n const { data: aums } = useSWR([`StakeV2:getAums:${active}`, chainId, flpManagerAddress, \"getAums\"], {\n fetcher: contractFetcher(undefined, FlpManager),\n });\n\n const { data: nativeTokenPrice } = useSWR(\n [`StakeV2:nativeTokenPrice:${active}`, chainId, vaultAddress, \"getMinPrice\", nativeTokenAddress],\n {\n fetcher: contractFetcher(undefined, Vault),\n }\n );\n\n const { data: vestingInfo } = useSWR(\n [`StakeV2:vestingInfo:${active}`, chainId, readerAddress, \"getVestingInfo\", PLACEHOLDER_ACCOUNT],\n {\n fetcher: contractFetcher(undefined, Reader, [vesterAddresses]),\n }\n );\n\n const { fxdxPrice } = useFxdxPrice(chainId, {}, active);\n\n const fxdxSupplyUrl = getServerUrl(chainId, \"/fxdx_supply\");\n const { data: fxdxSupply } = useSWR([fxdxSupplyUrl], {\n fetcher: (...args) => fetch(...args).then((res) => res.text()),\n });\n\n let aum;\n if (aums && aums.length > 0) {\n aum = aums[0].add(aums[1]).div(2);\n }\n\n const { balanceData, supplyData } = getBalanceAndSupplyData(walletBalances);\n const depositBalanceData = getDepositBalanceData(depositBalances);\n const stakingData = getStakingData(stakingInfo);\n const vestingData = getVestingData(vestingInfo);\n\n const processedData = getProcessedData(\n balanceData,\n supplyData,\n depositBalanceData,\n stakingData,\n vestingData,\n aum,\n nativeTokenPrice,\n stakedFxdxSupply,\n fxdxPrice,\n fxdxSupply\n );\n\n return <>{`${formatKeyAmount(processedData, label, 2, 2, true)}%`};\n}\n","import React, { ReactNode } from \"react\";\nimport { NavLink } from \"react-router-dom\";\nimport cx from \"classnames\";\nimport { getAppBaseUrl, getHomeUrl } from \"lib/legacy\";\n\nimport \"./Header.css\";\nimport { isHomeSite, shouldShowRedirectModal } from \"lib/legacy\";\n\ntype Props = {\n isHome?: boolean;\n isHomeLink?: boolean;\n className?: string;\n exact?: boolean;\n to: string;\n shouldShowRedirectModal?: boolean;\n showRedirectModal: (to: string) => void;\n redirectPopupTimestamp: number;\n children?: ReactNode;\n};\n\nexport function HeaderLink({\n isHomeLink,\n className,\n exact,\n to,\n children,\n redirectPopupTimestamp,\n showRedirectModal,\n}: Props) {\n const isOnHomePage = window.location.pathname === \"/\";\n const isHome = isHomeSite();\n\n if (isHome && !(isHomeLink && !isOnHomePage)) {\n if (shouldShowRedirectModal(redirectPopupTimestamp)) {\n return (\n \n {/*
\n \n 
\n
*/}\n \n {socialLinks.map((platform) => {\n return (\n \n 
\n \n );\n })}\n
\n \n {footerLinks[isHome ? \"home\" : \"app\"].map(({ external, text, link, isAppLink }) => {\n if (external) {\n return (\n \n {text}\n \n );\n }\n if (isAppLink) {\n if (shouldShowRedirectModal(redirectPopupTimestamp)) {\n return (\n \n {text}\n \n );\n })}\n
\n showRedirectModal(link)}>\n {text}\n
\n );\n } else {\n const baseUrl = getAppBaseUrl();\n return (\n \n {text}\n \n );\n }\n }\n return (\n showRedirectModal(to)}>\n {children}\n
\n );\n } else {\n const baseUrl = getAppBaseUrl();\n return (\n \n {children}\n \n );\n }\n }\n\n if (isHomeLink) {\n return (\n \n {children}\n \n );\n }\n\n return (\n \n \n
\n \n
\n );\n return;\n }\n const errString = e.message ?? e.toString();\n helperToast.error(errString);\n });\n };\n return fn;\n};\n\nexport async function addTokenToMetamask(token) {\n try {\n const wasAdded = await window.ethereum.request({\n method: \"wallet_watchAsset\",\n params: {\n type: \"ERC20\",\n options: {\n address: token.address,\n symbol: token.symbol,\n decimals: token.decimals,\n image: token.imageUrl,\n },\n },\n });\n if (wasAdded) {\n // https://github.com/MetaMask/metamask-extension/issues/11377\n // We can show a toast message when the token is added to metamask but because of the bug we can't. Once the bug is fixed we can show a toast message.\n }\n } catch (error) {\n console.error(error);\n }\n}\n","import React, { useCallback } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { Trans } from \"@lingui/macro\";\n\n// import fxdxBigIcon from \"img/ic_fxdx_custom.svg\";\n// import flpBigIcon from \"img/ic_flp_custom.svg\";\n\nimport { isHomeSite } from \"lib/legacy\";\n\nimport { useWeb3React } from \"@web3-react/core\";\n\nimport APRLabel from \"../APRLabel/APRLabel\";\nimport { HeaderLink } from \"../Header/HeaderLink\";\nimport { GOERLI, IS_TESTNET, MOONBEAM, MUMBAI } from \"config/chains\";\nimport { switchNetwork } from \"lib/wallets\";\nimport { useChainId } from \"lib/chains\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\n\nexport default function TokenCard({ showRedirectModal, redirectPopupTimestamp }) {\n const isHome = isHomeSite();\n const { chainId } = useChainId();\n const { active } = useWeb3React();\n\n const changeNetwork = useCallback(\n (network) => {\n if (network === chainId) {\n return;\n }\n if (!active) {\n setTimeout(() => {\n return switchNetwork(network, active);\n }, 500);\n } else {\n return switchNetwork(network, active);\n }\n },\n [chainId, active]\n );\n\n const BuyLink = ({ className, to, children, network }) => {\n if (isHome && showRedirectModal) {\n return (\n Your wallet is not connected to {getChainName(chainId)}.
\n \n
switchNetwork(chainId, true)}>\n Switch to {getChainName(chainId)}\n
\n switchNetwork(chainId, true)}>\n Add {getChainName(chainId)}\n
\n \n
\n );\n}\n","import React from \"react\";\nimport Footer from \"components/Footer/Footer\";\nimport \"./Home.css\";\n\nimport simpleSwapIcon from \"img/ic_simpleswaps.svg\";\nimport costIcon from \"img/ic_cost.svg\";\nimport liquidityIcon from \"img/ic_liquidity.svg\";\nimport totaluserIcon from \"img/ic_totaluser.svg\";\n\nimport arbitrumIcon from \"img/ic_arbitrum_96.svg\";\nimport avaIcon from \"img/ic_avalanche_96.svg\";\n\nimport statsIcon from \"img/ic_stats.svg\";\nimport tradingIcon from \"img/ic_trading.svg\";\n\nimport useSWR from \"swr\";\n\nimport { USD_DECIMALS, getTotalVolumeSum } from \"lib/legacy\";\n\nimport { useUserStat } from \"domain/legacy\";\n\nimport TokenCard from \"components/TokenCard/TokenCard\";\nimport { Trans } from \"@lingui/macro\";\nimport { HeaderLink } from \"components/Header/HeaderLink\";\nimport { ARBITRUM, AVALANCHE } from \"config/chains\";\nimport { getServerUrl } from \"config/backend\";\nimport { bigNumberify, formatAmount, numberWithCommas } from \"lib/numbers\";\n\nexport default function Home({ showRedirectModal, redirectPopupTimestamp }) {\n // const [openedFAQIndex, setOpenedFAQIndex] = useState(null)\n // const faqContent = [{\n // id: 1,\n // question: \"What is FXDX?\",\n // answer: \"FXDX is a decentralized spot and perpetual exchange that supports low swap fees and zero price impact trades.\n
\n \n {/* 
FXDX (Not available yet.) */}\n FXDX (Not available yet.\n
\n \n
\n \n FXDX is the utility and governance token. Accrues 30% of the platform's generated fees. \n
\n \n {IS_TESTNET ? (\n <>\n Ethereum APR: MoonBeam APR: Arbitrum APR: Avalanche APR:
\n \n \n Read more \n \n
\n \n {IS_TESTNET ? (\n \n Buy on Ethereum \n \n ) : (\n \n Buy on MoonBeam \n \n )}\n\n {/* \n Buy on Arbitrum \n \n \n Buy on Avalanche \n */}\n
\n \n
\n \n {/* 
FLP */}\n FLP\n
\n \n
\n \n FLP is the liquidity provider token. Accrues 70% of the platform's generated fees. \n
\n \n {IS_TESTNET ? (\n <>\n Ethereum APR: MoonBeam APR: Arbitrum APR: Avalanche APR:
\n \n \n Read more \n \n
\n \n {IS_TESTNET ? (\n \n Buy on Ethereum \n \n ) : (\n \n Buy on MoonBeam \n \n )}\n {/* \n Buy on Arbitrum \n \n \n Buy on Avalanche \n */}\n
\n Trading is supported by a unique multi-asset pool that earns liquidity providers fees from market making, swap fees, leverage trading (spreads, funding fees & liquidations), and asset rebalancing.
Dynamic pricing is supported by Chainlink Oracles along with TWAP pricing from leading volume DEXs.\"\n // }, {\n // id: 2,\n // question: \"What is the FXDX Governance Token? \",\n // answer: \"The FXDX token is the governance token of the FXDX ecosystem, it provides the token owner voting rights on the direction of the FXDX platform.
Additionally, when FXDX is staked you will earn 30% of the platform-generated fees, you will also earn Escrowed FXDX tokens and Multiplier Points.\"\n // }, {\n // id: 3,\n // question: \"What is the FLP Token? \",\n // answer: \"The FLP token represents the liquidity users provide to the FXDX platform for Swaps and Margin Trading.
To provide liquidity to FLP you trade your crypto asset BTC, ETH, LINK, UNI, USDC, USDT, MIM, or FRAX to the liquidity pool, in exchange, you gain exposure to a diversified index of tokens while earning 50% of the platform trading fees and esFXDX.\"\n // }, {\n // id: 4,\n // question: \"What can I trade on FXDX? \",\n // answer: \"On FXDX you can swap or margin trade any of the following assets: ETH, BTC, LINK, UNI, USDC, USDT, MIM, FRAX, with others to be added. \"\n // }]\n\n // const toggleFAQContent = function(index) {\n // if (openedFAQIndex === index) {\n // setOpenedFAQIndex(null)\n // } else {\n // setOpenedFAQIndex(index)\n // }\n // }\n\n // ARBITRUM\n\n const arbitrumPositionStatsUrl = getServerUrl(ARBITRUM, \"/position_stats\");\n const { data: arbitrumPositionStats } = useSWR([arbitrumPositionStatsUrl], {\n fetcher: (...args) => fetch(...args).then((res) => res.json()),\n });\n\n const arbitrumTotalVolumeUrl = getServerUrl(ARBITRUM, \"/total_volume\");\n const { data: arbitrumTotalVolume } = useSWR([arbitrumTotalVolumeUrl], {\n fetcher: (...args) => fetch(...args).then((res) => res.json()),\n });\n\n // AVALANCHE\n\n const avalanchePositionStatsUrl = getServerUrl(AVALANCHE, \"/position_stats\");\n const { data: avalanchePositionStats } = useSWR([avalanchePositionStatsUrl], {\n fetcher: (...args) => fetch(...args).then((res) => res.json()),\n });\n\n const avalancheTotalVolumeUrl = getServerUrl(AVALANCHE, \"/total_volume\");\n const { data: avalancheTotalVolume } = useSWR([avalancheTotalVolumeUrl], {\n fetcher: (...args) => fetch(...args).then((res) => res.json()),\n });\n\n // Total Volume\n\n const arbitrumTotalVolumeSum = getTotalVolumeSum(arbitrumTotalVolume);\n const avalancheTotalVolumeSum = getTotalVolumeSum(avalancheTotalVolume);\n\n let totalVolumeSum = bigNumberify(0);\n if (arbitrumTotalVolumeSum && avalancheTotalVolumeSum) {\n totalVolumeSum = totalVolumeSum.add(arbitrumTotalVolumeSum);\n totalVolumeSum = totalVolumeSum.add(avalancheTotalVolumeSum);\n }\n\n // Open Interest\n\n let openInterest = bigNumberify(0);\n if (\n arbitrumPositionStats &&\n arbitrumPositionStats.totalLongPositionSizes &&\n arbitrumPositionStats.totalShortPositionSizes\n ) {\n openInterest = openInterest.add(arbitrumPositionStats.totalLongPositionSizes);\n openInterest = openInterest.add(arbitrumPositionStats.totalShortPositionSizes);\n }\n\n if (\n avalanchePositionStats &&\n avalanchePositionStats.totalLongPositionSizes &&\n avalanchePositionStats.totalShortPositionSizes\n ) {\n openInterest = openInterest.add(avalanchePositionStats.totalLongPositionSizes);\n openInterest = openInterest.add(avalanchePositionStats.totalShortPositionSizes);\n }\n\n // user stat\n const arbitrumUserStats = useUserStat(ARBITRUM);\n const avalancheUserStats = useUserStat(AVALANCHE);\n let totalUsers = 0;\n\n if (arbitrumUserStats && arbitrumUserStats.uniqueCount) {\n totalUsers += arbitrumUserStats.uniqueCount;\n }\n\n if (avalancheUserStats && avalancheUserStats.uniqueCount) {\n totalUsers += avalancheUserStats.uniqueCount;\n }\n\n const LaunchExchangeButton = () => {\n return (\n
\n
\n );\n}\n","import cx from \"classnames\";\nimport { useCallback, useState, useRef } from \"react\";\nimport { IS_TOUCH } from \"config/ui\";\n\nconst OPEN_DELAY = 0;\nconst CLOSE_DELAY = 100;\n\nexport default function Tooltip(props) {\n const [visible, setVisible] = useState(false);\n const intervalCloseRef = useRef(null);\n const intervalOpenRef = useRef(null);\n\n const position = props.position ?? \"left-bottom\";\n const trigger = props.trigger ?? \"hover\";\n\n const onMouseEnter = useCallback(() => {\n if (trigger !== \"hover\" || IS_TOUCH) return;\n\n if (intervalCloseRef.current) {\n clearInterval(intervalCloseRef.current);\n intervalCloseRef.current = null;\n }\n if (!intervalOpenRef.current) {\n intervalOpenRef.current = setTimeout(() => {\n setVisible(true);\n intervalOpenRef.current = null;\n }, OPEN_DELAY);\n }\n }, [setVisible, intervalCloseRef, intervalOpenRef, trigger]);\n\n const onMouseClick = useCallback(() => {\n if (trigger !== \"click\" && !IS_TOUCH) return;\n if (intervalCloseRef.current) {\n clearInterval(intervalCloseRef.current);\n intervalCloseRef.current = null;\n }\n if (intervalOpenRef.current) {\n clearInterval(intervalOpenRef.current);\n intervalOpenRef.current = null;\n }\n\n setVisible(true);\n }, [setVisible, intervalCloseRef, trigger]);\n\n const onMouseLeave = useCallback(() => {\n intervalCloseRef.current = setTimeout(() => {\n setVisible(false);\n intervalCloseRef.current = null;\n }, CLOSE_DELAY);\n if (intervalOpenRef.current) {\n clearInterval(intervalOpenRef.current);\n intervalOpenRef.current = null;\n }\n }, [setVisible, intervalCloseRef]);\n\n const className = cx(\"Tooltip\", props.className);\n\n return (\n \n \n {/* */}\n
\n \n
\n \n
\n \n \n Decentralized\n
\n Perpetual Exchange\n \n
\n \n Perpetual Exchange\n
\n \n Trade BTC, ETH, AVAX and other top cryptocurrencies with up to 30x leverage directly from your wallet\n \n
\n \n
\n \n 
\n
\n \n
\n \n Total Trading Volume \n
\n ${formatAmount(totalVolumeSum, USD_DECIMALS, 0, true)}
\n \n 
\n
\n \n
\n \n Open Interest \n
\n ${formatAmount(openInterest, USD_DECIMALS, 0, true)}
\n \n 
\n
\n \n
\n \n Total Users \n
\n {numberWithCommas(totalUsers.toFixed(0))}
\n \n
\n \n
\n \n
\n \n 
\n
\n \n Reduce Liquidation Risks \n
\n \n \n An aggregate of high-quality price feeds determine when liquidations occur. This keeps positions safe\n from temporary wicks.\n \n
\n \n
\n \n 
\n
\n \n Save on Costs \n
\n \n \n Enter and exit positions with minimal spread and zero price impact. Get the optimal price without\n incurring additional costs.\n \n
\n \n
\n \n 
\n
\n \n Simple Swaps \n
\n \n \n Open positions through a simple swap interface. Conveniently swap from any supported asset into the\n position of your choice.\n \n
\n \n
\n \n
\n \n
\n \n Available on your preferred network \n
\n \n FXDX is currently live on Arbitrum and Avalanche. \n
\n \n
\n \n
\n \n 
\n
\n \n
\n Arbitrum
\n \n
\n \n
\n \n 
\n
\n \n
\n Avalanche
\n \n
\n \n
\n\n {/* \n
\n \n
\n \n Two tokens create our ecosystem \n
\n \n
*/}\n {/* \n
\n \n \n
\n \n
*/}\n \n \n
\n \n
\n FAQs
\n Most asked questions. If you wish to learn more, please head to our Documentation page.
\n Documentation\n \n {\n faqContent.map((content, index) => (\n
\n toggleFAQContent(index)}>\n
\n ))\n }\n \n
\n \n {\n openedFAQIndex === index ?
\n \n { content.question }\n
\n \n
\n \n
\n \n
\n {props.renderContent()}
}\n \n );\n}\n","import useSWR from \"swr\";\nimport { arrayURLFetcher } from \"lib/legacy\";\nimport { GOERLI, IS_TESTNET, MOONBEAM, MUMBAI } from \"config/chains\";\nimport { getServerUrl } from \"config/backend\";\nconst ACTIVE_CHAIN_IDS = [IS_TESTNET ? MUMBAI : MOONBEAM];\n\nexport default function useFeesSummary() {\n const { data: feesSummary } = useSWR(\n ACTIVE_CHAIN_IDS.map((chainId) => getServerUrl(chainId, \"/fees_summary\")),\n {\n fetcher: arrayURLFetcher,\n }\n );\n\n const feesSummaryByChain = {};\n for (let i = 0; i < ACTIVE_CHAIN_IDS.length; i++) {\n if (feesSummary && feesSummary.length === ACTIVE_CHAIN_IDS.length) {\n feesSummaryByChain[ACTIVE_CHAIN_IDS[i]] = feesSummary[i];\n } else {\n feesSummaryByChain[ACTIVE_CHAIN_IDS[i]] = {};\n }\n }\n\n return { data: feesSummaryByChain };\n}\n","import { Menu } from \"@headlessui/react\";\nimport { FiChevronDown } from \"react-icons/fi\";\nimport \"./AssetDropdown.css\";\nimport coingeckoIcon from \"img/ic_coingecko_16.svg\";\nimport ethereumIcon from \"img/ic_ethereum_16.svg\";\nimport arbitrumIcon from \"img/ic_arbitrum_16.svg\";\nimport avalancheIcon from \"img/ic_avalanche_16.svg\";\nimport moonbeamIcon from \"img/ic_moonbeam_16.svg\";\nimport metamaskIcon from \"img/ic_metamask_16.svg\";\nimport { useWeb3React } from \"@web3-react/core\";\n\nimport { t, Trans } from \"@lingui/macro\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\nimport { ICONLINKS, PLATFORM_TOKENS } from \"config/tokens\";\nimport { addTokenToMetamask } from \"lib/wallets\";\nimport { useChainId } from \"lib/chains\";\n\nfunction AssetDropdown({ assetSymbol, assetInfo }) {\n const { active } = useWeb3React();\n const { chainId } = useChainId();\n let { coingecko, arbitrum, avalanche, ethereum, moonbeam } = ICONLINKS[chainId][assetSymbol] || {};\n const unavailableTokenSymbols =\n {\n 42161: [\"ETH\"],\n 43114: [\"AVAX\"],\n }[chainId] || [];\n\n return (\n \n );\n}\n\nexport default AssetDropdown;\n","import { IS_TESTNET } from \"config/chains\";\nimport { Helmet } from \"react-helmet\";\n\nfunction SEO(props) {\n const { children, ...customMeta } = props;\n const networks = IS_TESTNET ? \"Mumbai\" : \"MoonBeam\";\n\n const meta = {\n title: \"fxdx | Decentralized Perpetual Exchange\",\n description:\n `Trade spot or perpetual BTC, ETH and other top cryptocurrencies with up to 30x leverage directly from your wallet on ${networks}.`,\n image: IS_TESTNET ? \"https://test.fxdx.exchange/og.png\" : \"https://app.fxdx.exchange/og.png\",\n type: \"exchange\",\n ...customMeta,\n };\n return (\n <>\n \n \n
\n \n
\n \n
\n \n
\n \n
- \n {value.map((v, i) => (\n
- {v} \n ))}\n
\n {label}:\n {renderValue()}\n
\n );\n}\n","import React, { useState } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { useWeb3React } from \"@web3-react/core\";\nimport { Trans, t } from \"@lingui/macro\";\nimport useSWR from \"swr\";\nimport { PieChart, Pie, Cell, Tooltip } from \"recharts\";\nimport TooltipComponent from \"components/Tooltip/Tooltip\";\n\nimport hexToRgba from \"hex-to-rgba\";\nimport { ethers } from \"ethers\";\n\nimport {\n USD_DECIMALS,\n FXDX_DECIMALS,\n FLP_DECIMALS,\n BASIS_POINTS_DIVISOR,\n DEFAULT_MAX_USDF_AMOUNT,\n getPageTitle,\n importImage,\n arrayURLFetcher,\n} from \"lib/legacy\";\nimport { useTotalFxdxInLiquidity, useFxdxPrice, useTotalFxdxStaked, useTotalFxdxSupply } from \"domain/legacy\";\nimport useFeesSummary from \"domain/useFeesSummary\";\n\nimport { getContract } from \"config/contracts\";\n\nimport Vault from \"abis/Vault.json\";\nimport Reader from \"abis/Reader.json\";\nimport FlpManager from \"abis/FlpManager.json\";\nimport Footer from \"components/Footer/Footer\";\n\nimport \"./Dashboard.css\";\n\n// import fxdx40Icon from \"img/ic_fxdx_40.svg\";\n// import flp40Icon from \"img/ic_flp_40.svg\";\nimport arbitrum16Icon from \"img/ic_arbitrum_16.svg\";\nimport arbitrum24Icon from \"img/ic_arbitrum_24.svg\";\nimport avalanche16Icon from \"img/ic_avalanche_16.svg\";\nimport avalanche24Icon from \"img/ic_avalanche_24.svg\";\nimport ethereum16Icon from \"img/ic_ethereum_16.svg\";\nimport ethereum24Icon from \"img/ic_ethereum_24.svg\";\nimport moonbeam16Icon from \"img/ic_moonbeam_16.svg\";\nimport moonbeam24Icon from \"img/ic_moonbeam_24.svg\";\n\nimport AssetDropdown from \"./AssetDropdown\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\nimport SEO from \"components/Common/SEO\";\nimport useTotalVolume from \"domain/useTotalVolume\";\nimport StatsTooltip from \"components/StatsTooltip/StatsTooltip\";\nimport StatsTooltipRow from \"components/StatsTooltip/StatsTooltipRow\";\nimport { ARBITRUM, AVALANCHE, getChainName, GOERLI, IS_TESTNET, MAINNET, MOONBEAM, MUMBAI } from \"config/chains\";\nimport { getServerUrl } from \"config/backend\";\nimport { contractFetcher } from \"lib/contracts\";\nimport { useInfoTokens } from \"domain/tokens\";\nimport { getWhitelistedTokens, FLP_POOL_COLORS } from \"config/tokens\";\nimport {\n bigNumberify,\n expandDecimals,\n formatAmount,\n formatKeyAmount,\n formatKeyPrice,\n numberWithCommas,\n} from \"lib/numbers\";\nimport { useChainId } from \"lib/chains\";\nimport { formatDate } from \"lib/dates\";\nconst ACTIVE_CHAIN_IDS = [IS_TESTNET ? MUMBAI : MOONBEAM];\n\nconst { AddressZero } = ethers.constants;\n\nfunction getVolumeInfo(hourlyVolumes) {\n if (!hourlyVolumes || hourlyVolumes.length === 0) {\n return {};\n }\n const dailyVolumes = hourlyVolumes.map((hourlyVolume) => {\n const secondsPerHour = 60 * 60;\n const minTime = parseInt(Date.now() / 1000 / secondsPerHour) * secondsPerHour - 24 * secondsPerHour;\n const info = {};\n let totalVolume = bigNumberify(0);\n for (let i = 0; i < hourlyVolume.length; i++) {\n const item = hourlyVolume[i].data;\n if (parseInt(item.timestamp) < minTime) {\n break;\n }\n\n if (!info[item.token]) {\n info[item.token] = bigNumberify(0);\n }\n\n info[item.token] = info[item.token].add(item.volume);\n totalVolume = totalVolume.add(item.volume);\n }\n info.totalVolume = totalVolume;\n return info;\n });\n return dailyVolumes.reduce(\n (acc, cv, index) => {\n acc.totalVolume = acc.totalVolume.add(cv.totalVolume);\n acc[ACTIVE_CHAIN_IDS[index]] = cv;\n return acc;\n },\n { totalVolume: bigNumberify(0) }\n );\n}\n\nfunction getPositionStats(positionStats) {\n if (!positionStats || positionStats.length === 0) {\n return null;\n }\n return positionStats.reduce(\n (acc, cv, i) => {\n acc.totalLongPositionSizes = acc.totalLongPositionSizes.add(cv.totalLongPositionSizes);\n acc.totalShortPositionSizes = acc.totalShortPositionSizes.add(cv.totalShortPositionSizes);\n acc[ACTIVE_CHAIN_IDS[i]] = cv;\n return acc;\n },\n {\n totalLongPositionSizes: bigNumberify(0),\n totalShortPositionSizes: bigNumberify(0),\n }\n );\n}\n\nfunction getCurrentFeesUsd(tokenAddresses, fees, infoTokens) {\n if (!fees || !infoTokens) {\n return bigNumberify(0);\n }\n\n let currentFeesUsd = bigNumberify(0);\n for (let i = 0; i < tokenAddresses.length; i++) {\n const tokenAddress = tokenAddresses[i];\n const tokenInfo = infoTokens[tokenAddress];\n if (!tokenInfo || !tokenInfo.contractMinPrice) {\n continue;\n }\n\n const feeUsd = fees[i].mul(tokenInfo.contractMinPrice).div(expandDecimals(1, tokenInfo.decimals));\n currentFeesUsd = currentFeesUsd.add(feeUsd);\n }\n\n return currentFeesUsd;\n}\n\nexport default function Dashboard() {\n const { active, library } = useWeb3React();\n const { chainId } = useChainId();\n const totalVolume = useTotalVolume();\n\n const chainName = getChainName(chainId);\n\n const { data: positionStats } = useSWR(\n ACTIVE_CHAIN_IDS.map((chainId) => getServerUrl(chainId, \"/position_stats\")),\n {\n fetcher: arrayURLFetcher,\n }\n );\n\n const { data: hourlyVolumes } = useSWR(\n ACTIVE_CHAIN_IDS.map((chainId) => getServerUrl(chainId, \"/hourly_volume\")),\n {\n fetcher: arrayURLFetcher,\n }\n );\n\n let { total: totalFxdxSupply } = useTotalFxdxSupply(true);\n\n const currentVolumeInfo = getVolumeInfo(hourlyVolumes);\n\n const positionStatsInfo = getPositionStats(positionStats);\n\n function getWhitelistedTokenAddresses(chainId) {\n const whitelistedTokens = getWhitelistedTokens(chainId);\n return whitelistedTokens.map((token) => token.address);\n }\n\n const whitelistedTokens = getWhitelistedTokens(chainId);\n const tokenList = whitelistedTokens.filter((t) => !t.isWrapped);\n const visibleTokens = tokenList.filter((t) => !t.isTempHidden);\n\n const readerAddress = getContract(chainId, \"Reader\");\n const vaultAddress = getContract(chainId, \"Vault\");\n const flpManagerAddress = getContract(chainId, \"FlpManager\");\n\n const fxdxAddress = getContract(chainId, \"FXDX\");\n const flpAddress = getContract(chainId, \"FLP\");\n const usdfAddress = getContract(chainId, \"USDF\");\n\n const tokensForSupplyQuery = [fxdxAddress, flpAddress, usdfAddress];\n\n const { data: aums } = useSWR([`Dashboard:getAums:${active}`, chainId, flpManagerAddress, \"getAums\"], {\n fetcher: contractFetcher(library, FlpManager),\n });\n\n const { data: totalSupplies } = useSWR(\n [`Dashboard:totalSupplies:${active}`, chainId, readerAddress, \"getTokenBalancesWithSupplies\", AddressZero],\n {\n fetcher: contractFetcher(library, Reader, [tokensForSupplyQuery]),\n }\n );\n\n const { data: totalTokenWeights } = useSWR(\n [`FlpSwap:totalTokenWeights:${active}`, chainId, vaultAddress, \"totalTokenWeights\"],\n {\n fetcher: contractFetcher(library, Vault),\n }\n );\n\n const { infoTokens } = useInfoTokens(library, chainId, active, undefined, undefined);\n const { infoTokens: infoTokensEthereum } = useInfoTokens(\n null,\n IS_TESTNET ? MUMBAI : MOONBEAM,\n active,\n undefined,\n undefined\n );\n // const { infoTokens: infoTokensArbitrum } = useInfoTokens(null, ARBITRUM, active, undefined, undefined);\n // const { infoTokens: infoTokensAvax } = useInfoTokens(null, AVALANCHE, active, undefined, undefined);\n // const { infoTokens: infoTokensMoonBeam } = useInfoTokens(null, MOONBEAM, active, undefined, undefined)\n\n const { data: currentFees } = useSWR(\n infoTokensEthereum[AddressZero].contractMinPrice // && infoTokensAvax[AddressZero].contractMinPrice\n ? \"Dashboard:currentFees\"\n : null,\n {\n fetcher: () => {\n return Promise.all(\n ACTIVE_CHAIN_IDS.map((chainId) =>\n contractFetcher(null, Reader, [getWhitelistedTokenAddresses(chainId)])(\n `Dashboard:fees:${chainId}`,\n chainId,\n getContract(chainId, \"Reader\"),\n \"getFees\",\n getContract(chainId, \"Vault\")\n )\n )\n ).then((fees) => {\n return fees.reduce(\n (acc, cv, i) => {\n const feeUSD = getCurrentFeesUsd(\n getWhitelistedTokenAddresses(ACTIVE_CHAIN_IDS[i]),\n cv,\n // ACTIVE_CHAIN_IDS[i] === ARBITRUM ? infoTokensArbitrum : infoTokensAvax\n infoTokensEthereum\n );\n acc[ACTIVE_CHAIN_IDS[i]] = feeUSD;\n acc.total = acc.total.add(feeUSD);\n return acc;\n },\n { total: bigNumberify(0) }\n );\n });\n },\n }\n );\n\n const { data: feesSummaryByChain } = useFeesSummary();\n const feesSummary = feesSummaryByChain[chainId];\n\n // const eth = infoTokens[getTokenBySymbol(chainId, \"ETH\").address];\n const shouldIncludeCurrrentFees =\n feesSummaryByChain[chainId].lastUpdatedAt &&\n parseInt(Date.now() / 1000) - feesSummaryByChain[chainId].lastUpdatedAt > 60 * 60;\n\n const totalFees = ACTIVE_CHAIN_IDS.map((chainId) => {\n if (shouldIncludeCurrrentFees && currentFees && currentFees[chainId]) {\n return currentFees[chainId].div(expandDecimals(1, USD_DECIMALS)).add(feesSummaryByChain[chainId].totalFees || 0);\n }\n\n return feesSummaryByChain[chainId].totalFees || 0;\n })\n .map((v) => Math.round(v))\n .reduce(\n (acc, cv, i) => {\n acc[ACTIVE_CHAIN_IDS[i]] = cv;\n acc.total = acc.total + cv;\n return acc;\n },\n { total: 0 }\n );\n\n const {\n fxdxPrice,\n fxdxPriceFromEthereum,\n fxdxPriceFromMoonBeam,\n /*, fxdxPriceFromArbitrum, fxdxPriceFromAvalanche */\n } = useFxdxPrice(chainId, { arbitrum: chainId === ARBITRUM ? library : undefined }, active);\n\n let { total: totalFxdxInLiquidity } = useTotalFxdxInLiquidity(chainId, active);\n\n let {\n total: totalStakedFxdx,\n ethereum: ethereumStakedFxdx,\n moonbeam: moonbeamStakedFxdx,\n // avax: avaxStakedFxdx,\n // arbitrum: arbitrumStakedFxdx\n } = useTotalFxdxStaked();\n\n let fxdxMarketCap;\n if (fxdxPrice && totalFxdxSupply) {\n fxdxMarketCap = fxdxPrice.mul(totalFxdxSupply).div(expandDecimals(1, FXDX_DECIMALS));\n }\n\n let stakedFxdxSupplyUsd;\n if (fxdxPrice && totalStakedFxdx) {\n stakedFxdxSupplyUsd = totalStakedFxdx.mul(fxdxPrice).div(expandDecimals(1, FXDX_DECIMALS));\n }\n\n let aum;\n if (aums && aums.length > 0) {\n aum = aums[0].add(aums[1]).div(2);\n }\n\n let flpPrice;\n let flpSupply;\n let flpMarketCap;\n if (aum && totalSupplies && totalSupplies[3]) {\n flpSupply = totalSupplies[3];\n flpPrice =\n aum && aum.gt(0) && flpSupply.gt(0)\n ? aum.mul(expandDecimals(1, FLP_DECIMALS)).div(flpSupply)\n : expandDecimals(1, USD_DECIMALS);\n flpMarketCap = flpPrice.mul(flpSupply).div(expandDecimals(1, FLP_DECIMALS));\n }\n\n let tvl;\n if (flpMarketCap && fxdxPrice && totalStakedFxdx) {\n tvl = flpMarketCap.add(fxdxPrice.mul(totalStakedFxdx).div(expandDecimals(1, FXDX_DECIMALS)));\n }\n\n // const ethFloorPriceFund = expandDecimals(350 + 148 + 384, 18);\n // const flpFloorPriceFund = expandDecimals(660001, 18);\n // const usdcFloorPriceFund = expandDecimals(784598 + 200000, 30);\n\n // let totalFloorPriceFundUsd;\n\n // if (eth && eth.contractMinPrice && flpPrice) {\n // const ethFloorPriceFundUsd = ethFloorPriceFund.mul(eth.contractMinPrice).div(expandDecimals(1, eth.decimals));\n // const flpFloorPriceFundUsd = flpFloorPriceFund.mul(flpPrice).div(expandDecimals(1, 18));\n\n // totalFloorPriceFundUsd = ethFloorPriceFundUsd.add(flpFloorPriceFundUsd).add(usdcFloorPriceFund);\n // }\n\n let adjustedUsdfSupply = bigNumberify(0);\n\n for (let i = 0; i < tokenList.length; i++) {\n const token = tokenList[i];\n const tokenInfo = infoTokens[token.address];\n if (tokenInfo && tokenInfo.usdfAmount) {\n adjustedUsdfSupply = adjustedUsdfSupply.add(tokenInfo.usdfAmount);\n }\n }\n\n const getWeightText = (tokenInfo) => {\n if (\n !tokenInfo.weight ||\n !tokenInfo.usdfAmount ||\n !adjustedUsdfSupply ||\n adjustedUsdfSupply.eq(0) ||\n !totalTokenWeights\n ) {\n return \"...\";\n }\n\n const currentWeightBps = tokenInfo.usdfAmount.mul(BASIS_POINTS_DIVISOR).div(adjustedUsdfSupply);\n // use add(1).div(10).mul(10) to round numbers up\n const targetWeightBps = tokenInfo.weight.mul(BASIS_POINTS_DIVISOR).div(totalTokenWeights).add(1).div(10).mul(10);\n\n const weightText = `${formatAmount(currentWeightBps, 2, 2, false)}% / ${formatAmount(\n targetWeightBps,\n 2,\n 2,\n false\n )}%`;\n\n return (\n \n {currentWeightBps.lt(targetWeightBps) && (\n
\n \n {tokenInfo.symbol} is below its target weight.\n
\n
\n Get lower fees to{\" \"}\n \n buy FLP\n {\" \"}\n with {tokenInfo.symbol}, and to{\" \"}\n \n swap\n {\" \"}\n {tokenInfo.symbol} for other tokens.\n \n
\n )}\n {currentWeightBps.gt(targetWeightBps) && (\n \n
\n Get lower fees to{\" \"}\n \n buy FLP\n {\" \"}\n with {tokenInfo.symbol}, and to{\" \"}\n \n swap\n {\" \"}\n {tokenInfo.symbol} for other tokens.\n
\n \n {tokenInfo.symbol} is above its target weight.\n
\n
\n Get lower fees to{\" \"}\n \n swap\n {\" \"}\n tokens for {tokenInfo.symbol}.\n \n
\n )}\n \n
\n Get lower fees to{\" \"}\n \n swap\n {\" \"}\n tokens for {tokenInfo.symbol}.\n
\n
\n \n More Info \n \n
\n \n );\n }}\n />\n );\n };\n\n let stakedPercent = 0;\n\n if (totalFxdxSupply && !totalFxdxSupply.isZero() && !totalStakedFxdx.isZero()) {\n stakedPercent = totalStakedFxdx.mul(100).div(totalFxdxSupply).toNumber();\n }\n\n let liquidityPercent = 0;\n\n if (totalFxdxSupply && !totalFxdxSupply.isZero() && totalFxdxInLiquidity) {\n liquidityPercent = totalFxdxInLiquidity.mul(100).div(totalFxdxSupply).toNumber();\n }\n\n let notStakedPercent = 100 - stakedPercent - liquidityPercent;\n\n let fxdxDistributionData = [\n {\n name: t`staked`,\n value: stakedPercent,\n color: \"#4353fa\",\n },\n {\n name: t`in liquidity`,\n value: liquidityPercent,\n color: \"#0598fa\",\n },\n {\n name: t`not staked`,\n value: notStakedPercent,\n color: \"#5c0af5\",\n },\n ];\n\n const totalStatsStartDate = chainId === GOERLI ? t`03 Nov 2022` : t`14 DEC 2022`;\n\n let stableFlp = 0;\n let totalFlp = 0;\n\n let flpPool = tokenList.map((token) => {\n const tokenInfo = infoTokens[token.address];\n if (tokenInfo.usdfAmount && adjustedUsdfSupply && adjustedUsdfSupply.gt(0)) {\n const currentWeightBps = tokenInfo.usdfAmount.mul(BASIS_POINTS_DIVISOR).div(adjustedUsdfSupply);\n if (tokenInfo.isStable) {\n stableFlp += parseFloat(`${formatAmount(currentWeightBps, 2, 2, false)}`);\n }\n totalFlp += parseFloat(`${formatAmount(currentWeightBps, 2, 2, false)}`);\n return {\n fullname: token.name,\n name: token.symbol,\n value: parseFloat(`${formatAmount(currentWeightBps, 2, 2, false)}`),\n };\n }\n return null;\n });\n\n let stablePercentage = totalFlp > 0 ? ((stableFlp * 100) / totalFlp).toFixed(2) : \"0.0\";\n\n flpPool = flpPool.filter(function (element) {\n return element !== null;\n });\n\n flpPool = flpPool.sort(function (a, b) {\n if (a.value < b.value) return 1;\n else return -1;\n });\n\n fxdxDistributionData = fxdxDistributionData.sort(function (a, b) {\n if (a.value < b.value) return 1;\n else return -1;\n });\n\n const [fxdxActiveIndex, setFXDXActiveIndex] = useState(null);\n\n const onFXDXDistributionChartEnter = (_, index) => {\n setFXDXActiveIndex(index);\n };\n\n const onFXDXDistributionChartLeave = (_, index) => {\n setFXDXActiveIndex(null);\n };\n\n const [flpActiveIndex, setFLPActiveIndex] = useState(null);\n\n const onFLPPoolChartEnter = (_, index) => {\n setFLPActiveIndex(index);\n };\n\n const onFLPPoolChartLeave = (_, index) => {\n setFLPActiveIndex(null);\n };\n\n const CustomTooltip = ({ active, payload }) => {\n if (active && payload && payload.length) {\n return (\n \n \n {payload[0].value}% {payload[0].name}\n
\n );\n }\n\n return null;\n };\n\n return (\n \n
\n \n \n
\n \n
\n \n Stats {chainId === AVALANCHE && 
}\n {chainId === ARBITRUM && 
}\n {chainId === GOERLI && 
}\n {chainId === MOONBEAM && 
}\n
\n \n \n {chainName} Total Stats start from {totalStatsStartDate}.
For detailed stats:\n {\" \"}\n {chainId === GOERLI && (\n https://test.stats.fxdx.exchange \n )}\n {chainId === ARBITRUM && (\n \n https://data.fxdx.exchange/arbitrum\n \n )}\n {chainId === AVALANCHE && (\n \n https://data.fxdx.exchange/avalanche\n \n )}\n {chainId === MOONBEAM && (\n https://data.fxdx.exchange \n )}\n .\n
\n For detailed stats:\n
\n
\n \n \n
\n \n
\n \n Overview \n
\n \n \n
\n \n
\n \n AUM \n
\n \n (\n {t`Assets Under Management: FXDX staked (All chains) + FLP pool (${chainName})`}\n )}\n />\n
\n \n
\n \n FLP Pool \n
\n \n {t`Total value of tokens in FLP pool (${chainName})`}}\n />\n
\n \n
\n \n 24h Volume \n
\n \n (\n
\n \n
\n \n Long Positions \n
\n \n (\n
\n \n
\n {feesSummary.lastUpdatedAt ? (\n \n Short Positions \n
\n \n (\n
\n \n
\n ) : null}\n \n Fees since {formatDate(feesSummary.lastUpdatedAt)}\n
\n \n (\n
\n \n
\n \n Total Stats \n
\n \n \n
\n \n
\n \n Total Fees \n
\n \n (\n
\n \n
\n {/* \n Total Volume \n
\n \n (\n
\n \n
*/}\n \n Floor Price Fund \n
\n ${formatAmount(totalFloorPriceFundUsd, 30, 0, true)}
\n \n
\n \n Tokens {chainId === AVALANCHE && }\n {chainId === ARBITRUM && }\n {(chainId === GOERLI || chainId === MAINNET) && }\n {(chainId === MUMBAI || chainId === MAINNET) && }\n {chainId === MOONBEAM && }\n
\n \n Platform and FLP index tokens. \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n {/*
\n \n 
\n
*/}\n \n
\n FXDX
\n FXDX
\n \n
\n \n
\n \n
\n \n Price \n
\n \n {!fxdxPrice && \"...\"}\n {fxdxPrice && (\n (\n <>\n {IS_TESTNET && (\n
\n \n
\n \n Supply \n
\n {formatAmount(totalFxdxSupply, FXDX_DECIMALS, 0, true)} FXDX
\n \n
\n \n Total Staked \n
\n \n (\n
\n \n
\n \n Market Cap \n
\n ${formatAmount(fxdxMarketCap, USD_DECIMALS, 0, true)}
\n \n {fxdxDistributionData.length > 0 && (\n \n \n {fxdxDistributionData.map((entry, index) => (\n \n Distribution \n \n \n )}\n
\n \n
\n \n
\n \n
\n \n \n {/*
\n \n 
\n {(chainId === GOERLI || chainId === MAINNET) ? (\n 
\n ) : chainId === ARBITRUM ? (\n 
\n ) : chainId === AVALANCHE ? (\n 
\n ) : (\n 
\n )}\n
*/}\n \n
\n FLP
\n FLP
\n \n
\n \n
\n \n
\n \n Price \n
\n ${formatAmount(flpPrice, USD_DECIMALS, 3, true)}
\n \n
\n \n Supply \n
\n {formatAmount(flpSupply, FLP_DECIMALS, 0, true)} FLP
\n \n
\n \n Total Staked \n
\n ${formatAmount(flpMarketCap, USD_DECIMALS, 0, true)}
\n \n
\n \n Market Cap \n
\n ${formatAmount(flpMarketCap, USD_DECIMALS, 0, true)}
\n \n
\n \n Stablecoin Percentage \n
\n {stablePercentage}%
\n \n {flpPool.length > 0 && (\n \n \n {flpPool.map((entry, index) => (\n \n FLP Pool\n \n \n )}\n
\n \n \n \n
\n
\n \n FLP Index Composition {\" \"}\n {chainId === AVALANCHE && }\n {chainId === ARBITRUM && }\n {chainId === GOERLI && }\n {chainId === MUMBAI && }\n {chainId === MOONBEAM && }\n
\n \n | \n | \n \n | \n \n | \n \n | \n \n | \n
|---|---|---|---|---|
| \n \n \n \n \n \n \n \n \n {token.name} \n {token.symbol} \n \n \n | \n ${formatKeyPrice(tokenInfo, \"minPrice\", true)} | \n\n | \n {getWeightText(tokenInfo)} | \n{formatAmount(utilization, 2, 2, false)}% | \n
\n {visibleTokens.map((token) => {\n const tokenInfo = infoTokens[token.address];\n let utilization = bigNumberify(0);\n if (tokenInfo && tokenInfo.reservedAmount && tokenInfo.poolAmount && tokenInfo.poolAmount.gt(0)) {\n utilization = tokenInfo.reservedAmount.mul(BASIS_POINTS_DIVISOR).div(tokenInfo.poolAmount);\n }\n let maxUsdfAmount = DEFAULT_MAX_USDF_AMOUNT;\n if (tokenInfo.maxUsdfAmount && tokenInfo.maxUsdfAmount.gt(0)) {\n maxUsdfAmount = tokenInfo.maxUsdfAmount;\n }\n\n const tokenImage = importImage(\"ic_\" + token.symbol.toLowerCase() + \"_24.svg\");\n return (\n
\n \n
\n );\n })}\n \n
\n \n \n 
\n
\n {token.symbol}
\n \n
\n \n
\n \n
\n \n Price \n
\n ${formatKeyPrice(tokenInfo, \"minPrice\", true)}
\n \n
\n \n Pool \n
\n \n {\n return (\n <>\n
\n \n
\n \n Weight \n
\n {getWeightText(tokenInfo)}
\n \n
\n \n Utilization \n
\n {formatAmount(utilization, 2, 2, false)}%
\n \n
\n \n )}\n \n
\n \n {props.label}
\n setIsVisible(false)}>\n
\n \n {props.children}\n
\n \n \n \n
\n );\n}\n\nfunction UnstakeModal(props) {\n const {\n isVisible,\n setIsVisible,\n chainId,\n title,\n maxAmount,\n value,\n setValue,\n library,\n unstakingTokenSymbol,\n rewardRouterAddress,\n unstakeMethodName,\n multiplierPointsAmount,\n reservedAmount,\n bonusFxdxInFeeFxdx,\n setPendingTxns,\n } = props;\n const [isUnstaking, setIsUnstaking] = useState(false);\n\n let amount = parseValue(value, 18);\n let burnAmount;\n\n if (\n multiplierPointsAmount &&\n multiplierPointsAmount.gt(0) &&\n amount &&\n amount.gt(0) &&\n bonusFxdxInFeeFxdx &&\n bonusFxdxInFeeFxdx.gt(0)\n ) {\n burnAmount = multiplierPointsAmount.mul(amount).div(bonusFxdxInFeeFxdx);\n }\n\n const shouldShowReductionAmount = true;\n let rewardReductionBasisPoints;\n if (burnAmount && bonusFxdxInFeeFxdx) {\n rewardReductionBasisPoints = burnAmount.mul(BASIS_POINTS_DIVISOR).div(bonusFxdxInFeeFxdx);\n }\n\n const getError = () => {\n if (!amount) {\n return t`Enter an amount`;\n }\n if (amount.gt(maxAmount)) {\n return t`Max amount exceeded`;\n }\n };\n\n const onClickPrimary = () => {\n setIsUnstaking(true);\n const contract = new ethers.Contract(rewardRouterAddress, RewardRouter.abi, library.getSigner());\n callContract(chainId, contract, unstakeMethodName, [amount], {\n sentMsg: t`Unstake submitted!`,\n failMsg: t`Unstake failed.`,\n successMsg: t`Unstake completed!`,\n setPendingTxns,\n })\n .then(async (res) => {\n setIsVisible(false);\n })\n .finally(() => {\n setIsUnstaking(false);\n });\n };\n\n const isPrimaryEnabled = () => {\n const error = getError();\n if (error) {\n return false;\n }\n if (isUnstaking) {\n return false;\n }\n return true;\n };\n\n const getPrimaryText = () => {\n const error = getError();\n if (error) {\n return error;\n }\n if (isUnstaking) {\n return t`Unstaking...`;\n }\n return t`Unstake`;\n };\n\n return (\n \n
\n \n
\n \n
\n \n Stake \n
\n setValue(formatAmountFree(maxAmount, 18, 18))}>\n Max: {formatAmount(maxAmount, 18, 4, true)} \n
\n \n
\n \n setValue(e.target.value)}\n />\n
\n {stakingTokenSymbol}
\n \n \n
\n \n \n \n
\n );\n}\n\nfunction VesterDepositModal(props) {\n const {\n isVisible,\n setIsVisible,\n chainId,\n title,\n maxAmount,\n value,\n setValue,\n balance,\n vestedAmount,\n averageStakedAmount,\n maxVestableAmount,\n library,\n stakeTokenLabel,\n reserveAmount,\n maxReserveAmount,\n vesterAddress,\n setPendingTxns,\n } = props;\n const [isDepositing, setIsDepositing] = useState(false);\n\n let amount = parseValue(value, 18);\n\n let nextReserveAmount = reserveAmount;\n\n let nextDepositAmount = vestedAmount;\n if (amount) {\n nextDepositAmount = vestedAmount.add(amount);\n }\n\n let additionalReserveAmount = bigNumberify(0);\n if (amount && averageStakedAmount && maxVestableAmount && maxVestableAmount.gt(0)) {\n nextReserveAmount = nextDepositAmount.mul(averageStakedAmount).div(maxVestableAmount);\n if (nextReserveAmount.gt(reserveAmount)) {\n additionalReserveAmount = nextReserveAmount.sub(reserveAmount);\n }\n }\n\n const getError = () => {\n if (!amount || amount.eq(0)) {\n return t`Enter an amount`;\n }\n if (maxAmount && amount.gt(maxAmount)) {\n return t`Max amount exceeded`;\n }\n if (nextReserveAmount.gt(maxReserveAmount)) {\n return t`Insufficient staked tokens`;\n }\n };\n\n const onClickPrimary = () => {\n setIsDepositing(true);\n const contract = new ethers.Contract(vesterAddress, Vester.abi, library.getSigner());\n\n callContract(chainId, contract, \"deposit\", [amount], {\n sentMsg: t`Deposit submitted!`,\n failMsg: t`Deposit failed!`,\n successMsg: t`Deposited!`,\n setPendingTxns,\n })\n .then(async (res) => {\n setIsVisible(false);\n })\n .finally(() => {\n setIsDepositing(false);\n });\n };\n\n const isPrimaryEnabled = () => {\n const error = getError();\n if (error) {\n return false;\n }\n if (isDepositing) {\n return false;\n }\n return true;\n };\n\n const getPrimaryText = () => {\n const error = getError();\n if (error) {\n return error;\n }\n if (isDepositing) {\n return t`Depositing...`;\n }\n return t`Deposit`;\n };\n\n return (\n \n
\n {reservedAmount && reservedAmount.gt(0) && (\n \n
\n \n
\n \n Unstake \n
\n setValue(formatAmountFree(maxAmount, 18, 18))}>\n Max: {formatAmount(maxAmount, 18, 4, true)} \n
\n \n
\n \n setValue(e.target.value)}\n />\n
\n {unstakingTokenSymbol}
\n \n You have {formatAmount(reservedAmount, 18, 2, true)} tokens reserved for vesting.\n
\n )}\n {burnAmount && burnAmount.gt(0) && rewardReductionBasisPoints && rewardReductionBasisPoints.gt(0) && (\n \n Unstaking will burn \n \n {formatAmount(burnAmount, 18, 4, true)} Multiplier Points\n \n . \n {shouldShowReductionAmount && (\n Boost Percentage: -{formatAmount(rewardReductionBasisPoints, 2, 2)}%.\n )}\n
\n )}\n \n \n
\n \n \n
\n \n
\n \n setValue(formatAmountFree(maxAmount, 18, 18))}\n >\n Max: {formatAmount(maxAmount, 18, 4, true)} \n
\n \n
\n \n Deposit \n
\n \n
\n \n setValue(e.target.value)}\n />\n
\n esFXDX
\n \n
\n \n
\n \n Wallet \n
\n {formatAmount(balance, 18, 2, true)} esFXDX
\n \n
\n \n Vault Capacity \n
\n \n {\n return (\n
\n \n
\n );\n }}\n />\n \n
\n
\n \n Reserve Amount \n
\n \n {\n return (\n <>\n
\n\n You need a total of at least {formatAmount(nextReserveAmount, 18, 2, true)}{\" \"}\n {stakeTokenLabel} to vest {formatAmount(amount, 18, 2, true)} esFXDX.\n \n \n )}\n \n );\n }}\n />\n
\n \n
\n \n
\n \n \n \n \n \n \n \n
\n );\n}\n\nfunction CompoundModal(props) {\n const {\n isVisible,\n setIsVisible,\n rewardRouterAddress,\n active,\n account,\n library,\n chainId,\n setPendingTxns,\n totalVesterRewards,\n nativeTokenSymbol,\n wrappedTokenSymbol,\n } = props;\n const [isCompounding, setIsCompounding] = useState(false);\n const [shouldClaimFxdx, setShouldClaimFxdx] = useLocalStorageSerializeKey(\n [chainId, \"StakeV2-compound-should-claim-fxdx\"],\n true\n );\n const [shouldStakeFxdx, setShouldStakeFxdx] = useLocalStorageSerializeKey(\n [chainId, \"StakeV2-compound-should-stake-fxdx\"],\n true\n );\n const [shouldClaimEsFxdx, setShouldClaimEsFxdx] = useLocalStorageSerializeKey(\n [chainId, \"StakeV2-compound-should-claim-es-fxdx\"],\n true\n );\n const [shouldStakeEsFxdx, setShouldStakeEsFxdx] = useLocalStorageSerializeKey(\n [chainId, \"StakeV2-compound-should-stake-es-fxdx\"],\n true\n );\n const [shouldStakeMultiplierPoints, setShouldStakeMultiplierPoints] = useState(true);\n const [shouldClaimWeth, setShouldClaimWeth] = useLocalStorageSerializeKey(\n [chainId, \"StakeV2-compound-should-claim-weth\"],\n true\n );\n const [shouldConvertWeth, setShouldConvertWeth] = useLocalStorageSerializeKey(\n [chainId, \"StakeV2-compound-should-convert-weth\"],\n true\n );\n\n const fxdxAddress = getContract(chainId, \"FXDX\");\n const stakedFxdxTrackerAddress = getContract(chainId, \"StakedFxdxTracker\");\n\n const [isApproving, setIsApproving] = useState(false);\n\n const { data: tokenAllowance } = useSWR(\n active && [active, chainId, fxdxAddress, \"allowance\", account, stakedFxdxTrackerAddress],\n {\n fetcher: contractFetcher(library, Token),\n }\n );\n\n const needApproval = shouldStakeFxdx && tokenAllowance && totalVesterRewards && totalVesterRewards.gt(tokenAllowance);\n\n const isPrimaryEnabled = () => {\n return !isCompounding && !isApproving && !isCompounding;\n };\n\n const getPrimaryText = () => {\n if (isApproving) {\n return t`Approving FXDX...`;\n }\n if (needApproval) {\n return t`Approve FXDX`;\n }\n if (isCompounding) {\n return t`Compounding...`;\n }\n return t`Compound`;\n };\n\n const onClickPrimary = () => {\n if (needApproval) {\n approveTokens({\n setIsApproving,\n library,\n tokenAddress: fxdxAddress,\n spender: stakedFxdxTrackerAddress,\n chainId,\n });\n return;\n }\n\n setIsCompounding(true);\n\n const contract = new ethers.Contract(rewardRouterAddress, RewardRouter.abi, library.getSigner());\n callContract(\n chainId,\n contract,\n \"handleRewards\",\n [\n shouldClaimFxdx || shouldStakeFxdx,\n shouldStakeFxdx,\n shouldClaimEsFxdx || shouldStakeEsFxdx,\n shouldStakeEsFxdx,\n shouldStakeMultiplierPoints,\n shouldClaimWeth || shouldConvertWeth,\n shouldConvertWeth,\n ],\n {\n sentMsg: t`Compound submitted!`,\n failMsg: t`Compound failed.`,\n successMsg: t`Compound completed!`,\n setPendingTxns,\n }\n )\n .then(async (res) => {\n setIsVisible(false);\n })\n .finally(() => {\n setIsCompounding(false);\n });\n };\n\n const toggleShouldStakeFxdx = (value) => {\n if (value) {\n setShouldClaimFxdx(true);\n }\n setShouldStakeFxdx(value);\n };\n\n const toggleShouldStakeEsFxdx = (value) => {\n if (value) {\n setShouldClaimEsFxdx(true);\n }\n setShouldStakeEsFxdx(value);\n };\n\n const toggleConvertWeth = (value) => {\n if (value) {\n setShouldClaimWeth(true);\n }\n setShouldConvertWeth(value);\n };\n\n return (\n \n This will withdraw and unreserve all tokens as well as pause vesting.\n
\n
\n esFXDX tokens that have been converted to FXDX will remain as FXDX tokens.\n
\n
\n To claim FXDX tokens without withdrawing, use the \"Claim\" button under the Total Rewards section.\n
\n
\n
\n \n
\n esFXDX tokens that have been converted to FXDX will remain as FXDX tokens.\n
\n
\n To claim FXDX tokens without withdrawing, use the \"Claim\" button under the Total Rewards section.\n
\n
\n
\n \n
\n \n \n \n
\n );\n}\n\nfunction ClaimModal(props) {\n const {\n isVisible,\n setIsVisible,\n rewardRouterAddress,\n library,\n chainId,\n setPendingTxns,\n nativeTokenSymbol,\n wrappedTokenSymbol,\n } = props;\n const [isClaiming, setIsClaiming] = useState(false);\n const [shouldClaimFxdx, setShouldClaimFxdx] = useLocalStorageSerializeKey(\n [chainId, \"StakeV2-claim-should-claim-fxdx\"],\n true\n );\n const [shouldClaimEsFxdx, setShouldClaimEsFxdx] = useLocalStorageSerializeKey(\n [chainId, \"StakeV2-claim-should-claim-es-fxdx\"],\n true\n );\n const [shouldClaimWeth, setShouldClaimWeth] = useLocalStorageSerializeKey(\n [chainId, \"StakeV2-claim-should-claim-weth\"],\n true\n );\n const [shouldConvertWeth, setShouldConvertWeth] = useLocalStorageSerializeKey(\n [chainId, \"StakeV2-claim-should-convert-weth\"],\n true\n );\n\n const isPrimaryEnabled = () => {\n return !isClaiming;\n };\n\n const getPrimaryText = () => {\n if (isClaiming) {\n return t`Claiming...`;\n }\n return t`Claim`;\n };\n\n const onClickPrimary = () => {\n setIsClaiming(true);\n\n const contract = new ethers.Contract(rewardRouterAddress, RewardRouter.abi, library.getSigner());\n callContract(\n chainId,\n contract,\n \"handleRewards\",\n [\n shouldClaimFxdx,\n false, // shouldStakeFxdx\n shouldClaimEsFxdx,\n false, // shouldStakeEsFxdx\n false, // shouldStakeMultiplierPoints\n shouldClaimWeth,\n shouldConvertWeth,\n ],\n {\n sentMsg: t`Claim submitted.`,\n failMsg: t`Claim failed.`,\n successMsg: t`Claim completed!`,\n setPendingTxns,\n }\n )\n .then(async (res) => {\n setIsVisible(false);\n })\n .finally(() => {\n setIsClaiming(false);\n });\n };\n\n const toggleConvertWeth = (value) => {\n if (value) {\n setShouldClaimWeth(true);\n }\n setShouldConvertWeth(value);\n };\n\n return (\n \n
\n \n \n Stake Multiplier Points \n \n
\n \n \n Claim FXDX Rewards \n \n
\n \n \n Stake FXDX Rewards \n \n
\n \n \n Claim esFXDX Rewards \n \n
\n \n \n Stake esFXDX Rewards \n \n
\n \n \n Claim {wrappedTokenSymbol} Rewards \n \n
\n \n \n \n Convert {wrappedTokenSymbol} to {nativeTokenSymbol}\n \n \n
\n \n \n
\n \n \n \n
\n );\n}\n\nexport default function StakeV2({ setPendingTxns, connectWallet }) {\n const { active, library, account } = useWeb3React();\n const { chainId } = useChainId();\n\n const chainName = getChainName(chainId);\n\n const hasInsurance = false;\n\n const [isStakeModalVisible, setIsStakeModalVisible] = useState(false);\n const [stakeModalTitle, setStakeModalTitle] = useState(\"\");\n const [stakeModalMaxAmount, setStakeModalMaxAmount] = useState(undefined);\n const [stakeValue, setStakeValue] = useState(\"\");\n const [stakingTokenSymbol, setStakingTokenSymbol] = useState(\"\");\n const [stakingTokenAddress, setStakingTokenAddress] = useState(\"\");\n const [stakingFarmAddress, setStakingFarmAddress] = useState(\"\");\n const [stakeMethodName, setStakeMethodName] = useState(\"\");\n\n const [isUnstakeModalVisible, setIsUnstakeModalVisible] = useState(false);\n const [unstakeModalTitle, setUnstakeModalTitle] = useState(\"\");\n const [unstakeModalMaxAmount, setUnstakeModalMaxAmount] = useState(undefined);\n const [unstakeModalReservedAmount, setUnstakeModalReservedAmount] = useState(undefined);\n const [unstakeValue, setUnstakeValue] = useState(\"\");\n const [unstakingTokenSymbol, setUnstakingTokenSymbol] = useState(\"\");\n const [unstakeMethodName, setUnstakeMethodName] = useState(\"\");\n\n const [isVesterDepositModalVisible, setIsVesterDepositModalVisible] = useState(false);\n const [vesterDepositTitle, setVesterDepositTitle] = useState(\"\");\n const [vesterDepositStakeTokenLabel, setVesterDepositStakeTokenLabel] = useState(\"\");\n const [vesterDepositMaxAmount, setVesterDepositMaxAmount] = useState(\"\");\n const [vesterDepositBalance, setVesterDepositBalance] = useState(\"\");\n const [vesterDepositEscrowedBalance, setVesterDepositEscrowedBalance] = useState(\"\");\n const [vesterDepositVestedAmount, setVesterDepositVestedAmount] = useState(\"\");\n const [vesterDepositAverageStakedAmount, setVesterDepositAverageStakedAmount] = useState(\"\");\n const [vesterDepositMaxVestableAmount, setVesterDepositMaxVestableAmount] = useState(\"\");\n const [vesterDepositValue, setVesterDepositValue] = useState(\"\");\n const [vesterDepositReserveAmount, setVesterDepositReserveAmount] = useState(\"\");\n const [vesterDepositMaxReserveAmount, setVesterDepositMaxReserveAmount] = useState(\"\");\n const [vesterDepositAddress, setVesterDepositAddress] = useState(\"\");\n\n const [isVesterWithdrawModalVisible, setIsVesterWithdrawModalVisible] = useState(false);\n const [vesterWithdrawTitle, setVesterWithdrawTitle] = useState(false);\n const [vesterWithdrawAddress, setVesterWithdrawAddress] = useState(\"\");\n\n const [isCompoundModalVisible, setIsCompoundModalVisible] = useState(false);\n const [isClaimModalVisible, setIsClaimModalVisible] = useState(false);\n\n const rewardRouterAddress = getContract(chainId, \"RewardRouter\");\n const rewardReaderAddress = getContract(chainId, \"RewardReader\");\n const readerAddress = getContract(chainId, \"Reader\");\n\n const vaultAddress = getContract(chainId, \"Vault\");\n const nativeTokenAddress = getContract(chainId, \"NATIVE_TOKEN\");\n const fxdxAddress = getContract(chainId, \"FXDX\");\n const esFxdxAddress = getContract(chainId, \"ES_FXDX\");\n const bnFxdxAddress = getContract(chainId, \"BN_FXDX\");\n const flpAddress = getContract(chainId, \"FLP\");\n\n const stakedFxdxTrackerAddress = getContract(chainId, \"StakedFxdxTracker\");\n const bonusFxdxTrackerAddress = getContract(chainId, \"BonusFxdxTracker\");\n const feeFxdxTrackerAddress = getContract(chainId, \"FeeFxdxTracker\");\n\n const stakedFlpTrackerAddress = getContract(chainId, \"StakedFlpTracker\");\n const feeFlpTrackerAddress = getContract(chainId, \"FeeFlpTracker\");\n\n const flpManagerAddress = getContract(chainId, \"FlpManager\");\n\n const stakedFxdxDistributorAddress = getContract(chainId, \"StakedFxdxDistributor\");\n const stakedFlpDistributorAddress = getContract(chainId, \"StakedFlpDistributor\");\n\n const fxdxVesterAddress = getContract(chainId, \"FxdxVester\");\n const flpVesterAddress = getContract(chainId, \"FlpVester\");\n\n const vesterAddresses = [fxdxVesterAddress, flpVesterAddress];\n\n const excludedEsFxdxAccounts = [stakedFxdxDistributorAddress, stakedFlpDistributorAddress];\n\n const nativeTokenSymbol = getConstant(chainId, \"nativeTokenSymbol\");\n const wrappedTokenSymbol = getConstant(chainId, \"wrappedTokenSymbol\");\n\n const walletTokens = [fxdxAddress, esFxdxAddress, flpAddress, stakedFxdxTrackerAddress];\n const depositTokens = [\n fxdxAddress,\n esFxdxAddress,\n stakedFxdxTrackerAddress,\n bonusFxdxTrackerAddress,\n bnFxdxAddress,\n flpAddress,\n ];\n const rewardTrackersForDepositBalances = [\n stakedFxdxTrackerAddress,\n stakedFxdxTrackerAddress,\n bonusFxdxTrackerAddress,\n feeFxdxTrackerAddress,\n feeFxdxTrackerAddress,\n feeFlpTrackerAddress,\n ];\n const rewardTrackersForStakingInfo = [\n stakedFxdxTrackerAddress,\n bonusFxdxTrackerAddress,\n feeFxdxTrackerAddress,\n stakedFlpTrackerAddress,\n feeFlpTrackerAddress,\n ];\n\n const { data: walletBalances } = useSWR(\n [\n `StakeV2:walletBalances:${active}`,\n chainId,\n readerAddress,\n \"getTokenBalancesWithSupplies\",\n account || PLACEHOLDER_ACCOUNT,\n ],\n {\n fetcher: contractFetcher(library, Reader, [walletTokens]),\n }\n );\n\n const { data: depositBalances } = useSWR(\n [\n `StakeV2:depositBalances:${active}`,\n chainId,\n rewardReaderAddress,\n \"getDepositBalances\",\n account || PLACEHOLDER_ACCOUNT,\n ],\n {\n fetcher: contractFetcher(library, RewardReader, [depositTokens, rewardTrackersForDepositBalances]),\n }\n );\n\n const { data: stakingInfo } = useSWR(\n [`StakeV2:stakingInfo:${active}`, chainId, rewardReaderAddress, \"getStakingInfo\", account || PLACEHOLDER_ACCOUNT],\n {\n fetcher: contractFetcher(library, RewardReader, [rewardTrackersForStakingInfo]),\n }\n );\n\n const { data: stakedFxdxSupply } = useSWR(\n [`StakeV2:stakedFxdxSupply:${active}`, chainId, fxdxAddress, \"balanceOf\", stakedFxdxTrackerAddress],\n {\n fetcher: contractFetcher(library, Token),\n }\n );\n\n const { data: aums } = useSWR([`StakeV2:getAums:${active}`, chainId, flpManagerAddress, \"getAums\"], {\n fetcher: contractFetcher(library, FlpManager),\n });\n\n const { data: nativeTokenPrice } = useSWR(\n [`StakeV2:nativeTokenPrice:${active}`, chainId, vaultAddress, \"getMinPrice\", nativeTokenAddress],\n {\n fetcher: contractFetcher(library, Vault),\n }\n );\n\n const { data: esFxdxSupply } = useSWR(\n [`StakeV2:esFxdxSupply:${active}`, chainId, readerAddress, \"getTokenSupply\", esFxdxAddress],\n {\n fetcher: contractFetcher(library, Reader, [excludedEsFxdxAccounts]),\n }\n );\n\n const { data: vestingInfo } = useSWR(\n [`StakeV2:vestingInfo:${active}`, chainId, readerAddress, \"getVestingInfo\", account || PLACEHOLDER_ACCOUNT],\n {\n fetcher: contractFetcher(library, Reader, [vesterAddresses]),\n }\n );\n\n const { fxdxPrice, fxdxPriceFromEthereum, fxdxPriceFromMoonBeam /* fxdxPriceFromArbitrum, fxdxPriceFromAvalanche */ } = useFxdxPrice(\n chainId,\n { arbitrum: chainId === ARBITRUM ? library : undefined },\n active\n );\n\n let { total: totalFxdxSupply } = useTotalFxdxSupply();\n\n let {\n ethereum: ethereumFxdxStaked,\n moonbeam: moonbeamFxdxStaked,\n // avax: avaxFxdxStaked,\n // arbitrum: arbitrumFxdxStaked,\n total: totalFxdxStaked\n } = useTotalFxdxStaked();\n\n const fxdxSupplyUrl = getServerUrl(chainId, \"/fxdx_supply\");\n const { data: fxdxSupply } = useSWR([fxdxSupplyUrl], {\n fetcher: (...args) => fetch(...args).then((res) => res.text()),\n });\n\n const isFxdxTransferEnabled = true;\n\n let esFxdxSupplyUsd;\n if (esFxdxSupply && fxdxPrice) {\n esFxdxSupplyUsd = esFxdxSupply.mul(fxdxPrice).div(expandDecimals(1, 18));\n }\n\n let aum;\n if (aums && aums.length > 0) {\n aum = aums[0].add(aums[1]).div(2);\n }\n\n const { balanceData, supplyData } = getBalanceAndSupplyData(walletBalances);\n const depositBalanceData = getDepositBalanceData(depositBalances);\n const stakingData = getStakingData(stakingInfo);\n const vestingData = getVestingData(vestingInfo);\n\n const processedData = getProcessedData(\n balanceData,\n supplyData,\n depositBalanceData,\n stakingData,\n vestingData,\n aum,\n nativeTokenPrice,\n stakedFxdxSupply,\n fxdxPrice,\n fxdxSupply\n );\n\n let hasMultiplierPoints = false;\n let multiplierPointsAmount;\n if (processedData && processedData.bonusFxdxTrackerRewards && processedData.bnFxdxInFeeFxdx) {\n multiplierPointsAmount = processedData.bonusFxdxTrackerRewards.add(processedData.bnFxdxInFeeFxdx);\n if (multiplierPointsAmount.gt(0)) {\n hasMultiplierPoints = true;\n }\n }\n let totalRewardTokens;\n if (processedData && processedData.bnFxdxInFeeFxdx && processedData.bonusFxdxInFeeFxdx) {\n totalRewardTokens = processedData.bnFxdxInFeeFxdx.add(processedData.bonusFxdxInFeeFxdx);\n }\n\n let totalRewardTokensAndFlp;\n if (totalRewardTokens && processedData && processedData.flpBalance) {\n totalRewardTokensAndFlp = totalRewardTokens.add(processedData.flpBalance);\n }\n\n const bonusFxdxInFeeFxdx = processedData ? processedData.bonusFxdxInFeeFxdx : undefined;\n\n let stakedFxdxSupplyUsd;\n if (!totalFxdxStaked.isZero() && fxdxPrice) {\n stakedFxdxSupplyUsd = totalFxdxStaked.mul(fxdxPrice).div(expandDecimals(1, 18));\n }\n\n let totalSupplyUsd;\n if (totalFxdxSupply && !totalFxdxSupply.isZero() && fxdxPrice) {\n totalSupplyUsd = totalFxdxSupply.mul(fxdxPrice).div(expandDecimals(1, 18));\n }\n\n let maxUnstakeableFxdx = bigNumberify(0);\n if (\n totalRewardTokens &&\n vestingData &&\n vestingData.fxdxVesterPairAmount &&\n multiplierPointsAmount &&\n processedData.bonusFxdxInFeeFxdx\n ) {\n const availableTokens = totalRewardTokens.sub(vestingData.fxdxVesterPairAmount);\n const stakedTokens = processedData.bonusFxdxInFeeFxdx;\n const divisor = multiplierPointsAmount.add(stakedTokens);\n if (divisor.gt(0)) {\n maxUnstakeableFxdx = availableTokens.mul(stakedTokens).div(divisor);\n }\n }\n\n const showStakeFxdxModal = () => {\n if (!isFxdxTransferEnabled) {\n helperToast.error(t`FXDX transfers not yet enabled`);\n return;\n }\n\n setIsStakeModalVisible(true);\n setStakeModalTitle(t`Stake FXDX`);\n setStakeModalMaxAmount(processedData.fxdxBalance);\n setStakeValue(\"\");\n setStakingTokenSymbol(\"FXDX\");\n setStakingTokenAddress(fxdxAddress);\n setStakingFarmAddress(stakedFxdxTrackerAddress);\n setStakeMethodName(\"stakeFxdx\");\n };\n\n const showStakeEsFxdxModal = () => {\n setIsStakeModalVisible(true);\n setStakeModalTitle(t`Stake esFXDX`);\n setStakeModalMaxAmount(processedData.esFxdxBalance);\n setStakeValue(\"\");\n setStakingTokenSymbol(\"esFXDX\");\n setStakingTokenAddress(esFxdxAddress);\n setStakingFarmAddress(AddressZero);\n setStakeMethodName(\"stakeEsFxdx\");\n };\n\n const showFxdxVesterDepositModal = () => {\n let remainingVestableAmount = vestingData.fxdxVester.maxVestableAmount.sub(vestingData.fxdxVester.vestedAmount);\n if (processedData.esFxdxBalance.lt(remainingVestableAmount)) {\n remainingVestableAmount = processedData.esFxdxBalance;\n }\n\n setIsVesterDepositModalVisible(true);\n setVesterDepositTitle(t`FXDX Vault`);\n setVesterDepositStakeTokenLabel(\"staked FXDX + esFXDX + Multiplier Points\");\n setVesterDepositMaxAmount(remainingVestableAmount);\n setVesterDepositBalance(processedData.esFxdxBalance);\n setVesterDepositEscrowedBalance(vestingData.fxdxVester.escrowedBalance);\n setVesterDepositVestedAmount(vestingData.fxdxVester.vestedAmount);\n setVesterDepositMaxVestableAmount(vestingData.fxdxVester.maxVestableAmount);\n setVesterDepositAverageStakedAmount(vestingData.fxdxVester.averageStakedAmount);\n setVesterDepositReserveAmount(vestingData.fxdxVester.pairAmount);\n setVesterDepositMaxReserveAmount(totalRewardTokens);\n setVesterDepositValue(\"\");\n setVesterDepositAddress(fxdxVesterAddress);\n };\n\n const showFlpVesterDepositModal = () => {\n let remainingVestableAmount = vestingData.flpVester.maxVestableAmount.sub(vestingData.flpVester.vestedAmount);\n if (processedData.esFxdxBalance.lt(remainingVestableAmount)) {\n remainingVestableAmount = processedData.esFxdxBalance;\n }\n\n setIsVesterDepositModalVisible(true);\n setVesterDepositTitle(t`FLP Vault`);\n setVesterDepositStakeTokenLabel(\"staked FLP\");\n setVesterDepositMaxAmount(remainingVestableAmount);\n setVesterDepositBalance(processedData.esFxdxBalance);\n setVesterDepositEscrowedBalance(vestingData.flpVester.escrowedBalance);\n setVesterDepositVestedAmount(vestingData.flpVester.vestedAmount);\n setVesterDepositMaxVestableAmount(vestingData.flpVester.maxVestableAmount);\n setVesterDepositAverageStakedAmount(vestingData.flpVester.averageStakedAmount);\n setVesterDepositReserveAmount(vestingData.flpVester.pairAmount);\n setVesterDepositMaxReserveAmount(processedData.flpBalance);\n setVesterDepositValue(\"\");\n setVesterDepositAddress(flpVesterAddress);\n };\n\n const showFxdxVesterWithdrawModal = () => {\n if (!vestingData || !vestingData.fxdxVesterVestedAmount || vestingData.fxdxVesterVestedAmount.eq(0)) {\n helperToast.error(t`You have not deposited any tokens for vesting.`);\n return;\n }\n\n setIsVesterWithdrawModalVisible(true);\n setVesterWithdrawTitle(t`Withdraw from FXDX Vault`);\n setVesterWithdrawAddress(fxdxVesterAddress);\n };\n\n const showFlpVesterWithdrawModal = () => {\n if (!vestingData || !vestingData.flpVesterVestedAmount || vestingData.flpVesterVestedAmount.eq(0)) {\n helperToast.error(t`You have not deposited any tokens for vesting.`);\n return;\n }\n\n setIsVesterWithdrawModalVisible(true);\n setVesterWithdrawTitle(t`Withdraw from FLP Vault`);\n setVesterWithdrawAddress(flpVesterAddress);\n };\n\n const showUnstakeFxdxModal = () => {\n if (!isFxdxTransferEnabled) {\n helperToast.error(t`FXDX transfers not yet enabled`);\n return;\n }\n setIsUnstakeModalVisible(true);\n setUnstakeModalTitle(t`Unstake FXDX`);\n let maxAmount = processedData.fxdxInStakedFxdx;\n if (\n processedData.fxdxInStakedFxdx &&\n vestingData &&\n vestingData.fxdxVesterPairAmount.gt(0) &&\n maxUnstakeableFxdx &&\n maxUnstakeableFxdx.lt(processedData.fxdxInStakedFxdx)\n ) {\n maxAmount = maxUnstakeableFxdx;\n }\n setUnstakeModalMaxAmount(maxAmount);\n setUnstakeModalReservedAmount(vestingData.fxdxVesterPairAmount);\n setUnstakeValue(\"\");\n setUnstakingTokenSymbol(\"FXDX\");\n setUnstakeMethodName(\"unstakeFxdx\");\n };\n\n const showUnstakeEsFxdxModal = () => {\n setIsUnstakeModalVisible(true);\n setUnstakeModalTitle(t`Unstake esFXDX`);\n let maxAmount = processedData.esFxdxInStakedFxdx;\n if (\n processedData.esFxdxInStakedFxdx &&\n vestingData &&\n vestingData.fxdxVesterPairAmount.gt(0) &&\n maxUnstakeableFxdx &&\n maxUnstakeableFxdx.lt(processedData.esFxdxInStakedFxdx)\n ) {\n maxAmount = maxUnstakeableFxdx;\n }\n setUnstakeModalMaxAmount(maxAmount);\n setUnstakeModalReservedAmount(vestingData.fxdxVesterPairAmount);\n setUnstakeValue(\"\");\n setUnstakingTokenSymbol(\"esFXDX\");\n setUnstakeMethodName(\"unstakeEsFxdx\");\n };\n\n const renderMultiplierPointsLabel = useCallback(() => {\n return t`Multiplier Points APR`;\n }, []);\n\n const renderMultiplierPointsValue = useCallback(() => {\n return (\n \n
\n \n \n Claim FXDX Rewards \n \n
\n \n \n Claim esFXDX Rewards \n \n
\n \n \n Claim {wrappedTokenSymbol} Rewards \n \n
\n \n \n \n Convert {wrappedTokenSymbol} to {nativeTokenSymbol}\n \n \n
\n \n \n
\n \n \n You are earning {nativeTokenSymbol} rewards with {formatAmount(totalRewardTokensAndFlp, 18, 2, true)} tokens.\n
\n Tokens: {amountStr}.\n \n
\n );\n }\n\n return (\n \n Tokens: {amountStr}.\n
\n
\n );\n}\n","import React from \"react\";\n\nimport StakeV2 from \"./StakeV2\";\n\nexport default function Stake(props) {\n return \n \n \n
\n \n
\n\n \n
\n \n
\n FXDX
\n \n \n
\n \n
\n \n Price \n
\n \n {!fxdxPrice && \"...\"}\n {fxdxPrice && (\n IS_TESTNET ? (\n <>\n
\n \n
\n \n Wallet \n
\n \n {formatKeyAmount(processedData, \"fxdxBalance\", 18, 2, true)} FXDX ($\n {formatKeyAmount(processedData, \"fxdxBalanceUsd\", USD_DECIMALS, 2, true)})\n
\n \n
\n \n \n Staked \n
\n \n {formatKeyAmount(processedData, \"fxdxInStakedFxdx\", 18, 2, true)} FXDX ($\n {formatKeyAmount(processedData, \"fxdxInStakedFxdxUsd\", USD_DECIMALS, 2, true)})\n
\n \n
\n \n APR \n
\n \n {\n return (\n <>\n
\n \n
\n\n
\n\nThe Boosted APR is from your staked Multiplier Points. \n
\n )}\n \n\n
\n\n
\n
\n\n APRs are updated weekly on Monday and will depend on the fees collected for the week.\n \n
\n \n );\n }}\n />\n \n
\n
\n \n Rewards \n
\n \n {\n return (\n <>\n
\n \n
\n {renderMultiplierPointsLabel()}
\n {renderMultiplierPointsValue()}
\n \n
\n \n \n Boost Percentage \n
\n \n {\n return (\n
\n \n \n You are earning {formatAmount(processedData.boostBasisPoints, 2, 2, false)}% more{\" \"}\n {nativeTokenSymbol} rewards using{\" \"}\n {formatAmount(processedData.bnFxdxInFeeFxdx, 18, 4, 2, true)} Staked Multiplier Points.\n \n
\n
\nUse the \"Compound\" button to stake your Multiplier Points. \n
\n );\n }}\n />\n \n
\n
\n
\n \n Total Staked \n
\n \n {!totalFxdxStaked && \"...\"}\n {totalFxdxStaked && (\n (\n
\n \n
\n \n \n Total Supply \n
\n {!totalFxdxSupply && \"...\"}\n {totalFxdxSupply && (\n \n {formatAmount(totalFxdxSupply, 18, 0, true)} FXDX ($\n {formatAmount(totalSupplyUsd, USD_DECIMALS, 0, true)})\n
\n )}\n \n \n Buy FXDX \n \n {active && (\n \n )}\n {active && (\n \n )}\n {active && (\n \n Transfer Account \n \n )}\n
\n \n
\n \n Total Rewards \n
\n \n \n
\n \n
\n \n {nativeTokenSymbol} ({wrappedTokenSymbol})\n
\n \n {formatKeyAmount(processedData, \"totalNativeTokenRewards\", 18, 4, true)} ($\n {formatKeyAmount(processedData, \"totalNativeTokenRewardsUsd\", USD_DECIMALS, 2, true)})\n
\n \n
\n FXDX
\n \n {formatKeyAmount(processedData, \"totalVesterRewards\", 18, 4, true)} ($\n {formatKeyAmount(processedData, \"totalVesterRewardsUsd\", USD_DECIMALS, 2, true)})\n
\n \n
\n \n Escrowed FXDX \n
\n \n {formatKeyAmount(processedData, \"totalEsFxdxRewards\", 18, 4, true)} ($\n {formatKeyAmount(processedData, \"totalEsFxdxRewardsUsd\", USD_DECIMALS, 2, true)})\n
\n \n
\n \n Multiplier Points \n
\n {formatKeyAmount(processedData, \"bonusFxdxTrackerRewards\", 18, 4, true)}
\n \n
\n \n Staked Multiplier Points \n
\n {formatKeyAmount(processedData, \"bnFxdxInFeeFxdx\", 18, 4, true)}
\n \n
\n \n Total \n
\n ${formatKeyAmount(processedData, \"totalRewardsUsd\", USD_DECIMALS, 2, true)}
\n \n \n
\n \n {active && (\n \n )}\n {active && (\n \n )}\n {!active && (\n \n )}\n
\n \n \n
\n \n {active && (\n setIsCompoundModalVisible(true)}\n >\n Compound \n \n )}\n {active && (\n \n )}\n {!active && (\n \n )}\n
\n \n
\n FLP ({chainName})
\n \n \n
\n \n
\n \n Price \n
\n ${formatKeyAmount(processedData, \"flpPrice\", USD_DECIMALS, 3, true)}
\n \n
\n \n Wallet \n
\n \n {formatKeyAmount(processedData, \"flpBalance\", FLP_DECIMALS, 2, true)} FLP ($\n {formatKeyAmount(processedData, \"flpBalanceUsd\", USD_DECIMALS, 2, true)})\n
\n \n
\n \n \n Staked \n
\n \n {formatKeyAmount(processedData, \"flpBalance\", FLP_DECIMALS, 2, true)} FLP ($\n {formatKeyAmount(processedData, \"flpBalanceUsd\", USD_DECIMALS, 2, true)})\n
\n \n
\n \n APR \n
\n \n {\n return (\n <>\n
\n\n\n APRs are updated weekly on Wednesday and will depend on the fees collected for the week.\n \n \n );\n }}\n />\n
\n \n\n
\n
\n \n \n Rewards \n
\n \n {\n return (\n <>\n
\n \n
\n \n Total Staked \n
\n \n {formatKeyAmount(processedData, \"flpSupply\", 18, 2, true)} FLP ($\n {formatKeyAmount(processedData, \"flpSupplyUsd\", USD_DECIMALS, 2, true)})\n
\n \n
\n \n \n Total Supply \n
\n \n {formatKeyAmount(processedData, \"flpSupply\", 18, 2, true)} FLP ($\n {formatKeyAmount(processedData, \"flpSupplyUsd\", USD_DECIMALS, 2, true)})\n
\n \n \n Buy FLP \n \n \n Sell FLP \n \n {hasInsurance && (\n \n Purchase Insurance \n \n )}\n
\n \n
\n \n Escrowed FXDX \n
\n \n \n
\n \n
\n \n Price \n
\n ${formatPrice(fxdxPrice, true)}
\n \n
\n \n Wallet \n
\n \n {formatKeyAmount(processedData, \"esFxdxBalance\", 18, 2, true)} esFXDX ($\n {formatKeyAmount(processedData, \"esFxdxBalanceUsd\", USD_DECIMALS, 2, true)})\n
\n \n
\n \n \n Staked \n
\n \n {formatKeyAmount(processedData, \"esFxdxInStakedFxdx\", 18, 2, true)} esFXDX ($\n {formatKeyAmount(processedData, \"esFxdxInStakedFxdxUsd\", USD_DECIMALS, 2, true)})\n
\n \n
\n \n APR \n
\n \n
\n \n {\n return (\n <>\n
\n \n
\n \n {renderMultiplierPointsLabel()}
\n {renderMultiplierPointsValue()}
\n \n
\n \n Total Staked \n
\n \n {formatKeyAmount(processedData, \"stakedEsFxdxSupply\", 18, 0, true)} esFXDX ($\n {formatKeyAmount(processedData, \"stakedEsFxdxSupplyUsd\", USD_DECIMALS, 0, true)})\n
\n \n
\n \n \n Total Supply \n
\n \n {formatAmount(esFxdxSupply, 18, 0, true)} esFXDX (${formatAmount(esFxdxSupplyUsd, USD_DECIMALS, 0, true)}\n )\n
\n \n {active && (\n \n )}\n {active && (\n \n )}\n {!active && (\n \n )}\n
\n \n
\n \n \n
\n \n Vest \n
\n \n \n Convert esFXDX tokens to FXDX tokens.\n
\n Please read the{\" \"}\n \n vesting details\n {\" \"}\n before using the vaults.\n \n
\n \n Please read the{\" \"}\n \n vesting details\n {\" \"}\n before using the vaults.\n
\n
\n \n
\n \n
\n \n FXDX Vault \n
\n \n \n
\n \n
\n \n Staked Tokens \n
\n \n {\n return (\n <>\n
\n \n
\n \n Reserved for Vesting \n
\n \n {formatKeyAmount(vestingData, \"fxdxVesterPairAmount\", 18, 2, true)} /{\" \"}\n {formatAmount(totalRewardTokens, 18, 2, true)}\n
\n \n
\n \n Vesting Status \n
\n \n {\n return (\n
\n \n \n {formatKeyAmount(vestingData, \"fxdxVesterClaimSum\", 18, 4, true)} tokens have been\n converted to FXDX from the{\" \"}\n {formatKeyAmount(vestingData, \"fxdxVesterVestedAmount\", 18, 4, true)} esFXDX deposited for\n vesting.\n \n
\n );\n }}\n />\n \n
\n \n \n Claimable \n
\n \n (\n \n {formatKeyAmount(vestingData, \"fxdxVesterClaimable\", 18, 4, true)} FXDX tokens can be claimed,\n use the options under the Total Rewards section to claim them.\n \n )}\n />\n
\n \n {!active && (\n \n )}\n {active && (\n \n )}\n {active && (\n \n )}\n
\n \n
\n \n FLP Vault \n
\n \n \n
\n \n
\n \n Staked Tokens \n
\n {formatAmount(processedData.flpBalance, 18, 2, true)} FLP
\n \n
\n \n Reserved for Vesting \n
\n \n {formatKeyAmount(vestingData, \"flpVesterPairAmount\", 18, 2, true)} /{\" \"}\n {formatAmount(processedData.flpBalance, 18, 2, true)}\n
\n \n
\n \n Vesting Status \n
\n \n {\n return (\n
\n \n \n {formatKeyAmount(vestingData, \"flpVesterClaimSum\", 18, 4, true)} tokens have been\n converted to FXDX from the{\" \"}\n {formatKeyAmount(vestingData, \"flpVesterVestedAmount\", 18, 4, true)} esFXDX deposited for\n vesting.\n \n
\n );\n }}\n />\n \n
\n \n \n Claimable \n
\n \n (\n \n {formatKeyAmount(vestingData, \"flpVesterClaimable\", 18, 4, true)} FXDX tokens can be claimed,\n use the options under the Total Rewards section to claim them.\n \n )}\n />\n
\n \n {!active && (\n \n )}\n {active && (\n \n )}\n {active && (\n \n )}\n
\n \n {options.map((opt) => {\n const label = optionLabels && optionLabels[opt] ? optionLabels[opt] : opt;\n return (\n
\n );\n}\n","import { useEffect, useMemo } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport default function Portal({ children }) {\n const root = document.body;\n\n const el = useMemo(() => document.createElement(\"div\"), []);\n\n useEffect(() => {\n root.appendChild(el);\n return () => root.removeChild(el);\n }, [root, el]);\n\n return createPortal(children, el);\n}\n","import { useCallback, useRef, useState } from \"react\";\nimport cx from \"classnames\";\n\nimport \"./Tooltip.css\";\nimport { IS_TOUCH } from \"config/ui\";\nimport Portal from \"../Common/Portal\";\n\nconst OPEN_DELAY = 0;\nconst CLOSE_DELAY = 100;\n\nexport default function TooltipWithPortal(props) {\n const [visible, setVisible] = useState(false);\n const [coords, setCoords] = useState({});\n const [tooltipWidth, setTooltipWidth] = useState();\n const intervalCloseRef = useRef(null);\n const intervalOpenRef = useRef(null);\n\n const position = props.position ?? \"left-bottom\";\n const trigger = props.trigger ?? \"hover\";\n const handlerRef = useRef();\n\n const updateTooltipCoords = useCallback(() => {\n const rect = handlerRef.current.getBoundingClientRect();\n\n setCoords({\n height: rect.height,\n width: rect.width,\n left: rect.x,\n top: rect.y + window.scrollY,\n });\n\n if (props.fitHandleWidth) {\n setTooltipWidth(`${rect.width}px`);\n }\n }, [handlerRef, props.fitHandleWidth]);\n\n const onMouseEnter = useCallback(() => {\n if (trigger !== \"hover\" || IS_TOUCH) return;\n\n if (intervalCloseRef.current) {\n clearInterval(intervalCloseRef.current);\n intervalCloseRef.current = null;\n }\n if (!intervalOpenRef.current) {\n intervalOpenRef.current = setTimeout(() => {\n setVisible(true);\n intervalOpenRef.current = null;\n }, OPEN_DELAY);\n }\n updateTooltipCoords();\n }, [setVisible, intervalCloseRef, intervalOpenRef, trigger, updateTooltipCoords]);\n\n const onMouseClick = useCallback(() => {\n if (trigger !== \"click\" && !IS_TOUCH) return;\n if (intervalCloseRef.current) {\n clearInterval(intervalCloseRef.current);\n intervalCloseRef.current = null;\n }\n if (intervalOpenRef.current) {\n clearInterval(intervalOpenRef.current);\n intervalOpenRef.current = null;\n }\n updateTooltipCoords();\n\n if (props.closeOnDoubleClick) {\n setVisible((old) => !old);\n } else {\n setVisible(true);\n }\n }, [setVisible, intervalCloseRef, trigger, updateTooltipCoords, props.closeOnDoubleClick]);\n\n const onMouseLeave = useCallback(() => {\n intervalCloseRef.current = setTimeout(() => {\n setVisible(false);\n intervalCloseRef.current = null;\n }, CLOSE_DELAY);\n if (intervalOpenRef.current) {\n clearInterval(intervalOpenRef.current);\n intervalOpenRef.current = null;\n }\n updateTooltipCoords();\n }, [setVisible, intervalCloseRef, updateTooltipCoords]);\n\n const className = cx(\"Tooltip\", props.className);\n\n return (\n \n onClick(opt)} key={opt}>\n {icons && icons[opt] && 
}\n {label}\n
\n );\n })}\n \n
\n \n {props.renderContent()}\n
\n \n \n
\n \n {selectedTokenLabel ? (\n \n !tokenState.disabled && onSelectToken(token)}\n >\n {tokenState.disabled && tokenState.message && (\n
\n );\n })}\n \n onSearchKeywordChange(e)}\n onKeyDown={_handleKeyDown}\n autoFocus\n />\n
\n {filteredTokens.map((token, tokenIndex) => {\n const tokenPopupImage = importImage(`ic_${token.symbol.toLowerCase()}_40.svg`);\n let info = infoTokens ? infoTokens[token.address] : {};\n let mintAmount;\n let balance = info.balance;\n if (showMintingCap && mintingCap && info.usdfAmount) {\n mintAmount = mintingCap.sub(info.usdfAmount);\n }\n if (mintAmount && mintAmount.lt(0)) {\n mintAmount = bigNumberify(0);\n }\n let balanceUsd;\n if (balance && info.maxPrice) {\n balanceUsd = balance.mul(info.maxPrice).div(expandDecimals(1, token.decimals));\n }\n\n const tokenState = getTokenState(info) || {};\n\n return (\n \n {showTokenImgInDropdown && 
}\n
\n \n
\n {token.symbol}
\n {token.name}\n \n {showBalances && balance && (\n
\n \n {balance.gt(0) && formatAmount(balance, token.decimals, 4, true)}\n {balance.eq(0) && \"-\"}\n
\n )}\n \n {mintAmount && Mintable: {formatAmount(mintAmount, token.decimals, 2, true)} USDF
}\n {showMintingCap && !mintAmount && -
}\n {!showMintingCap && showBalances && balanceUsd && balanceUsd.gt(0) && (\n ${formatAmount(balanceUsd, 30, 2, true)}
\n )}\n \n setIsModalVisible(true)}>\n {selectedTokenLabel}\n {!showNewCaret &&
\n ) : (\n setIsModalVisible(true)}>\n {tokenInfo.symbol}\n {showSymbolImage && }\n {showNewCaret && 
}\n {!showNewCaret &&
\n )}\n \n );\n}\n","import cx from \"classnames\";\n\nexport default function ExchangeInfoRow(props) {\n const { label, children, value, isTop, isWarning } = props;\n\n return (\n \n
\n );\n}\n","import React, { useCallback, useState, useMemo } from \"react\";\nimport \"./ConfirmationBox.css\";\nimport {\n USD_DECIMALS,\n PRECISION,\n BASIS_POINTS_DIVISOR,\n LIMIT,\n MIN_PROFIT_TIME,\n INCREASE,\n getExchangeRate,\n getExchangeRateDisplay,\n DEFAULT_SLIPPAGE_AMOUNT,\n DEFAULT_HIGHER_SLIPPAGE_AMOUNT,\n calculatePositionDelta,\n DECREASE,\n} from \"lib/legacy\";\nimport { getConstant } from \"config/chains\";\nimport { getContract } from \"config/contracts\";\n\nimport { BsArrowRight } from \"react-icons/bs\";\nimport Modal from \"../Modal/Modal\";\nimport Tooltip from \"../Tooltip/Tooltip\";\nimport Checkbox from \"../Checkbox/Checkbox\";\nimport ExchangeInfoRow from \"./ExchangeInfoRow\";\nimport { cancelDecreaseOrder, handleCancelOrder } from \"domain/legacy\";\nimport StatsTooltipRow from \"../StatsTooltip/StatsTooltipRow\";\nimport { TRIGGER_PREFIX_ABOVE, TRIGGER_PREFIX_BELOW } from \"config/ui\";\nimport { useLocalStorageSerializeKey } from \"lib/localStorage\";\nimport { SLIPPAGE_BPS_KEY } from \"config/localStorage\";\nimport { expandDecimals, formatAmount, formatAmountFree, formatPrice } from \"lib/numbers\";\nimport { getNativeToken, getToken, getWrappedToken } from \"config/tokens\";\nimport { Plural, t, Trans } from \"@lingui/macro\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\n\nconst HIGH_SPREAD_THRESHOLD = expandDecimals(1, USD_DECIMALS).div(100); // 1%;\n\nfunction getSpread(fromTokenInfo, toTokenInfo, isLong, nativeTokenAddress) {\n if (fromTokenInfo && fromTokenInfo.maxPrice && toTokenInfo && toTokenInfo.minPrice) {\n const fromDiff = fromTokenInfo.maxPrice.sub(fromTokenInfo.minPrice).div(2);\n const fromSpread = fromDiff.mul(PRECISION).div(fromTokenInfo.maxPrice.add(fromTokenInfo.minPrice).div(2));\n const toDiff = toTokenInfo.maxPrice.sub(toTokenInfo.minPrice).div(2);\n const toSpread = toDiff.mul(PRECISION).div(toTokenInfo.maxPrice.add(toTokenInfo.minPrice).div(2));\n\n let value = fromSpread.add(toSpread);\n\n const fromTokenAddress = fromTokenInfo.isNative ? nativeTokenAddress : fromTokenInfo.address;\n const toTokenAddress = toTokenInfo.isNative ? nativeTokenAddress : toTokenInfo.address;\n\n if (isLong && fromTokenAddress === toTokenAddress) {\n value = fromSpread;\n }\n\n return {\n value,\n isHigh: value.gt(HIGH_SPREAD_THRESHOLD),\n };\n }\n}\n\nexport default function ConfirmationBox(props) {\n const {\n fromToken,\n fromTokenInfo,\n toToken,\n toTokenInfo,\n isSwap,\n isLong,\n isMarketOrder,\n orderOption,\n isShort,\n toAmount,\n fromAmount,\n isHigherSlippageAllowed,\n setIsHigherSlippageAllowed,\n onConfirmationClick,\n setIsConfirming,\n shortCollateralAddress,\n hasExistingPosition,\n leverage,\n existingPosition,\n existingLiquidationPrice,\n displayLiquidationPrice,\n shortCollateralToken,\n isPendingConfirmation,\n triggerPriceUsd,\n triggerRatio,\n fees,\n feesUsd,\n isSubmitting,\n fromUsdMin,\n toUsdMax,\n nextAveragePrice,\n collateralTokenAddress,\n feeBps,\n chainId,\n orders,\n library,\n setPendingTxns,\n pendingTxns,\n minExecutionFee,\n minExecutionFeeUSD,\n minExecutionFeeErrorMessage,\n } = props;\n\n const nativeTokenSymbol = getConstant(chainId, \"nativeTokenSymbol\");\n\n const [savedSlippageAmount] = useLocalStorageSerializeKey([chainId, SLIPPAGE_BPS_KEY], DEFAULT_SLIPPAGE_AMOUNT);\n const [isProfitWarningAccepted, setIsProfitWarningAccepted] = useState(false);\n const [isTriggerWarningAccepted, setIsTriggerWarningAccepted] = useState(false);\n const [isLimitOrdersVisible, setIsLimitOrdersVisible] = useState(false);\n\n const onCancelOrderClick = useCallback(\n (order) => {\n handleCancelOrder(chainId, library, order, { pendingTxns, setPendingTxns });\n },\n [library, pendingTxns, setPendingTxns, chainId]\n );\n\n let minOut;\n let fromTokenUsd;\n let toTokenUsd;\n\n let collateralAfterFees = fromUsdMin;\n if (feesUsd) {\n collateralAfterFees = fromUsdMin.sub(feesUsd);\n }\n\n if (isSwap) {\n minOut = toAmount.mul(BASIS_POINTS_DIVISOR - savedSlippageAmount).div(BASIS_POINTS_DIVISOR);\n\n fromTokenUsd = fromTokenInfo ? formatPrice(fromTokenInfo.minPrice, true) : 0;\n toTokenUsd = toTokenInfo ? formatPrice(toTokenInfo.maxPrice, true) : 0;\n }\n\n const getTitle = () => {\n if (!isMarketOrder) {\n return t`Confirm Limit Order`;\n }\n if (isSwap) {\n return t`Confirm Swap`;\n }\n return isLong ? t`Confirm Long` : t`Confirm Short`;\n };\n const title = getTitle();\n\n const existingOrder = useMemo(() => {\n const wrappedToken = getWrappedToken(chainId);\n for (const order of orders) {\n if (order.type !== INCREASE) continue;\n const sameToken =\n order.indexToken === wrappedToken.address ? toToken.isNative : order.indexToken === toToken.address;\n if (order.isLong === isLong && sameToken) {\n return order;\n }\n }\n }, [orders, chainId, isLong, toToken.address, toToken.isNative]);\n\n const existingOrders = useMemo(() => {\n const wrappedToken = getWrappedToken(chainId);\n return orders.filter((order) => {\n if (order.type !== INCREASE) return false;\n const sameToken =\n order.indexToken === wrappedToken.address ? toToken.isNative : order.indexToken === toToken.address;\n return order.isLong === isLong && sameToken;\n });\n }, [orders, chainId, isLong, toToken.address, toToken.isNative]);\n\n const existingTriggerOrders = useMemo(() => {\n const wrappedToken = getWrappedToken(chainId);\n return orders.filter((order) => {\n if (order.type !== DECREASE) return false;\n const sameToken =\n order.indexToken === wrappedToken.address ? toToken.isNative : order.indexToken === toToken.address;\n return order.isLong === isLong && sameToken;\n });\n }, [orders, chainId, isLong, toToken.address, toToken.isNative]);\n\n const decreaseOrdersThatWillBeExecuted = useMemo(() => {\n if (isSwap) return [];\n return existingTriggerOrders.filter((order) => {\n if (order.triggerAboveThreshold) {\n return existingPosition?.markPrice.gte(order.triggerPrice);\n } else {\n return existingPosition?.markPrice.lte(order.triggerPrice);\n }\n });\n }, [existingPosition, existingTriggerOrders, isSwap]);\n\n const getError = () => {\n if (!isSwap && hasExistingPosition && !isMarketOrder) {\n const { delta, hasProfit } = calculatePositionDelta(triggerPriceUsd, existingPosition);\n if (hasProfit && delta.eq(0)) {\n return t`Invalid price, see warning`;\n }\n }\n if (isMarketOrder && hasPendingProfit && !isProfitWarningAccepted) {\n return t`Forfeit profit not checked`;\n }\n return false;\n };\n\n const getPrimaryText = () => {\n if (decreaseOrdersThatWillBeExecuted.length > 0 && !isTriggerWarningAccepted) {\n return t`Accept confirmation of trigger orders`;\n }\n\n if (!isPendingConfirmation) {\n const error = getError();\n if (error) {\n return error;\n }\n\n if (isSwap) {\n return title;\n }\n const action = isMarketOrder ? (isLong ? t`Long` : t`Short`) : t`Create Order`;\n\n if (\n isMarketOrder &&\n MIN_PROFIT_TIME > 0 &&\n hasExistingPosition &&\n existingPosition.delta.eq(0) &&\n existingPosition.pendingDelta.gt(0)\n ) {\n return isLong ? t`Forfeit profit and ${action}` : t`Forfeit profit and Short`;\n }\n\n return isMarketOrder && MIN_PROFIT_TIME > 0 ? t`Accept minimum and ${action}` : action;\n }\n\n if (!isMarketOrder) {\n return t`Creating Order...`;\n }\n if (isSwap) {\n return t`Swapping...`;\n }\n if (isLong) {\n return t`Longing...`;\n }\n return t`Shorting...`;\n };\n\n const isPrimaryEnabled = () => {\n if (getError()) {\n return false;\n }\n if (decreaseOrdersThatWillBeExecuted.length > 0 && !isTriggerWarningAccepted) {\n return false;\n }\n return !isPendingConfirmation && !isSubmitting;\n };\n\n const nativeTokenAddress = getContract(chainId, \"NATIVE_TOKEN\");\n const spread = getSpread(fromTokenInfo, toTokenInfo, isLong, nativeTokenAddress);\n // it's meaningless for limit/stop orders to show spread based on current prices\n const showSpread = isMarketOrder && !!spread;\n\n let allowedSlippage = savedSlippageAmount;\n if (isHigherSlippageAllowed) {\n allowedSlippage = DEFAULT_HIGHER_SLIPPAGE_AMOUNT;\n }\n\n const renderSpreadWarning = useCallback(() => {\n if (!isMarketOrder) {\n return null;\n }\n\n if (spread && spread.isHigh) {\n return (\n {label}
\n {children || value}
\n \n The spread is {`>`} 1%, please ensure the trade details are acceptable before comfirming \n
\n );\n }\n }, [isMarketOrder, spread]);\n\n const renderFeeWarning = useCallback(() => {\n if (orderOption === LIMIT || !feeBps || feeBps <= 60) {\n return null;\n }\n\n if (isSwap) {\n return (\n \n \n Fees are high to swap from {fromToken.symbol} to {toToken.symbol}.\n \n
\n );\n }\n\n if (!collateralTokenAddress) {\n return null;\n }\n\n const collateralToken = getToken(chainId, collateralTokenAddress);\n return (\n \n \n Fees are high to swap from {fromToken.symbol} to {collateralToken.symbol}.
\n {collateralToken.symbol} is needed for collateral.\n \n
\n );\n }, [feeBps, isSwap, collateralTokenAddress, chainId, fromToken.symbol, toToken.symbol, orderOption]);\n\n const hasPendingProfit =\n MIN_PROFIT_TIME > 0 && existingPosition && existingPosition.delta.eq(0) && existingPosition.pendingDelta.gt(0);\n\n const renderExistingOrderWarning = useCallback(() => {\n if (isSwap || !existingOrder) {\n return;\n }\n const indexToken = getToken(chainId, existingOrder.indexToken);\n const sizeInToken = formatAmount(\n existingOrder.sizeDelta.mul(PRECISION).div(existingOrder.triggerPrice),\n USD_DECIMALS,\n 4,\n true\n );\n const longOrShortText = existingOrder.isLong ? t`Long` : t`Short`;\n if (existingOrders?.length > 1) {\n return (\n \n {collateralToken.symbol} is needed for collateral.\n
\n
\n );\n }\n return (\n \n \n \n You have multiple existing Increase {longOrShortText} {indexToken.symbol} limit orders{\" \"}\n \n \n setIsLimitOrdersVisible((p) => !p)} className=\"view-orders\">\n ({isLimitOrdersVisible ? t`hide` : t`view`})\n \n
\n {isLimitOrdersVisible && (\n - \n {existingOrders.map((order) => {\n const { account, index, type, triggerAboveThreshold, triggerPrice } = order;\n const id = `${account}-${index}`;\n const triggerPricePrefix = triggerAboveThreshold ? TRIGGER_PREFIX_ABOVE : TRIGGER_PREFIX_BELOW;\n const indexToken = getToken(chainId, order.indexToken);\n\n return (\n
- \n
\n {type === INCREASE ? t`Increase` : t`Decrease`} {indexToken.symbol} {isLong ? t`Long` : t`Short`}{\" \"}\n {triggerPricePrefix} ${formatPrice(triggerPrice, true)}\n
\n \n \n );\n })}\n
\n \n You have an active Limit Order to Increase {longOrShortText} {sizeInToken} {indexToken.symbol} ($\n {formatAmount(existingOrder.sizeDelta, USD_DECIMALS, 2, true)}) at price $\n {formatPrice(existingOrder.triggerPrice, true)}\n \n
\n );\n }, [existingOrder, isSwap, chainId, existingOrders, isLong, isLimitOrdersVisible, onCancelOrderClick]);\n\n const renderExistingTriggerErrors = useCallback(() => {\n if (isSwap || decreaseOrdersThatWillBeExecuted?.length < 1) {\n return;\n }\n const existingTriggerOrderLength = decreaseOrdersThatWillBeExecuted.length;\n return (\n <>\n \n
\n - \n {decreaseOrdersThatWillBeExecuted.map((order) => {\n const { account, index, type, triggerAboveThreshold, triggerPrice } = order;\n const id = `${account}-${index}`;\n const triggerPricePrefix = triggerAboveThreshold ? TRIGGER_PREFIX_ABOVE : TRIGGER_PREFIX_BELOW;\n const indexToken = getToken(chainId, order.indexToken);\n return (\n
- \n
\n {type === INCREASE ? t`Increase` : t`Decrease`} {indexToken.symbol} {isLong ? t`Long` : t`Short`}\n {triggerPricePrefix} ${formatPrice(triggerPrice, true)}\n
\nCancel \n \n \n );\n })}\n
\n
\n );\n }, [existingTriggerOrders, isSwap, decreaseOrdersThatWillBeExecuted, renderExistingOrderWarning]);\n\n // TODO handle unaprproved order plugin (very unlikely case)\n const renderMain = useCallback(() => {\n if (isSwap) {\n return (\n \n
\n );\n }\n\n return (\n \n Pay {formatAmount(fromAmount, fromToken.decimals, 4, true)} {fromToken.symbol} ($\n {formatAmount(fromUsdMin, USD_DECIMALS, 2, true)})\n
\n \n \n Receive {formatAmount(toAmount, toToken.decimals, 4, true)} {toToken.symbol} ($\n {formatAmount(toUsdMax, USD_DECIMALS, 2, true)})\n
\n \n \n Pay {formatAmount(fromAmount, fromToken.decimals, 4, true)} {fromToken.symbol} ($\n {formatAmount(fromUsdMin, USD_DECIMALS, 2, true)})\n \n \n
\n );\n }, [isSwap, fromAmount, fromToken, toToken, fromUsdMin, toUsdMax, isLong, toAmount]);\n\n const SWAP_ORDER_EXECUTION_GAS_FEE = getConstant(chainId, \"SWAP_ORDER_EXECUTION_GAS_FEE\");\n const INCREASE_ORDER_EXECUTION_GAS_FEE = getConstant(chainId, \"INCREASE_ORDER_EXECUTION_GAS_FEE\");\n const executionFee = isSwap ? SWAP_ORDER_EXECUTION_GAS_FEE : INCREASE_ORDER_EXECUTION_GAS_FEE;\n const renderExecutionFee = useCallback(() => {\n if (isMarketOrder) {\n return null;\n }\n return (\n \n {isLong ? t`Long` : t`Short`} \n {formatAmount(toAmount, toToken.decimals, 4, true)} {toToken.symbol} ($\n {formatAmount(toUsdMax, USD_DECIMALS, 2, true)})\n
\n \n {renderMain()}\n {renderFeeWarning()}\n {renderExistingOrderWarning()}\n {renderExistingTriggerErrors()}\n {renderExistingTriggerWarning()}\n {minExecutionFeeErrorMessage && \n {getToken(chainId, shortCollateralAddress).symbol}\n \n )}\n {isLong && \n {hasExistingPosition && toAmount && toAmount.gt(0) && (\n \n \n {hasExistingPosition && toAmount && toAmount.gt(0) && (\n \n ${formatAmount(feesUsd, USD_DECIMALS, 2, true)} \n \n {\n return (\n <>\n Your position's collateral after deducting fees. \n
\n
\n \n {showSpread && (\n \n {formatAmount(spread.value.mul(100), USD_DECIMALS, 2, true)}%\n \n )}\n {isMarketOrder && (\n \n {hasExistingPosition && toAmount && toAmount.gt(0) && (\n \n )}\n {!isMarketOrder && (\n \n ${formatPrice(triggerPriceUsd, true)}\n \n )}\n \n {isLong && toTokenInfo && formatAmount(toTokenInfo.fundingRate, 4, 4)}\n {isShort && shortCollateralToken && formatAmount(shortCollateralToken.fundingRate, 4, 4)}\n {((isLong && toTokenInfo && toTokenInfo.fundingRate) ||\n (isShort && shortCollateralToken && shortCollateralToken.fundingRate)) &&\n \"% / 1h\"}\n \n {isMarketOrder && (\n \n {\n return (\n \n You can change this in the settings menu on the top right of the page.\n
\n
\n Note that a low allowed slippage, e.g. less than 0.5%, may result in failed orders if prices are\n volatile.\n \n );\n }}\n />\n \n {isMarketOrder && (\n
\n \n );\n }, [\n renderMain,\n shortCollateralAddress,\n isShort,\n isLong,\n toTokenInfo,\n nextAveragePrice,\n toAmount,\n hasExistingPosition,\n existingPosition,\n isMarketOrder,\n triggerPriceUsd,\n showSpread,\n spread,\n displayLiquidationPrice,\n existingLiquidationPrice,\n feesUsd,\n leverage,\n renderExecutionFee,\n shortCollateralToken,\n chainId,\n renderFeeWarning,\n hasPendingProfit,\n isProfitWarningAccepted,\n renderAvailableLiquidity,\n orderOption,\n fromUsdMin,\n collateralAfterFees,\n renderExistingOrderWarning,\n renderExistingTriggerWarning,\n renderExistingTriggerErrors,\n isHigherSlippageAllowed,\n setIsHigherSlippageAllowed,\n allowedSlippage,\n isTriggerWarningAccepted,\n decreaseOrdersThatWillBeExecuted,\n minExecutionFee,\n nativeTokenSymbol,\n minExecutionFeeUSD,\n minExecutionFeeErrorMessage,\n ]);\n\n const renderSwapSection = useCallback(() => {\n return (\n <>\n {minExecutionFeeErrorMessage}
}\n {hasPendingProfit && isMarketOrder && (\n \n \n \n Forfeit profit \n \n \n
\n )}\n {orderOption === LIMIT && renderAvailableLiquidity()}\n {isShort && (\n \n {formatAmount(existingPosition.leverage, 4, 2)}x\n
\n )}\n {toAmount && leverage && leverage.gt(0) && `${formatAmount(leverage, 4, 2)}x`}\n {!toAmount && leverage && leverage.gt(0) && `-`}\n {leverage && leverage.eq(0) && `-`}\n \n ${formatPrice(existingLiquidationPrice, true)}\n
\n )}\n {toAmount && displayLiquidationPrice && `$${formatAmount(displayLiquidationPrice, USD_DECIMALS, 2, true)}`}\n {!toAmount && displayLiquidationPrice && `-`}\n {!displayLiquidationPrice && `-`}\n \n
\n
\n ${formatPrice(existingPosition.averagePrice, true)}\n
\n )}\n {nextAveragePrice && `$${formatPrice(nextAveragePrice, true)}`}\n {!nextAveragePrice && `-`}\n \n \n {\n return (\n <>\n
\n\n This is the network cost required to execute the postion.{\" \"}\n \n More Info\n \n \n \n );\n }}\n />\n \n
\n )}\n \n
\n
\n Note that a low allowed slippage, e.g. less than 0.5%, may result in failed orders if prices are\n volatile.\n
\n \n \n Allow up to 1% slippage \n \n \n
\n )}\n {decreaseOrdersThatWillBeExecuted.length > 0 && (\n \n \n \n I am aware of the trigger orders \n \n \n
\n )}\n {renderExecutionFee()}\n \n {renderMain()}\n {renderFeeWarning()}\n {renderSpreadWarning()}\n {orderOption === LIMIT && renderAvailableLiquidity()}\n \n {formatAmount(minOut, toTokenInfo.decimals, 4, true)} {toTokenInfo.symbol}\n \n \n {getExchangeRateDisplay(getExchangeRate(fromTokenInfo, toTokenInfo), fromTokenInfo, toTokenInfo)}\n \n {!isMarketOrder && (\n \n {formatAmount(spread.value.mul(100), USD_DECIMALS, 2, true)}%\n \n )}\n
\n \n );\n }, [\n renderMain,\n renderSpreadWarning,\n fromTokenInfo,\n toTokenInfo,\n orderOption,\n showSpread,\n spread,\n feesUsd,\n feeBps,\n renderExecutionFee,\n fromTokenUsd,\n toTokenUsd,\n triggerRatio,\n fees,\n isMarketOrder,\n minOut,\n renderFeeWarning,\n renderAvailableLiquidity,\n ]);\n\n return (\n \n
\n )}\n {showSpread && (\n \n Limit Price \n
\n {getExchangeRateDisplay(triggerRatio, fromTokenInfo, toTokenInfo)}
\n \n
\n {renderExecutionFee()}\n {fromTokenUsd && (\n \n Fees \n
\n \n {formatAmount(feeBps, 2, 2, true)}% ({formatAmount(fees, fromTokenInfo.decimals, 4, true)}{\" \"}\n {fromTokenInfo.symbol}: ${formatAmount(feesUsd, USD_DECIMALS, 2, true)})\n
\n \n
\n )}\n {toTokenUsd && (\n \n {fromTokenInfo.symbol} Price \n
\n {fromTokenUsd} USD
\n \n
\n )}\n \n {toTokenInfo.symbol} Price \n
\n {toTokenUsd} USD
\n \n setIsConfirming(false)} label={title} allowContentTouchMove>\n {isSwap && renderSwapSection()}\n {!isSwap && renderMarginSection()}\n \n
\n );\n}\n","import React, { useState } from \"react\";\nimport { Trans, t } from \"@lingui/macro\";\nimport Modal from \"../Modal/Modal\";\nimport Checkbox from \"../Checkbox/Checkbox\";\n\nimport \"./OrdersToa.css\";\n\nexport default function OrdersToa(props) {\n const { setIsVisible, isPluginApproving, approveOrderBook } = props;\n\n const [isChecked, setIsChecked] = useState(false);\n\n const onConfirmationClick = () => {\n approveOrderBook().then(() => {\n setIsVisible(false);\n });\n };\n\n const getPrimaryText = () => {\n if (isPluginApproving) {\n return t`Enabling Orders...`;\n }\n if (!isChecked) {\n return t`Accept terms to enable orders`;\n }\n return t`Enable Orders`;\n };\n\n const isPrimaryEnabled = () => {\n if (isPluginApproving) {\n return false;\n }\n return isChecked;\n };\n\n return (\n \n \n {getPrimaryText()}\n \n
\n \n
\n This can occur in a few situations including but not exclusive to:\n
\n
- \n
- Insufficient liquidity to execute the order \n
- The mark price which is an aggregate of exchange prices did not reach the specified price \n
- The specified price was reached but not long enough for it to be executed \n
- No keeper picked up the order for execution \n
\n \n Additionally, trigger orders are market orders and are not guaranteed to settle at the trigger price.\n \n
\n \n
\n \n \n \n Accept that orders are not guaranteed to execute and trigger orders may not settle at the trigger price\n \n \n \n
\n \n \n );\n}\n","import {\n isAddressZero,\n USD_DECIMALS,\n MAX_REFERRAL_CODE_LENGTH,\n getTwitterIntentURL,\n REFERRAL_CODE_QUERY_PARAM,\n} from \"lib/legacy\";\nimport { encodeReferralCode, getReferralCodeOwner } from \"domain/referrals\";\nimport { GOERLI, IS_TESTNET, MOONBEAM, MUMBAI } from \"config/chains\";\nimport { bigNumberify, formatAmount } from \"lib/numbers\";\nimport { t } from \"@lingui/macro\";\nimport { getRootUrl } from \"lib/url\";\n\nexport const REFERRAL_CODE_REGEX = /^\\w+$/; // only number, string and underscore is allowed\nexport const REGEX_VERIFY_BYTES32 = /^0x[0-9a-f]{64}$/;\n\nexport function isRecentReferralCodeNotExpired(referralCodeInfo) {\n const REFERRAL_DATA_MAX_TIME = 60000 * 5; // 5 minutes\n if (referralCodeInfo.time) {\n return referralCodeInfo.time + REFERRAL_DATA_MAX_TIME > Date.now();\n }\n}\n\nexport async function getReferralCodeTakenStatus(account, referralCode, chainId) {\n const referralCodeBytes32 = encodeReferralCode(referralCode);\n // const [ownerArbitrum, ownerAvax] = await Promise.all([\n // getReferralCodeOwner(ARBITRUM, referralCodeBytes32),\n // getReferralCodeOwner(AVALANCHE, referralCodeBytes32),\n // ]);\n\n // const takenOnArb =\n // !isAddressZero(ownerArbitrum) && (ownerArbitrum !== account || (ownerArbitrum === account && chainId === ARBITRUM));\n // const takenOnAvax =\n // !isAddressZero(ownerAvax) && (ownerAvax !== account || (ownerAvax === account && chainId === AVALANCHE));\n\n // const referralCodeTakenInfo = {\n // [ARBITRUM]: takenOnArb,\n // [AVALANCHE]: takenOnAvax,\n // both: takenOnArb && takenOnAvax,\n // ownerArbitrum,\n // ownerAvax,\n // };\n\n // if (referralCodeTakenInfo.both) {\n // return { status: \"all\", info: referralCodeTakenInfo };\n // }\n // if (referralCodeTakenInfo[chainId]) {\n // return { status: \"current\", info: referralCodeTakenInfo };\n // }\n // if (chainId === AVALANCHE ? referralCodeTakenInfo[ARBITRUM] : referralCodeTakenInfo[AVALANCHE]) {\n // return { status: \"other\", info: referralCodeTakenInfo };\n // }\n // return { status: \"none\", info: referralCodeTakenInfo };\n\n if (IS_TESTNET) {\n const [ownerEthereum] = await Promise.all([\n getReferralCodeOwner(MUMBAI, referralCodeBytes32),\n ]);\n\n const takenOnEth =\n !isAddressZero(ownerEthereum) && (ownerEthereum !== account || (ownerEthereum === account && chainId === MUMBAI));\n\n const referralCodeTakenInfo = {\n [MUMBAI]: takenOnEth,\n ownerEthereum,\n };\n\n if (referralCodeTakenInfo[chainId]) {\n return { status: \"current\", info: referralCodeTakenInfo };\n }\n return { status: \"none\", info: referralCodeTakenInfo };\n } else {\n const [ownerMoonBeam] = await Promise.all([\n getReferralCodeOwner(MOONBEAM, referralCodeBytes32),\n ]);\n\n const takenOnMB =\n !isAddressZero(ownerMoonBeam) && (ownerMoonBeam !== account || (ownerMoonBeam === account && chainId === MOONBEAM));\n\n const referralCodeTakenInfo = {\n [MOONBEAM]: takenOnMB,\n ownerMoonBeam,\n };\n\n if (referralCodeTakenInfo[chainId]) {\n return { status: \"current\", info: referralCodeTakenInfo };\n }\n return { status: \"none\", info: referralCodeTakenInfo };\n }\n}\n\nexport function getTierIdDisplay(tierId) {\n return Number(tierId) + 1;\n}\n\nexport const tierRebateInfo = {\n 0: 5,\n 1: 10,\n 2: 15,\n};\n\nexport const tierDiscountInfo = {\n 0: 5,\n 1: 10,\n 2: 10,\n};\n\nfunction areObjectsWithSameKeys(obj1, obj2) {\n return Object.keys(obj1).every((key) => key in obj2);\n}\n\nexport function deserializeSampleStats(input) {\n const parsedData = JSON.parse(input);\n if (!Array.isArray(parsedData)) return [];\n return parsedData\n .map((data) => {\n if (!areObjectsWithSameKeys(getSampleReferrarStat(), data)) return null;\n return Object.keys(data).reduce((acc, cv) => {\n const currentValue = data[cv];\n if (currentValue?.type === \"BigNumber\") {\n acc[cv] = bigNumberify(currentValue.hex || 0);\n } else {\n acc[cv] = currentValue;\n }\n return acc;\n }, {});\n })\n .filter(Boolean);\n}\n\nexport const getSampleReferrarStat = (code = \"\", ownerOnOtherNetwork = \"\", account = \"\") => {\n return {\n discountUsd: bigNumberify(0),\n referralCode: code,\n totalRebateUsd: bigNumberify(0),\n tradedReferralsCount: 0,\n registeredReferralsCount: 0,\n trades: 0,\n volume: bigNumberify(0),\n time: Date.now(),\n ownerOnOtherChain: {\n code: encodeReferralCode(code),\n codeString: code,\n owner: undefined,\n isTaken: !isAddressZero(ownerOnOtherNetwork),\n isTakenByCurrentUser:\n !isAddressZero(ownerOnOtherNetwork) && ownerOnOtherNetwork.toLowerCase() === account.toLowerCase(),\n },\n };\n};\n\nexport function getUSDValue(value, decimals = 2) {\n return `$${formatAmount(value, USD_DECIMALS, decimals, true, \"0.00\")}`;\n}\n\nexport function getCodeError(value) {\n const trimmedValue = value.trim();\n if (!trimmedValue) return \"\";\n\n if (trimmedValue.length > MAX_REFERRAL_CODE_LENGTH) {\n return t`The referral code can't be more than ${MAX_REFERRAL_CODE_LENGTH} characters.`;\n }\n\n if (!REFERRAL_CODE_REGEX.test(trimmedValue)) {\n return t`Only letters, numbers and underscores are allowed.`;\n }\n return \"\";\n}\n\nexport function getReferralCodeTradeUrl(referralCode) {\n return `${getRootUrl()}/#/trade/?${REFERRAL_CODE_QUERY_PARAM}=${referralCode}`;\n}\n\nexport function getTwitterShareUrl(referralCode) {\n const message = [\"Trying out trading on @FXDX_IO, up to 30x leverage on $BTC, $ETH 📈\", \"For fee discounts use:\"];\n const shareURL = getReferralCodeTradeUrl(referralCode);\n\n return getTwitterIntentURL(message, shareURL);\n}\n","export function getRootUrl() {\n const { origin, protocol, hostname, port } = window.location;\n let url = origin;\n if (!origin) {\n const portString = port && `:${port}`;\n url = `${protocol}//${hostname}${portString}`;\n }\n return url;\n}\n","import { ethers } from \"ethers\";\nimport { gql } from \"@apollo/client\";\nimport { useState, useEffect, useMemo } from \"react\";\nimport useSWR from \"swr\";\n\nimport ReferralStorage from \"abis/ReferralStorage.json\";\nimport { MAX_REFERRAL_CODE_LENGTH, isAddressZero, isHashZero } from \"lib/legacy\";\nimport { getContract } from \"config/contracts\";\nimport { REGEX_VERIFY_BYTES32 } from \"components/Referrals/referralsHelper\";\nimport { ARBITRUM, AVALANCHE, GOERLI, IS_TESTNET, MOONBEAM, MUMBAI } from \"config/chains\";\nimport {\n goerliReferralsGraphClient,\n arbitrumReferralsGraphClient,\n avalancheReferralsGraphClient,\n moonbeamReferralsGraphClient,\n mumbaiReferralsGraphClient,\n} from \"lib/subgraph/clients\";\nimport { callContract, contractFetcher } from \"lib/contracts\";\nimport { helperToast } from \"lib/helperToast\";\nimport { REFERRAL_CODE_KEY } from \"config/localStorage\";\nimport { getProvider } from \"lib/rpc\";\nimport { bigNumberify } from \"lib/numbers\";\n\n// const ACTIVE_CHAINS = [ARBITRUM, AVALANCHE];\nconst ACTIVE_CHAINS = [IS_TESTNET ? MUMBAI : MOONBEAM];\nconst DISTRIBUTION_TYPE_REBATES = \"1\";\nconst DISTRIBUTION_TYPE_DISCOUNT = \"2\";\n\nfunction getGraphClient(chainId) {\n if (chainId === GOERLI) {\n return goerliReferralsGraphClient;\n } else if (chainId === ARBITRUM) {\n return arbitrumReferralsGraphClient;\n } else if (chainId === AVALANCHE) {\n return avalancheReferralsGraphClient;\n } else if (chainId === MOONBEAM) {\n return moonbeamReferralsGraphClient;\n } else if (chainId === MUMBAI) {\n return mumbaiReferralsGraphClient;\n }\n throw new Error(`Unsupported chain ${chainId}`);\n}\n\nexport function decodeReferralCode(hexCode) {\n try {\n return ethers.utils.parseBytes32String(hexCode);\n } catch (ex) {\n let code = \"\";\n hexCode = hexCode.substring(2);\n for (let i = 0; i < 32; i++) {\n code += String.fromCharCode(parseInt(hexCode.substring(i * 2, i * 2 + 2), 16));\n }\n return code.trim();\n }\n}\n\nexport function encodeReferralCode(code) {\n let final = code.replace(/[^\\w_]/g, \"\"); // replace everything other than numbers, string and underscor to ''\n if (final.length > MAX_REFERRAL_CODE_LENGTH) {\n return ethers.constants.HashZero;\n }\n return ethers.utils.formatBytes32String(final);\n}\n\nasync function getCodeOwnersData(network, account, codes = []) {\n if (codes.length === 0 || !account || !network) {\n return undefined;\n }\n const query = gql`\n query allCodes($codes: [String!]!) {\n referralCodes(where: { code_in: $codes }) {\n owner\n id\n }\n }\n `;\n return getGraphClient(network)\n .query({ query, variables: { codes } })\n .then(({ data }) => {\n const { referralCodes } = data;\n const codeOwners = referralCodes.reduce((acc, cv) => {\n acc[cv.id] = cv.owner;\n return acc;\n }, {});\n return codes.map((code) => {\n const owner = codeOwners[code];\n return {\n code,\n codeString: decodeReferralCode(code),\n owner,\n isTaken: Boolean(owner),\n isTakenByCurrentUser: owner && owner.toLowerCase() === account.toLowerCase(),\n };\n });\n });\n}\n\nexport function useUserCodesOnAllChain(account) {\n const [data, setData] = useState(null);\n const query = gql`\n query referralCodesOnAllChain($account: String!) {\n referralCodes(first: 1000, where: { owner: $account }) {\n code\n }\n }\n `;\n useEffect(() => {\n async function main() {\n const [codes /* arbitrumCodes, avalancheCodes*/] = await Promise.all(\n ACTIVE_CHAINS.map((chainId) => {\n return getGraphClient(chainId)\n .query({ query, variables: { account: (account || \"\").toLowerCase() } })\n .then(({ data }) => {\n return data.referralCodes.map((c) => c.code);\n });\n })\n );\n // const [codeOwnersOnAvax = [], codeOwnersOnArbitrum = []] = await Promise.all([\n // getCodeOwnersData(AVALANCHE, account, arbitrumCodes),\n // getCodeOwnersData(ARBITRUM, account, avalancheCodes),\n // ]);\n const [codeOwners = []] = await Promise.all([\n getCodeOwnersData(IS_TESTNET ? MUMBAI : MOONBEAM, account, codes),\n ]);\n\n setData({\n [IS_TESTNET ? MUMBAI : MOONBEAM]: codeOwners.reduce((acc, cv) => {\n acc[cv.code] = cv;\n return acc;\n }, {}),\n // [ARBITRUM]: codeOwnersOnAvax.reduce((acc, cv) => {\n // acc[cv.code] = cv;\n // return acc;\n // }, {}),\n // [AVALANCHE]: codeOwnersOnArbitrum.reduce((acc, cv) => {\n // acc[cv.code] = cv;\n // return acc;\n // }, {}),\n });\n }\n\n main();\n }, [account, query]);\n return data;\n}\n\nexport function useReferralsData(chainId, account) {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const ownerOnOtherChain = useUserCodesOnAllChain(account);\n useEffect(() => {\n if (!chainId || !account) {\n setLoading(false);\n return;\n }\n const startOfDayTimestamp = Math.floor(parseInt(Date.now() / 1000) / 86400) * 86400;\n const query = gql`\n query referralData($typeIds: [String!]!, $account: String!, $timestamp: Int!, $referralTotalStatsId: String!) {\n distributions(\n first: 1000\n orderBy: timestamp\n orderDirection: desc\n where: { receiver: $account, typeId_in: $typeIds }\n ) {\n receiver\n amount\n typeId\n token\n transactionHash\n timestamp\n }\n referrerTotalStats: referrerStats(\n first: 1000\n orderBy: volume\n orderDirection: desc\n where: { period: total, referrer: $account }\n ) {\n referralCode\n volume\n trades\n tradedReferralsCount\n registeredReferralsCount\n totalRebateUsd\n discountUsd\n }\n referrerLastDayStats: referrerStats(\n first: 1000\n where: { period: daily, referrer: $account, timestamp: $timestamp }\n ) {\n referralCode\n volume\n trades\n tradedReferralsCount\n registeredReferralsCount\n totalRebateUsd\n discountUsd\n }\n referralCodes(first: 1000, where: { owner: $account }) {\n code\n }\n referralTotalStats: referralStat(id: $referralTotalStatsId) {\n volume\n discountUsd\n }\n referrerTierInfo: referrer(id: $account) {\n tierId\n id\n discountShare\n }\n }\n `;\n setLoading(true);\n\n getGraphClient(chainId)\n .query({\n query,\n variables: {\n typeIds: [DISTRIBUTION_TYPE_REBATES, DISTRIBUTION_TYPE_DISCOUNT],\n account: (account || \"\").toLowerCase(),\n timestamp: startOfDayTimestamp,\n referralTotalStatsId: account && `total:0:${account.toLowerCase()}`,\n },\n })\n .then((res) => {\n const rebateDistributions = [];\n const discountDistributions = [];\n res.data.distributions.forEach((d) => {\n const item = {\n timestamp: parseInt(d.timestamp),\n transactionHash: d.transactionHash,\n receiver: ethers.utils.getAddress(d.receiver),\n amount: bigNumberify(d.amount),\n typeId: d.typeId,\n token: ethers.utils.getAddress(d.token),\n };\n if (d.typeId === DISTRIBUTION_TYPE_REBATES) {\n rebateDistributions.push(item);\n } else {\n discountDistributions.push(item);\n }\n });\n\n function prepareStatsItem(e) {\n return {\n volume: bigNumberify(e.volume),\n trades: parseInt(e.trades),\n tradedReferralsCount: parseInt(e.tradedReferralsCount),\n registeredReferralsCount: parseInt(e.registeredReferralsCount),\n totalRebateUsd: bigNumberify(e.totalRebateUsd),\n discountUsd: bigNumberify(e.discountUsd),\n referralCode: decodeReferralCode(e.referralCode),\n ownerOnOtherChain: ownerOnOtherChain?.[chainId][e.referralCode],\n };\n }\n\n function getCumulativeStats(data = []) {\n return data.reduce(\n (acc, cv) => {\n acc.totalRebateUsd = acc.totalRebateUsd.add(cv.totalRebateUsd);\n acc.volume = acc.volume.add(cv.volume);\n acc.discountUsd = acc.discountUsd.add(cv.discountUsd);\n acc.trades = acc.trades + cv.trades;\n acc.tradedReferralsCount = acc.tradedReferralsCount + cv.tradedReferralsCount;\n acc.registeredReferralsCount = acc.registeredReferralsCount + cv.registeredReferralsCount;\n return acc;\n },\n {\n totalRebateUsd: bigNumberify(0),\n volume: bigNumberify(0),\n discountUsd: bigNumberify(0),\n trades: 0,\n tradedReferralsCount: 0,\n registeredReferralsCount: 0,\n }\n );\n }\n\n let referrerTotalStats = res.data.referrerTotalStats.map(prepareStatsItem);\n setData({\n rebateDistributions,\n discountDistributions,\n referrerTotalStats,\n referrerTierInfo: res.data.referrerTierInfo,\n referrerLastDayStats: res.data.referrerLastDayStats.map(prepareStatsItem),\n cumulativeStats: getCumulativeStats(referrerTotalStats),\n codes: res.data.referralCodes.map((e) => decodeReferralCode(e.code)),\n referralTotalStats: res.data.referralTotalStats\n ? {\n volume: bigNumberify(res.data.referralTotalStats.volume),\n discountUsd: bigNumberify(res.data.referralTotalStats.discountUsd),\n }\n : {\n volume: bigNumberify(0),\n discountUsd: bigNumberify(0),\n },\n });\n })\n .catch(console.warn)\n .finally(() => {\n setLoading(false);\n });\n }, [setData, chainId, account, ownerOnOtherChain]);\n\n return {\n data: data || null,\n loading,\n };\n}\n\nexport async function registerReferralCode(chainId, referralCode, library, opts) {\n const referralStorageAddress = getContract(chainId, \"ReferralStorage\");\n const referralCodeHex = encodeReferralCode(referralCode);\n const contract = new ethers.Contract(referralStorageAddress, ReferralStorage.abi, library.getSigner());\n return callContract(chainId, contract, \"registerCode\", [referralCodeHex], opts);\n}\n\nexport async function setTraderReferralCodeByUser(chainId, referralCode, library, opts) {\n const referralCodeHex = encodeReferralCode(referralCode);\n const referralStorageAddress = getContract(chainId, \"ReferralStorage\");\n const contract = new ethers.Contract(referralStorageAddress, ReferralStorage.abi, library.getSigner());\n const codeOwner = await contract.codeOwners(referralCodeHex);\n if (isAddressZero(codeOwner)) {\n const errorMsg = \"Referral code does not exist\";\n helperToast.error(errorMsg);\n return Promise.reject(errorMsg);\n }\n return callContract(chainId, contract, \"setTraderReferralCodeByUser\", [referralCodeHex], opts);\n}\n\nexport async function getReferralCodeOwner(chainId, referralCode) {\n const referralStorageAddress = getContract(chainId, \"ReferralStorage\");\n const provider = getProvider(null, chainId);\n const contract = new ethers.Contract(referralStorageAddress, ReferralStorage.abi, provider);\n const codeOwner = await contract.codeOwners(referralCode);\n return codeOwner;\n}\n\nexport function useUserReferralCode(library, chainId, account) {\n const localStorageCode = window.localStorage.getItem(REFERRAL_CODE_KEY);\n const referralStorageAddress = getContract(chainId, \"ReferralStorage\");\n const { data: onChainCode } = useSWR(\n account && [\"ReferralStorage\", chainId, referralStorageAddress, \"traderReferralCodes\", account],\n { fetcher: contractFetcher(library, ReferralStorage) }\n );\n const { data: localStorageCodeOwner } = useSWR(\n localStorageCode &&\n REGEX_VERIFY_BYTES32.test(localStorageCode) && [\n \"ReferralStorage\",\n chainId,\n referralStorageAddress,\n \"codeOwners\",\n localStorageCode,\n ],\n { fetcher: contractFetcher(library, ReferralStorage) }\n );\n const [attachedOnChain, userReferralCode, userReferralCodeString] = useMemo(() => {\n if (onChainCode && !isHashZero(onChainCode)) {\n return [true, onChainCode, decodeReferralCode(onChainCode)];\n } else if (localStorageCodeOwner && !isAddressZero(localStorageCodeOwner)) {\n return [false, localStorageCode, decodeReferralCode(localStorageCode)];\n }\n return [false];\n }, [localStorageCode, localStorageCodeOwner, onChainCode]);\n\n return {\n userReferralCode,\n userReferralCodeString,\n attachedOnChain,\n };\n}\n\nexport function useReferrerTier(library, chainId, account) {\n const referralStorageAddress = getContract(chainId, \"ReferralStorage\");\n const { data: referrerTier, mutate: mutateReferrerTier } = useSWR(\n account && [`ReferralStorage:referrerTiers`, chainId, referralStorageAddress, \"referrerTiers\", account],\n {\n fetcher: contractFetcher(library, ReferralStorage),\n }\n );\n return {\n referrerTier,\n mutateReferrerTier,\n };\n}\n\nexport function useCodeOwner(library, chainId, account, code) {\n const referralStorageAddress = getContract(chainId, \"ReferralStorage\");\n const { data: codeOwner, mutate: mutateCodeOwner } = useSWR(\n account && code && [`ReferralStorage:codeOwners`, chainId, referralStorageAddress, \"codeOwners\", code],\n {\n fetcher: contractFetcher(library, ReferralStorage),\n }\n );\n return {\n codeOwner,\n mutateCodeOwner,\n };\n}\n\nexport async function validateReferralCodeExists(referralCode, chainId) {\n const referralCodeBytes32 = encodeReferralCode(referralCode);\n const referralCodeOwner = await getReferralCodeOwner(chainId, referralCodeBytes32);\n return !isAddressZero(referralCodeOwner);\n}\n\nexport function useAffiliateCodes(chainId, account) {\n const [affiliateCodes, setAffiliateCodes] = useState({ code: null, success: false });\n const query = gql`\n query userReferralCodes($account: String!) {\n referrerTotalStats: referrerStats(\n first: 1000\n orderBy: volume\n orderDirection: desc\n where: { period: total, referrer: $account }\n ) {\n referralCode\n }\n }\n `;\n useEffect(() => {\n if (!chainId) return;\n getGraphClient(chainId)\n .query({ query, variables: { account: account?.toLowerCase() } })\n .then((res) => {\n const parsedAffiliateCodes = res?.data?.referrerTotalStats.map((c) => decodeReferralCode(c?.referralCode));\n setAffiliateCodes({ code: parsedAffiliateCodes[0], success: true });\n });\n return () => {\n setAffiliateCodes({ code: null, success: false });\n };\n }, [chainId, query, account]);\n return affiliateCodes;\n}\n","export function get1InchSwapUrl(chainId, from, to) {\n const rootUrl = `https://app.1inch.io/#/${chainId}/unified/swap`;\n if (!from && !to) return rootUrl;\n return `${rootUrl}/${from}/${to}`;\n}\n","import { ethers } from \"ethers\";\nimport Modal from \"../Modal/Modal\";\nimport { get1InchSwapUrl } from \"domain/common\";\nimport { Token, TokenInfo } from \"domain/tokens\";\nimport { getNativeToken } from \"config/tokens\";\nimport { t, Trans } from \"@lingui/macro\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\n\nconst { AddressZero } = ethers.constants;\n\ntype Props = {\n chainId: number;\n modalError: string;\n isShort: boolean;\n isLong: boolean;\n fromToken: Token;\n toToken: Token;\n shortCollateralToken: TokenInfo;\n setModalError: () => void;\n};\n\nexport default function NoLiquidityErrorModal({\n chainId,\n fromToken,\n toToken,\n shortCollateralToken,\n isLong,\n isShort,\n modalError,\n setModalError,\n}: Props) {\n const nativeToken = getNativeToken(chainId);\n const inputCurrency = fromToken.address === AddressZero ? nativeToken.symbol : fromToken.address;\n let outputCurrency;\n if (isLong) {\n outputCurrency = toToken.address === AddressZero ? nativeToken.symbol : toToken.address;\n } else {\n outputCurrency = shortCollateralToken.address;\n }\n const swapTokenSymbol = isLong ? toToken.symbol : shortCollateralToken.symbol;\n const oneInchSwapUrl = get1InchSwapUrl(chainId, inputCurrency, outputCurrency);\n const label = modalError === \"BUFFER\"\n ? t`${shortCollateralToken.symbol} Required`\n : t`${fromToken.symbol} Pool Capacity Reached`;\n\n return (\n \n \n You need to select {swapTokenSymbol} as the \"Pay\" token to use it for collateral to initiate this trade.\n \n
\n \n
\n \n As there is not enough liquidity in FLP to swap {fromToken.symbol} to {swapTokenSymbol}, you can use the\n option below to do so:\n \n
\n \n\n
\n Alternatively, you can select a different \"Collateral In\" token. \n
\n
\n )}\n \n );\n}\n","import { useEffect, useRef } from \"react\";\n\nexport function usePrevious(value) {\n const ref = useRef();\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n}\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport Tooltip from \"../Tooltip/Tooltip\";\nimport { select, t, Trans } from \"@lingui/macro\";\nimport Slider, { SliderTooltip } from \"rc-slider\";\nimport \"rc-slider/assets/index.css\";\nimport \"./SwapBox.css\";\n\nimport cx from \"classnames\";\nimport useSWR from \"swr\";\nimport { ethers } from \"ethers\";\n\nimport { IoMdSwap } from \"react-icons/io\";\nimport { BsArrowRight } from \"react-icons/bs\";\n\nimport {\n adjustForDecimals,\n BASIS_POINTS_DIVISOR,\n calculatePositionDelta,\n DEFAULT_HIGHER_SLIPPAGE_AMOUNT,\n DUST_BNB,\n getExchangeRate,\n getExchangeRateDisplay,\n getLeverage,\n getLiquidationPrice,\n getNextFromAmount,\n getNextToAmount,\n getPositionKey,\n isTriggerRatioInverted,\n LEVERAGE_ORDER_OPTIONS,\n LIMIT,\n LONG,\n MARGIN_FEE_BASIS_POINTS,\n MARKET,\n PRECISION,\n SHORT,\n STOP,\n SWAP,\n SWAP_OPTIONS,\n SWAP_ORDER_OPTIONS,\n USD_DECIMALS,\n USDF_ADDRESS,\n USDF_DECIMALS,\n} from \"lib/legacy\";\nimport {\n ARBITRUM,\n // AVALANCHE,\n getChainName,\n getConstant,\n IS_NETWORK_DISABLED,\n isSupportedChain\n} from \"config/chains\";\nimport * as Api from \"domain/legacy\";\nimport { getContract } from \"config/contracts\";\n\nimport Checkbox from \"../Checkbox/Checkbox\";\nimport Tab from \"../Tab/Tab\";\nimport TokenSelector from \"./TokenSelector\";\nimport ExchangeInfoRow from \"./ExchangeInfoRow\";\nimport ConfirmationBox from \"./ConfirmationBox\";\nimport OrdersToa from \"./OrdersToa\";\n\nimport PositionRouter from \"abis/PositionRouter.json\";\nimport Router from \"abis/Router.json\";\nimport Token from \"abis/Token.json\";\nimport WETH from \"abis/WETH.json\";\n\nimport longImg from \"img/long.svg\";\nimport shortImg from \"img/short.svg\";\nimport swapImg from \"img/swap.svg\";\n\nimport { useUserReferralCode } from \"domain/referrals\";\nimport NoLiquidityErrorModal from \"./NoLiquidityErrorModal\";\nimport StatsTooltipRow from \"../StatsTooltip/StatsTooltipRow\";\nimport { callContract, contractFetcher } from \"lib/contracts\";\nimport {\n approveTokens,\n getMostAbundantStableToken,\n replaceNativeTokenAddress,\n shouldRaiseGasError,\n} from \"domain/tokens\";\nimport { useLocalStorageByChainId, useLocalStorageSerializeKey } from \"lib/localStorage\";\nimport { helperToast } from \"lib/helperToast\";\nimport { getTokenInfo, getUsd } from \"domain/tokens/utils\";\nimport { usePrevious } from \"lib/usePrevious\";\nimport { bigNumberify, expandDecimals, formatAmount, formatAmountFree, formatPrice, parseValue } from \"lib/numbers\";\nimport { getToken, getTokenBySymbol, getTokens, getWhitelistedTokens } from \"config/tokens\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\n\nconst SWAP_ICONS = {\n [LONG]: longImg,\n [SHORT]: shortImg,\n [SWAP]: swapImg,\n};\n\nconst { AddressZero } = ethers.constants;\n\nconst leverageSliderHandle = (props) => {\n const { value, dragging, index, ...restProps } = props;\n return (\n \n
Orders enabled!
);\n }\n }, [needOrderBookApproval, prevNeedOrderBookApproval, setIsWaitingForPluginApproval, isWaitingForPluginApproval]);\n\n useEffect(() => {\n if (!needPositionRouterApproval && prevNeedPositionRouterApproval && isWaitingForPositionRouterApproval) {\n setIsWaitingForPositionRouterApproval(false);\n helperToast.success(Leverage enabled!
);\n }\n }, [\n needPositionRouterApproval,\n prevNeedPositionRouterApproval,\n setIsWaitingForPositionRouterApproval,\n isWaitingForPositionRouterApproval,\n ]);\n\n useEffect(() => {\n if (!needOrderBookApproval && prevNeedOrderBookApproval && isWaitingForPluginApproval) {\n setIsWaitingForPluginApproval(false);\n helperToast.success(Orders enabled!
);\n }\n }, [needOrderBookApproval, prevNeedOrderBookApproval, setIsWaitingForPluginApproval, isWaitingForPluginApproval]);\n\n const routerAddress = getContract(chainId, \"Router\");\n const tokenAllowanceAddress = fromTokenAddress === AddressZero ? nativeTokenAddress : fromTokenAddress;\n const { data: tokenAllowance } = useSWR(\n active && [active, chainId, tokenAllowanceAddress, \"allowance\", account, routerAddress],\n {\n fetcher: contractFetcher(library, Token),\n }\n );\n\n const { data: hasOutdatedUi } = Api.useHasOutdatedUi();\n\n const fromToken = getToken(chainId, fromTokenAddress);\n const toToken = getToken(chainId, toTokenAddress);\n const shortCollateralToken = getTokenInfo(infoTokens, shortCollateralAddress);\n\n const fromTokenInfo = getTokenInfo(infoTokens, fromTokenAddress);\n const toTokenInfo = getTokenInfo(infoTokens, toTokenAddress);\n\n const renderAvailableLongLiquidity = () => {\n if (!isLong) {\n return null;\n }\n\n return (\n \n
\n );\n };\n\n const fromBalance = fromTokenInfo ? fromTokenInfo.balance : bigNumberify(0);\n const toBalance = toTokenInfo ? toTokenInfo.balance : bigNumberify(0);\n\n const fromAmount = parseValue(fromValue, fromToken && fromToken.decimals);\n const toAmount = parseValue(toValue, toToken && toToken.decimals);\n\n const isPotentialWrap = (fromToken.isNative && toToken.isWrapped) || (fromToken.isWrapped && toToken.isNative);\n const isWrapOrUnwrap = isSwap && isPotentialWrap;\n const needApproval =\n fromTokenAddress !== AddressZero &&\n tokenAllowance &&\n fromAmount &&\n fromAmount.gt(tokenAllowance) &&\n !isWrapOrUnwrap;\n const prevFromTokenAddress = usePrevious(fromTokenAddress);\n const prevNeedApproval = usePrevious(needApproval);\n const prevToTokenAddress = usePrevious(toTokenAddress);\n\n const fromUsdMin = getUsd(fromAmount, fromTokenAddress, false, infoTokens);\n const toUsdMax = getUsd(toAmount, toTokenAddress, true, infoTokens, orderOption, triggerPriceUsd);\n\n const indexTokenAddress = toTokenAddress === AddressZero ? nativeTokenAddress : toTokenAddress;\n const collateralTokenAddress = isLong ? indexTokenAddress : shortCollateralAddress;\n const collateralToken = getToken(chainId, collateralTokenAddress);\n\n const [triggerRatioValue, setTriggerRatioValue] = useState(\"\");\n\n const triggerRatioInverted = useMemo(() => {\n return isTriggerRatioInverted(fromTokenInfo, toTokenInfo);\n }, [toTokenInfo, fromTokenInfo]);\n\n const maxToTokenOut = useMemo(() => {\n const value = toTokenInfo.availableAmount?.gt(toTokenInfo.poolAmount?.sub(toTokenInfo.bufferAmount))\n ? toTokenInfo.poolAmount?.sub(toTokenInfo.bufferAmount)\n : toTokenInfo.availableAmount;\n\n if (!value) {\n return bigNumberify(0);\n }\n\n return value.gt(0) ? value : bigNumberify(0);\n }, [toTokenInfo]);\n\n const maxToTokenOutUSD = useMemo(() => {\n return getUsd(maxToTokenOut, toTokenAddress, false, infoTokens);\n }, [maxToTokenOut, toTokenAddress, infoTokens]);\n\n const maxFromTokenInUSD = useMemo(() => {\n const value = fromTokenInfo.maxUsdfAmount\n ?.sub(fromTokenInfo.usdfAmount)\n .mul(expandDecimals(1, USD_DECIMALS))\n .div(expandDecimals(1, USDF_DECIMALS));\n\n if (!value) {\n return bigNumberify(0);\n }\n\n return value.gt(0) ? value : bigNumberify(0);\n }, [fromTokenInfo]);\n\n const maxFromTokenIn = useMemo(() => {\n if (!fromTokenInfo.maxPrice) {\n return bigNumberify(0);\n }\n return maxFromTokenInUSD?.mul(expandDecimals(1, fromTokenInfo.decimals)).div(fromTokenInfo.maxPrice).toString();\n }, [maxFromTokenInUSD, fromTokenInfo]);\n\n let maxSwapAmountUsd = bigNumberify(0);\n\n if (maxToTokenOutUSD && maxFromTokenInUSD) {\n maxSwapAmountUsd = maxToTokenOutUSD.lt(maxFromTokenInUSD) ? maxToTokenOutUSD : maxFromTokenInUSD;\n }\n\n const triggerRatio = useMemo(() => {\n if (!triggerRatioValue) {\n return bigNumberify(0);\n }\n let ratio = parseValue(triggerRatioValue, USD_DECIMALS);\n if (ratio.eq(0)) {\n return bigNumberify(0);\n }\n if (triggerRatioInverted) {\n ratio = PRECISION.mul(PRECISION).div(ratio);\n }\n return ratio;\n }, [triggerRatioValue, triggerRatioInverted]);\n\n useEffect(() => {\n if (\n fromToken &&\n fromTokenAddress === prevFromTokenAddress &&\n !needApproval &&\n prevNeedApproval &&\n isWaitingForApproval\n ) {\n setIsWaitingForApproval(false);\n helperToast.success(\n Available Liquidity \n
\n \n {\n return (\n <>\n
\n {fromToken.symbol} approved!
);\n }\n }, [\n fromTokenAddress,\n prevFromTokenAddress,\n needApproval,\n prevNeedApproval,\n setIsWaitingForApproval,\n fromToken.symbol,\n isWaitingForApproval,\n fromToken,\n ]);\n\n useEffect(() => {\n if (!toTokens.find((token) => token.address === toTokenAddress)) {\n setToTokenAddress(swapOption, toTokens[0].address);\n }\n }, [swapOption, toTokens, toTokenAddress, setToTokenAddress]);\n\n useEffect(() => {\n if (swapOption !== SHORT) {\n return;\n }\n if (toTokenAddress === prevToTokenAddress) {\n return;\n }\n for (let i = 0; i < stableTokens.length; i++) {\n const stableToken = stableTokens[i];\n const key = getPositionKey(account, stableToken.address, toTokenAddress, false, nativeTokenAddress);\n const position = positionsMap[key];\n if (position && position.size && position.size.gt(0)) {\n setShortCollateralAddress(position.collateralToken.address);\n return;\n }\n }\n }, [\n account,\n toTokenAddress,\n prevToTokenAddress,\n swapOption,\n positionsMap,\n stableTokens,\n nativeTokenAddress,\n shortCollateralAddress,\n setShortCollateralAddress,\n ]);\n\n useEffect(() => {\n const updateSwapAmounts = () => {\n if (anchorOnFromAmount) {\n if (!fromAmount) {\n setToValue(\"\");\n return;\n }\n if (toToken) {\n const { amount: nextToAmount } = getNextToAmount(\n chainId,\n fromAmount,\n fromTokenAddress,\n toTokenAddress,\n infoTokens,\n undefined,\n !isMarketOrder && triggerRatio,\n usdfSupply,\n totalTokenWeights,\n isSwap\n );\n\n const nextToValue = formatAmountFree(nextToAmount, toToken.decimals, toToken.decimals);\n setToValue(nextToValue);\n }\n return;\n }\n\n if (!toAmount) {\n setFromValue(\"\");\n return;\n }\n if (fromToken) {\n const { amount: nextFromAmount } = getNextFromAmount(\n chainId,\n toAmount,\n fromTokenAddress,\n toTokenAddress,\n infoTokens,\n undefined,\n !isMarketOrder && triggerRatio,\n usdfSupply,\n totalTokenWeights,\n isSwap\n );\n const nextFromValue = formatAmountFree(nextFromAmount, fromToken.decimals, fromToken.decimals);\n setFromValue(nextFromValue);\n }\n };\n\n const updateLeverageAmounts = () => {\n if (!hasLeverageOption) {\n return;\n }\n if (anchorOnFromAmount) {\n if (!fromAmount) {\n setToValue(\"\");\n return;\n }\n\n const toTokenInfo = getTokenInfo(infoTokens, toTokenAddress);\n if (toTokenInfo && toTokenInfo.maxPrice && fromUsdMin && fromUsdMin.gt(0)) {\n const leverageMultiplier = parseInt(leverageOption * BASIS_POINTS_DIVISOR);\n const toTokenPriceUsd =\n !isMarketOrder && triggerPriceUsd && triggerPriceUsd.gt(0) ? triggerPriceUsd : toTokenInfo.maxPrice;\n\n const { feeBasisPoints } = getNextToAmount(\n chainId,\n fromAmount,\n fromTokenAddress,\n collateralTokenAddress,\n infoTokens,\n undefined,\n undefined,\n usdfSupply,\n totalTokenWeights,\n isSwap\n );\n\n let fromUsdMinAfterFee = fromUsdMin;\n if (feeBasisPoints) {\n fromUsdMinAfterFee = fromUsdMin.mul(BASIS_POINTS_DIVISOR - feeBasisPoints).div(BASIS_POINTS_DIVISOR);\n }\n\n const toNumerator = fromUsdMinAfterFee.mul(leverageMultiplier).mul(BASIS_POINTS_DIVISOR);\n const toDenominator = bigNumberify(MARGIN_FEE_BASIS_POINTS)\n .mul(leverageMultiplier)\n .add(bigNumberify(BASIS_POINTS_DIVISOR).mul(BASIS_POINTS_DIVISOR));\n\n const nextToUsd = toNumerator.div(toDenominator);\n\n const nextToAmount = nextToUsd.mul(expandDecimals(1, toToken.decimals)).div(toTokenPriceUsd);\n\n const nextToValue = formatAmountFree(nextToAmount, toToken.decimals, toToken.decimals);\n\n setToValue(nextToValue);\n }\n return;\n }\n\n if (!toAmount) {\n setFromValue(\"\");\n return;\n }\n\n const fromTokenInfo = getTokenInfo(infoTokens, fromTokenAddress);\n if (fromTokenInfo && fromTokenInfo.minPrice && toUsdMax && toUsdMax.gt(0)) {\n const leverageMultiplier = parseInt(leverageOption * BASIS_POINTS_DIVISOR);\n\n const baseFromAmountUsd = toUsdMax.mul(BASIS_POINTS_DIVISOR).div(leverageMultiplier);\n\n let fees = toUsdMax.mul(MARGIN_FEE_BASIS_POINTS).div(BASIS_POINTS_DIVISOR);\n\n const { feeBasisPoints } = getNextToAmount(\n chainId,\n fromAmount,\n fromTokenAddress,\n collateralTokenAddress,\n infoTokens,\n undefined,\n undefined,\n usdfSupply,\n totalTokenWeights,\n isSwap\n );\n\n if (feeBasisPoints) {\n const swapFees = baseFromAmountUsd.mul(feeBasisPoints).div(BASIS_POINTS_DIVISOR);\n fees = fees.add(swapFees);\n }\n\n const nextFromUsd = baseFromAmountUsd.add(fees);\n\n const nextFromAmount = nextFromUsd.mul(expandDecimals(1, fromToken.decimals)).div(fromTokenInfo.minPrice);\n\n const nextFromValue = formatAmountFree(nextFromAmount, fromToken.decimals, fromToken.decimals);\n\n setFromValue(nextFromValue);\n }\n };\n\n if (isSwap) {\n updateSwapAmounts();\n }\n\n if (isLong || isShort) {\n updateLeverageAmounts();\n }\n }, [\n anchorOnFromAmount,\n fromAmount,\n toAmount,\n fromToken,\n toToken,\n fromTokenAddress,\n toTokenAddress,\n infoTokens,\n isSwap,\n isLong,\n isShort,\n leverageOption,\n fromUsdMin,\n toUsdMax,\n isMarketOrder,\n triggerPriceUsd,\n triggerRatio,\n hasLeverageOption,\n usdfSupply,\n totalTokenWeights,\n chainId,\n collateralTokenAddress,\n indexTokenAddress,\n ]);\n\n let entryMarkPrice;\n let exitMarkPrice;\n if (toTokenInfo) {\n entryMarkPrice = swapOption === LONG ? toTokenInfo.maxPrice : toTokenInfo.minPrice;\n exitMarkPrice = swapOption === LONG ? toTokenInfo.minPrice : toTokenInfo.maxPrice;\n }\n\n let leverage = bigNumberify(0);\n if (fromUsdMin && toUsdMax && fromUsdMin.gt(0)) {\n const fees = toUsdMax.mul(MARGIN_FEE_BASIS_POINTS).div(BASIS_POINTS_DIVISOR);\n if (fromUsdMin.sub(fees).gt(0)) {\n leverage = toUsdMax.mul(BASIS_POINTS_DIVISOR).div(fromUsdMin.sub(fees));\n }\n }\n\n let nextAveragePrice = isMarketOrder ? entryMarkPrice : triggerPriceUsd;\n if (hasExistingPosition) {\n let nextDelta, nextHasProfit;\n\n if (isMarketOrder) {\n nextDelta = existingPosition.delta;\n nextHasProfit = existingPosition.hasProfit;\n } else {\n const data = calculatePositionDelta(triggerPriceUsd || bigNumberify(0), existingPosition);\n nextDelta = data.delta;\n nextHasProfit = data.hasProfit;\n }\n\n nextAveragePrice = getNextAveragePrice({\n size: existingPosition.size,\n sizeDelta: toUsdMax,\n hasProfit: nextHasProfit,\n delta: nextDelta,\n nextPrice: isMarketOrder ? entryMarkPrice : triggerPriceUsd,\n isLong,\n });\n }\n\n const liquidationPrice = getLiquidationPrice({\n isLong,\n size: hasExistingPosition ? existingPosition.size : bigNumberify(0),\n collateral: hasExistingPosition ? existingPosition.collateral : bigNumberify(0),\n averagePrice: nextAveragePrice,\n entryFundingRate: hasExistingPosition ? existingPosition.entryFundingRate : bigNumberify(0),\n cumulativeFundingRate: hasExistingPosition ? existingPosition.cumulativeFundingRate : bigNumberify(0),\n sizeDelta: toUsdMax,\n collateralDelta: fromUsdMin,\n increaseCollateral: true,\n increaseSize: true,\n });\n\n const existingLiquidationPrice = existingPosition ? getLiquidationPrice(existingPosition) : undefined;\n let displayLiquidationPrice = liquidationPrice ? liquidationPrice : existingLiquidationPrice;\n\n if (hasExistingPosition) {\n const collateralDelta = fromUsdMin ? fromUsdMin : bigNumberify(0);\n const sizeDelta = toUsdMax ? toUsdMax : bigNumberify(0);\n leverage = getLeverage({\n size: existingPosition.size,\n sizeDelta,\n collateral: existingPosition.collateral,\n collateralDelta,\n increaseCollateral: true,\n entryFundingRate: existingPosition.entryFundingRate,\n cumulativeFundingRate: existingPosition.cumulativeFundingRate,\n increaseSize: true,\n hasProfit: existingPosition.hasProfit,\n delta: existingPosition.delta,\n includeDelta: savedIsPnlInLeverage,\n });\n } else if (hasLeverageOption) {\n leverage = bigNumberify(parseInt(leverageOption * BASIS_POINTS_DIVISOR));\n }\n\n const getSwapError = () => {\n if (IS_NETWORK_DISABLED[chainId]) {\n return [t`Swaps disabled, pending ${getChainName(chainId)} upgrade`];\n }\n\n if (fromTokenAddress === toTokenAddress) {\n return [t`Select different tokens`];\n }\n\n if (!isMarketOrder) {\n if ((toToken.isStable || toToken.isUsdf) && (fromToken.isStable || fromToken.isUsdf)) {\n return [t`Select different tokens`];\n }\n\n if (fromToken.isNative && toToken.isWrapped) {\n return [t`Select different tokens`];\n }\n\n if (toToken.isNative && fromToken.isWrapped) {\n return [t`Select different tokens`];\n }\n }\n\n if (!fromAmount || fromAmount.eq(0)) {\n return [t`Enter an amount`];\n }\n if (!toAmount || toAmount.eq(0)) {\n return [t`Enter an amount`];\n }\n\n const fromTokenInfo = getTokenInfo(infoTokens, fromTokenAddress);\n if (!fromTokenInfo || !fromTokenInfo.minPrice) {\n return [t`Incorrect network`];\n }\n if (\n !savedShouldDisableValidationForTesting &&\n fromTokenInfo &&\n fromTokenInfo.balance &&\n fromAmount &&\n fromAmount.gt(fromTokenInfo.balance)\n ) {\n return [t`Insufficient ${fromTokenInfo.symbol} balance`];\n }\n\n const toTokenInfo = getTokenInfo(infoTokens, toTokenAddress);\n\n if (!isMarketOrder) {\n if (!triggerRatioValue || triggerRatio.eq(0)) {\n return [t`Enter a price`];\n }\n\n const currentRate = getExchangeRate(fromTokenInfo, toTokenInfo);\n if (currentRate && currentRate.lt(triggerRatio)) {\n return triggerRatioInverted ? [t`Price below Mark Price`] : [t`Price above Mark Price`];\n }\n }\n\n if (\n !isWrapOrUnwrap &&\n toToken &&\n toTokenAddress !== USDF_ADDRESS &&\n toTokenInfo &&\n toTokenInfo.availableAmount &&\n toAmount.gt(toTokenInfo.availableAmount)\n ) {\n return [t`Insufficient liquidity`];\n }\n if (\n !isWrapOrUnwrap &&\n toAmount &&\n toTokenInfo.bufferAmount &&\n toTokenInfo.poolAmount &&\n toTokenInfo.bufferAmount.gt(toTokenInfo.poolAmount.sub(toAmount))\n ) {\n return [t`Insufficient liquidity`];\n }\n\n if (\n fromUsdMin &&\n fromTokenInfo.maxUsdfAmount &&\n fromTokenInfo.maxUsdfAmount.gt(0) &&\n fromTokenInfo.usdfAmount &&\n fromTokenInfo.maxPrice\n ) {\n const usdfFromAmount = adjustForDecimals(fromUsdMin, USD_DECIMALS, USDF_DECIMALS);\n const nextUsdfAmount = fromTokenInfo.usdfAmount.add(usdfFromAmount);\n\n if (nextUsdfAmount.gt(fromTokenInfo.maxUsdfAmount)) {\n return [t`${fromTokenInfo.symbol} pool exceeded`];\n }\n }\n\n return [false];\n };\n\n const getLeverageError = () => {\n if (IS_NETWORK_DISABLED[chainId]) {\n return [t`Leverage disabled, pending ${getChainName(chainId)} upgrade`];\n }\n if (hasOutdatedUi) {\n return [t`Page outdated, please refresh`];\n }\n\n if (!toAmount || toAmount.eq(0)) {\n return [t`Enter an amount`];\n }\n\n let toTokenInfo = getTokenInfo(infoTokens, toTokenAddress);\n if (toTokenInfo && toTokenInfo.isStable) {\n return [t`${select(swapOption, { [LONG]: \"Longing\", [SHORT]: \"Shorting\" })} ${toTokenInfo.symbol} not supported`];\n }\n\n const fromTokenInfo = getTokenInfo(infoTokens, fromTokenAddress);\n if (\n !savedShouldDisableValidationForTesting &&\n fromTokenInfo &&\n fromTokenInfo.balance &&\n fromAmount &&\n fromAmount.gt(fromTokenInfo.balance)\n ) {\n return [t`Insufficient ${fromTokenInfo.symbol} balance`];\n }\n\n if (leverage && leverage.eq(0)) {\n return [t`Enter an amount`];\n }\n if (!isMarketOrder && (!triggerPriceValue || triggerPriceUsd.eq(0))) {\n return [t`Enter a price`];\n }\n\n if (!hasExistingPosition && fromUsdMin && fromUsdMin.lt(expandDecimals(10, USD_DECIMALS))) {\n return [t`Min order: 10 USD`];\n }\n\n if (leverage && leverage.lt(1.1 * BASIS_POINTS_DIVISOR)) {\n return [t`Min leverage: 1.1x`];\n }\n\n if (leverage && leverage.gt(30.5 * BASIS_POINTS_DIVISOR)) {\n return [t`Max leverage: 30.5x`];\n }\n\n if (!isMarketOrder && entryMarkPrice && triggerPriceUsd && !savedShouldDisableValidationForTesting) {\n if (isLong && entryMarkPrice.lt(triggerPriceUsd)) {\n return [t`Price above Mark Price`];\n }\n if (!isLong && entryMarkPrice.gt(triggerPriceUsd)) {\n return [t`Price below Mark Price`];\n }\n }\n\n if (isLong) {\n let requiredAmount = toAmount;\n if (fromTokenAddress !== toTokenAddress) {\n const { amount: swapAmount } = getNextToAmount(\n chainId,\n fromAmount,\n fromTokenAddress,\n toTokenAddress,\n infoTokens,\n undefined,\n undefined,\n usdfSupply,\n totalTokenWeights,\n isSwap\n );\n requiredAmount = requiredAmount.add(swapAmount);\n\n if (toToken && toTokenAddress !== USDF_ADDRESS) {\n if (!toTokenInfo.availableAmount) {\n return [t`Liquidity data not loaded`];\n }\n if (toTokenInfo.availableAmount && requiredAmount.gt(toTokenInfo.availableAmount)) {\n return [t`Insufficient liquidity`];\n }\n }\n\n if (\n toTokenInfo.poolAmount &&\n toTokenInfo.bufferAmount &&\n toTokenInfo.bufferAmount.gt(toTokenInfo.poolAmount.sub(swapAmount))\n ) {\n return [t`Insufficient liquidity`, true, \"BUFFER\"];\n }\n\n if (\n fromUsdMin &&\n fromTokenInfo.maxUsdfAmount &&\n fromTokenInfo.maxUsdfAmount.gt(0) &&\n fromTokenInfo.minPrice &&\n fromTokenInfo.usdfAmount\n ) {\n const usdfFromAmount = adjustForDecimals(fromUsdMin, USD_DECIMALS, USDF_DECIMALS);\n const nextUsdfAmount = fromTokenInfo.usdfAmount.add(usdfFromAmount);\n if (nextUsdfAmount.gt(fromTokenInfo.maxUsdfAmount)) {\n return [t`${fromTokenInfo.symbol} pool exceeded, try different token`, true, \"MAX_USDF\"];\n }\n }\n }\n\n if (toTokenInfo && toTokenInfo.maxPrice) {\n const sizeUsd = toAmount.mul(toTokenInfo.maxPrice).div(expandDecimals(1, toTokenInfo.decimals));\n if (\n toTokenInfo.maxGlobalLongSize &&\n toTokenInfo.maxGlobalLongSize.gt(0) &&\n toTokenInfo.maxAvailableLong &&\n sizeUsd.gt(toTokenInfo.maxAvailableLong)\n ) {\n return [t`Max ${toTokenInfo.symbol} long exceeded`];\n }\n }\n }\n\n if (isShort) {\n let stableTokenAmount = bigNumberify(0);\n if (fromTokenAddress !== shortCollateralAddress && fromAmount && fromAmount.gt(0)) {\n const { amount: nextToAmount } = getNextToAmount(\n chainId,\n fromAmount,\n fromTokenAddress,\n shortCollateralAddress,\n infoTokens,\n undefined,\n undefined,\n usdfSupply,\n totalTokenWeights,\n isSwap\n );\n stableTokenAmount = nextToAmount;\n if (stableTokenAmount.gt(shortCollateralToken.availableAmount)) {\n return [t`Insufficient liquidity, change \"Collateral In\"`];\n }\n\n if (\n shortCollateralToken.bufferAmount &&\n shortCollateralToken.poolAmount &&\n shortCollateralToken.bufferAmount.gt(shortCollateralToken.poolAmount.sub(stableTokenAmount))\n ) {\n // suggest swapping to collateralToken\n return [t`Insufficient liquidity, change \"Collateral In\"`, true, \"BUFFER\"];\n }\n\n if (\n fromTokenInfo.maxUsdfAmount &&\n fromTokenInfo.maxUsdfAmount.gt(0) &&\n fromTokenInfo.minPrice &&\n fromTokenInfo.usdfAmount\n ) {\n const usdfFromAmount = adjustForDecimals(fromUsdMin, USD_DECIMALS, USDF_DECIMALS);\n const nextUsdfAmount = fromTokenInfo.usdfAmount.add(usdfFromAmount);\n if (nextUsdfAmount.gt(fromTokenInfo.maxUsdfAmount)) {\n return [t`${fromTokenInfo.symbol} pool exceeded, try different token`, true, \"MAX_USDF\"];\n }\n }\n }\n if (\n !shortCollateralToken ||\n !fromTokenInfo ||\n !toTokenInfo ||\n !toTokenInfo.maxPrice ||\n !shortCollateralToken.availableAmount\n ) {\n return [t`Fetching token info...`];\n }\n\n const sizeUsd = toAmount.mul(toTokenInfo.maxPrice).div(expandDecimals(1, toTokenInfo.decimals));\n const sizeTokens = sizeUsd\n .mul(expandDecimals(1, shortCollateralToken.decimals))\n .div(shortCollateralToken.minPrice);\n\n if (!toTokenInfo.maxAvailableShort) {\n return [t`Liquidity data not loaded`];\n }\n\n if (\n toTokenInfo.maxGlobalShortSize &&\n toTokenInfo.maxGlobalShortSize.gt(0) &&\n toTokenInfo.maxAvailableShort &&\n sizeUsd.gt(toTokenInfo.maxAvailableShort)\n ) {\n return [t`Max ${toTokenInfo.symbol} short exceeded`];\n }\n\n stableTokenAmount = stableTokenAmount.add(sizeTokens);\n if (stableTokenAmount.gt(shortCollateralToken.availableAmount)) {\n return [t`Insufficient liquidity, change \"Collateral In\"`];\n }\n }\n\n return [false];\n };\n\n const getToLabel = () => {\n if (isSwap) {\n return t`Receive`;\n }\n if (isLong) {\n return t`Long`;\n }\n return t`Short`;\n };\n\n const getError = () => {\n if (isSwap) {\n return getSwapError();\n }\n return getLeverageError();\n };\n\n const renderOrdersToa = () => {\n if (!ordersToaOpen) {\n return null;\n }\n\n return (\n \n {/*
\n )}\n {isSwap && (\n \n {active &&
*/}\n \n
}\n \n \n \n )}\n {showTriggerRatioSection && (\n
\n )}\n {showTriggerPriceSection && (\n \n
\n {showFromAndToSection && (\n \n
\n \n
\n \n {fromUsdMin && (\n
\n {fromBalance && (\n \n Pay: {formatAmount(fromUsdMin, USD_DECIMALS, 2, true)} USD \n
\n )}\n {!fromUsdMin && t`Pay`}\n \n Balance: {formatAmount(fromBalance, fromToken.decimals, 4, true)} \n
\n )}\n \n
\n \n
\n \n MAX \n
\n )}\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {toUsdMax && (\n
\n {toBalance && isSwap && (\n \n {getToLabel()}: {formatAmount(toUsdMax, USD_DECIMALS, 2, true)} USD\n
\n )}\n {!toUsdMax && getToLabel()}\n \n Balance : {formatAmount(toBalance, toToken.decimals, 4, true)}\n
\n )}\n {(isLong || isShort) && hasLeverageOption && (\n \n Leverage : {parseFloat(leverageOption).toFixed(2)}x\n
\n )}\n \n
\n \n
\n \n
\n \n
\n \n {\n setTriggerRatioValue(\n formatAmountFree(\n getExchangeRate(fromTokenInfo, toTokenInfo, triggerRatioInverted),\n USD_DECIMALS,\n 10\n )\n );\n }}\n >\n {formatAmount(getExchangeRate(fromTokenInfo, toTokenInfo, triggerRatioInverted), USD_DECIMALS, 4)}\n
\n )}\n \n Price \n
\n {fromTokenInfo && toTokenInfo && (\n \n
\n \n
\n {(() => {\n if (!toTokenInfo) return;\n if (!fromTokenInfo) return;\n const [tokenA, tokenB] = triggerRatioInverted\n ? [toTokenInfo, fromTokenInfo]\n : [fromTokenInfo, toTokenInfo];\n return (\n \n {tokenA.symbol} per {tokenB.symbol}\n
\n );\n })()}\n \n
\n \n {\n setTriggerPriceValue(formatPrice(entryMarkPrice, false, true));\n }}\n >\n Mark: {formatPrice(entryMarkPrice, true)} \n
\n \n Price \n
\n \n
\n \n
\n USD
\n \n \n \n
\n )}\n {(isLong || isShort) && !isStopOrder && (\n \n {!fees && \"-\"}\n {fees && (\n
\n \n {formatAmount(feeBps, 2, 2, false)}% ({formatAmount(fees, fromToken.decimals, 4, true)}{\" \"}\n {fromToken.symbol}: ${formatAmount(feesUsd, USD_DECIMALS, 2, true)})\n
\n )}\n \n \n setLeverageOption(value)}\n value={leverageOption}\n defaultValue={leverageOption}\n />\n
\n )}\n {isShort && (\n \n \n Leverage slider\n \n
\n {isLeverageSliderEnabled && (\n \n
\n )}\n {isLong && (\n \n Collateral In \n
\n\n \n
\n \n
\n )}\n \n Collateral In \n
\n \n (\n \n \n A snapshot of the USD value of your {existingPosition?.collateralToken?.symbol} collateral is\n taken when the position is opened.\n \n
\n
\n\n When closing the position, you can select which token you would like to receive the profits\n in.\n \n \n )}\n />\n
\n \n
\n
\n
\n \n Leverage \n
\n \n {hasExistingPosition && toAmount && toAmount.gt(0) && (\n
\n \n {formatAmount(existingPosition.leverage, 4, 2)}x\n
\n )}\n {toAmount && leverage && leverage.gt(0) && `${formatAmount(leverage, 4, 2)}x`}\n {!toAmount && leverage && leverage.gt(0) && `-`}\n {leverage && leverage.eq(0) && `-`}\n \n
\n \n Entry Price \n
\n \n {hasExistingPosition && toAmount && toAmount.gt(0) && (\n
\n \n ${formatPrice(existingPosition.averagePrice, true)}\n
\n )}\n {nextAveragePrice && `$${formatPrice(nextAveragePrice, true)}`}\n {!nextAveragePrice && `-`}\n \n
\n \n Liq. Price \n
\n \n {hasExistingPosition && toAmount && toAmount.gt(0) && (\n
\n \n ${formatPrice(existingLiquidationPrice, true)}\n
\n )}\n {toAmount &&\n displayLiquidationPrice &&\n `$${formatPrice(displayLiquidationPrice, true)}`}\n {!toAmount && displayLiquidationPrice && `-`}\n {!displayLiquidationPrice && `-`}\n \n {!feesUsd && \"-\"}\n {feesUsd && (\n {\n return (\n
\n \n {swapFees && (\n
\n );\n }}\n />\n )}\n \n {collateralToken.symbol} is required for collateral.
\n
\n
\n
\n )}\n \n
\n
\n
\n
\n \n \n Take-profit and stop-loss orders can be set after opening a position.
\n
\n There will be a \"Close\" button on each position row, clicking this will display the option to set trigger\n orders.
\n
\n For screenshots and more information, please see the{\" \"}\ndocs \n .\n \n
\n )}\n \n
\n There will be a \"Close\" button on each position row, clicking this will display the option to set trigger\n orders.
\n
\n For screenshots and more information, please see the{\" \"}\n
\n \n
\n \n {isSwap && (\n \n \n {getExchangeRateDisplay(getExchangeRate(fromTokenInfo, toTokenInfo), fromToken, toToken)}\n \n )}\n
\n )}\n {(isLong || isShort) && (\n \n Swap \n
\n \n \n
\n \n {fromToken.symbol} Price \n
\n \n ${fromTokenInfo && formatPrice(fromTokenInfo.minPrice, true)}\n
\n \n
\n \n {toToken.symbol} Price \n
\n \n ${toTokenInfo && formatPrice(toTokenInfo.maxPrice, true)}\n
\n \n
\n {!isMarketOrder && (\n \n Available Liquidity \n
\n\n \n {\n return (\n
\n \n
\n );\n }}\n />\n \n
\n )}\n \n {isLong ? t`Long` : t`Short`} {toToken.symbol}\n
\n \n \n
\n \n Entry Price \n
\n \n {\n return (\n
\n \n \n The position will be opened at {formatPrice(entryMarkPrice, true)} USD with a\n max slippage of {parseFloat(savedSlippageAmount / 100.0).toFixed(2)}%.\n
\n
\n The slippage amount can be configured under Settings, found by clicking on your address at the\n top right of the page after connecting your wallet.\n
\n
\n\n More Info\n \n \n
\n );\n }}\n />\n \n
\n The slippage amount can be configured under Settings, found by clicking on your address at the\n top right of the page after connecting your wallet.\n
\n
\n
\n
\n \n Exit Price \n
\n \n {\n return (\n
\n \n \n If you have an existing position, the position will be closed at{\" \"}\n {formatPrice(entryMarkPrice, true)} USD.\n
\n
\n This exit price will change with the price of the asset.\n
\n
\n\n More Info\n \n \n
\n );\n }}\n />\n \n
\n This exit price will change with the price of the asset.\n
\n
\n
\n
\n {renderAvailableLongLiquidity()}\n {isShort && toTokenInfo.hasMaxAvailableShort && (\n \n Borrow Fee \n
\n \n {\n return (\n
\n \n {hasZeroBorrowFee && (\n
\n\n More Info \n \n
\n );\n }}\n >\n {!hasZeroBorrowFee && null}\n \n \n {isLong && t`There are more shorts than longs, borrow fees for longing is currently zero`}\n {isShort && t`There are more longs than shorts, borrow fees for shorting is currently zero`}\n
\n )}\n {!hasZeroBorrowFee && (\n \n \n The borrow fee is calculated as (assets borrowed) / (total assets in pool) * 0.01% per hour.\n \n
\n
\n {isShort && t`You can change the \"Collateral In\" token above to find lower fees`}\n
\n )}\n \n
\n {isShort && t`You can change the \"Collateral In\" token above to find lower fees`}\n
\n
\n
\n )}\n \n Available Liquidity \n
\n \n {\n return (\n <>\n
\n \n
\n \n Useful Links \n
\n \n \n
\n {/* \n \n Trading guide \n \n
\n \n
*/}\n \n \n Leaderboard \n \n
\n \n
\n \n \n Speed up page loading \n \n
\n \n O\n {candlestick.open.toFixed(toFixedNumbers)}\n H\n {candlestick.high.toFixed(toFixedNumbers)}\n L\n {candlestick.low.toFixed(toFixedNumbers)}\n C\n {candlestick.close.toFixed(toFixedNumbers)}\n
\n );\n }, [hoveredCandlestick, priceData]);\n\n let high;\n let low;\n let deltaPrice;\n let delta;\n let deltaPercentage;\n let deltaPercentageStr;\n\n const now = parseInt(Date.now() / 1000);\n const timeThreshold = now - 24 * 60 * 60;\n\n if (priceData) {\n for (let i = priceData.length - 1; i > 0; i--) {\n const price = priceData[i];\n if (price.time < timeThreshold) {\n break;\n }\n if (!low) {\n low = price.low;\n }\n if (!high) {\n high = price.high;\n }\n\n if (price.high > high) {\n high = price.high;\n }\n if (price.low < low) {\n low = price.low;\n }\n\n deltaPrice = price.open;\n }\n }\n\n if (deltaPrice && currentAveragePrice) {\n const average = parseFloat(formatPrice(currentAveragePrice));\n delta = average - deltaPrice;\n deltaPercentage = (delta * 100) / average;\n if (deltaPercentage > 0) {\n deltaPercentageStr = `+${deltaPercentage.toFixed(2)}%`;\n } else {\n deltaPercentageStr = `${deltaPercentage.toFixed(2)}%`;\n }\n if (deltaPercentage === 0) {\n deltaPercentageStr = \"0.00\";\n }\n }\n\n if (!chartToken) {\n return null;\n }\n\n const onSelectToken = (token) => {\n const tmp = getTokenInfo(infoTokens, token.address);\n setChartToken(tmp);\n setToTokenAddress(swapOption, token.address);\n };\n\n return (\n \n
\n );\n}\n","import React, { useState, useCallback, useEffect, useMemo } from \"react\";\nimport { ethers } from \"ethers\";\nimport cx from \"classnames\";\nimport { Trans, t } from \"@lingui/macro\";\nimport { BsArrowRight } from \"react-icons/bs\";\n\nimport {\n DEFAULT_SLIPPAGE_AMOUNT,\n DEFAULT_HIGHER_SLIPPAGE_AMOUNT,\n USD_DECIMALS,\n DUST_USD,\n BASIS_POINTS_DIVISOR,\n MIN_PROFIT_TIME,\n getLiquidationPrice,\n getLeverage,\n getMarginFee,\n PRECISION,\n MARKET,\n STOP,\n DECREASE,\n calculatePositionDelta,\n getDeltaStr,\n getProfitPrice,\n getNextToAmount,\n USDF_DECIMALS,\n adjustForDecimals,\n} from \"lib/legacy\";\nimport { ARBITRUM, getChainName, getConstant, IS_NETWORK_DISABLED } from \"config/chains\";\nimport { createDecreaseOrder, useHasOutdatedUi } from \"domain/legacy\";\nimport { getContract } from \"config/contracts\";\nimport PositionRouter from \"abis/PositionRouter.json\";\nimport Checkbox from \"../Checkbox/Checkbox\";\nimport Tab from \"../Tab/Tab\";\nimport Modal from \"../Modal/Modal\";\nimport ExchangeInfoRow from \"./ExchangeInfoRow\";\nimport Tooltip from \"../Tooltip/Tooltip\";\nimport TokenSelector from \"./TokenSelector\";\nimport \"./PositionSeller.css\";\nimport StatsTooltipRow from \"../StatsTooltip/StatsTooltipRow\";\nimport { callContract } from \"lib/contracts\";\nimport { getTokenAmountFromUsd } from \"domain/tokens\";\nimport { TRIGGER_PREFIX_ABOVE, TRIGGER_PREFIX_BELOW } from \"config/ui\";\nimport { useLocalStorageByChainId, useLocalStorageSerializeKey } from \"lib/localStorage\";\nimport { CLOSE_POSITION_RECEIVE_TOKEN_KEY, SLIPPAGE_BPS_KEY } from \"config/localStorage\";\nimport { getTokenInfo, getUsd } from \"domain/tokens/utils\";\nimport { usePrevious } from \"lib/usePrevious\";\nimport { bigNumberify, expandDecimals, formatAmount, formatAmountFree, formatPrice, parseValue } from \"lib/numbers\";\nimport { getTokens } from \"config/tokens\";\nimport { formatDateTime, getTimeRemaining } from \"lib/dates\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\n\nconst { AddressZero } = ethers.constants;\nconst ORDER_SIZE_DUST_USD = expandDecimals(1, USD_DECIMALS - 1); // $0.10\n\nfunction shouldSwap(collateralToken, receiveToken) {\n // If position collateral is WETH in contract, then position.collateralToken is { symbol: “ETH”, isNative: true, … }\n // @see https://github.com/fxdxdex/fxdx-evm-interface/blob/master/src/pages/Exchange/Exchange.js#L162\n // meaning if collateralToken.isNative === true in reality position has WETH as a collateral\n // and if collateralToken.isNative === true and receiveToken.isNative === true then position’s WETH will be unwrapped and user will receive native ETH\n const isCollateralWrapped = collateralToken.isNative;\n\n const isSameToken =\n collateralToken.address === receiveToken.address || (isCollateralWrapped && receiveToken.isWrapped);\n\n const isUnwrap = isCollateralWrapped && receiveToken.isNative;\n\n return !isSameToken && !isUnwrap;\n}\n\nfunction getSwapLimits(infoTokens, fromTokenAddress, toTokenAddress) {\n const fromInfo = getTokenInfo(infoTokens, fromTokenAddress);\n const toInfo = getTokenInfo(infoTokens, toTokenAddress);\n\n let maxInUsd;\n let maxIn;\n let maxOut;\n let maxOutUsd;\n\n if (!fromInfo?.maxUsdfAmount) {\n maxInUsd = bigNumberify(0);\n maxIn = bigNumberify(0);\n } else {\n maxInUsd = fromInfo.maxUsdfAmount\n .sub(fromInfo.usdfAmount)\n .mul(expandDecimals(1, USD_DECIMALS))\n .div(expandDecimals(1, USDF_DECIMALS));\n\n maxIn = maxInUsd.mul(expandDecimals(1, fromInfo.decimals)).div(fromInfo.maxPrice).toString();\n }\n\n if (!toInfo?.poolAmount || !toInfo?.bufferAmount) {\n maxOut = bigNumberify(0);\n maxOutUsd = bigNumberify(0);\n } else {\n maxOut = toInfo.availableAmount.gt(toInfo.poolAmount.sub(toInfo.bufferAmount))\n ? toInfo.poolAmount.sub(toInfo.bufferAmount)\n : toInfo.availableAmount;\n\n maxOutUsd = getUsd(maxOut, toInfo.address, false, infoTokens);\n }\n\n return {\n maxIn,\n maxInUsd,\n maxOut,\n maxOutUsd,\n };\n}\n\nexport default function PositionSeller(props) {\n const {\n pendingPositions,\n setPendingPositions,\n positionsMap,\n positionKey,\n isVisible,\n setIsVisible,\n account,\n library,\n infoTokens,\n setPendingTxns,\n flagOrdersEnabled,\n savedIsPnlInLeverage,\n chainId,\n nativeTokenAddress,\n orders,\n isWaitingForPluginApproval,\n isPluginApproving,\n orderBookApproved,\n setOrdersToaOpen,\n positionRouterApproved,\n isWaitingForPositionRouterApproval,\n isPositionRouterApproving,\n approvePositionRouter,\n isHigherSlippageAllowed,\n setIsHigherSlippageAllowed,\n minExecutionFee,\n minExecutionFeeErrorMessage,\n usdfSupply,\n totalTokenWeights,\n } = props;\n const [savedSlippageAmount] = useLocalStorageSerializeKey([chainId, SLIPPAGE_BPS_KEY], DEFAULT_SLIPPAGE_AMOUNT);\n const [keepLeverage, setKeepLeverage] = useLocalStorageSerializeKey([chainId, \"Exchange-keep-leverage\"], true);\n const position = positionsMap && positionKey ? positionsMap[positionKey] : undefined;\n const [fromValue, setFromValue] = useState(\"\");\n const [isProfitWarningAccepted, setIsProfitWarningAccepted] = useState(false);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const prevIsVisible = usePrevious(isVisible);\n const positionRouterAddress = getContract(chainId, \"PositionRouter\");\n const nativeTokenSymbol = getConstant(chainId, \"nativeTokenSymbol\");\n const toTokens = getTokens(chainId);\n const longOrShortText = position?.isLong ? t`Long` : t`Short`;\n\n const [savedRecieveTokenAddress, setSavedRecieveTokenAddress] = useLocalStorageByChainId(\n chainId,\n `${CLOSE_POSITION_RECEIVE_TOKEN_KEY}-${position?.indexToken?.symbol}-${position.isLong ? \"long\" : \"short\"}`\n );\n\n const [swapToToken, setSwapToToken] = useState(() =>\n savedRecieveTokenAddress ? toTokens.find((token) => token.address === savedRecieveTokenAddress) : undefined\n );\n\n let allowedSlippage = savedSlippageAmount;\n if (isHigherSlippageAllowed) {\n allowedSlippage = DEFAULT_HIGHER_SLIPPAGE_AMOUNT;\n }\n\n const ORDER_OPTIONS = [MARKET, STOP];\n const ORDER_OPTION_LABELS = {\n [MARKET]: t`Market`,\n [STOP]: t`Trigger`,\n };\n let [orderOption, setOrderOption] = useState(MARKET);\n\n if (!flagOrdersEnabled) {\n orderOption = MARKET;\n }\n\n const needPositionRouterApproval = !positionRouterApproved && orderOption === MARKET;\n\n const onOrderOptionChange = (option) => {\n setOrderOption(option);\n };\n\n const onTriggerPriceChange = (evt) => {\n setTriggerPriceValue(evt.target.value || \"\");\n };\n\n const [triggerPriceValue, setTriggerPriceValue] = useState(\"\");\n const triggerPriceUsd = orderOption === MARKET ? 0 : parseValue(triggerPriceValue, USD_DECIMALS);\n\n const [nextDelta, nextHasProfit = bigNumberify(0)] = useMemo(() => {\n if (!position) {\n return [bigNumberify(0), false];\n }\n\n if (orderOption !== STOP) {\n return [position.delta, position.hasProfit, position.deltaPercentage];\n }\n\n if (!triggerPriceUsd) {\n return [bigNumberify(0), false];\n }\n\n const { delta, hasProfit, deltaPercentage } = calculatePositionDelta(triggerPriceUsd, position);\n return [delta, hasProfit, deltaPercentage];\n }, [position, orderOption, triggerPriceUsd]);\n\n const existingOrders = useMemo(() => {\n if (orderOption === STOP && (!triggerPriceUsd || triggerPriceUsd.eq(0))) {\n return [];\n }\n if (!orders || !position) {\n return [];\n }\n\n const ret = [];\n for (const order of orders) {\n // only Stop orders can't be executed without corresponding opened position\n if (order.type !== DECREASE) continue;\n\n // if user creates Stop-Loss we need only Stop-Loss orders and vice versa\n if (orderOption === STOP) {\n const triggerAboveThreshold = triggerPriceUsd.gt(position.markPrice);\n if (triggerAboveThreshold !== order.triggerAboveThreshold) continue;\n }\n\n const sameToken =\n order.indexToken === nativeTokenAddress\n ? position.indexToken.isNative\n : order.indexToken === position.indexToken.address;\n if (order.isLong === position.isLong && sameToken) {\n ret.push(order);\n }\n }\n return ret;\n }, [position, orders, triggerPriceUsd, orderOption, nativeTokenAddress]);\n\n const existingOrder = existingOrders[0];\n\n const needOrderBookApproval = orderOption === STOP && !orderBookApproved;\n\n const isSwapAllowed = orderOption === MARKET;\n\n const { data: hasOutdatedUi } = useHasOutdatedUi();\n\n let collateralToken;\n let receiveToken;\n let maxAmount;\n let maxAmountFormatted;\n let maxAmountFormattedFree;\n let fromAmount;\n\n let convertedAmount;\n let convertedAmountFormatted;\n\n let nextLeverage;\n let liquidationPrice;\n let nextLiquidationPrice;\n let isClosing;\n let sizeDelta;\n\n let nextCollateral;\n let collateralDelta = bigNumberify(0);\n let receiveAmount = bigNumberify(0);\n let convertedReceiveAmount = bigNumberify(0);\n let adjustedDelta = bigNumberify(0);\n\n let isNotEnoughReceiveTokenLiquidity;\n let isCollateralPoolCapacityExceeded;\n\n let title;\n let fundingFee;\n let positionFee;\n let swapFeeToken;\n let swapFee;\n let totalFees = bigNumberify(0);\n\n let executionFee = orderOption === STOP ? getConstant(chainId, \"DECREASE_ORDER_EXECUTION_GAS_FEE\") : minExecutionFee;\n\n let executionFeeUsd = getUsd(executionFee, nativeTokenAddress, false, infoTokens) || bigNumberify(0);\n\n if (position) {\n fundingFee = position.fundingFee;\n fromAmount = parseValue(fromValue, USD_DECIMALS);\n sizeDelta = fromAmount;\n\n title = t`Close ${longOrShortText} ${position.indexToken.symbol}`;\n collateralToken = position.collateralToken;\n liquidationPrice = getLiquidationPrice(position);\n\n if (fromAmount) {\n isClosing = position.size.sub(fromAmount).lt(DUST_USD);\n positionFee = getMarginFee(fromAmount);\n }\n\n if (isClosing) {\n sizeDelta = position.size;\n receiveAmount = position.collateral;\n } else if (orderOption === STOP && sizeDelta && existingOrders.length > 0) {\n let residualSize = position.size;\n for (const order of existingOrders) {\n residualSize = residualSize.sub(order.sizeDelta);\n }\n if (residualSize.sub(sizeDelta).abs().lt(ORDER_SIZE_DUST_USD)) {\n sizeDelta = residualSize;\n }\n }\n\n if (sizeDelta) {\n adjustedDelta = nextDelta.mul(sizeDelta).div(position.size);\n }\n\n if (nextHasProfit) {\n receiveAmount = receiveAmount.add(adjustedDelta);\n } else {\n if (receiveAmount.gt(adjustedDelta)) {\n receiveAmount = receiveAmount.sub(adjustedDelta);\n } else {\n receiveAmount = bigNumberify(0);\n }\n }\n\n if (keepLeverage && sizeDelta && !isClosing) {\n collateralDelta = sizeDelta.mul(position.collateral).div(position.size);\n // if the position will be realising a loss then reduce collateralDelta by the realised loss\n if (!nextHasProfit) {\n const deductions = adjustedDelta.add(positionFee).add(fundingFee);\n if (collateralDelta.gt(deductions)) {\n collateralDelta = collateralDelta = collateralDelta.sub(deductions);\n } else {\n collateralDelta = bigNumberify(0);\n }\n }\n }\n\n maxAmount = position.size;\n maxAmountFormatted = formatAmount(maxAmount, USD_DECIMALS, 2, true);\n maxAmountFormattedFree = formatAmountFree(maxAmount, USD_DECIMALS, 2);\n\n if (fromAmount && collateralToken.maxPrice) {\n convertedAmount = fromAmount.mul(expandDecimals(1, collateralToken.decimals)).div(collateralToken.maxPrice);\n convertedAmountFormatted = formatAmount(convertedAmount, collateralToken.decimals, 4, true);\n }\n\n totalFees = totalFees.add(positionFee || bigNumberify(0)).add(fundingFee || bigNumberify(0));\n\n receiveAmount = receiveAmount.add(collateralDelta);\n\n if (sizeDelta) {\n if (receiveAmount.gt(totalFees)) {\n receiveAmount = receiveAmount.sub(totalFees);\n } else {\n receiveAmount = bigNumberify(0);\n }\n }\n\n receiveToken = isSwapAllowed && swapToToken ? swapToToken : collateralToken;\n\n // Calculate swap fees\n if (isSwapAllowed && swapToToken) {\n const { feeBasisPoints } = getNextToAmount(\n chainId,\n convertedAmount,\n collateralToken.address,\n receiveToken.address,\n infoTokens,\n undefined,\n undefined,\n usdfSupply,\n totalTokenWeights,\n true\n );\n\n if (feeBasisPoints) {\n swapFee = receiveAmount.mul(feeBasisPoints).div(BASIS_POINTS_DIVISOR);\n swapFeeToken = getTokenAmountFromUsd(infoTokens, collateralToken.address, swapFee);\n totalFees = totalFees.add(swapFee || bigNumberify(0));\n receiveAmount = receiveAmount.sub(swapFee);\n }\n }\n\n if (orderOption === STOP) {\n convertedReceiveAmount = getTokenAmountFromUsd(infoTokens, receiveToken.address, receiveAmount, {\n overridePrice: triggerPriceUsd,\n });\n } else {\n convertedReceiveAmount = getTokenAmountFromUsd(infoTokens, receiveToken.address, receiveAmount);\n }\n\n // Check swap limits (max in / max out)\n if (isSwapAllowed && shouldSwap(collateralToken, receiveToken)) {\n const collateralInfo = getTokenInfo(infoTokens, collateralToken.address);\n const receiveTokenInfo = getTokenInfo(infoTokens, receiveToken.address);\n\n isNotEnoughReceiveTokenLiquidity =\n receiveTokenInfo.availableAmount.lt(convertedReceiveAmount) ||\n receiveTokenInfo.bufferAmount.gt(receiveTokenInfo.poolAmount.sub(convertedReceiveAmount));\n\n if (\n collateralInfo.maxUsdfAmount &&\n collateralInfo.maxUsdfAmount.gt(0) &&\n collateralInfo.usdfAmount &&\n collateralInfo.maxPrice\n ) {\n const usdfFromAmount = adjustForDecimals(receiveAmount, USD_DECIMALS, USDF_DECIMALS);\n const nextUsdfAmount = collateralInfo.usdfAmount.add(usdfFromAmount);\n\n if (nextUsdfAmount.gt(collateralInfo.maxUsdfAmount)) {\n isCollateralPoolCapacityExceeded = true;\n }\n }\n }\n\n if (isClosing) {\n nextCollateral = bigNumberify(0);\n } else {\n if (position.collateral) {\n nextCollateral = position.collateral;\n if (collateralDelta && collateralDelta.gt(0)) {\n nextCollateral = position.collateral.sub(collateralDelta);\n } else if (position.delta && position.delta.gt(0) && sizeDelta) {\n if (!position.hasProfit) {\n nextCollateral = nextCollateral.sub(adjustedDelta);\n }\n }\n }\n }\n\n if (fromAmount) {\n if (!isClosing && !keepLeverage) {\n nextLeverage = getLeverage({\n size: position.size,\n sizeDelta,\n collateral: position.collateral,\n entryFundingRate: position.entryFundingRate,\n cumulativeFundingRate: position.cumulativeFundingRate,\n hasProfit: nextHasProfit,\n delta: nextDelta,\n includeDelta: savedIsPnlInLeverage,\n });\n nextLiquidationPrice = getLiquidationPrice({\n isLong: position.isLong,\n size: position.size,\n sizeDelta,\n collateral: position.collateral,\n averagePrice: position.averagePrice,\n entryFundingRate: position.entryFundingRate,\n cumulativeFundingRate: position.cumulativeFundingRate,\n delta: nextDelta,\n hasProfit: nextHasProfit,\n includeDelta: true,\n });\n }\n }\n }\n\n const [deltaStr, deltaPercentageStr] = useMemo(() => {\n if (!position || !position.markPrice) {\n return [\"-\", \"-\"];\n }\n if (orderOption !== STOP) {\n const { pendingDelta, pendingDeltaPercentage, hasProfit } = calculatePositionDelta(\n position.markPrice,\n position,\n fromAmount\n );\n const { deltaStr, deltaPercentageStr } = getDeltaStr({\n delta: pendingDelta,\n deltaPercentage: pendingDeltaPercentage,\n hasProfit,\n });\n return [deltaStr, deltaPercentageStr];\n }\n if (!triggerPriceUsd || triggerPriceUsd.eq(0)) {\n return [\"-\", \"-\"];\n }\n\n const { pendingDelta, pendingDeltaPercentage, hasProfit } = calculatePositionDelta(\n triggerPriceUsd,\n position,\n fromAmount\n );\n\n const { deltaStr, deltaPercentageStr } = getDeltaStr({\n delta: pendingDelta,\n deltaPercentage: pendingDeltaPercentage,\n hasProfit,\n });\n return [deltaStr, deltaPercentageStr];\n }, [position, triggerPriceUsd, orderOption, fromAmount]);\n\n const getError = () => {\n if (IS_NETWORK_DISABLED[chainId]) {\n if (orderOption === STOP) return [t`Trigger order disabled, pending ${getChainName(chainId)} upgrade`];\n return [t`Position close disabled, pending ${getChainName(chainId)} upgrade`];\n }\n if (hasOutdatedUi) {\n return t`Page outdated, please refresh`;\n }\n if (!fromAmount) {\n return t`Enter an amount`;\n }\n if (nextLeverage && nextLeverage.eq(0)) {\n return t`Enter an amount`;\n }\n if (orderOption === STOP) {\n if (!triggerPriceUsd || triggerPriceUsd.eq(0)) {\n return t`Enter Price`;\n }\n if (position.isLong && triggerPriceUsd.lte(liquidationPrice)) {\n return t`Price below Liq. Price`;\n }\n if (!position.isLong && triggerPriceUsd.gte(liquidationPrice)) {\n return t`Price above Liq. Price`;\n }\n\n if (profitPrice && nextDelta.eq(0) && nextHasProfit) {\n return t`Invalid price, see warning`;\n }\n }\n\n if (isNotEnoughReceiveTokenLiquidity) {\n return t`Insufficient receive token liquidity`;\n }\n\n if (isCollateralPoolCapacityExceeded) {\n return t`${collateralToken.symbol} pool exceeded, can only Receive ${collateralToken.symbol}`;\n }\n\n if (!isClosing && position && position.size && fromAmount) {\n if (position.size.sub(fromAmount).lt(expandDecimals(10, USD_DECIMALS))) {\n return t`Leftover position below 10 USD`;\n }\n if (nextCollateral && nextCollateral.lt(expandDecimals(5, USD_DECIMALS))) {\n return t`Leftover collateral below 5 USD`;\n }\n }\n\n if (position && position.size && position.size.lt(fromAmount)) {\n return t`Max close amount exceeded`;\n }\n\n if (nextLeverage && nextLeverage.lt(1.1 * BASIS_POINTS_DIVISOR)) {\n return t`Min leverage: 1.1x`;\n }\n\n if (nextLeverage && nextLeverage.gt(30.5 * BASIS_POINTS_DIVISOR)) {\n return t`Max leverage: 30.5xt`;\n }\n\n if (hasPendingProfit && orderOption !== STOP && !isProfitWarningAccepted) {\n return t`Forfeit profit not checked`;\n }\n };\n\n const isPrimaryEnabled = () => {\n const error = getError();\n if (error) {\n return false;\n }\n if (isSubmitting) {\n return false;\n }\n if (needOrderBookApproval && isWaitingForPluginApproval) {\n return false;\n }\n if (isPluginApproving) {\n return false;\n }\n if (needPositionRouterApproval && isWaitingForPositionRouterApproval) {\n return false;\n }\n if (isPositionRouterApproving) {\n return false;\n }\n\n return true;\n };\n\n const hasPendingProfit = MIN_PROFIT_TIME > 0 && position.delta.eq(0) && position.pendingDelta.gt(0);\n\n const getPrimaryText = () => {\n const error = getError();\n if (error) {\n return error;\n }\n\n if (orderOption === STOP) {\n if (isSubmitting) return t`Creating Order...`;\n\n if (needOrderBookApproval && isWaitingForPluginApproval) {\n return t`Enabling Orders...`;\n }\n if (isPluginApproving) {\n return t`Enabling Orders...`;\n }\n if (needOrderBookApproval) {\n return t`Enable Orders`;\n }\n\n return t`Create Order`;\n }\n\n if (needPositionRouterApproval && isWaitingForPositionRouterApproval) {\n return t`Enabling Leverage...`;\n }\n\n if (isPositionRouterApproving) {\n return t`Enabling Leverage...`;\n }\n\n if (needPositionRouterApproval) {\n return t`Enable Leverage`;\n }\n\n if (hasPendingProfit) {\n return t`Close without profit`;\n }\n return isSubmitting ? t`Closing...` : t`Close`;\n };\n\n const resetForm = () => {\n setFromValue(\"\");\n setIsProfitWarningAccepted(false);\n };\n\n useEffect(() => {\n if (prevIsVisible !== isVisible) {\n resetForm();\n }\n }, [prevIsVisible, isVisible]);\n\n const onClickPrimary = async () => {\n if (needOrderBookApproval) {\n setOrdersToaOpen(true);\n return;\n }\n\n if (needPositionRouterApproval) {\n approvePositionRouter({\n sentMsg: t`Enable leverage sent.`,\n failMsg: t`Enable leverage failed.`,\n });\n return;\n }\n\n setIsSubmitting(true);\n\n const collateralTokenAddress = position.collateralToken.isNative\n ? nativeTokenAddress\n : position.collateralToken.address;\n const indexTokenAddress = position.indexToken.isNative ? nativeTokenAddress : position.indexToken.address;\n\n if (orderOption === STOP) {\n const triggerAboveThreshold = triggerPriceUsd.gt(position.markPrice);\n\n createDecreaseOrder(\n chainId,\n library,\n indexTokenAddress,\n sizeDelta,\n collateralTokenAddress,\n collateralDelta,\n position.isLong,\n triggerPriceUsd,\n triggerAboveThreshold,\n {\n sentMsg: t`Order submitted!`,\n successMsg: t`Order created!`,\n failMsg: t`Order creation failed.`,\n setPendingTxns,\n }\n )\n .then(() => {\n setFromValue(\"\");\n setIsVisible(false);\n })\n .finally(() => {\n setIsSubmitting(false);\n });\n return;\n }\n\n const priceBasisPoints = position.isLong\n ? BASIS_POINTS_DIVISOR - allowedSlippage\n : BASIS_POINTS_DIVISOR + allowedSlippage;\n const refPrice = position.isLong ? position.indexToken.minPrice : position.indexToken.maxPrice;\n let priceLimit = refPrice.mul(priceBasisPoints).div(BASIS_POINTS_DIVISOR);\n const minProfitExpiration = position.lastIncreasedTime + MIN_PROFIT_TIME;\n const minProfitTimeExpired = parseInt(Date.now() / 1000) > minProfitExpiration;\n\n if (nextHasProfit && !minProfitTimeExpired && !isProfitWarningAccepted) {\n if ((position.isLong && priceLimit.lt(profitPrice)) || (!position.isLong && priceLimit.gt(profitPrice))) {\n priceLimit = profitPrice;\n }\n }\n\n const tokenAddress0 = collateralTokenAddress === AddressZero ? nativeTokenAddress : collateralTokenAddress;\n\n const path = [tokenAddress0];\n\n const isUnwrap = receiveToken.address === AddressZero;\n const isSwap = receiveToken.address !== tokenAddress0;\n\n if (isSwap) {\n if (isUnwrap && tokenAddress0 !== nativeTokenAddress) {\n path.push(nativeTokenAddress);\n } else if (!isUnwrap) {\n path.push(receiveToken.address);\n }\n }\n\n const withdrawETH = isUnwrap;\n\n const params = [\n path, // _path\n indexTokenAddress, // _indexToken\n collateralDelta, // _collateralDelta\n sizeDelta, // _sizeDelta\n position.isLong, // _isLong\n account, // _receiver\n priceLimit, // _acceptablePrice\n 0, // _minOut\n minExecutionFee, // _executionFee\n withdrawETH, // _withdrawETH\n // AddressZero, // _callbackTarget\n ];\n const sizeDeltaUsd = formatAmount(sizeDelta, USD_DECIMALS, 2);\n const successMsg = t`Requested decrease of ${position.indexToken.symbol} ${longOrShortText} by ${sizeDeltaUsd} USD.`;\n\n const contract = new ethers.Contract(positionRouterAddress, PositionRouter.abi, library.getSigner());\n\n callContract(chainId, contract, \"createDecreasePosition\", params, {\n value: minExecutionFee,\n sentMsg: t`Close submitted!`,\n successMsg,\n failMsg: t`Close failed.`,\n setPendingTxns,\n // for Arbitrum, sometimes the successMsg shows after the position has already been executed\n // hide the success message for Arbitrum as a workaround\n hideSuccessMsg: chainId === ARBITRUM,\n })\n .then(async (res) => {\n setFromValue(\"\");\n setIsVisible(false);\n\n let nextSize = position.size.sub(sizeDelta);\n\n pendingPositions[position.key] = {\n updatedAt: Date.now(),\n pendingChanges: {\n size: nextSize,\n },\n };\n\n setPendingPositions({ ...pendingPositions });\n })\n .finally(() => {\n setIsSubmitting(false);\n });\n };\n\n const renderExistingOrderWarning = useCallback(() => {\n if (!existingOrder) {\n return;\n }\n const indexToken = getTokenInfo(infoTokens, existingOrder.indexToken);\n const sizeInToken = formatAmount(\n existingOrder.sizeDelta.mul(PRECISION).div(existingOrder.triggerPrice),\n USD_DECIMALS,\n 4,\n true\n );\n const prefix = existingOrder.triggerAboveThreshold ? TRIGGER_PREFIX_ABOVE : TRIGGER_PREFIX_BELOW;\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {chartToken.maxPrice && formatPrice(chartToken.maxPrice, true)}\n
\n \n ${chartToken.minPrice && formatPrice(chartToken.minPrice, true)}\n
\n \n
\n \n 24h Change \n
\n 0, negative: deltaPercentage < 0 })}>\n {!deltaPercentageStr && \"-\"}\n {deltaPercentageStr && deltaPercentageStr}\n
\n \n
\n \n 24h High \n
\n \n {!high && \"-\"}\n {high && numberWithCommas(high.toFixed(high > 100 ? HIGH_PRICE_DECIMALS : PRICE_DECIMALS))}\n
\n \n
\n \n 24h Low \n
\n \n {!low && \"-\"}\n {low && numberWithCommas(low.toFixed(low > 100 ? HIGH_PRICE_DECIMALS : PRICE_DECIMALS))}\n
\n \n
\n \n
\n \n \n
\n {candleStatsHtml}\n \n \n You have an active order to decrease {longOrShortText} {sizeInToken} {indexToken.symbol} ($\n {formatAmount(existingOrder.sizeDelta, USD_DECIMALS, 2, true)}) at {prefix}{\" \"}\n {formatPrice(existingOrder.triggerPrice, true)}\n \n
\n );\n }, [existingOrder, infoTokens, longOrShortText]);\n\n function renderMinProfitWarning() {\n if (MIN_PROFIT_TIME === 0) {\n return null;\n }\n\n if (profitPrice && nextDelta.eq(0) && nextHasProfit) {\n const minProfitExpiration = position.lastIncreasedTime + MIN_PROFIT_TIME;\n\n if (orderOption === MARKET) {\n return (\n \n \n Reducing the position at the current price will forfeit a \n \n pending profit\n {\" \"}\n of {deltaStr}.
\n \n \n
\n Profit price: {position.isLong ? \">\" : \"<\"} ${formatPrice(profitPrice, true)}. This rule\n applies for the next {getTimeRemaining(minProfitExpiration)}, until {formatDateTime(minProfitExpiration)}.\n \n
\n );\n }\n return (\n \n
\n Profit price: {position.isLong ? \">\" : \"<\"} ${formatPrice(profitPrice, true)}. This rule\n applies for the next {getTimeRemaining(minProfitExpiration)}, until {formatDateTime(minProfitExpiration)}.\n
\n \n This order will forfeit a \n profit of{\" \"}\n {deltaStr}.
\n \n \n Profit price: {position.isLong ? \">\" : \"<\"} ${formatPrice(profitPrice, true)}. This rule\n applies for the next {getTimeRemaining(minProfitExpiration)}, until {formatDateTime(minProfitExpiration)}.\n \n
\n );\n }\n }\n\n const profitPrice = getProfitPrice(orderOption === MARKET ? position.markPrice : triggerPriceUsd, position);\n\n let triggerPricePrefix;\n if (triggerPriceUsd) {\n triggerPricePrefix = triggerPriceUsd.gt(position.markPrice) ? TRIGGER_PREFIX_ABOVE : TRIGGER_PREFIX_BELOW;\n }\n\n const shouldShowExistingOrderWarning = false;\n\n return (\n \n
\n {position && (\n \n {flagOrdersEnabled && (\n
\n {orderOption === STOP && (\n \n
\n \n
\n \n {convertedAmountFormatted && (\n
\n {maxAmount && (\n \n \n Close: {convertedAmountFormatted} {position.collateralToken.symbol}\n \n
\n )}\n {!convertedAmountFormatted && t`Close`}\n setFromValue(maxAmountFormattedFree)}>\n Max: {maxAmountFormatted} \n
\n )}\n \n
\n \n setFromValue(e.target.value)}\n />\n {fromValue !== maxAmountFormattedFree && (\n {\n setFromValue(maxAmountFormattedFree);\n }}\n >\n MAX \n
\n )}\n USD
\n \n
\n \n {\n setTriggerPriceValue(formatPrice(position.markPrice, false, true));\n }}\n >\n Mark: {formatPrice(position.markPrice, true)} \n
\n \n Price \n
\n \n
\n \n )}\n {renderMinProfitWarning()}\n {shouldShowExistingOrderWarning && renderExistingOrderWarning()}\n \n
\n USD
\n \n {minExecutionFeeErrorMessage && (\n
\n {minExecutionFeeErrorMessage}
\n )}\n {hasPendingProfit && orderOption !== STOP && (\n \n \n Forfeit profit\n \n
\n )}\n \n \n \n Keep leverage at {formatAmount(position.leverage, 4, 2)}x \n \n \n
\n {orderOption === MARKET && (\n \n \n \n Allow up to 1% slippage \n \n \n
\n )}\n {orderOption === MARKET && (\n \n \n {\n return (\n \n You can change this in the settings menu on the top right of the page.\n
\n
\n Note that a low allowed slippage, e.g. less than 0.5%, may result in failed orders if prices\n are volatile.\n \n );\n }}\n />\n \n
\n )}\n {orderOption === STOP && (\n \n
\n Note that a low allowed slippage, e.g. less than 0.5%, may result in failed orders if prices\n are volatile.\n
\n
\n )}\n \n Trigger Price \n
\n \n {!triggerPriceUsd && \"-\"}\n {triggerPriceUsd && `${triggerPricePrefix} ${formatPrice(triggerPriceUsd, true)}`}\n
\n \n
\n \n Mark Price \n
\n ${formatPrice(position.markPrice, true)}
\n \n
\n \n Entry Price \n
\n ${formatPrice(position.averagePrice, true)}
\n \n
\n \n Liq. Price \n
\n \n {isClosing && orderOption !== STOP && \"-\"}\n {(!isClosing || orderOption === STOP) && (\n
\n \n {(!nextLiquidationPrice || nextLiquidationPrice.eq(liquidationPrice)) && (\n
\n )}\n {`$${formatPrice(liquidationPrice, true)}`}
\n )}\n {nextLiquidationPrice && !nextLiquidationPrice.eq(liquidationPrice) && (\n \n
\n )}\n \n ${formatPrice(liquidationPrice, true)}\n
\n ${formatPrice(nextLiquidationPrice, true)}\n \n
\n \n Size \n
\n \n {position && position.size && fromAmount && (\n
\n \n
\n )}\n {position && position.size && !fromAmount && (\n \n ${formatAmount(position.size, USD_DECIMALS, 2, true)}\n
\n ${formatAmount(position.size.sub(fromAmount), USD_DECIMALS, 2, true)}\n ${formatAmount(position.size, USD_DECIMALS, 2, true)}
\n )}\n \n
\n {!keepLeverage && (\n \n Collateral ({collateralToken.symbol}) \n
\n \n {nextCollateral && !nextCollateral.eq(position.collateral) ? (\n
\n \n
\n ) : (\n `$${formatAmount(position.collateral, USD_DECIMALS, 4, true)}`\n )}\n \n ${formatAmount(position.collateral, USD_DECIMALS, 2, true)}\n
\n ${formatAmount(nextCollateral, USD_DECIMALS, 2, true)}\n \n
\n )}\n \n Leverage \n
\n \n {isClosing && \"-\"}\n {!isClosing && (\n
\n \n {!nextLeverage &&
\n )}\n {formatAmount(position.leverage, 4, 2)}x
}\n {nextLeverage && (\n \n
\n )}\n \n {formatAmount(position.leverage, 4, 2)}x\n
\n {formatAmount(nextLeverage, 4, 2)}x\n \n
\n\n \n PnL \n
\n \n {deltaStr} ({deltaPercentageStr})\n
\n \n
\n \n Fees \n
\n \n \n {totalFees ? `$${formatAmount(totalFees.add(executionFeeUsd), USD_DECIMALS, 2, true)}` : \"-\"}\n
\n }\n renderContent={() => (\n \n {fundingFee && (\n
\n\n
\n )}\n />\n \n\n
\n \n More Info about\n fees.\n \n
\n \n
\n \n \n Receive \n
\n\n {!isSwapAllowed && receiveToken && (\n \n {formatAmount(convertedReceiveAmount, receiveToken.decimals, 4, true)} {receiveToken.symbol} ($\n {formatAmount(receiveAmount, USD_DECIMALS, 2, true)})\n
\n )}\n\n {isSwapAllowed && receiveToken && (\n \n {\n setSwapToToken(token);\n setSavedRecieveTokenAddress(token.address);\n }}\n tokens={toTokens}\n getTokenState={(tokenOptionInfo) => {\n if (!shouldSwap(collateralToken, tokenOptionInfo)) {\n return;\n }\n\n const convertedTokenAmount = getTokenAmountFromUsd(\n infoTokens,\n tokenOptionInfo.address,\n receiveAmount\n );\n\n const isNotEnoughLiquidity =\n tokenOptionInfo.availableAmount.lt(convertedTokenAmount) ||\n tokenOptionInfo.bufferAmount.gt(tokenOptionInfo.poolAmount.sub(convertedTokenAmount));\n\n if (isNotEnoughLiquidity) {\n const { maxIn, maxOut, maxInUsd, maxOutUsd } = getSwapLimits(\n infoTokens,\n collateralToken.address,\n tokenOptionInfo.address\n );\n\n const collateralInfo = getTokenInfo(infoTokens, collateralToken.address);\n\n return {\n disabled: true,\n message: (\n
\n )}\n \n Insufficient Available Liquidity to swap to {tokenOptionInfo.symbol}: \n
\n
\n
\n
\n ),\n };\n }\n }}\n infoTokens={infoTokens}\n showTokenImgInDropdown={true}\n selectedTokenLabel={\n \n {formatAmount(convertedReceiveAmount, receiveToken.decimals, 4, true)} \n {receiveToken.symbol} (${formatAmount(receiveAmount, USD_DECIMALS, 2, true)})\n \n }\n />\n \n
\n
\n
\n \n
\n \n )}\n \n );\n}\n","import React, { useEffect, useState } from \"react\";\nimport useSWR from \"swr\";\nimport { Trans, t } from \"@lingui/macro\";\nimport { ethers } from \"ethers\";\nimport { BsArrowRight } from \"react-icons/bs\";\n\nimport { USD_DECIMALS, BASIS_POINTS_DIVISOR, DEPOSIT_FEE, DUST_BNB, getLiquidationPrice } from \"lib/legacy\";\nimport { getContract } from \"config/contracts\";\nimport Tab from \"../Tab/Tab\";\nimport Modal from \"../Modal/Modal\";\n\nimport PositionRouter from \"abis/PositionRouter.json\";\nimport Token from \"abis/Token.json\";\nimport Tooltip from \"../Tooltip/Tooltip\";\n\nimport { getChainName, getConstant, IS_NETWORK_DISABLED } from \"config/chains\";\nimport StatsTooltipRow from \"../StatsTooltip/StatsTooltipRow\";\nimport { callContract, contractFetcher } from \"lib/contracts\";\nimport { helperToast } from \"lib/helperToast\";\nimport { getTokenInfo } from \"domain/tokens/utils\";\nimport { approveTokens, shouldRaiseGasError } from \"domain/tokens\";\nimport { usePrevious } from \"lib/usePrevious\";\nimport { bigNumberify, expandDecimals, formatAmount, formatAmountFree, formatPrice, parseValue } from \"lib/numbers\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\n\nconst DEPOSIT = \"Deposit\";\nconst WITHDRAW = \"Withdraw\";\nconst EDIT_OPTIONS = [DEPOSIT, WITHDRAW];\nconst { AddressZero } = ethers.constants;\n\nexport default function PositionEditor(props) {\n const {\n pendingPositions,\n setPendingPositions,\n positionsMap,\n positionKey,\n isVisible,\n setIsVisible,\n infoTokens,\n active,\n account,\n library,\n collateralTokenAddress,\n pendingTxns,\n setPendingTxns,\n getUsd,\n getLeverage,\n savedIsPnlInLeverage,\n positionRouterApproved,\n isWaitingForPositionRouterApproval,\n isPositionRouterApproving,\n approvePositionRouter,\n chainId,\n minExecutionFee,\n minExecutionFeeUSD,\n minExecutionFeeErrorMessage,\n } = props;\n const nativeTokenAddress = getContract(chainId, \"NATIVE_TOKEN\");\n const position = positionsMap && positionKey ? positionsMap[positionKey] : undefined;\n const [option, setOption] = useState(DEPOSIT);\n const [fromValue, setFromValue] = useState(\"\");\n const [isApproving, setIsApproving] = useState(false);\n const [isSwapping, setIsSwapping] = useState(false);\n const prevIsVisible = usePrevious(isVisible);\n const longOrShortText = position?.isLong ? t`Long` : t`Short`;\n\n const routerAddress = getContract(chainId, \"Router\");\n const positionRouterAddress = getContract(chainId, \"PositionRouter\");\n\n const { data: tokenAllowance } = useSWR(\n [active, chainId, collateralTokenAddress, \"allowance\", account, routerAddress],\n {\n fetcher: contractFetcher(library, Token),\n }\n );\n\n // const { data: minExecutionFee } = useSWR([active, chainId, positionRouterAddress, \"minExecutionFee\"], {\n // fetcher: fetcher(library, PositionRouter),\n // });\n\n const isDeposit = option === DEPOSIT;\n const isWithdrawal = option === WITHDRAW;\n\n const needPositionRouterApproval = !positionRouterApproved;\n\n let collateralToken;\n let maxAmount;\n let maxAmountFormatted;\n let maxAmountFormattedFree;\n let fromAmount;\n let needApproval;\n\n let convertedAmount;\n let convertedAmountFormatted;\n\n let nextLeverage;\n let nextLeverageExcludingPnl;\n let liquidationPrice;\n let nextLiquidationPrice;\n let nextCollateral;\n\n let title;\n let collateralDelta;\n if (position) {\n title = t`Edit ${longOrShortText} ${position.indexToken.symbol}`;\n collateralToken = position.collateralToken;\n liquidationPrice = getLiquidationPrice(position);\n\n if (isDeposit) {\n fromAmount = parseValue(fromValue, collateralToken.decimals);\n maxAmount = collateralToken ? collateralToken.balance : bigNumberify(0);\n maxAmountFormatted = formatAmount(maxAmount, collateralToken.decimals, 4, true);\n maxAmountFormattedFree = formatAmountFree(maxAmount, collateralToken.decimals, 8);\n if (fromAmount) {\n convertedAmount = getUsd(fromAmount, position.collateralToken.address, false, infoTokens);\n convertedAmountFormatted = formatAmount(convertedAmount, USD_DECIMALS, 2);\n }\n } else {\n fromAmount = parseValue(fromValue, USD_DECIMALS);\n maxAmount = position.collateral;\n maxAmountFormatted = formatAmount(maxAmount, USD_DECIMALS, 2, true);\n maxAmountFormattedFree = formatAmountFree(maxAmount, USD_DECIMALS, 2);\n if (fromAmount) {\n convertedAmount = fromAmount.mul(expandDecimals(1, collateralToken.decimals)).div(collateralToken.maxPrice);\n convertedAmountFormatted = formatAmount(convertedAmount, collateralToken.decimals, 4, true);\n }\n }\n needApproval = isDeposit && tokenAllowance && fromAmount && fromAmount.gt(tokenAllowance);\n\n if (fromAmount) {\n collateralDelta = isDeposit ? convertedAmount : fromAmount;\n if (position.isLong) {\n collateralDelta = collateralDelta.mul(BASIS_POINTS_DIVISOR - DEPOSIT_FEE).div(BASIS_POINTS_DIVISOR);\n }\n nextLeverage = getLeverage({\n size: position.size,\n collateral: position.collateral,\n collateralDelta,\n increaseCollateral: isDeposit,\n entryFundingRate: position.entryFundingRate,\n cumulativeFundingRate: position.cumulativeFundingRate,\n hasProfit: position.hasProfit,\n delta: position.delta,\n includeDelta: savedIsPnlInLeverage,\n });\n nextLeverageExcludingPnl = getLeverage({\n size: position.size,\n collateral: position.collateral,\n collateralDelta,\n increaseCollateral: isDeposit,\n entryFundingRate: position.entryFundingRate,\n cumulativeFundingRate: position.cumulativeFundingRate,\n hasProfit: position.hasProfit,\n delta: position.delta,\n includeDelta: false,\n });\n\n nextLiquidationPrice = getLiquidationPrice({\n isLong: position.isLong,\n size: position.size,\n collateral: position.collateral,\n averagePrice: position.averagePrice,\n entryFundingRate: position.entryFundingRate,\n cumulativeFundingRate: position.cumulativeFundingRate,\n collateralDelta,\n increaseCollateral: isDeposit,\n });\n\n nextCollateral = isDeposit ? position.collateral.add(collateralDelta) : position.collateral.sub(collateralDelta);\n }\n }\n\n const getError = () => {\n if (IS_NETWORK_DISABLED[chainId]) {\n if (isDeposit) return [t`Deposit disabled, pending ${getChainName(chainId)} upgrade`];\n return [t`Withdraw disabled, pending ${getChainName(chainId)} upgrade`];\n }\n if (!fromAmount) {\n return t`Enter an amount`;\n }\n if (nextLeverage && nextLeverage.eq(0)) {\n return t`Enter an amount`;\n }\n\n if (!isDeposit && fromAmount) {\n if (fromAmount.gte(position.collateral)) {\n return t`Min order: 10 USD`;\n }\n if (position.collateral.sub(fromAmount).lt(expandDecimals(10, USD_DECIMALS))) {\n return t`Min order: 10 USD`;\n }\n }\n\n if (!isDeposit && fromAmount && nextLiquidationPrice) {\n if (position.isLong && position.markPrice.lt(nextLiquidationPrice)) {\n return t`Invalid liq. price`;\n }\n if (!position.isLong && position.markPrice.gt(nextLiquidationPrice)) {\n return t`Invalid liq. price`;\n }\n }\n\n if (nextLeverageExcludingPnl && nextLeverageExcludingPnl.lt(1.1 * BASIS_POINTS_DIVISOR)) {\n return t`Min leverage: 1.1x`;\n }\n\n if (nextLeverageExcludingPnl && nextLeverageExcludingPnl.gt(30.5 * BASIS_POINTS_DIVISOR)) {\n return t`Max leverage: 30x`;\n }\n };\n\n const isPrimaryEnabled = () => {\n const error = getError();\n if (error) {\n return false;\n }\n if (isSwapping) {\n return false;\n }\n if (needPositionRouterApproval && isWaitingForPositionRouterApproval) {\n return false;\n }\n if (isPositionRouterApproving) {\n return false;\n }\n\n return true;\n };\n\n const getPrimaryText = () => {\n const error = getError();\n if (error) {\n return error;\n }\n if (isSwapping) {\n if (isDeposit) {\n return t`Depositing...`;\n }\n return t`Withdrawing...`;\n }\n\n if (isApproving) {\n return t`Approving ${position.collateralToken.symbol}...`;\n }\n if (needApproval) {\n return t`Approve ${position.collateralToken.symbol}`;\n }\n\n if (needPositionRouterApproval && isWaitingForPositionRouterApproval) {\n return t`Enabling Leverage`;\n }\n\n if (isPositionRouterApproving) {\n return t`Enabling Leverage...`;\n }\n\n if (needPositionRouterApproval) {\n return t`Enable Leverage`;\n }\n\n if (isDeposit) {\n return t`Deposit`;\n }\n\n return t`Withdraw`;\n };\n\n const resetForm = () => {\n setFromValue(\"\");\n };\n\n useEffect(() => {\n if (prevIsVisible !== isVisible) {\n resetForm();\n }\n }, [prevIsVisible, isVisible]);\n\n const depositCollateral = async () => {\n setIsSwapping(true);\n const tokenAddress0 = collateralTokenAddress === AddressZero ? nativeTokenAddress : collateralTokenAddress;\n const path = [tokenAddress0];\n const indexTokenAddress =\n position.indexToken.address === AddressZero ? nativeTokenAddress : position.indexToken.address;\n\n const priceBasisPoints = position.isLong ? 11000 : 9000;\n const priceLimit = position.indexToken.maxPrice.mul(priceBasisPoints).div(10000);\n\n const referralCode = ethers.constants.HashZero;\n let params = [\n path, // _path\n indexTokenAddress, // _indexToken\n fromAmount, // _amountIn\n 0, // _minOut\n 0, // _sizeDelta\n position.isLong, // _isLong\n priceLimit, // _acceptablePrice\n minExecutionFee, // _executionFee\n referralCode, // _referralCode\n // AddressZero, // _callbackTarget\n ];\n\n let method = \"createIncreasePosition\";\n let value = minExecutionFee;\n if (collateralTokenAddress === AddressZero) {\n method = \"createIncreasePositionETH\";\n value = fromAmount.add(minExecutionFee);\n params = [\n path, // _path\n indexTokenAddress, // _indexToken\n 0, // _minOut\n 0, // _sizeDelta\n position.isLong, // _isLong\n priceLimit, // _acceptablePrice\n minExecutionFee, // _executionFee\n referralCode, // _referralCode\n // AddressZero, // _callbackTarget\n ];\n }\n\n if (shouldRaiseGasError(getTokenInfo(infoTokens, collateralTokenAddress), fromAmount)) {\n setIsSwapping(false);\n helperToast.error(t`Leave at least ${formatAmount(DUST_BNB, 18, 3)} ETH for gas`);\n return;\n }\n\n const contract = new ethers.Contract(positionRouterAddress, PositionRouter.abi, library.getSigner());\n callContract(chainId, contract, method, params, {\n value,\n sentMsg: t`Deposit submitted.`,\n successMsg: t`Requested deposit of ${formatAmount(fromAmount, position.collateralToken.decimals, 4)} ${\n position.collateralToken.symbol\n } into ${position.indexToken.symbol} ${longOrShortText}.`,\n failMsg: t`Deposit failed.`,\n setPendingTxns,\n })\n .then(async (res) => {\n setFromValue(\"\");\n setIsVisible(false);\n\n pendingPositions[position.key] = {\n updatedAt: Date.now(),\n pendingChanges: {\n collateralSnapshot: position.collateral,\n expectingCollateralChange: true,\n },\n };\n\n setPendingPositions({ ...pendingPositions });\n })\n .finally(() => {\n setIsSwapping(false);\n });\n };\n\n const withdrawCollateral = async () => {\n setIsSwapping(true);\n const tokenAddress0 = collateralTokenAddress === AddressZero ? nativeTokenAddress : collateralTokenAddress;\n const indexTokenAddress =\n position.indexToken.address === AddressZero ? nativeTokenAddress : position.indexToken.address;\n const priceBasisPoints = position.isLong ? 9000 : 11000;\n const priceLimit = position.indexToken.maxPrice.mul(priceBasisPoints).div(10000);\n\n const withdrawETH = collateralTokenAddress === AddressZero || collateralTokenAddress === nativeTokenAddress;\n const params = [\n [tokenAddress0], // _path\n indexTokenAddress, // _indexToken\n fromAmount, // _collateralDelta\n 0, // _sizeDelta\n position.isLong, // _isLong\n account, // _receiver\n priceLimit, // _acceptablePrice\n 0, // _minOut\n minExecutionFee, // _executionFee\n withdrawETH, // _withdrawETH\n // AddressZero, // _callbackTarget\n ];\n\n const method = \"createDecreasePosition\";\n\n const contract = new ethers.Contract(positionRouterAddress, PositionRouter.abi, library.getSigner());\n callContract(chainId, contract, method, params, {\n value: minExecutionFee,\n sentMsg: t`Withdrawal submitted.`,\n successMsg: t`Requested withdrawal of ${formatAmount(fromAmount, USD_DECIMALS, 2)} USD from ${\n position.indexToken.symbol\n } ${longOrShortText}.`,\n failMsg: t`Withdrawal failed.`,\n setPendingTxns,\n })\n .then(async (res) => {\n setFromValue(\"\");\n setIsVisible(false);\n\n pendingPositions[position.key] = {\n updatedAt: Date.now(),\n pendingChanges: {\n collateralSnapshot: position.collateral,\n expectingCollateralChange: true,\n },\n };\n })\n .finally(() => {\n setIsSwapping(false);\n });\n };\n\n const onClickPrimary = () => {\n if (needApproval) {\n approveTokens({\n setIsApproving,\n library,\n tokenAddress: collateralTokenAddress,\n spender: routerAddress,\n chainId: chainId,\n infoTokens,\n getTokenInfo,\n pendingTxns,\n setPendingTxns,\n });\n return;\n }\n\n if (needPositionRouterApproval) {\n approvePositionRouter({\n sentMsg: isDeposit ? t`Enable deposit sent.` : t`Enable withdraw sent.`,\n failMsg: isDeposit ? t`Enable deposit failed.` : t`Enable withdraw failed.`,\n });\n return;\n }\n\n if (isDeposit) {\n depositCollateral();\n return;\n }\n\n withdrawCollateral();\n };\n const nativeTokenSymbol = getConstant(chainId, \"nativeTokenSymbol\");\n const EDIT_OPTIONS_LABELS = {\n [DEPOSIT]: t`Deposit`,\n [WITHDRAW]: t`Withdraw`,\n };\n\n return (\n \n {position && (\n \n
\n \n )}\n \n );\n}\n","import \"./SpinningLoader.css\";\n\nimport { ImSpinner2 } from \"react-icons/im\";\n\nfunction SpinningLoader({ size = \"1.25rem\" }) {\n return \n
\n )}\n \n
\n \n
\n \n
\n \n {convertedAmountFormatted && (\n
\n {maxAmount && (\n \n {isDeposit ? t`Deposit` : t`Withdraw`}: {convertedAmountFormatted}{\" \"}\n {isDeposit ? \"USD\" : position.collateralToken.symbol}\n
\n )}\n {!convertedAmountFormatted && `${isDeposit ? t`Deposit` : t`Withdraw`}`}\n setFromValue(maxAmountFormattedFree)}>\n Max: {maxAmountFormatted} \n
\n )}\n \n
\n \n setFromValue(e.target.value)}\n />\n {fromValue !== maxAmountFormattedFree && (\n {\n setFromValue(maxAmountFormattedFree);\n }}\n >\n MAX \n
\n )}\n \n {isDeposit ? position.collateralToken.symbol : \"USD\"}\n
\n \n {minExecutionFeeErrorMessage && (\n
\n\n {minExecutionFeeErrorMessage}
\n )}\n \n
\n \n Size \n
\n {formatAmount(position.size, USD_DECIMALS, 2, true)} USD
\n \n
\n \n Collateral \n
\n \n {!nextCollateral &&
\n ${formatAmount(position.collateral, USD_DECIMALS, 2, true)}
}\n {nextCollateral && (\n \n
\n )}\n \n ${formatAmount(position.collateral, USD_DECIMALS, 2, true)}\n
\n ${formatAmount(nextCollateral, USD_DECIMALS, 2, true)}\n \n
\n \n Leverage \n
\n \n {!nextLeverage &&
\n {formatAmount(position.leverage, 4, 2, true)}x
}\n {nextLeverage && (\n \n
\n )}\n \n {formatAmount(position.leverage, 4, 2, true)}x\n
\n {formatAmount(nextLeverage, 4, 2, true)}x\n \n
\n \n Mark Price \n
\n ${formatPrice(position.markPrice, true)}
\n \n
\n \n Liq. Price \n
\n \n {!nextLiquidationPrice && (\n
\n \n {!fromAmount && `$${formatPrice(liquidationPrice, true)}`}\n {fromAmount && \"-\"}\n
\n )}\n {nextLiquidationPrice && (\n \n
\n )}\n \n ${formatPrice(liquidationPrice, true)}\n
\n ${formatPrice(nextLiquidationPrice, true)}\n \n
\n \n Execution Fee \n
\n \n {\n const depositOrWithdrawalText = isDeposit ? t`deposit` : t`withdrawal`;\n return (\n <>\n
\n\n This is the network cost required to execute the {depositOrWithdrawalText}.\n
\n
\n\n More Info\n \n \n \n );\n }}\n />\n
\n \n
\n
\n
\n \n {getPrimaryText()}\n \n
\n \n \n \n
\n \n );\n}\n\nfunction PositionShareCard({\n positionRef,\n position,\n userAffiliateCode,\n uploadedImageInfo,\n uploadedImageError,\n sharePositionBgImg,\n}) {\n const isMobile = useMedia(\"(max-width: 400px)\");\n const { code, success } = userAffiliateCode;\n const { deltaAfterFeesPercentageStr, isLong, leverage, indexToken, averagePrice, markPrice } = position;\n\n const homeURL = getHomeUrl();\n return (\n \n \n Tweet \n \n
\n \n
\n );\n}\n\nexport default PositionShare;\n","import { useEffect, useState } from \"react\";\n\nexport default function useLoadImage(src) {\n const [sourceLoaded, setSourceLoaded] = useState(null);\n\n useEffect(() => {\n const img = new Image();\n img.src = src;\n img.onload = () => setSourceLoaded(src);\n }, [src]);\n\n return sourceLoaded;\n}\n","import { Menu } from \"@headlessui/react\";\nimport { Trans } from \"@lingui/macro\";\nimport { HiDotsVertical } from \"react-icons/hi\";\nimport { AiOutlineEdit } from \"react-icons/ai\";\nimport { BiSelectMultiple } from \"react-icons/bi\";\n// import { RiShareBoxFill } from \"react-icons/ri\";\nimport \"./PositionDropdown.css\";\n\nfunction PositionDropdown({ handleEditCollateral, handleShare, handleMarketSelect }) {\n return (\n \n );\n}\n\nexport default PositionDropdown;\n","import React, { useState } from \"react\";\nimport cx from \"classnames\";\nimport { Trans, t, select } from \"@lingui/macro\";\nimport Tooltip from \"../Tooltip/Tooltip\";\nimport PositionSeller from \"./PositionSeller\";\nimport PositionEditor from \"./PositionEditor\";\nimport OrdersToa from \"./OrdersToa\";\n\nimport { ImSpinner2 } from \"react-icons/im\";\n\nimport {\n getLiquidationPrice,\n getLeverage,\n getOrderError,\n USD_DECIMALS,\n FUNDING_RATE_PRECISION,\n SWAP,\n LONG,\n SHORT,\n INCREASE,\n DECREASE,\n} from \"lib/legacy\";\nimport PositionShare from \"./PositionShare\";\nimport PositionDropdown from \"./PositionDropdown\";\nimport StatsTooltipRow from \"../StatsTooltip/StatsTooltipRow\";\nimport { helperToast } from \"lib/helperToast\";\nimport { getUsd } from \"domain/tokens/utils\";\nimport { bigNumberify, formatAmount, formatPrice } from \"lib/numbers\";\nimport { AiOutlineEdit } from \"react-icons/ai\";\n\nconst getOrdersForPosition = (account, position, orders, nativeTokenAddress) => {\n if (!orders || orders.length === 0) {\n return [];\n }\n /* eslint-disable array-callback-return */\n return orders\n .filter((order) => {\n if (order.type === SWAP) {\n return false;\n }\n const hasMatchingIndexToken =\n order.indexToken === nativeTokenAddress\n ? position.indexToken.isNative\n : order.indexToken === position.indexToken.address;\n const hasMatchingCollateralToken =\n order.collateralToken === nativeTokenAddress\n ? position.collateralToken.isNative\n : order.collateralToken === position.collateralToken.address;\n if (order.isLong === position.isLong && hasMatchingIndexToken && hasMatchingCollateralToken) {\n return true;\n }\n })\n .map((order) => {\n order.error = getOrderError(account, order, undefined, position);\n if (order.type === DECREASE && order.sizeDelta.gt(position.size)) {\n order.error = t`Order size is bigger than position, will only be executable if position increases`;\n }\n return order;\n });\n};\n\nexport default function PositionsList(props) {\n const {\n pendingPositions,\n setPendingPositions,\n positions,\n positionsDataIsLoading,\n positionsMap,\n infoTokens,\n active,\n account,\n library,\n pendingTxns,\n setPendingTxns,\n setListSection,\n flagOrdersEnabled,\n savedIsPnlInLeverage,\n chainId,\n nativeTokenAddress,\n orders,\n setIsWaitingForPluginApproval,\n approveOrderBook,\n isPluginApproving,\n isWaitingForPluginApproval,\n orderBookApproved,\n positionRouterApproved,\n isWaitingForPositionRouterApproval,\n isPositionRouterApproving,\n approvePositionRouter,\n showPnlAfterFees,\n setMarket,\n minExecutionFee,\n minExecutionFeeUSD,\n minExecutionFeeErrorMessage,\n usdfSupply,\n totalTokenWeights,\n } = props;\n\n const [positionToEditKey, setPositionToEditKey] = useState(undefined);\n const [positionToSellKey, setPositionToSellKey] = useState(undefined);\n const [positionToShare, setPositionToShare] = useState(null);\n const [isPositionEditorVisible, setIsPositionEditorVisible] = useState(undefined);\n const [isPositionSellerVisible, setIsPositionSellerVisible] = useState(undefined);\n const [collateralTokenAddress, setCollateralTokenAddress] = useState(undefined);\n const [isPositionShareModalOpen, setIsPositionShareModalOpen] = useState(false);\n const [ordersToaOpen, setOrdersToaOpen] = useState(false);\n const [isHigherSlippageAllowed, setIsHigherSlippageAllowed] = useState(false);\n\n const editPosition = (position) => {\n setCollateralTokenAddress(position.collateralToken.address);\n setPositionToEditKey(position.key);\n setIsPositionEditorVisible(true);\n };\n\n const sellPosition = (position) => {\n setPositionToSellKey(position.key);\n setIsPositionSellerVisible(true);\n setIsHigherSlippageAllowed(false);\n };\n\n const onPositionClick = (position) => {\n helperToast.success(\n t`${select(position.isLong, { true: \"Long\", false: \"Short\" })} ${position.indexToken.symbol} market selected`\n );\n setMarket(position.isLong ? LONG : SHORT, position.indexToken.address);\n };\n\n return (\n \n 
\n
\n {!uploadedImageInfo && !uploadedImageError && (\n - \n
- {isLong ? \"LONG\" : \"SHORT\"} \n
- {formatAmount(leverage, 4, 2, true)}x \n
- {indexToken.symbol} USD \n
{deltaAfterFeesPercentageStr}
\n\n
\n \n
\n Entry Price
\n${formatPrice(averagePrice, true)}
\n\n
\n Index Price
\n${formatPrice(markPrice, true)}
\n\n
\n \n
\n \n {success && code ? (\n <>\n
\n Referral Code:
\n{code}
\n \n ) : (\nhttps://fxdx.exchange
\n )}\n\n
\n )}\n \n
\n \n
\n \n \n
\n
\n );\n}\n","import React, { useState, useMemo } from \"react\";\nimport { BsArrowRight } from \"react-icons/bs\";\n\nimport {\n PRECISION,\n USD_DECIMALS,\n SWAP,\n DECREASE,\n INCREASE,\n isTriggerRatioInverted,\n getNextToAmount,\n getExchangeRate,\n getExchangeRateDisplay,\n calculatePositionDelta,\n getLiquidationPrice,\n} from \"lib/legacy\";\nimport { updateSwapOrder, updateIncreaseOrder, updateDecreaseOrder } from \"domain/legacy\";\nimport Modal from \"../Modal/Modal\";\nimport ExchangeInfoRow from \"./ExchangeInfoRow\";\nimport { getContract } from \"config/contracts\";\nimport { TRIGGER_PREFIX_ABOVE, TRIGGER_PREFIX_BELOW } from \"config/ui\";\nimport { getTokenInfo } from \"domain/tokens/utils\";\nimport { bigNumberify, formatAmount, formatAmountFree, formatPrice, parseValue } from \"lib/numbers\";\nimport { useChainId } from \"lib/chains\";\nimport { t, Trans } from \"@lingui/macro\";\n\nexport default function OrderEditor(props) {\n const {\n account,\n order,\n setEditingOrder,\n infoTokens,\n pendingTxns,\n setPendingTxns,\n library,\n totalTokenWeights,\n usdfSupply,\n getPositionForOrder,\n positionsMap,\n savedShouldDisableValidationForTesting,\n } = props;\n\n const { chainId } = useChainId();\n\n const position = order.type !== SWAP ? getPositionForOrder(account, order, positionsMap) : null;\n const liquidationPrice = order.type === DECREASE && position ? getLiquidationPrice(position) : null;\n\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const nativeTokenAddress = getContract(chainId, \"NATIVE_TOKEN\");\n const fromTokenInfo = order.type === SWAP\n ? getTokenInfo(infoTokens, order.path[0], true, nativeTokenAddress)\n : null;\n const toTokenInfo = order.type === SWAP\n ? getTokenInfo(infoTokens, order.path[order.path.length - 1], order.shouldUnwrap, nativeTokenAddress)\n : null;\n\n const triggerRatioInverted = useMemo(() => {\n if (order.type !== SWAP) {\n return null;\n }\n\n return isTriggerRatioInverted(fromTokenInfo, toTokenInfo);\n }, [toTokenInfo, fromTokenInfo, order.type]);\n\n let initialRatio = 0;\n if (order.triggerRatio) {\n initialRatio = triggerRatioInverted ? PRECISION.mul(PRECISION).div(order.triggerRatio) : order.triggerRatio;\n }\n const [triggerRatioValue, setTriggerRatioValue] = useState(formatAmountFree(initialRatio, USD_DECIMALS, 6));\n\n const [triggerPriceValue, setTriggerPriceValue] = useState(formatPrice(order.triggerPrice, false, true));\n const triggerPrice = useMemo(() => {\n return triggerPriceValue ? parseValue(triggerPriceValue, USD_DECIMALS) : 0;\n }, [triggerPriceValue]);\n\n const triggerRatio = useMemo(() => {\n if (!triggerRatioValue) {\n return bigNumberify(0);\n }\n let ratio = parseValue(triggerRatioValue, USD_DECIMALS);\n if (triggerRatioInverted) {\n ratio = PRECISION.mul(PRECISION).div(ratio);\n }\n return ratio;\n }, [triggerRatioValue, triggerRatioInverted]);\n\n const indexTokenMarkPrice = useMemo(() => {\n if (order.type === SWAP) {\n return;\n }\n const toTokenInfo = getTokenInfo(infoTokens, order.indexToken);\n return order.isLong ? toTokenInfo.maxPrice : toTokenInfo.minPrice;\n }, [infoTokens, order]);\n\n let toAmount;\n if (order.type === SWAP) {\n const { amount } = getNextToAmount(\n chainId,\n order.amountIn,\n order.path[0],\n order.path[order.path.length - 1],\n infoTokens,\n undefined,\n triggerRatio,\n usdfSupply,\n totalTokenWeights\n );\n toAmount = amount;\n }\n\n const onClickPrimary = () => {\n setIsSubmitting(true);\n\n let func;\n let params;\n\n if (order.type === SWAP) {\n func = updateSwapOrder;\n params = [\n chainId,\n library,\n order.index,\n toAmount,\n triggerRatio,\n order.triggerAboveThreshold,\n ];\n } else if (order.type === DECREASE) {\n func = updateDecreaseOrder;\n params = [\n chainId,\n library,\n order.index,\n order.collateralDelta,\n order.sizeDelta,\n triggerPrice,\n order.triggerAboveThreshold,\n ];\n } else if (order.type === INCREASE) {\n func = updateIncreaseOrder;\n params = [\n chainId,\n library,\n order.index,\n order.sizeDelta,\n triggerPrice,\n order.triggerAboveThreshold,\n ];\n }\n\n params.push({\n successMsg: t`Order updated!`,\n failMsg: t`Order update failed.`,\n sentMsg: t`Order update submitted!`,\n pendingTxns,\n setPendingTxns,\n });\n\n return func(...params)\n .then(() => {\n setEditingOrder(null);\n })\n .finally(() => {\n setIsSubmitting(false);\n });\n };\n\n const onTriggerRatioChange = (evt) => {\n setTriggerRatioValue(evt.target.value || \"\");\n };\n\n const onTriggerPriceChange = (evt) => {\n setTriggerPriceValue(evt.target.value || \"\");\n };\n\n const getError = () => {\n if ((!triggerRatio || triggerRatio.eq(0)) && (!triggerPrice || triggerPrice.eq(0))) {\n return t`Enter Price`;\n }\n if (order.type === SWAP && triggerRatio.eq(order.triggerRatio)) {\n return t`Enter new Price`;\n }\n if (order.type !== SWAP && triggerPrice.eq(order.triggerPrice)) {\n return t`Enter new Price`;\n }\n if (position) {\n if (order.type === DECREASE) {\n if (position.isLong && triggerPrice.lte(liquidationPrice)) {\n return t`Price below Liq. Price`;\n }\n if (!position.isLong && triggerPrice.gte(liquidationPrice)) {\n return t`Price above Liq. Price`;\n }\n }\n\n const { delta, hasProfit } = calculatePositionDelta(triggerPrice, position);\n if (hasProfit && delta.eq(0)) {\n return t`Invalid price, see warning`;\n }\n }\n\n if (order.type !== SWAP && indexTokenMarkPrice && !savedShouldDisableValidationForTesting) {\n if (order.triggerAboveThreshold && indexTokenMarkPrice.gt(triggerPrice)) {\n return t`Price below Mark Price`;\n }\n if (!order.triggerAboveThreshold && indexTokenMarkPrice.lt(triggerPrice)) {\n return t`Price above Mark Price`;\n }\n }\n\n if (order.type === SWAP) {\n const currentRate = getExchangeRate(fromTokenInfo, toTokenInfo);\n if (currentRate && !currentRate.gte(triggerRatio)) {\n return triggerRatioInverted ? t`Price is below Mark Price` : t`Price is above Mark Price`;\n }\n }\n };\n\n const isPrimaryEnabled = () => {\n if (isSubmitting) {\n return false;\n }\n const error = getError();\n if (error) {\n return false;\n }\n\n return true;\n };\n\n const getPrimaryText = () => {\n const error = getError();\n if (error) {\n return error;\n }\n\n if (isSubmitting) {\n return t`Updating Order...`;\n }\n return t`Update Order`;\n };\n\n if (order.type !== SWAP) {\n const triggerPricePrefix = order.triggerAboveThreshold\n ? TRIGGER_PREFIX_ABOVE\n : TRIGGER_PREFIX_BELOW;\n return (\n \n
\n )}\n \n {positions.length === 0 && positionsDataIsLoading && (\n
\n \n Loading... \n
\n )}\n {positions.length === 0 && !positionsDataIsLoading && (\n \n No open positions \n
\n )}\n {positions.map((position) => {\n const positionOrders = getOrdersForPosition(account, position, orders, nativeTokenAddress);\n const liquidationPrice = getLiquidationPrice(position);\n const hasPositionProfit = position[showPnlAfterFees ? \"hasProfitAfterFees\" : \"hasProfit\"];\n const positionDelta =\n position[showPnlAfterFees ? \"pendingDeltaAfterFees\" : \"pendingDelta\"] || bigNumberify(0);\n let borrowFeeUSD;\n if (position.collateralToken && position.collateralToken.fundingRate) {\n const borrowFeeRate = position.collateralToken.fundingRate\n .mul(position.size)\n .mul(24)\n .div(FUNDING_RATE_PRECISION);\n borrowFeeUSD = formatAmount(borrowFeeRate, USD_DECIMALS, 2);\n }\n\n return (\n \n
\n );\n })}\n \n {position.indexToken.symbol}\n
\n \n \n
\n \n \n
\n \n Leverage \n
\n \n {formatAmount(position.leverage, 4, 2, true)}x \n \n {position.isLong ? t`Long` : t`Short`}\n \n
\n \n
\n \n Size \n
\n ${formatAmount(position.size, USD_DECIMALS, 2, true)}
\n \n
\n \n Collateral \n
\n \n {\n return (\n <>\n {position.hasLowCollateral && (\n Use the Edit Collateral icon to deposit or withdraw collateral. \n \n \n );\n }}\n />\n editPosition(position)}>\n
\n \n \n WARNING: This position has a low amount of collateral after deducting borrowing\n fees, deposit more collateral to reduce the position's liquidation risk.\n \n
\n
\n
\n )}\n \n
\n
\n
\n \n PnL \n
\n \n \n {position.deltaStr} ({position.deltaPercentageStr})\n \n
\n \n
\n \n Net Value \n
\n \n {\n return (\n <>\n {showPnlAfterFees\n ? t`Net Value: Initial Collateral - Fees + PnL`\n : t`Net Value: Initial Collateral - Borrow Fee + PnL`}\n
\n
\n
\n \n
\n
\n
\n \n Orders \n
\n \n {positionOrders.length === 0 && \"None\"}\n {positionOrders.map((order) => {\n const orderText = () => (\n <>\n {order.triggerAboveThreshold ? \">\" : \"<\"} {formatPrice(order.triggerPrice, true)}:\n {order.type === INCREASE ? \" +\" : \" -\"}${formatAmount(order.sizeDelta, USD_DECIMALS, 2, true)}\n \n );\n if (order.error) {\n return (\n
\n \n {order.error}}\n />\n
\n );\n } else {\n return (\n \n {orderText()}\n
\n );\n }\n })}\n \n
\n \n \n
\n \n Mark Price \n
\n ${formatPrice(position.markPrice, true)}
\n \n
\n \n Entry Price \n
\n ${formatPrice(position.averagePrice, true)}
\n \n
\n \n Liq. Price \n
\n ${formatPrice(liquidationPrice, true)}
\n \n sellPosition(position)}\n >\n Close \n \n editPosition(position)}\n >\n Edit Collateral \n \n {/* {\n setPositionToShare(position);\n setIsPositionShareModalOpen(true);\n }}\n disabled={position.size.eq(0)}\n >\n Share \n */}\n
\n | \n | \n \n | \n \n | \n \n | \n \n | \n \n | \n \n | \n \n | \n |
|---|---|---|---|---|---|---|---|---|
| \n Loading... \n | \n ||||||||
| \n \n \n | \n ||||||||
| onPositionClick(position)}>\n \n {position.indexToken.symbol}\n {position.hasPendingChanges && \n \n {position.leverage && (\n {formatAmount(position.leverage, 4, 2, true)}x \n )}\n \n {position.isLong ? t`Long` : t`Short`}\n \n \n | \n \n \n {!position.netValue && t`Opening...`}\n {position.netValue && (\n \n {position.deltaStr && (\n \n \n | \n \n ${formatAmount(position.size, USD_DECIMALS, 2, true)} \n {positionOrders.length > 0 && (\n setListSection && setListSection(\"Orders\")}>\n \n );\n })}\n \n );\n }}\n />\n \n )}\n | \n \n \n \n \n \n )}\n\n \n \n \n | \n onPositionClick(position)}>\n \n \n );\n }}\n />\n \n \n | \n onPositionClick(position)}>\n ${formatPrice(position.averagePrice, true)}\n | \nonPositionClick(position)}>\n ${formatPrice(liquidationPrice, true)}\n | \n\n\n | \n \n | \n
\n
\n \n {\n setTriggerPriceValue(formatPrice(indexTokenMarkPrice, false, true));\n }}\n >\n Mark: {formatPrice(indexTokenMarkPrice)} \n
\n \n Price \n
\n \n
\n \n \n
\n USD
\n \n
\n )}\n \n Liq. Price \n
\n \n {`$${formatPrice(liquidationPrice, true)}`}\n
\n \n \n {getPrimaryText()}\n \n
\n \n );\n }\n\n return (\n \n
\n \n {\n setTriggerRatioValue(\n formatAmountFree(\n getExchangeRate(fromTokenInfo, toTokenInfo, triggerRatioInverted),\n USD_DECIMALS,\n 10\n )\n );\n }}\n >\n Mark Price: \n {formatAmount(\n getExchangeRate(fromTokenInfo, toTokenInfo, triggerRatioInverted),\n USD_DECIMALS,\n 2\n )}\n
\n )}\n \n Price \n
\n {fromTokenInfo && toTokenInfo && (\n \n
\n \n \n
\n {(() => {\n if (!toTokenInfo) return;\n if (!fromTokenInfo) return;\n const [tokenA, tokenB] = triggerRatioInverted\n ? [toTokenInfo, fromTokenInfo]\n : [fromTokenInfo, toTokenInfo];\n return (\n \n {tokenA.symbol} / {tokenB.symbol}\n
\n );\n })()}\n \n
\n )}\n {toTokenInfo && (\n \n {fromTokenInfo.symbol} price \n
\n \n {formatPrice(fromTokenInfo.minPrice, true)} USD\n
\n \n
\n )}\n \n {toTokenInfo.symbol} price \n
\n \n {formatPrice(toTokenInfo.maxPrice, true)} USD\n
\n \n \n {getPrimaryText()}\n \n
\n \n );\n}\n","import React, { useState, useCallback } from \"react\";\nimport { t, Trans } from \"@lingui/macro\";\n\nimport {\n SWAP,\n INCREASE,\n DECREASE,\n USD_DECIMALS,\n getOrderError,\n getExchangeRateDisplay,\n getExchangeRate,\n getPositionForOrder,\n} from \"lib/legacy.js\";\nimport { handleCancelOrder } from \"domain/legacy\";\nimport { getContract } from \"config/contracts\";\n\nimport Tooltip from \"../Tooltip/Tooltip\";\nimport OrderEditor from \"./OrderEditor\";\n\nimport \"./OrdersList.css\";\nimport Checkbox from \"../Checkbox/Checkbox\";\nimport StatsTooltipRow from \"../StatsTooltip/StatsTooltipRow\";\nimport { TRIGGER_PREFIX_ABOVE, TRIGGER_PREFIX_BELOW } from \"config/ui\";\nimport { getTokenInfo, getUsd } from \"domain/tokens/utils\";\nimport { formatAmount, formatPrice } from \"lib/numbers\";\n\nexport default function OrdersList(props) {\n const {\n account,\n library,\n setPendingTxns,\n pendingTxns,\n infoTokens,\n positionsMap,\n totalTokenWeights,\n usdfSupply,\n orders,\n hideActions,\n chainId,\n savedShouldDisableValidationForTesting,\n cancelOrderIdList,\n setCancelOrderIdList,\n } = props;\n\n const [editingOrder, setEditingOrder] = useState(null);\n\n const onCancelClick = useCallback(\n (order) => {\n handleCancelOrder(chainId, library, order, { pendingTxns, setPendingTxns });\n },\n [library, pendingTxns, setPendingTxns, chainId]\n );\n\n const onEditClick = useCallback(\n (order) => {\n setEditingOrder(order);\n },\n [setEditingOrder]\n );\n\n const renderHead = useCallback(() => {\n const isAllOrdersSelected =\n cancelOrderIdList?.length > 0 && cancelOrderIdList?.length === orders.length;\n\n return (\n \n {\n if (isAllOrdersSelected) {\n setCancelOrderIdList([]);\n } else {\n const allOrderIds = orders.map((o) => `${o.type}-${o.index}`);\n setCancelOrderIdList(allOrderIds);\n }\n }}\n />\n
\n \n Type \n
\n \n Order \n
\n \n Price \n
\n \n Mark Price \n
\n \n {\n setCancelOrderIdList((prevState) => {\n if (prevState.includes(orderId)) {\n return prevState.filter((i) => i !== orderId);\n } else {\n return prevState.concat(orderId);\n }\n });\n }}\n />\n
\n {error}
}\n \n );\n\n return (\n \n {\n setCancelOrderIdList((prevState) => {\n if (prevState.includes(orderId)) {\n return prevState.filter((i) => i !== orderId);\n } else {\n return prevState.concat(orderId);\n }\n });\n }}\n />\n
\n \n
\n );\n }\n\n const indexToken = getTokenInfo(infoTokens, order.indexToken);\n const maximisePrice = (order.type === INCREASE && order.isLong) || (order.type === DECREASE && !order.isLong);\n const markPrice = maximisePrice ? indexToken.contractMaxPrice : indexToken.contractMinPrice;\n const triggerPricePrefix = order.triggerAboveThreshold ? TRIGGER_PREFIX_ABOVE : TRIGGER_PREFIX_BELOW;\n const indexTokenSymbol = indexToken.isWrapped ? indexToken.baseSymbol : indexToken.symbol;\n\n const collateralTokenInfo = getTokenInfo(infoTokens, order.purchaseToken);\n const collateralUSD = getUsd(order.purchaseTokenAmount, order.purchaseToken, true, infoTokens);\n\n const error = getOrderError(account, order, positionsMap);\n\n return (\n \n Swap {formatAmount(order.amountIn, fromTokenInfo.decimals, fromTokenInfo.isStable ? 2 : 4, true)}{\" \"}\n {fromTokenInfo.symbol} for{\" \"}\n {formatAmount(order.minOut, toTokenInfo.decimals, toTokenInfo.isStable ? 2 : 4, true)}{\" \"}\n {toTokenInfo.symbol}\n
\n \n \n
\n \n
\n \n Price \n
\n \n t`\n You will receive at least ${formatAmount(\n order.minOut,\n toTokenInfo.decimals,\n toTokenInfo.isStable || toTokenInfo.isUsdf ? 2 : 4,\n true\n )} ${\n toTokenInfo.symbol\n } if this order is executed. The exact execution price may vary depending on fees at the time the order is executed.\n `}\n />\n
\n \n
\n {!hideActions && (\n <>\n \n \n Mark Price \n
\n {getExchangeRateDisplay(markExchangeRate, fromTokenInfo, toTokenInfo)}
\n \n \n \n
\n \n )}\n \n
\n );\n });\n }, [orders, onEditClick, onCancelClick, infoTokens, positionsMap, hideActions, chainId, account]);\n\n return (\n \n {order.type === INCREASE ? t`Increase` : t`Decrease`} {indexTokenSymbol} {order.isLong ? t`Long` : t`Short`}\n by ${formatAmount(order.sizeDelta, USD_DECIMALS, 2, true)}\n {error &&
\n \n {error}
}\n \n
\n \n
\n \n Price \n
\n \n {triggerPricePrefix} {formatPrice(order.triggerPrice, true)}\n
\n \n
\n {order.type === INCREASE && (\n \n Mark Price \n
\n \n {\n return (\n \n The price that the order can be executed at may differ slightly from the chart price as market\n orders can change the price while limit / trigger orders cannot.\n \n );\n }}\n />\n
\n \n
\n )}\n {!hideActions && (\n <>\n \n \n Collateral \n
\n \n ${formatAmount(collateralUSD, USD_DECIMALS, 2, true)} (\n {formatAmount(order.purchaseTokenAmount, collateralTokenInfo.decimals, 4, true)}{\" \"}\n {collateralTokenInfo.baseSymbol || collateralTokenInfo.symbol})\n
\n \n \n \n
\n \n )}\n \n {(!orders || orders.length === 0) && (\n
\n {editingOrder && (\n \n No open orders \n
\n )}\n {renderSmallList()}\n \n
\n
\n {tradesWithMessages.length === 0 && (\n
\n );\n}\n","import React from \"react\";\n\nimport \"./ExchangeWalletTokens.css\";\nimport { bigNumberify, expandDecimals, formatAmount } from \"lib/numbers\";\n\nexport default function ExchangeWalletTokens(props) {\n const { tokens, mintingCap, infoTokens, onSelectToken } = props;\n\n return (\n \n No trades yet \n
\n )}\n {tradesWithMessages.length > 0 &&\n tradesWithMessages.map((trade, index) => {\n const tradeData = trade.data;\n const txUrl = getExplorerUrl(chainId) + \"tx/\" + tradeData.txhash;\n\n let msg = getMsg(trade);\n\n if (!msg) {\n return null;\n }\n\n return (\n \n
\n );\n })}\n {shouldShowPaginationButtons && (\n \n \n {msg}\n \n
\n \n {formatDateTime(tradeData.timestamp)}\n {(!account || account.length === 0) && (\n \n {\" \"}\n ({tradeData.account})\n \n )}\n
\n \n {pageIndex > 0 && (\n \n )}\n {trades && trades.length >= TRADES_PAGE_SIZE && (\n \n )}\n
\n )}\n \n {tokens.map((token) => {\n let info = infoTokens ? infoTokens[token.address] : {};\n let mintAmount;\n let balance = info.balance;\n if (mintingCap && info.usdfAmount) {\n mintAmount = mintingCap.sub(info.usdfAmount);\n }\n if (mintAmount && mintAmount.lt(0)) {\n mintAmount = bigNumberify(0);\n }\n let balanceUsd;\n if (balance && info.maxPrice) {\n balanceUsd = balance.mul(info.maxPrice).div(expandDecimals(1, token.decimals));\n }\n return (\n
\n );\n}\n","import React from \"react\";\nimport { Trans } from \"@lingui/macro\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\n\nimport \"./ExchangeBanner.css\";\n\nexport default function ExchangeBanner(props) {\n const { hideBanner } = props;\n\n return (\n onSelectToken(token)} key={token.address}>\n
\n );\n })}\n \n
\n {token.symbol}
\n {balance && (\n \n {balance.gt(0) && formatAmount(balance, token.decimals, 4, true)}\n {balance.eq(0) && \"-\"}\n
\n )}\n \n
\n {token.name}
\n {balanceUsd && balanceUsd.gt(0) && (\n ${formatAmount(balanceUsd, 30, 2, true)}
\n )}\n \n {\n hideBanner();\n }}\n >\n \n \n
\n );\n}\n","import React, { useEffect, useState, useMemo, useCallback, forwardRef, useImperativeHandle } from \"react\";\nimport { Trans, t, Plural } from \"@lingui/macro\";\nimport { useWeb3React } from \"@web3-react/core\";\nimport useSWR from \"swr\";\nimport { ethers } from \"ethers\";\nimport cx from \"classnames\";\n\nimport {\n FUNDING_RATE_PRECISION,\n BASIS_POINTS_DIVISOR,\n MARGIN_FEE_BASIS_POINTS,\n SWAP,\n LONG,\n SHORT,\n USD_DECIMALS,\n getPositionKey,\n getPositionContractKey,\n getLeverage,\n getDeltaStr,\n useAccountOrders,\n getPageTitle,\n} from \"lib/legacy\";\nimport { getConstant, getExplorerUrl } from \"config/chains\";\nimport { approvePlugin, useMinExecutionFee, cancelMultipleOrders } from \"domain/legacy\";\n\nimport { getContract } from \"config/contracts\";\n\nimport Reader from \"abis/Reader.json\";\nimport Vault from \"abis/Vault.json\";\nimport Router from \"abis/Router.json\";\nimport Token from \"abis/Token.json\";\n\nimport Checkbox from \"components/Checkbox/Checkbox\";\nimport SwapBox from \"components/Exchange/SwapBox\";\nimport ExchangeTVChart, { getChartToken } from \"components/Exchange/ExchangeTVChart\";\nimport PositionsList from \"components/Exchange/PositionsList\";\nimport OrdersList from \"components/Exchange/OrdersList\";\nimport TradeHistory from \"components/Exchange/TradeHistory\";\nimport ExchangeWalletTokens from \"components/Exchange/ExchangeWalletTokens\";\nimport ExchangeBanner from \"components/Exchange/ExchangeBanner\";\nimport Tab from \"components/Tab/Tab\";\nimport Footer from \"components/Footer/Footer\";\n\nimport \"./Exchange.css\";\nimport { contractFetcher } from \"lib/contracts\";\nimport { useInfoTokens } from \"domain/tokens\";\nimport { useLocalStorageByChainId, useLocalStorageSerializeKey } from \"lib/localStorage\";\nimport { helperToast } from \"lib/helperToast\";\nimport { getTokenInfo } from \"domain/tokens/utils\";\nimport { bigNumberify, formatAmount, formatPrice } from \"lib/numbers\";\nimport { getToken, getTokenBySymbol, getTokens, getWhitelistedTokens } from \"config/tokens\";\nimport { useChainId } from \"lib/chains\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\nconst { AddressZero } = ethers.constants;\n\nconst PENDING_POSITION_VALID_DURATION = 600 * 1000;\nconst UPDATED_POSITION_VALID_DURATION = 60 * 1000;\n\nconst notifications = {};\n\nfunction pushSuccessNotification(chainId, message, e) {\n const { transactionHash } = e;\n const id = ethers.utils.id(message + transactionHash);\n if (notifications[id]) {\n return;\n }\n\n notifications[id] = true;\n\n const txUrl = getExplorerUrl(chainId) + \"tx/\" + transactionHash;\n helperToast.success(\n \n
\n {message}{\" \"}\n \n View \n \n
\n );\n}\n\nfunction pushErrorNotification(chainId, message, e) {\n const { transactionHash } = e;\n const id = ethers.utils.id(message + transactionHash);\n if (notifications[id]) {\n return;\n }\n\n notifications[id] = true;\n\n const txUrl = getExplorerUrl(chainId) + \"tx/\" + transactionHash;\n helperToast.error(\n \n {message}{\" \"}\n \n View \n \n
\n );\n}\n\nfunction getFundingFee(data) {\n let { entryFundingRate, cumulativeFundingRate, size } = data;\n if (entryFundingRate && cumulativeFundingRate) {\n return size.mul(cumulativeFundingRate.sub(entryFundingRate)).div(FUNDING_RATE_PRECISION);\n }\n return;\n}\n\nconst getTokenAddress = (token, nativeTokenAddress) => {\n if (token.address === AddressZero) {\n return nativeTokenAddress;\n }\n return token.address;\n};\n\nfunction applyPendingChanges(position, pendingPositions) {\n if (!pendingPositions) {\n return;\n }\n const { key } = position;\n\n if (\n pendingPositions[key] &&\n pendingPositions[key].updatedAt &&\n pendingPositions[key].pendingChanges &&\n pendingPositions[key].updatedAt + PENDING_POSITION_VALID_DURATION > Date.now()\n ) {\n const { pendingChanges } = pendingPositions[key];\n if (pendingChanges.size && position.size.eq(pendingChanges.size)) {\n return;\n }\n\n if (pendingChanges.expectingCollateralChange && !position.collateral.eq(pendingChanges.collateralSnapshot)) {\n return;\n }\n\n position.hasPendingChanges = true;\n position.pendingChanges = pendingChanges;\n }\n}\n\nexport function getPositions(\n chainId,\n positionQuery,\n positionData,\n infoTokens,\n includeDelta,\n showPnlAfterFees,\n account,\n pendingPositions,\n updatedPositions\n) {\n const propsLength = getConstant(chainId, \"positionReaderPropsLength\");\n const positions = [];\n const positionsMap = {};\n if (!positionData) {\n return { positions, positionsMap };\n }\n const { collateralTokens, indexTokens, isLong } = positionQuery;\n for (let i = 0; i < collateralTokens.length; i++) {\n const collateralToken = getTokenInfo(infoTokens, collateralTokens[i], true, getContract(chainId, \"NATIVE_TOKEN\"));\n const indexToken = getTokenInfo(infoTokens, indexTokens[i], true, getContract(chainId, \"NATIVE_TOKEN\"));\n const key = getPositionKey(account, collateralTokens[i], indexTokens[i], isLong[i]);\n let contractKey;\n if (account) {\n contractKey = getPositionContractKey(account, collateralTokens[i], indexTokens[i], isLong[i]);\n }\n\n const position = {\n key,\n contractKey,\n collateralToken,\n indexToken,\n isLong: isLong[i],\n size: positionData[i * propsLength],\n collateral: positionData[i * propsLength + 1],\n averagePrice: positionData[i * propsLength + 2],\n entryFundingRate: positionData[i * propsLength + 3],\n cumulativeFundingRate: collateralToken.cumulativeFundingRate,\n hasRealisedProfit: positionData[i * propsLength + 4].eq(1),\n realisedPnl: positionData[i * propsLength + 5],\n lastIncreasedTime: positionData[i * propsLength + 6].toNumber(),\n hasProfit: positionData[i * propsLength + 7].eq(1),\n delta: positionData[i * propsLength + 8],\n markPrice: isLong[i] ? indexToken.minPrice : indexToken.maxPrice,\n };\n\n if (\n updatedPositions &&\n updatedPositions[key] &&\n updatedPositions[key].updatedAt &&\n updatedPositions[key].updatedAt + UPDATED_POSITION_VALID_DURATION > Date.now()\n ) {\n const updatedPosition = updatedPositions[key];\n position.size = updatedPosition.size;\n position.collateral = updatedPosition.collateral;\n position.averagePrice = updatedPosition.averagePrice;\n position.entryFundingRate = updatedPosition.entryFundingRate;\n }\n\n let fundingFee = getFundingFee(position);\n position.fundingFee = fundingFee ? fundingFee : bigNumberify(0);\n position.collateralAfterFee = position.collateral.sub(position.fundingFee);\n\n position.closingFee = position.size.mul(MARGIN_FEE_BASIS_POINTS).div(BASIS_POINTS_DIVISOR);\n position.positionFee = position.size.mul(MARGIN_FEE_BASIS_POINTS).mul(2).div(BASIS_POINTS_DIVISOR);\n position.totalFees = position.positionFee.add(position.fundingFee);\n\n position.pendingDelta = position.delta;\n\n if (position.collateral.gt(0)) {\n position.hasLowCollateral =\n position.collateralAfterFee.lt(0) || position.size.div(position.collateralAfterFee.abs()).gt(50);\n\n if (position.averagePrice && position.markPrice) {\n const priceDelta = position.averagePrice.gt(position.markPrice)\n ? position.averagePrice.sub(position.markPrice)\n : position.markPrice.sub(position.averagePrice);\n position.pendingDelta = position.size.mul(priceDelta).div(position.averagePrice);\n\n position.delta = position.pendingDelta;\n\n if (position.isLong) {\n position.hasProfit = position.markPrice.gte(position.averagePrice);\n } else {\n position.hasProfit = position.markPrice.lte(position.averagePrice);\n }\n }\n\n position.deltaPercentage = position.pendingDelta.mul(BASIS_POINTS_DIVISOR).div(position.collateral);\n\n const { deltaStr, deltaPercentageStr } = getDeltaStr({\n delta: position.pendingDelta,\n deltaPercentage: position.deltaPercentage,\n hasProfit: position.hasProfit,\n });\n\n position.deltaStr = deltaStr;\n position.deltaPercentageStr = deltaPercentageStr;\n position.deltaBeforeFeesStr = deltaStr;\n\n let hasProfitAfterFees;\n let pendingDeltaAfterFees;\n\n if (position.hasProfit) {\n if (position.pendingDelta.gt(position.totalFees)) {\n hasProfitAfterFees = true;\n pendingDeltaAfterFees = position.pendingDelta.sub(position.totalFees);\n } else {\n hasProfitAfterFees = false;\n pendingDeltaAfterFees = position.totalFees.sub(position.pendingDelta);\n }\n } else {\n hasProfitAfterFees = false;\n pendingDeltaAfterFees = position.pendingDelta.add(position.totalFees);\n }\n\n position.hasProfitAfterFees = hasProfitAfterFees;\n position.pendingDeltaAfterFees = pendingDeltaAfterFees;\n position.deltaPercentageAfterFees = position.pendingDeltaAfterFees\n .mul(BASIS_POINTS_DIVISOR)\n .div(position.collateral);\n\n const { deltaStr: deltaAfterFeesStr, deltaPercentageStr: deltaAfterFeesPercentageStr } = getDeltaStr({\n delta: position.pendingDeltaAfterFees,\n deltaPercentage: position.deltaPercentageAfterFees,\n hasProfit: hasProfitAfterFees,\n });\n\n position.deltaAfterFeesStr = deltaAfterFeesStr;\n position.deltaAfterFeesPercentageStr = deltaAfterFeesPercentageStr;\n\n if (showPnlAfterFees) {\n position.deltaStr = position.deltaAfterFeesStr;\n position.deltaPercentageStr = position.deltaAfterFeesPercentageStr;\n }\n\n let netValue = position.hasProfit\n ? position.collateral.add(position.pendingDelta)\n : position.collateral.sub(position.pendingDelta);\n\n netValue = netValue.sub(position.fundingFee);\n\n if (showPnlAfterFees) {\n netValue = netValue.sub(position.closingFee);\n }\n\n position.netValue = netValue;\n }\n\n position.leverage = getLeverage({\n size: position.size,\n collateral: position.collateral,\n entryFundingRate: position.entryFundingRate,\n cumulativeFundingRate: position.cumulativeFundingRate,\n hasProfit: position.hasProfit,\n delta: position.delta,\n includeDelta,\n });\n\n positionsMap[key] = position;\n\n applyPendingChanges(position, pendingPositions);\n\n if (position.size.gt(0) || position.hasPendingChanges) {\n positions.push(position);\n }\n }\n\n return { positions, positionsMap };\n}\n\nexport function getPositionQuery(tokens, nativeTokenAddress) {\n const collateralTokens = [];\n const indexTokens = [];\n const isLong = [];\n\n for (let i = 0; i < tokens.length; i++) {\n const token = tokens[i];\n if (token.isStable) {\n continue;\n }\n if (token.isWrapped) {\n continue;\n }\n collateralTokens.push(getTokenAddress(token, nativeTokenAddress));\n indexTokens.push(getTokenAddress(token, nativeTokenAddress));\n isLong.push(true);\n }\n\n for (let i = 0; i < tokens.length; i++) {\n const stableToken = tokens[i];\n if (!stableToken.isStable) {\n continue;\n }\n\n for (let j = 0; j < tokens.length; j++) {\n const token = tokens[j];\n if (token.isStable) {\n continue;\n }\n if (token.isWrapped) {\n continue;\n }\n collateralTokens.push(stableToken.address);\n indexTokens.push(getTokenAddress(token, nativeTokenAddress));\n isLong.push(false);\n }\n }\n\n return { collateralTokens, indexTokens, isLong };\n}\n\nexport const Exchange = forwardRef((props, ref) => {\n const {\n savedIsPnlInLeverage,\n setSavedIsPnlInLeverage,\n savedShowPnlAfterFees,\n savedSlippageAmount,\n pendingTxns,\n setPendingTxns,\n savedShouldShowPositionLines,\n setSavedShouldShowPositionLines,\n connectWallet,\n savedShouldDisableValidationForTesting,\n } = props;\n const [showBanner, setShowBanner] = useLocalStorageSerializeKey(\"showBanner\", true);\n const [bannerHidden, setBannerHidden] = useLocalStorageSerializeKey(\"bannerHidden\", null);\n\n const [pendingPositions, setPendingPositions] = useState({});\n const [updatedPositions, setUpdatedPositions] = useState({});\n\n const hideBanner = () => {\n const hiddenLimit = new Date(new Date().getTime() + 2 * 24 * 60 * 60 * 1000);\n setBannerHidden(hiddenLimit);\n setShowBanner(false);\n };\n\n useEffect(() => {\n if (new Date() > new Date(\"2021-11-30\")) {\n setShowBanner(false);\n } else {\n if (bannerHidden && new Date(bannerHidden) > new Date()) {\n setShowBanner(false);\n } else {\n setBannerHidden(null);\n setShowBanner(true);\n }\n }\n }, [showBanner, bannerHidden, setBannerHidden, setShowBanner]);\n\n const { active, account, library } = useWeb3React();\n const { chainId } = useChainId();\n const currentAccount = account;\n\n const nativeTokenAddress = getContract(chainId, \"NATIVE_TOKEN\");\n\n const vaultAddress = getContract(chainId, \"Vault\");\n const positionRouterAddress = getContract(chainId, \"PositionRouter\");\n const readerAddress = getContract(chainId, \"Reader\");\n const usdfAddress = getContract(chainId, \"USDF\");\n\n const whitelistedTokens = getWhitelistedTokens(chainId);\n const whitelistedTokenAddresses = whitelistedTokens.map((token) => token.address);\n\n const positionQuery = getPositionQuery(whitelistedTokens, nativeTokenAddress);\n\n const defaultCollateralSymbol = getConstant(chainId, \"defaultCollateralSymbol\");\n const defaultTokenSelection = useMemo(\n () => ({\n [SWAP]: {\n from: AddressZero,\n to: getTokenBySymbol(chainId, defaultCollateralSymbol).address,\n },\n [LONG]: {\n from: AddressZero,\n to: AddressZero,\n },\n [SHORT]: {\n from: getTokenBySymbol(chainId, defaultCollateralSymbol).address,\n to: AddressZero,\n },\n }),\n [chainId, defaultCollateralSymbol]\n );\n\n const [tokenSelection, setTokenSelection] = useLocalStorageByChainId(\n chainId,\n \"Exchange-token-selection-v2\",\n defaultTokenSelection\n );\n const [swapOption, setSwapOption] = useLocalStorageByChainId(chainId, \"Swap-option-v2\", LONG);\n\n const fromTokenAddress = tokenSelection[swapOption].from;\n const toTokenAddress = tokenSelection[swapOption].to;\n\n const setFromTokenAddress = useCallback(\n (selectedSwapOption, address) => {\n const newTokenSelection = JSON.parse(JSON.stringify(tokenSelection));\n newTokenSelection[selectedSwapOption].from = address;\n setTokenSelection(newTokenSelection);\n },\n [tokenSelection, setTokenSelection]\n );\n\n const setToTokenAddress = useCallback(\n (selectedSwapOption, address) => {\n const newTokenSelection = JSON.parse(JSON.stringify(tokenSelection));\n newTokenSelection[selectedSwapOption].to = address;\n if (selectedSwapOption === LONG || selectedSwapOption === SHORT) {\n newTokenSelection[LONG].to = address;\n newTokenSelection[SHORT].to = address;\n }\n setTokenSelection(newTokenSelection);\n },\n [tokenSelection, setTokenSelection]\n );\n\n const setMarket = (selectedSwapOption, toTokenAddress) => {\n setSwapOption(selectedSwapOption);\n const newTokenSelection = JSON.parse(JSON.stringify(tokenSelection));\n newTokenSelection[selectedSwapOption].to = toTokenAddress;\n if (selectedSwapOption === LONG || selectedSwapOption === SHORT) {\n newTokenSelection[LONG].to = toTokenAddress;\n newTokenSelection[SHORT].to = toTokenAddress;\n }\n setTokenSelection(newTokenSelection);\n };\n\n const [isConfirming, setIsConfirming] = useState(false);\n const [isPendingConfirmation, setIsPendingConfirmation] = useState(false);\n\n const tokens = getTokens(chainId);\n\n const tokenAddresses = tokens.map((token) => token.address);\n const { data: tokenBalances } = useSWR(active && [active, chainId, readerAddress, \"getTokenBalances\", account], {\n fetcher: contractFetcher(library, Reader, [tokenAddresses]),\n });\n\n const { data: positionData, error: positionDataError } = useSWR(\n active && [active, chainId, readerAddress, \"getPositions\", vaultAddress, account],\n {\n fetcher: contractFetcher(library, Reader, [\n positionQuery.collateralTokens,\n positionQuery.indexTokens,\n positionQuery.isLong,\n ]),\n }\n );\n\n const positionsDataIsLoading = active && !positionData && !positionDataError;\n\n const { data: fundingRateInfo } = useSWR([active, chainId, readerAddress, \"getFundingRates\"], {\n fetcher: contractFetcher(library, Reader, [vaultAddress, nativeTokenAddress, whitelistedTokenAddresses]),\n });\n\n const { data: totalTokenWeights } = useSWR(\n [`Exchange:totalTokenWeights:${active}`, chainId, vaultAddress, \"totalTokenWeights\"],\n {\n fetcher: contractFetcher(library, Vault),\n }\n );\n\n const { data: usdfSupply } = useSWR([`Exchange:usdfSupply:${active}`, chainId, usdfAddress, \"totalSupply\"], {\n fetcher: contractFetcher(library, Token),\n });\n\n const orderBookAddress = getContract(chainId, \"OrderBook\");\n const routerAddress = getContract(chainId, \"Router\");\n const { data: orderBookApproved } = useSWR(\n active && [active, chainId, routerAddress, \"approvedPlugins\", account, orderBookAddress],\n {\n fetcher: contractFetcher(library, Router),\n }\n );\n\n const { data: positionRouterApproved } = useSWR(\n active && [active, chainId, routerAddress, \"approvedPlugins\", account, positionRouterAddress],\n {\n fetcher: contractFetcher(library, Router),\n }\n );\n\n const { infoTokens } = useInfoTokens(library, chainId, active, tokenBalances, fundingRateInfo);\n const { minExecutionFee, minExecutionFeeUSD, minExecutionFeeErrorMessage } = useMinExecutionFee(\n library,\n active,\n chainId,\n infoTokens\n );\n\n useEffect(() => {\n const fromToken = getTokenInfo(infoTokens, fromTokenAddress);\n const toToken = getTokenInfo(infoTokens, toTokenAddress);\n let selectedToken = getChartToken(swapOption, fromToken, toToken, chainId);\n let currentTokenPriceStr = formatPrice(selectedToken.maxPrice, true);\n let title = getPageTitle(currentTokenPriceStr + ` | ${selectedToken.symbol}${selectedToken.isStable ? \"\" : \"USD\"}`);\n document.title = title;\n }, [tokenSelection, swapOption, infoTokens, chainId, fromTokenAddress, toTokenAddress]);\n\n const { positions, positionsMap } = getPositions(\n chainId,\n positionQuery,\n positionData,\n infoTokens,\n savedIsPnlInLeverage,\n savedShowPnlAfterFees,\n account,\n pendingPositions,\n updatedPositions\n );\n\n useImperativeHandle(ref, () => ({\n onUpdatePosition(key, size, collateral, averagePrice, entryFundingRate, reserveAmount, realisedPnl) {\n for (let i = 0; i < positions.length; i++) {\n const position = positions[i];\n if (position.contractKey === key) {\n updatedPositions[position.key] = {\n size,\n collateral,\n averagePrice,\n entryFundingRate,\n reserveAmount,\n realisedPnl,\n updatedAt: Date.now(),\n };\n setUpdatedPositions({ ...updatedPositions });\n break;\n }\n }\n },\n onClosePosition(key, size, collateral, averagePrice, entryFundingRate, reserveAmount, realisedPnl, e) {\n for (let i = 0; i < positions.length; i++) {\n const position = positions[i];\n if (position.contractKey === key) {\n updatedPositions[position.key] = {\n size: bigNumberify(0),\n collateral: bigNumberify(0),\n averagePrice,\n entryFundingRate,\n reserveAmount,\n realisedPnl,\n updatedAt: Date.now(),\n };\n setUpdatedPositions({ ...updatedPositions });\n break;\n }\n }\n },\n\n onIncreasePosition(key, account, collateralToken, indexToken, collateralDelta, sizeDelta, isLong, price, fee, e) {\n if (account !== currentAccount) {\n return;\n }\n\n const indexTokenItem = getToken(chainId, indexToken);\n const tokenSymbol = indexTokenItem.isWrapped ? getConstant(chainId, \"nativeTokenSymbol\") : indexTokenItem.symbol;\n const longOrShortText = isLong ? t`Long` : t`Short`;\n let message;\n if (sizeDelta.eq(0)) {\n message = t`Deposited ${formatAmount(\n collateralDelta,\n USD_DECIMALS,\n 2,\n true\n )} USD into ${tokenSymbol} ${longOrShortText}`;\n } else {\n message = t`Increased ${tokenSymbol} ${longOrShortText}, +${formatAmount(\n sizeDelta,\n USD_DECIMALS,\n 2,\n true\n )} USD.`;\n }\n\n pushSuccessNotification(chainId, message, e);\n },\n\n onDecreasePosition(key, account, collateralToken, indexToken, collateralDelta, sizeDelta, isLong, price, fee, e) {\n if (account !== currentAccount) {\n return;\n }\n\n const indexTokenItem = getToken(chainId, indexToken);\n const tokenSymbol = indexTokenItem.isWrapped ? getConstant(chainId, \"nativeTokenSymbol\") : indexTokenItem.symbol;\n const longOrShortText = isLong ? t`Long` : t`Short`;\n\n let message;\n if (sizeDelta.eq(0)) {\n message = t`Withdrew ${formatAmount(\n collateralDelta,\n USD_DECIMALS,\n 2,\n true\n )} USD from ${tokenSymbol} ${longOrShortText}.`;\n } else {\n message = t`Decreased ${tokenSymbol} ${longOrShortText}, -${formatAmount(\n sizeDelta,\n USD_DECIMALS,\n 2,\n true\n )} USD.`;\n }\n\n pushSuccessNotification(chainId, message, e);\n },\n\n onCancelIncreasePosition(\n account,\n path,\n indexToken,\n amountIn,\n minOut,\n sizeDelta,\n isLong,\n acceptablePrice,\n executionFee,\n blockGap,\n timeGap,\n e\n ) {\n if (account !== currentAccount) {\n return;\n }\n const indexTokenItem = getToken(chainId, indexToken);\n const tokenSymbol = indexTokenItem.isWrapped ? getConstant(chainId, \"nativeTokenSymbol\") : indexTokenItem.symbol;\n const longOrShortText = isLong ? t`Long` : t`Short`;\n\n const message = t`Could not increase ${tokenSymbol} ${longOrShortText} within the allowed slippage, you can adjust the allowed slippage in the settings on the top right of the page.`;\n pushErrorNotification(chainId, message, e);\n\n const key = getPositionKey(account, path[path.length - 1], indexToken, isLong);\n pendingPositions[key] = {};\n setPendingPositions({ ...pendingPositions });\n },\n\n onCancelDecreasePosition(\n account,\n path,\n indexToken,\n collateralDelta,\n sizeDelta,\n isLong,\n receiver,\n acceptablePrice,\n minOut,\n executionFee,\n blockGap,\n timeGap,\n e\n ) {\n if (account !== currentAccount) {\n return;\n }\n const indexTokenItem = getToken(chainId, indexToken);\n const tokenSymbol = indexTokenItem.isWrapped ? getConstant(chainId, \"nativeTokenSymbol\") : indexTokenItem.symbol;\n const longOrShortText = isLong ? t`Long` : t`Short`;\n\n const message = t`Could not decrease ${tokenSymbol} ${longOrShortText} within the allowed slippage, you can adjust the allowed slippage in the settings on the top right of the page.`;\n\n pushErrorNotification(chainId, message, e);\n\n const key = getPositionKey(account, path[path.length - 1], indexToken, isLong);\n pendingPositions[key] = {};\n setPendingPositions({ ...pendingPositions });\n },\n }));\n\n const flagOrdersEnabled = true;\n const [orders] = useAccountOrders(flagOrdersEnabled);\n\n const [isWaitingForPluginApproval, setIsWaitingForPluginApproval] = useState(false);\n const [isWaitingForPositionRouterApproval, setIsWaitingForPositionRouterApproval] = useState(false);\n const [isPluginApproving, setIsPluginApproving] = useState(false);\n const [isPositionRouterApproving, setIsPositionRouterApproving] = useState(false);\n const [isCancelMultipleOrderProcessing, setIsCancelMultipleOrderProcessing] = useState(false);\n const [cancelOrderIdList, setCancelOrderIdList] = useState([]);\n\n const onMultipleCancelClick = useCallback(\n async function () {\n setIsCancelMultipleOrderProcessing(true);\n try {\n const tx = await cancelMultipleOrders(chainId, library, cancelOrderIdList, {\n successMsg: t`Orders cancelled.`,\n failMsg: t`Cancel failed.`,\n sentMsg: t`Cancel submitted.`,\n pendingTxns,\n setPendingTxns,\n });\n const receipt = await tx.wait();\n if (receipt.status === 1) {\n setCancelOrderIdList([]);\n }\n } catch (error) {\n console.error(error);\n } finally {\n setIsCancelMultipleOrderProcessing(false);\n }\n },\n [\n chainId,\n library,\n pendingTxns,\n setPendingTxns,\n setCancelOrderIdList,\n cancelOrderIdList,\n setIsCancelMultipleOrderProcessing,\n ]\n );\n\n const approveOrderBook = () => {\n setIsPluginApproving(true);\n return approvePlugin(chainId, orderBookAddress, {\n library,\n pendingTxns,\n setPendingTxns,\n sentMsg: t`Enable orders sent.`,\n failMsg: t`Enable orders failed.`,\n })\n .then(() => {\n setIsWaitingForPluginApproval(true);\n })\n .finally(() => {\n setIsPluginApproving(false);\n });\n };\n\n const approvePositionRouter = ({ sentMsg, failMsg }) => {\n setIsPositionRouterApproving(true);\n return approvePlugin(chainId, positionRouterAddress, {\n library,\n pendingTxns,\n setPendingTxns,\n sentMsg,\n failMsg,\n })\n .then(() => {\n setIsWaitingForPositionRouterApproval(true);\n })\n .finally(() => {\n setIsPositionRouterApproving(false);\n });\n };\n const POSITIONS = \"Positions\";\n const ORDERS = \"Orders\";\n const TRADES = \"Trades\";\n\n const LIST_SECTIONS = [POSITIONS, flagOrdersEnabled && ORDERS, TRADES].filter(Boolean);\n let [listSection, setListSection] = useLocalStorageByChainId(chainId, \"List-section-v2\", LIST_SECTIONS[0]);\n const LIST_SECTIONS_LABELS = {\n [ORDERS]: orders.length ? t`Orders (${orders.length})` : t`Orders`,\n [POSITIONS]: positions.length ? t`Positions (${positions.length})` : t`Positions`,\n [TRADES]: t`Trades`,\n };\n if (!LIST_SECTIONS.includes(listSection)) {\n listSection = LIST_SECTIONS[0];\n }\n\n if (!getToken(chainId, toTokenAddress)) {\n return null;\n }\n\n const renderCancelOrderButton = () => {\n if (cancelOrderIdList.length === 0) return;\n return (\n \n
\n );\n };\n\n const onSelectWalletToken = (token) => {\n setFromTokenAddress(swapOption, token.address);\n };\n\n const renderChart = () => {\n return (\n \n setListSection(section)}\n type=\"inline\"\n className=\"Exchange-list-tabs\"\n />\n
\n {listSection === POSITIONS && (\n \n {renderCancelOrderButton()}\n \n \n Chart positions \n \n \n
\n \n {showBanner &&
\n );\n});\n","import React from \"react\";\nimport useSWR from \"swr\";\nimport { ethers } from \"ethers\";\nimport { useWeb3React } from \"@web3-react/core\";\nimport { useParams } from \"react-router-dom\";\n\nimport \"./Actions.css\";\n\nimport { getContract } from \"config/contracts\";\nimport { useAccountOrders } from \"lib/legacy\";\n\nimport { getPositions, getPositionQuery } from \"../Exchange/Exchange\";\n\nimport PositionsList from \"components/Exchange/PositionsList\";\nimport OrdersList from \"components/Exchange/OrdersList\";\n\nimport TradeHistory from \"components/Exchange/TradeHistory\";\nimport Reader from \"abis/Reader.json\";\n\nimport { Trans /*, t*/ } from \"@lingui/macro\";\n// import { getServerBaseUrl } from \"config/backend\";\nimport { contractFetcher } from \"lib/contracts\";\nimport { useInfoTokens } from \"domain/tokens\";\nimport { getTokenInfo } from \"domain/tokens/utils\";\n// import { formatAmount } from \"lib/numbers\";\nimport { getTokens, getWhitelistedTokens } from \"config/tokens\";\nimport { useChainId } from \"lib/chains\";\n\n// const USD_DECIMALS = 30;\n\nexport default function Actions() {\n const { account } = useParams();\n const { active, library } = useWeb3React();\n\n const { chainId } = useChainId();\n const nativeTokenAddress = getContract(chainId, \"NATIVE_TOKEN\");\n const vaultAddress = getContract(chainId, \"Vault\");\n const readerAddress = getContract(chainId, \"Reader\");\n\n // const shouldShowPnl = false;\n\n let checkSummedAccount = \"\";\n if (ethers.utils.isAddress(account)) {\n checkSummedAccount = ethers.utils.getAddress(account);\n }\n // const pnlUrl = `${getServerBaseUrl(chainId)}/pnl?account=${checkSummedAccount}`;\n // const { data: pnlData } = useSWR([pnlUrl], {\n // fetcher: (...args) => fetch(...args).then((res) => res.json()),\n // });\n\n const tokens = getTokens(chainId);\n const whitelistedTokens = getWhitelistedTokens(chainId);\n const positionQuery = getPositionQuery(whitelistedTokens, nativeTokenAddress);\n\n const whitelistedTokenAddresses = whitelistedTokens.map((token) => token.address);\n const tokenAddresses = tokens.map((token) => token.address);\n const { data: tokenBalances } = useSWR(checkSummedAccount && [active, chainId, readerAddress, \"getTokenBalances\", account], {\n fetcher: contractFetcher(library, Reader, [tokenAddresses]),\n });\n\n const { data: positionData } = useSWR(checkSummedAccount && [active, chainId, readerAddress, \"getPositions\", vaultAddress, account], {\n fetcher: contractFetcher(library, Reader, [\n positionQuery.collateralTokens,\n positionQuery.indexTokens,\n positionQuery.isLong,\n ]),\n });\n\n const { data: fundingRateInfo } = useSWR([active, chainId, readerAddress, \"getFundingRates\"], {\n fetcher: contractFetcher(library, Reader, [vaultAddress, nativeTokenAddress, whitelistedTokenAddresses]),\n });\n\n const { infoTokens } = useInfoTokens(library, chainId, active, tokenBalances, fundingRateInfo);\n const { positions, positionsMap } = getPositions(\n chainId,\n positionQuery,\n positionData,\n infoTokens,\n false,\n false,\n checkSummedAccount,\n undefined,\n undefined\n );\n\n const flagOrdersEnabled = true;\n const [orders, updateOrders] = useAccountOrders(flagOrdersEnabled, checkSummedAccount);\n\n return (\n \n
\n \n \n {renderChart()}\n
\n {getListSection()}
\n \n
\n \n
\n \n
\n {getListSection()}
\n \n {checkSummedAccount.length > 0 && (\n
\n );\n}\n","import { useWeb3React } from \"@web3-react/core\";\nimport cx from \"classnames\";\n\nimport { NavLink } from \"react-router-dom\";\n\nimport { getContract } from \"config/contracts\";\nimport * as Api from \"domain/legacy\";\nimport { useAllOrders, useAllOrdersStats, usePositionsForOrders } from \"domain/legacy\";\nimport {\n DECREASE,\n getExchangeRate,\n getExchangeRateDisplay,\n getOrderKey,\n INCREASE,\n shortenAddress,\n shouldInvertTriggerRatio,\n SWAP,\n USD_DECIMALS,\n} from \"lib/legacy\";\n\nimport \"./OrdersOverview.css\";\nimport { t, Trans } from \"@lingui/macro\";\nimport { getTokenInfo } from \"domain/tokens/utils\";\nimport { useInfoTokens } from \"domain/tokens\";\nimport { formatAmount, formatPrice } from \"lib/numbers\";\nimport { useChainId } from \"lib/chains\";\nimport { formatDateTime } from \"lib/dates\";\n\nexport default function OrdersOverview() {\n const { chainId } = useChainId();\n const { library, account, active } = useWeb3React();\n\n const nativeTokenAddress = getContract(chainId, \"NATIVE_TOKEN\");\n\n const { infoTokens } = useInfoTokens(library, chainId, active, undefined, undefined);\n\n const orders = useAllOrders(chainId, library);\n const stats = useAllOrdersStats(chainId);\n\n const positionsForOrders = usePositionsForOrders(\n chainId,\n library,\n orders.filter((order) => order.type === DECREASE)\n );\n\n let openTotal;\n let executedTotal;\n let cancelledTotal;\n\n if (stats) {\n openTotal = stats.openDecrease + stats.openIncrease + stats.openSwap;\n executedTotal = stats.executedDecrease + stats.executedIncrease + stats.executedSwap;\n cancelledTotal = stats.cancelledDecrease + stats.cancelledIncrease + stats.cancelledSwap;\n }\n\n const NEAR_TRESHOLD = 98;\n\n const executeOrder = (evt, order) => {\n evt.preventDefault();\n\n const params = [chainId, library, order.account, order.index, account];\n let method;\n if (order.type === \"Swap\") {\n method = \"executeSwapOrder\";\n } else if (order.type === \"Increase\") {\n method = \"executeIncreaseOrder\";\n } else {\n method = \"executeDecreaseOrder\";\n }\n return Api[method](...params);\n };\n\n return (\n \n Account : {checkSummedAccount}\n
\n )}\n {/* {shouldShowPnl && (\n \n
\n )} */}\n {checkSummedAccount.length > 0 && (\n \n PnL \n
\n {(!pnlData || pnlData.length === 0) && (\n \n No PnLs found \n
\n )}\n {pnlData &&\n pnlData.length > 0 &&\n pnlData.map((pnlRow, index) => {\n const token = getToken(chainId, pnlRow.data.indexToken);\n return (\n \n
\n );\n })}\n \n {token.symbol} {pnlRow.data.isLong ? t`Long` : t`Short`} Profit :{\" \"}\n {formatAmount(pnlRow.data.profit, USD_DECIMALS, 2, true)} USD\n
\n \n {token.symbol} {pnlRow.data.isLong ? t`Long` : t`Short`} Loss :{\" \"}\n {formatAmount(pnlRow.data.loss, USD_DECIMALS, 2, true)} USD\n
\n \n
\n )}\n {flagOrdersEnabled && checkSummedAccount.length > 0 && (\n \n Positions \n
\n \n
\n )}\n \n Orders \n
\n \n
\n \n Actions \n
\n \n {stats && (\n \n \n
\n
\n );\n}\n","import { Trans } from \"@lingui/macro\";\nimport { useWeb3React } from \"@web3-react/core\";\nimport cx from \"classnames\";\n\nimport { useAllPositions } from \"domain/legacy\";\nimport { USD_DECIMALS } from \"lib/legacy\";\n\nimport \"./PositionsOverview.css\";\nimport { formatAmount } from \"lib/numbers\";\nimport { useChainId } from \"lib/chains\";\nimport { getTimeRemaining } from \"lib/dates\";\n\nexport default function PositionsOverview() {\n const { chainId } = useChainId();\n const { library } = useWeb3React();\n\n const positions = useAllPositions(chainId, library);\n\n return (\n \n
\n
\n
\n
\n
\n \n
\n \n
\n \n
| \n | \n \n | \n \n | \n \n | \n \n | \n \n | \n \n | \n \n | \n \n | ||
|---|---|---|---|---|---|---|---|---|---|---|
| \n | \n \n {!invalidToken && (\n <>\n {formatAmount(order.amountIn, fromToken.decimals, 4, true)} {fromToken.symbol}\n for \n {formatAmount(order.minOut, toToken.decimals, 4, true)} {toToken.symbol}\n \n )}\n | \n\n {!invalidToken && prefix}\n {getExchangeRateDisplay(order.triggerRatio, fromToken, toToken)}\n | \n\n {getExchangeRateDisplay(markExchangeRate, fromToken, toToken)}\n | \n\n {formatAmount(diffPercent, 2, 2)}%\n | \n\n | \n {formatDateTime(order.createdTimestamp)} | \n{order.index} | \n{error} | \n\n \n | \n|
| {order.type} | \n\n {order.isLong ? t`Long` : t`Short`} {indexToken && indexToken.symbol}\n | \n\n {type === INCREASE ? \"+\" : \"-\"}${formatAmount(order.sizeDelta, USD_DECIMALS, 2, true)}\n | \n\n {order.triggerAboveThreshold ? \"> \" : \"< \"}\n {formatPrice(order.triggerPrice, true)}\n | \n\n ${formatPrice(markPrice, true)}\n | \n\n {formatAmount(diffPercent, 2, 2)}%\n | \n\n | \n {formatDateTime(order.createdTimestamp)} | \n{order.index} | \n{error} | \n\n \n | \n
\n \n \n
\n
\n );\n}\n","import \"./Loader.css\";\n\nexport default function Loader() {\n return (\n \n
\n Under risk: {positions.filter((p) => p.danger).length}\n
| \n | \n \n | \n \n | \n \n | \n \n | \n
|---|---|---|---|---|
| {account} | \n${formatAmount(size, USD_DECIMALS, 2, true)} | \n${formatAmount(collateral, USD_DECIMALS, 2, true)} | \n${formatAmount(fee, USD_DECIMALS, 2, true)} | \n\n {getTimeRemaining(liqTime)} (${formatAmount(feesPerHour, USD_DECIMALS, 2, true)}/h)\n | \n
\n \n \n \n
\n );\n}\n","import { useEffect, useState } from \"react\";\n\nexport function useDebounce(value, delay) {\n // State and setters for debounced value\n const [debouncedValue, setDebouncedValue] = useState(value);\n\n useEffect(\n () => {\n // Update debounced value after delay\n const handler = setTimeout(() => {\n setDebouncedValue(value);\n }, delay);\n // Cancel the timeout if value changes (also on delay change or unmount)\n // This is how we prevent debounced value from updating if value is changed ...\n // .. within the delay period. Timeout gets cleared and restarted.\n return () => {\n clearTimeout(handler);\n };\n },\n [value, delay] // Only re-call effect if value or delay changes\n );\n\n return debouncedValue;\n}\n","import { useEffect, useRef, useState } from \"react\";\nimport { Trans, t } from \"@lingui/macro\";\nimport { useWeb3React } from \"@web3-react/core\";\nimport { setTraderReferralCodeByUser, validateReferralCodeExists } from \"domain/referrals\";\nimport { REFERRAL_CODE_REGEX } from \"./referralsHelper\";\nimport { useDebounce } from \"lib/useDebounce\";\n\nfunction JoinReferralCode({ setPendingTxns, pendingTxns, active, connectWallet }) {\n return (\n \n \n
\n
\n );\n}\n\nexport function ReferralCodeForm({\n setPendingTxns,\n pendingTxns,\n callAfterSuccess,\n userReferralCodeString = \"\",\n type = \"join\",\n}) {\n const { account, library, chainId } = useWeb3React();\n const [referralCode, setReferralCode] = useState(\"\");\n const inputRef = useRef(\"\");\n const [isValidating, setIsValidating] = useState(false);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [referralCodeExists, setReferralCodeExists] = useState(true);\n const debouncedReferralCode = useDebounce(referralCode, 300);\n\n function getPrimaryText() {\n const isEdit = type === \"edit\";\n if (isEdit && debouncedReferralCode === userReferralCodeString) {\n return t`Same as current active code`;\n }\n if (isEdit && isSubmitting) {\n return t`Updating...`;\n }\n\n if (isSubmitting) {\n return t`Adding...`;\n }\n if (debouncedReferralCode === \"\") {\n return t`Enter Referral Code`;\n }\n if (isValidating) {\n return t`Checking code...`;\n }\n if (!referralCodeExists) {\n return t`Referral Code does not exist`;\n }\n\n return isEdit ? t`Update` : t`Submit`;\n }\n function isPrimaryEnabled() {\n if (\n debouncedReferralCode === \"\" ||\n isSubmitting ||\n isValidating ||\n !referralCodeExists ||\n debouncedReferralCode === userReferralCodeString\n ) {\n return false;\n }\n return true;\n }\n\n async function handleSubmit(event) {\n const isEdit = type === \"edit\";\n event.preventDefault();\n setIsSubmitting(true);\n\n try {\n const tx = await setTraderReferralCodeByUser(chainId, referralCode, library, {\n account,\n successMsg: isEdit ? t`Referral code updated!` : t`Referral code added!`,\n failMsg: isEdit ? t`Referral code updated failed.` : t`Adding referral code failed.`,\n setPendingTxns,\n pendingTxns,\n });\n if (callAfterSuccess) {\n callAfterSuccess();\n }\n const receipt = await tx.wait();\n if (receipt.status === 1) {\n setReferralCode(\"\");\n }\n } catch (error) {\n console.error(error);\n } finally {\n setIsSubmitting(false);\n setIsValidating(false);\n }\n }\n\n useEffect(() => {\n let cancelled = false;\n async function checkReferralCode() {\n if (debouncedReferralCode === \"\" || !REFERRAL_CODE_REGEX.test(debouncedReferralCode)) {\n setIsValidating(false);\n setReferralCodeExists(false);\n return;\n }\n\n setIsValidating(true);\n const codeExists = await validateReferralCodeExists(debouncedReferralCode, chainId);\n if (!cancelled) {\n setReferralCodeExists(codeExists);\n setIsValidating(false);\n }\n }\n checkReferralCode();\n return () => {\n cancelled = true;\n };\n }, [debouncedReferralCode, chainId]);\n\n useEffect(() => {\n inputRef.current.focus();\n }, []);\n\n return (\n \n );\n}\nexport default JoinReferralCode;\n","import Tooltip from \"../Tooltip/Tooltip\";\nimport \"./Card.css\";\n\nfunction Card({ title, children, className, tooltipText }) {\n return (\n \n Enter Referral Code \n
\n \n
\n {active ? (\n
\n \n {tooltipText ? (\n {title}
}\n position=\"left-bottom\"\n renderContent={() => tooltipText}\n />\n ) : (\n {title}
\n )}\n \n {children}
\n \n );\n}\n\nexport default Card;\n","import Tooltip from \"../Tooltip/Tooltip\";\n\nfunction EmptyMessage({ message = \"\", tooltipText }) {\n return (\n \n {tooltipText ? (\n {message}} position=\"center-bottom\" renderContent={() => tooltipText} />\n ) : (\n
\n );\n}\n\nexport default EmptyMessage;\n","import Tooltip from \"../Tooltip/Tooltip\";\n\nfunction InfoCard({ label, data, tooltipText, toolTipPosition = \"left-bottom\" }) {\n return (\n {message}
\n )}\n\n
\n );\n}\n\nexport default InfoCard;\n","import { useEffect, useRef, useState } from \"react\";\nimport { Trans, t } from \"@lingui/macro\";\nimport cx from \"classnames\";\nimport { getCodeError, getReferralCodeTakenStatus, getSampleReferrarStat } from \"./referralsHelper\";\nimport { useWeb3React } from \"@web3-react/core\";\n// import { ARBITRUM } from \"config/chains\";\nimport { helperToast } from \"lib/helperToast\";\nimport { useDebounce } from \"lib/useDebounce\";\nimport { ethers } from \"ethers\";\n\nfunction AddAffiliateCode({\n handleCreateReferralCode,\n active,\n connectWallet,\n setRecentlyAddedCodes,\n recentlyAddedCodes,\n}) {\n return (\n \n \n {tooltipText ? (\n
\n
\n \n {tooltipText ? (\n tooltipText} />\n ) : (\n label\n )}\n
\n {data}
\n \n \n
\n
\n );\n}\n\nexport function AffiliateCodeForm({\n handleCreateReferralCode,\n recentlyAddedCodes,\n setRecentlyAddedCodes,\n callAfterSuccess,\n}) {\n const [referralCode, setReferralCode] = useState(\"\");\n const [isProcessing, setIsProcessing] = useState(false);\n const [error, setError] = useState(\"\");\n const inputRef = useRef(\"\");\n const [referralCodeCheckStatus, setReferralCodeCheckStatus] = useState(\"ok\");\n const debouncedReferralCode = useDebounce(referralCode, 300);\n const { account, chainId } = useWeb3React();\n useEffect(() => {\n inputRef.current.focus();\n }, []);\n\n useEffect(() => {\n let cancelled = false;\n const checkCodeTakenStatus = async () => {\n if (error) {\n setReferralCodeCheckStatus(\"ok\");\n return;\n }\n const { status: takenStatus } = await getReferralCodeTakenStatus(account, debouncedReferralCode, chainId);\n // ignore the result if the referral code to check has changed\n if (cancelled) {\n return;\n }\n if (takenStatus === \"none\") {\n setReferralCodeCheckStatus(\"ok\");\n } else {\n setReferralCodeCheckStatus(\"taken\");\n }\n };\n setReferralCodeCheckStatus(\"checking\");\n checkCodeTakenStatus();\n return () => {\n cancelled = true;\n };\n }, [account, debouncedReferralCode, error, chainId]);\n\n function getButtonError() {\n if (!debouncedReferralCode) {\n return t`Enter a code`;\n }\n if (referralCodeCheckStatus === \"taken\") {\n return t`Code already taken`;\n }\n if (referralCodeCheckStatus === \"checking\") {\n return t`Checking code...`;\n }\n\n return false;\n }\n\n const buttonError = getButtonError();\n\n function getPrimaryText() {\n if (buttonError) {\n return buttonError;\n }\n\n if (isProcessing) {\n return t`Creating...`;\n }\n\n return t`Create`;\n }\n function isPrimaryEnabled() {\n if (buttonError) {\n return false;\n }\n if (error || isProcessing) {\n return false;\n }\n return true;\n }\n\n async function handleSubmit(event) {\n event.preventDefault();\n setIsProcessing(true);\n const { status: takenStatus /*, info: takenInfo*/ } = await getReferralCodeTakenStatus(account, referralCode, chainId);\n if ([\"all\", \"current\", \"other\"].includes(takenStatus)) {\n setIsProcessing(false);\n }\n\n if (takenStatus === \"none\" || takenStatus === \"other\") {\n // const ownerOnOtherNetwork = takenInfo[chainId === ARBITRUM ? \"ownerAvax\" : \"ownerArbitrum\"];\n try {\n const tx = await handleCreateReferralCode(referralCode);\n if (callAfterSuccess) {\n callAfterSuccess();\n }\n const receipt = await tx.wait();\n if (receipt.status === 1) {\n // recentlyAddedCodes.push(getSampleReferrarStat(referralCode, ownerOnOtherNetwork, account));\n recentlyAddedCodes.push(getSampleReferrarStat(referralCode, ethers.constants.AddressZero, account));\n\n helperToast.success(t`Referral code created!`);\n setRecentlyAddedCodes(recentlyAddedCodes);\n setReferralCode(\"\");\n }\n } catch (err) {\n console.error(err);\n } finally {\n setIsProcessing(false);\n }\n }\n }\n\n return (\n \n );\n}\n\nexport default AddAffiliateCode;\n","import { useMemo, useRef, useState } from \"react\";\nimport { Trans, t } from \"@lingui/macro\";\nimport { FiPlus, FiTwitter } from \"react-icons/fi\";\nimport { useCopyToClipboard } from \"react-use\";\nimport { IoWarningOutline } from \"react-icons/io5\";\nimport { BiCopy, BiErrorCircle } from \"react-icons/bi\";\nimport Card from \"../Common/Card\";\nimport Modal from \"../Modal/Modal\";\nimport { shortenAddress } from \"lib/legacy\";\nimport EmptyMessage from \"./EmptyMessage\";\nimport InfoCard from \"./InfoCard\";\nimport {\n getReferralCodeTradeUrl,\n getTierIdDisplay,\n getTwitterShareUrl,\n getUSDValue,\n isRecentReferralCodeNotExpired,\n tierRebateInfo,\n} from \"./referralsHelper\";\nimport { AffiliateCodeForm } from \"./AddAffiliateCode\";\nimport TooltipWithPortal from \"../Tooltip/TooltipWithPortal\";\nimport { AVALANCHE, getExplorerUrl } from \"config/chains\";\nimport { helperToast } from \"lib/helperToast\";\nimport { bigNumberify, formatAmount } from \"lib/numbers\";\nimport { getNativeToken, getToken } from \"config/tokens\";\nimport { formatDate } from \"lib/dates\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\n\nfunction AffiliatesStats({\n referralsData,\n handleCreateReferralCode,\n chainId,\n setRecentlyAddedCodes,\n recentlyAddedCodes,\n}) {\n const [isAddReferralCodeModalOpen, setIsAddReferralCodeModalOpen] = useState(false);\n const addNewModalRef = useRef(null);\n\n const [, copyToClipboard] = useCopyToClipboard();\n const open = () => setIsAddReferralCodeModalOpen(true);\n const close = () => setIsAddReferralCodeModalOpen(false);\n\n const { cumulativeStats, referrerTotalStats, rebateDistributions, referrerTierInfo } = referralsData;\n const allReferralCodes = referrerTotalStats.map((c) => c.referralCode.trim());\n const finalAffiliatesTotalStats = useMemo(\n () =>\n recentlyAddedCodes.filter(isRecentReferralCodeNotExpired).reduce((acc, cv) => {\n if (!allReferralCodes.includes(cv.referralCode)) {\n acc = acc.concat(cv);\n }\n return acc;\n }, referrerTotalStats),\n [allReferralCodes, referrerTotalStats, recentlyAddedCodes]\n );\n\n const tierId = referrerTierInfo?.tierId;\n let referrerRebates = bigNumberify(0);\n if (cumulativeStats && cumulativeStats.totalRebateUsd && cumulativeStats.discountUsd) {\n referrerRebates = cumulativeStats.totalRebateUsd.sub(cumulativeStats.discountUsd);\n }\n return (\n \n Generate Referral Code \n
\n \n
Create one now and start earning rebates!\n
\n {active ? (\n
\n \n
\n {rebateDistributions?.length > 0 ? (\n \n
\n \n addNewModalRef.current?.focus()}\n >\n \n
\n }\n >\n \n
\n \n \n
\n \n \n
\n
\n \n | \n | \n \n | \n \n | \n \n | \n
|---|---|---|---|
| \n \n {stat.referralCode}\n \n \n \n )}\n {ownerOnOtherChain && ownerOnOtherChain?.isTaken && !ownerOnOtherChain?.isTakenByCurrentUser && (\n \n \n )}\n />\n \n \n Switch your network to create this code on{\" \"}\n {chainId === AVALANCHE ? \"Arbitrum\" : \"Avalanche\"}.\n \n \n )}\n \n \n \n )}\n />\n | \n {getUSDValue(stat.volume)} | \n{stat.registeredReferralsCount} | \n{getUSDValue(referrerRebate, 4)} | \n
\n \n \n
\n ) : (\n \n \n \n
\n
\n | \n | \n \n | \n \n | \n
|---|---|---|
| \n {formatDate(rebate.timestamp)}\n | \n\n {formatAmount(rebate.amount, tokenInfo.decimals, 6, true)} {tokenInfo.symbol}\n | \n\n | \n
\n editModalRef.current?.focus()}\n >\n
\n {referralsData?.discountDistributions.length > 0 ? (\n \n \n
\n }\n />\n \n {userReferralCodeString}\n
\n {traderTier && (\n \n (\n
\n )}\n \n
\n setIsEditModalOpen(false)}\n />\n
\n \n \n \n \n
\n ) : (\n \n \n \n
\n
\n | \n | \n \n | \n \n | \n
|---|---|---|
| {formatDate(rebate.timestamp)} | \n\n {formatAmount(rebate.amount, tokenInfo.decimals, 6, true)} {tokenInfo.symbol}\n | \n\n | \n
\n
\n \n \n \n
\n \n
\n \n Referrals \n
\n \n \n Get fee discounts and earn rebates through the FXDX referral program.\n
\n For more information, please read the{\" \"}\nreferral program details .\n \n
\n \n For more information, please read the{\" \"}\n
\n
\n {activeTab === AFFILIATES ? renderAffiliatesTab() : renderTradersTab()}\n \n
\n );\n}\n","import { useEffect, useState } from \"react\";\nimport { BigNumber } from \"ethers\";\nimport { ethers } from \"ethers\";\nimport Modal from \"../Modal/Modal\";\nimport { get1InchSwapUrl } from \"domain/common\";\nimport { getLowestFeeTokenForBuyFlp, InfoTokens, Token } from \"domain/tokens\";\nimport { getNativeToken } from \"config/tokens\";\nimport { t, Trans } from \"@lingui/macro\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\n\nconst { AddressZero } = ethers.constants;\n\ntype Props = {\n swapToken: Token;\n isVisible: boolean;\n setIsVisible: () => void;\n chainId: number;\n flpAmount: BigNumber;\n usdfSupply: BigNumber;\n totalTokenWeights: BigNumber;\n flpPrice: BigNumber;\n swapUsdMin: BigNumber;\n infoTokens: InfoTokens;\n};\n\nexport default function SwapErrorModal({\n swapToken,\n isVisible,\n setIsVisible,\n chainId,\n flpAmount,\n usdfSupply,\n totalTokenWeights,\n flpPrice,\n infoTokens,\n swapUsdMin,\n}: Props) {\n const [lowestFeeToken, setLowestFeeToken] = useState<\n { token: Token; fees: number; amountLeftToDeposit: BigNumber } | undefined\n >();\n useEffect(() => {\n const lowestFeeTokenInfo = getLowestFeeTokenForBuyFlp(\n chainId,\n flpAmount,\n flpPrice,\n usdfSupply,\n totalTokenWeights,\n infoTokens,\n swapToken.address,\n swapUsdMin\n );\n setLowestFeeToken(lowestFeeTokenInfo);\n }, [chainId, flpAmount, flpPrice, usdfSupply, totalTokenWeights, infoTokens, swapUsdMin, swapToken.address]);\n\n const label = t`${swapToken?.symbol} Capacity Reached`;\n\n if (lowestFeeToken && swapUsdMin && swapUsdMin.gt(lowestFeeToken.amountLeftToDeposit)) {\n return (\n \n
\n \n {topLeftLabel}: {balance}\n
\n \n {topRightLabel} \n \n {tokenBalance} {/*(selectedToken && selectedToken.symbol) || defaultTokenName*/}\n \n
\n \n
\n \n {!staticInput && (\n
\n {inputValue}
}\n {showMaxButton && (\n \n MAX \n
\n )}\n {props.children}
\n \n
\n
The pool's capacity has been reached for {swapToken.symbol}. Please use another token to buy FLP.
\nCheck the \"Save on Fees\" section for tokens with the lowest fees.
\n\n
\n \n \n );\n}\n","import React, { useState } from \"react\";\nimport { ethers } from \"ethers\";\nimport { useWeb3React } from \"@web3-react/core\";\n\nimport ERC721 from \"abis/ERC721.json\";\n\nimport \"./NftWallet.css\";\nimport { t, Trans } from \"@lingui/macro\";\nimport { callContract } from \"lib/contracts\";\nimport { useChainId } from \"lib/chains\";\n\nexport default function NftWallet() {\n const [nftAddress, setNftAddress] = useState(\"\");\n const [nftId, setNftId] = useState(\"\");\n const [receiver, setReceiver] = useState(\"\");\n const [isSubmitting, setIsSubmitting] = useState(\"\");\n\n const { active, account, library } = useWeb3React();\n const { chainId } = useChainId();\n\n function getTransferError() {\n if (!active) {\n return t`Wallet not connected`;\n }\n if (!receiver || receiver.length === 0) {\n return t`Enter Receiver Address`;\n }\n if (!ethers.utils.isAddress(receiver)) {\n return t`Invalid Receiver Address`;\n }\n if (!nftAddress || nftAddress.length === 0) {\n return t`Enter NFT Address`;\n }\n if (!ethers.utils.isAddress(nftAddress)) {\n return t`Invalid NFT Address`;\n }\n if (!nftId || nftId.toString().length === 0) {\n return t`Enter NFT ID`;\n }\n }\n\n function getPrimaryText() {\n const transferError = getTransferError();\n if (transferError) {\n return transferError;\n }\n if (isSubmitting) {\n return t`Tranferring...`;\n }\n return t`Transfer NFT`;\n }\n\n function isPrimaryEnabled() {\n return !getTransferError();\n }\n\n function transferNft() {\n setIsSubmitting(true);\n const contract = new ethers.Contract(nftAddress, ERC721.abi, library.getSigner());\n callContract(chainId, contract, \"transferFrom\", [account, receiver, nftId], {\n sentMsg: t`Transfer submitted!`,\n failMsg: t`Transfer failed.`,\n }).finally(() => {\n setIsSubmitting(false);\n });\n }\n\n return (\n \n \n \n );\n}\n\nexport default Icon;\n","import \"./EventToast.css\";\nimport Icon from \"./AnnouncementIcon\";\nimport { MdOutlineClose } from \"react-icons/md\";\n\nexport default function EventToast({ event, id, onClick, t }) {\n return (\n {\n toast.dismiss(event.id);\n visited.push(event.id);\n setVisited(visited);\n }}\n />\n ),\n {\n id: event.id,\n style: {},\n }\n );\n });\n }, [visited, setVisited, isHome]);\n}\n\nexport default useEventToast;\n","import { Toaster } from \"react-hot-toast\";\nimport { useWindowScroll, createBreakpoint } from \"react-use\";\n\nfunction EventToastContainer() {\n let { y: scrollY } = useWindowScroll();\n const useBreakpoint = createBreakpoint({ XL: 1033, L: 768, S: 350 });\n const breakpoint = useBreakpoint();\n return (\n 60 ? \"30px\" : `${93 - scrollY}px`,\n right: breakpoint === \"XL\" ? \"30px\" : \"1rem\",\n }}\n toastOptions={{\n duration: Infinity,\n }}\n />\n );\n}\nexport default EventToastContainer;\n","import SEO from \"components/Common/SEO\";\nimport Footer from \"components/Footer/Footer\";\nimport { getPageTitle } from \"lib/legacy\";\nimport \"./PageNotFound.css\";\nimport { Trans } from \"@lingui/macro\";\nimport { getHomeUrl, getTradePageUrl } from \"lib/legacy\";\n\nfunction PageNotFound() {\n const homeUrl = getHomeUrl();\n const tradePageUrl = getTradePageUrl();\n\n return (\n \n \n \n );\n}\n\nexport default PageNotFound;\n","import React from \"react\";\nimport Footer from \"components/Footer/Footer\";\nimport SEO from \"components/Common/SEO\";\nimport { getPageTitle } from \"lib/legacy\";\nimport \"./ReferralTerms.css\";\nimport { IS_TESTNET } from \"config/chains\";\n\nexport default function ReferralTerms() {\n return (\n \n \n );\n}\n","import React from \"react\";\nimport Footer from \"components/Footer/Footer\";\nimport SEO from \"components/Common/SEO\";\nimport { getPageTitle } from \"lib/legacy\";\nimport \"./TermsAndConditions.css\";\nimport { IS_TESTNET } from \"config/chains\";\n\nexport default function TermsAndConditions() {\n return (\n \n \n );\n}\n","import \"./RedirectModal.css\";\nimport Modal from \"../Modal/Modal\";\nimport Checkbox from \"../Checkbox/Checkbox\";\nimport { t, Trans } from \"@lingui/macro\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\n\nexport function RedirectPopupModal({\n redirectModalVisible,\n setRedirectModalVisible,\n appRedirectUrl,\n setRedirectPopupTimestamp,\n setShouldHideRedirectModal,\n shouldHideRedirectModal,\n removeRedirectPopupTimestamp,\n}) {\n const onClickAgree = () => {\n if (shouldHideRedirectModal) {\n setRedirectPopupTimestamp(Date.now());\n }\n };\n\n return (\n \n You are leaving FXDX.io and will be redirected to a third party, independent website. \n
\n
\n\n The website is a community deployed and maintained instance of the open source{\" \"}\n FXDX front end , hosted and served on\n the distributed, peer-to-peer IPFS network .\n \n
\n
\n\n Alternative links can be found in the{\" \"}\n docs .\n
\n
\n By clicking Agree you accept the\n T&Cs\n {\" \"}\n and Referral T&Cs .\n
\n
\n \n onClickAgree()}>\n Agree \n \n \n );\n}\n","import React from \"react\";\nimport \"./Jobs.css\";\nimport SEO from \"components/Common/SEO\";\nimport Footer from \"components/Footer/Footer\";\nimport { getPageTitle } from \"lib/legacy\";\nimport Card from \"components/Common/Card\";\nimport { t, Trans } from \"@lingui/macro\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\n\nfunction Jobs() {\n return (\n \n \n );\n}\n\nfunction NoJob() {\n return (\n \n \n );\n}\n\n// function JobCard() {\n// return (\n// \n// \n// );\n// }\n\nexport default Jobs;\n","import { i18n } from \"@lingui/core\";\nimport { en, es, zh, ko, ru, ja, fr, de } from \"make-plural/plurals\";\nimport { LANGUAGE_LOCALSTORAGE_KEY } from \"config/localStorage\";\nimport { isDevelopment } from \"./legacy\";\n\n// uses BCP-47 codes from https://unicode-org.github.io/cldr-staging/charts/latest/supplemental/language_plural_rules.html\nexport const locales = {\n en: \"English\",\n es: \"Spanish\",\n zh: \"Chinese\",\n ko: \"Korean\",\n // ru: \"Russian\",\n ja: \"Japanese\",\n // fr: \"French\", \n // de: \"German\",\n ...(isDevelopment() && { pseudo: \"Test\" }),\n};\n\nexport const defaultLocale = \"es\";\n\ni18n.loadLocaleData({\n en: { plurals: en },\n es: { plurals: es },\n zh: { plurals: zh },\n ko: { plurals: ko },\n ru: { plurals: ru },\n ja: { plurals: ja },\n fr: { plurals: fr },\n de: { plurals: de },\n ...(isDevelopment() && { pseudo: { plurals: en } }),\n});\n\nexport function isTestLanguage(locale) {\n return locale === \"pseudo\";\n}\n\nexport async function dynamicActivate(locale) {\n const { messages } = await import(`@lingui/loader!locales/${locale}/messages.po`);\n if (!isTestLanguage(locale)) {\n localStorage.setItem(LANGUAGE_LOCALSTORAGE_KEY, locale);\n }\n i18n.load(locale, messages);\n i18n.activate(locale);\n}\n","import \"./AddressDropdown.css\";\nimport { Menu } from \"@headlessui/react\";\nimport { Trans } from \"@lingui/macro\";\nimport { shortenAddress, useENS } from \"lib/legacy\";\nimport { useCopyToClipboard, createBreakpoint } from \"react-use\";\nimport externalLink from \"img/ic_new_link_16.svg\";\nimport copy from \"img/ic_copy_16.svg\";\nimport disconnect from \"img/ic_sign_out_16.svg\";\nimport { FaChevronDown } from \"react-icons/fa\";\nimport Davatar from \"@davatar/react\";\nimport { helperToast } from \"lib/helperToast\";\n\nfunction AddressDropdown({ account, accountUrl, disconnectAccountAndCloseSettings }) {\n const useBreakpoint = createBreakpoint({ L: 600, M: 550, S: 400 });\n const breakpoint = useBreakpoint();\n const [, copyToClipboard] = useCopyToClipboard();\n const { ensName } = useENS(account);\n\n return (\n
\n \n );\n}\n\nexport default AddressDropdown;\n","import { ReactNode } from \"react\";\nimport cx from \"classnames\";\nimport \"./Button.css\";\n\ntype Props = {\n imgSrc: string;\n children: ReactNode;\n onClick: () => void;\n className?: string;\n};\n\nexport default function ConnectWalletButton({ imgSrc, children, onClick, className }: Props) {\n let classNames = cx(\"btn btn-primary btn-sm connect-wallet\", className);\n return (\n \n );\n}\n","import Portal from \"../Common/Portal\";\nimport Modal from \"./Modal\";\n\nexport default function ModalWithPortal(props) {\n return (\n \n
*/}\n {isBuying ? \"Buy FLP\" : \"Sell FLP\"}
\n {isBuying && \n Purchase FLP tokens to earn {nativeTokenSymbol} fees from swaps and leverage trading.
\n Note that there is a minimum holding time of 15 minutes after a purchase.
\n
}\n {!isBuying && \n Note that there is a minimum holding time of 15 minutes after a purchase.
\n
View staking page.
\n \n Redeem your FLP tokens for any supported asset.\n {inCooldownWindow &&
}\n \n FLP tokens can only be redeemed 15 minutes after your most recent purchase.
\n Your last purchase was at {formatDateTime(lastPurchaseTime)}, you can redeem FLP tokens after {formatDateTime(redemptionTime)}.
\n
}\n \n Your last purchase was at {formatDateTime(lastPurchaseTime)}, you can redeem FLP tokens after {formatDateTime(redemptionTime)}.
\n
View staking page.
\n \n
\n \n
\n \n
\n \n \n {/*
\n \n \n {chainId === GOERLI || chainId === MAINNET ? (\n \n ) : chainId === ARBITRUM ? (\n \n ) : chainId === AVALANCHE ? (\n \n ) : (\n \n )}\n
*/}\n \n
\n FLP
\n FLP
\n \n
\n \n
\n \n \n
\n \n Price \n
\n ${formatAmount(flpPrice, USD_DECIMALS, 3, true)}
\n \n
\n \n Wallet \n
\n \n {formatAmount(flpBalance, FLP_DECIMALS, 4, true)} FLP ($\n {formatAmount(flpBalanceUsd, USD_DECIMALS, 2, true)})\n
\n \n
\n \n Staked \n
\n \n {formatAmount(flpBalance, FLP_DECIMALS, 4, true)} FLP ($\n {formatAmount(flpBalanceUsd, USD_DECIMALS, 2, true)})\n
\n \n {!isBuying && (\n
\n \n
\n )}\n \n Reserved \n
\n \n \n t`${formatAmount(reservedAmount, 18, 4, true)} FLP have been reserved for vesting.`\n }\n />\n
\n \n
\n \n APR \n
\n \n {\n return (\n <>\n
\n \n
\n \n Total Supply \n
\n \n {formatAmount(flpSupply, FLP_DECIMALS, 4, true)} FLP ($\n {formatAmount(flpSupplyUsd, USD_DECIMALS, 2, true)})\n
\n \n \n \n \n \n
\n \n {/* FLP 
*/}\n FLP\n
\n \n )}\n\n \n
\n\n {isBuying && (\n \n {\n setIsBuying(!isBuying);\n switchSwapOption(isBuying ? \"redeem\" : \"\");\n }}\n />\n
\n \n {/* FLP */}\n FLP\n
\n \n )}\n\n {!isBuying && (\n \n
\n \n
\n {feeBasisPoints > 50 ? t`WARNING: High Fees` : t`Fees`}
\n \n {isBuying && (\n {\n if (!feeBasisPoints) {\n return (\n {\n if (!feeBasisPoints) {\n return (\n
\n \n Fees will be shown once you have entered an amount in the order form. \n
\n );\n }\n return (\n \n {feeBasisPoints > 50 && To reduce fees, select a different asset to pay with. }\n Check the \"Save on Fees\" section below to get the lowest fee percentages. \n
\n );\n }}\n />\n )}\n {!isBuying && (\n \n Fees will be shown once you have entered an amount in the order form. \n
\n );\n }\n return (\n \n {feeBasisPoints > 50 && To reduce fees, select a different asset to receive. }\n Check the \"Save on Fees\" section below to get the lowest fee percentages. \n
\n );\n }}\n />\n )}\n \n \n
\n \n
\n \n Save on Fees \n
\n {isBuying && (\n \n \n Fees may vary depending on which asset you use to buy FLP.
\n Enter the amount of FLP you want to purchase in the order form, then check here to compare fees.\n \n
\n )}\n {!isBuying && (\n \n Enter the amount of FLP you want to purchase in the order form, then check here to compare fees.\n
\n \n Fees may vary depending on which asset you sell FLP for.
\n Enter the amount of FLP you want to redeem in the order form, then check here to compare fees.\n \n
\n )}\n \n Enter the amount of FLP you want to redeem in the order form, then check here to compare fees.\n
\n {/*
\n );\n}\n","import React, { useEffect, useState } from \"react\";\nimport { Link, useHistory } from \"react-router-dom\";\n\nimport FlpSwap from \"components/Flp/FlpSwap\";\nimport buyFLPIcon from \"img/ic_buy_flp.svg\";\nimport Footer from \"components/Footer/Footer\";\nimport \"./BuyFlp.css\";\n\nimport { Trans } from \"@lingui/macro\";\nimport { getNativeToken } from \"config/tokens\";\nimport { useChainId } from \"lib/chains\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\nimport { t } from \"@lingui/macro\";\n\nexport default function BuyFlp(props) {\n const { chainId } = useChainId();\n const history = useHistory();\n const [isBuying, setIsBuying] = useState(true);\n const nativeTokenSymbol = getNativeToken(chainId).symbol;\n\n useEffect(() => {\n const hash = history.location.hash.replace(\"#\", \"\");\n const buying = hash === \"redeem\" ? false : true;\n setIsBuying(buying);\n }, [history.location.hash]);\n\n return (\n */}\n \n \n
\n
\n | \n | \n \n | \n \n {isBuying ? (\n \n \n | \n \n | \n \n \n \n );\n }}\n />\n | \n \n |
|---|---|---|---|---|---|
| \n \n \n \n \n \n \n {token.name} \n {token.symbol} \n \n \n | \n ${formatKeyPrice(tokenInfo, \"minPrice\", true)} | \n\n {isBuying && (\n \n \n )}\n {!isBuying && (\n \n \n )}\n | \n \n {formatKeyAmount(tokenInfo, \"balance\", tokenInfo.decimals, 2, true)} {tokenInfo.symbol} ($\n {formatAmount(balanceUsd, USD_DECIMALS, 2, true)})\n | \n{renderFees()} | \n\n | \n
\n {visibleTokens.map((token) => {\n let tokenFeeBps;\n if (isBuying) {\n const { feeBasisPoints: feeBps } = getBuyFlpFromAmount(\n flpAmount,\n token.address,\n infoTokens,\n flpPrice,\n usdfSupply,\n totalTokenWeights\n );\n tokenFeeBps = feeBps;\n } else {\n const { feeBasisPoints: feeBps } = getSellFlpToAmount(\n flpAmount,\n token.address,\n infoTokens,\n flpPrice,\n usdfSupply,\n totalTokenWeights\n );\n tokenFeeBps = feeBps;\n }\n const tokenInfo = getTokenInfo(infoTokens, token.address);\n let managedUsd;\n if (tokenInfo && tokenInfo.managedUsd) {\n managedUsd = tokenInfo.managedUsd;\n }\n let availableAmountUsd;\n if (tokenInfo && tokenInfo.minPrice && tokenInfo.availableAmount) {\n availableAmountUsd = tokenInfo.availableAmount\n .mul(tokenInfo.minPrice)\n .div(expandDecimals(1, token.decimals));\n }\n let balanceUsd;\n if (tokenInfo && tokenInfo.minPrice && tokenInfo.balance) {\n balanceUsd = tokenInfo.balance.mul(tokenInfo.minPrice).div(expandDecimals(1, token.decimals));\n }\n\n let amountLeftToDeposit = bigNumberify(0);\n if (tokenInfo.maxUsdfAmount && tokenInfo.maxUsdfAmount.gt(0)) {\n amountLeftToDeposit = tokenInfo.maxUsdfAmount\n .sub(tokenInfo.usdfAmount)\n .mul(expandDecimals(1, USD_DECIMALS))\n .div(expandDecimals(1, USDF_DECIMALS));\n }\n if (amountLeftToDeposit.lt(0)) {\n amountLeftToDeposit = bigNumberify(0);\n }\n let isCapReached = tokenInfo.managedAmount?.gt(tokenInfo.maxUsdfAmount);\n\n function renderFees() {\n switch (true) {\n case (isBuying && isCapReached) || (!isBuying && managedUsd?.lt(1)):\n return (\n (\n \n Max pool capacity reached for {tokenInfo.symbol}. Please mint FLP using another token\n \n )}\n />\n );\n case (isBuying && !isCapReached) || (!isBuying && managedUsd?.gt(0)):\n return `${formatAmount(tokenFeeBps, 2, 2, true, \"-\")}${\n tokenFeeBps !== undefined && tokenFeeBps.toString().length > 0 ? \"%\" : \"\"\n }`;\n default:\n return \"\";\n }\n }\n const tokenImage = importImage(\"ic_\" + token.symbol.toLowerCase() + \"_24.svg\");\n return (\n
\n \n
\n );\n })}\n \n \n
\n \n {token.symbol}
\n \n
\n \n
\n \n
\n {isBuying && (\n \n Price \n
\n ${formatKeyPrice(tokenInfo, \"minPrice\", true)}
\n \n (\n
\n )}\n {!isBuying && (\n \n
\n getTooltipContent(managedUsd, tokenInfo, token)}\n />\n
\n \n
\n )}\n\n \n {\n return (\n
\n\n \n
\n getTooltipContent(managedUsd, tokenInfo, token)}\n />\n
\n \n
\n \n Wallet \n
\n \n {formatKeyAmount(tokenInfo, \"balance\", tokenInfo.decimals, 2, true)} {tokenInfo.symbol} ($\n {formatAmount(balanceUsd, USD_DECIMALS, 2, true)})\n
\n \n
\n \n \n {tokenFeeBps ? (\n t`Fees`\n ) : (\n (\n
\n \n
{renderFees()}
\n \n {isBuying && (\n \n )}\n {!isBuying && (\n \n )}\n
\n \n
\n );\n}\n","import React from \"react\";\nimport { Trans } from \"@lingui/macro\";\nimport Footer from \"components/Footer/Footer\";\nimport \"./Buy.css\";\nimport TokenCard from \"components/TokenCard/TokenCard\";\nimport buyFXDXIcon from \"img/buy_fxdx.svg\";\nimport SEO from \"components/Common/SEO\";\nimport { getPageTitle } from \"lib/legacy\";\n\nexport default function BuyFXDXFLP() {\n return (\n \n
\n \n 
\n
\n \n
\n \n Buy / Sell FLP \n
\n \n \n Purchase FLP tokens to earn{\" \"}\n {nativeTokenSymbol} fees from swaps and leverages trading.\n \n
\n\n Note that there is a minimum holding time of 15 minutes after a purchase.\n
\n View staking page.\n \n
\n \n
\n View staking page.\n
\n
\n \n
\n \n \n
\n \n 
\n
\n \n
\n \n Buy FXDX or FLP \n
\n \n
\n );\n}\n","import React, { useState } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport useSWR from \"swr\";\nimport { ethers } from \"ethers\";\nimport { useWeb3React } from \"@web3-react/core\";\n\nimport { getContract } from \"config/contracts\";\n\nimport Modal from \"components/Modal/Modal\";\nimport Footer from \"components/Footer/Footer\";\n\nimport Token from \"abis/Token.json\";\nimport Vester from \"abis/Vester.json\";\nimport RewardTracker from \"abis/RewardTracker.json\";\nimport RewardRouter from \"abis/RewardRouter.json\";\n\nimport { FaCheck, FaTimes } from \"react-icons/fa\";\n\nimport { Trans, t } from \"@lingui/macro\";\n\nimport \"./BeginAccountTransfer.css\";\nimport { callContract, contractFetcher } from \"lib/contracts\";\nimport { approveTokens } from \"domain/tokens\";\nimport { useChainId } from \"lib/chains\";\n\nfunction ValidationRow({ isValid, children }) {\n return (\n \n
\n \n NFT Wallet \n
\n \n
\n \n \n
\n \n setReceiver(e.target.value)} />\n
\n \n \n
\n \n setNftAddress(e.target.value)} />\n
\n \n \n
\n \n setNftId(e.target.value)} />\n
\n \n \n
\n \n
\n );\n}\n\nexport default function BeginAccountTransfer(props) {\n const { setPendingTxns } = props;\n const { active, library, account } = useWeb3React();\n const { chainId } = useChainId();\n\n const [receiver, setReceiver] = useState(\"\");\n const [isTransferring, setIsTransferring] = useState(false);\n const [isApproving, setIsApproving] = useState(false);\n const [isTransferSubmittedModalVisible, setIsTransferSubmittedModalVisible] = useState(false);\n let parsedReceiver = ethers.constants.AddressZero;\n if (ethers.utils.isAddress(receiver)) {\n parsedReceiver = receiver;\n }\n\n const fxdxAddress = getContract(chainId, \"FXDX\");\n const fxdxVesterAddress = getContract(chainId, \"FxdxVester\");\n const flpVesterAddress = getContract(chainId, \"FlpVester\");\n\n const rewardRouterAddress = getContract(chainId, \"RewardRouter\");\n\n const { data: fxdxVesterBalance } = useSWR([active, chainId, fxdxVesterAddress, \"balanceOf\", account], {\n fetcher: contractFetcher(library, Token),\n });\n\n const { data: flpVesterBalance } = useSWR([active, chainId, flpVesterAddress, \"balanceOf\", account], {\n fetcher: contractFetcher(library, Token),\n });\n\n const stakedFxdxTrackerAddress = getContract(chainId, \"StakedFxdxTracker\");\n const { data: cumulativeFxdxRewards } = useSWR(\n [active, chainId, stakedFxdxTrackerAddress, \"cumulativeRewards\", parsedReceiver],\n {\n fetcher: contractFetcher(library, RewardTracker),\n }\n );\n\n const stakedFlpTrackerAddress = getContract(chainId, \"StakedFlpTracker\");\n const { data: cumulativeFlpRewards } = useSWR(\n [active, chainId, stakedFlpTrackerAddress, \"cumulativeRewards\", parsedReceiver],\n {\n fetcher: contractFetcher(library, RewardTracker),\n }\n );\n\n const { data: transferredCumulativeFxdxRewards } = useSWR(\n [active, chainId, fxdxVesterAddress, \"transferredCumulativeRewards\", parsedReceiver],\n {\n fetcher: contractFetcher(library, Vester),\n }\n );\n\n const { data: transferredCumulativeFlpRewards } = useSWR(\n [active, chainId, flpVesterAddress, \"transferredCumulativeRewards\", parsedReceiver],\n {\n fetcher: contractFetcher(library, Vester),\n }\n );\n\n const { data: pendingReceiver } = useSWR([active, chainId, rewardRouterAddress, \"pendingReceivers\", account], {\n fetcher: contractFetcher(library, RewardRouter),\n });\n\n const { data: fxdxAllowance } = useSWR([active, chainId, fxdxAddress, \"allowance\", account, stakedFxdxTrackerAddress], {\n fetcher: contractFetcher(library, Token),\n });\n\n const { data: fxdxStaked } = useSWR(\n [active, chainId, stakedFxdxTrackerAddress, \"depositBalances\", account, fxdxAddress],\n {\n fetcher: contractFetcher(library, RewardTracker),\n }\n );\n\n const needApproval = fxdxAllowance && fxdxStaked && fxdxStaked.gt(fxdxAllowance);\n\n const hasVestedFxdx = fxdxVesterBalance && fxdxVesterBalance.gt(0);\n const hasVestedFlp = flpVesterBalance && flpVesterBalance.gt(0);\n const hasStakedFxdx =\n (cumulativeFxdxRewards && cumulativeFxdxRewards.gt(0)) ||\n (transferredCumulativeFxdxRewards && transferredCumulativeFxdxRewards.gt(0));\n const hasStakedFlp =\n (cumulativeFlpRewards && cumulativeFlpRewards.gt(0)) ||\n (transferredCumulativeFlpRewards && transferredCumulativeFlpRewards.gt(0));\n const hasPendingReceiver = pendingReceiver && pendingReceiver !== ethers.constants.AddressZero;\n\n const getError = () => {\n if (!account) {\n return t`Wallet is not connected`;\n }\n if (hasVestedFxdx) {\n return t`Vested FXDX not withdrawn`;\n }\n if (hasVestedFlp) {\n return t`Vested FLP not withdrawn`;\n }\n if (!receiver || receiver.length === 0) {\n return t`Enter Receiver Address`;\n }\n if (!ethers.utils.isAddress(receiver)) {\n return t`Invalid Receiver Address`;\n }\n if (hasStakedFxdx || hasStakedFlp) {\n return t`Invalid Receiver`;\n }\n if ((parsedReceiver || \"\").toString().toLowerCase() === (account || \"\").toString().toLowerCase()) {\n return t`Self-transfer not supported`;\n }\n\n if (\n (parsedReceiver || \"\").length > 0 &&\n (parsedReceiver || \"\").toString().toLowerCase() === (pendingReceiver || \"\").toString().toLowerCase()\n ) {\n return t`Transfer already initiated`;\n }\n };\n\n const isPrimaryEnabled = () => {\n const error = getError();\n if (error) {\n return false;\n }\n if (isApproving) {\n return false;\n }\n if (isTransferring) {\n return false;\n }\n return true;\n };\n\n const getPrimaryText = () => {\n const error = getError();\n if (error) {\n return error;\n }\n if (needApproval) {\n return t`Approve FXDX`;\n }\n if (isApproving) {\n return t`Approving...`;\n }\n if (isTransferring) {\n return t`Transferring`;\n }\n\n return t`Begin Transfer`;\n };\n\n const onClickPrimary = () => {\n if (needApproval) {\n approveTokens({\n setIsApproving,\n library,\n tokenAddress: fxdxAddress,\n spender: stakedFxdxTrackerAddress,\n chainId,\n });\n return;\n }\n\n setIsTransferring(true);\n const contract = new ethers.Contract(rewardRouterAddress, RewardRouter.abi, library.getSigner());\n\n callContract(chainId, contract, \"signalTransfer\", [parsedReceiver], {\n sentMsg: t`Transfer submitted!`,\n failMsg: t`Transfer failed.`,\n setPendingTxns,\n })\n .then(async (res) => {\n setIsTransferSubmittedModalVisible(true);\n })\n .finally(() => {\n setIsTransferring(false);\n });\n };\n\n const completeTransferLink = `/complete_account_transfer/${account}/${parsedReceiver}`;\n const pendingTransferLink = `/complete_account_transfer/${account}/${pendingReceiver}`;\n\n return (\n \n {isValid &&
\n {children}
\n \n \n Your transfer has been initiated. \n
\n
\n \nContinue \n \n \n
\n );\n}\n","import React, { useState } from \"react\";\nimport { Link, useParams } from \"react-router-dom\";\nimport { ethers } from \"ethers\";\nimport { useWeb3React } from \"@web3-react/core\";\nimport { useCopyToClipboard } from \"react-use\";\n\nimport { getContract } from \"config/contracts\";\n\nimport Modal from \"components/Modal/Modal\";\nimport Footer from \"components/Footer/Footer\";\n\nimport RewardRouter from \"abis/RewardRouter.json\";\n\nimport \"./CompleteAccountTransfer.css\";\n\nimport { Trans, t } from \"@lingui/macro\";\nimport { callContract } from \"lib/contracts\";\nimport { helperToast } from \"lib/helperToast\";\nimport { useChainId } from \"lib/chains\";\n\nexport default function CompleteAccountTransfer(props) {\n const [, copyToClipboard] = useCopyToClipboard();\n const { sender, receiver } = useParams();\n const { setPendingTxns } = props;\n const { library, account } = useWeb3React();\n const [isTransferSubmittedModalVisible, setIsTransferSubmittedModalVisible] = useState(false);\n\n const { chainId } = useChainId();\n\n const [isConfirming, setIsConfirming] = useState(false);\n const isCorrectAccount = (account || \"\").toString().toLowerCase() === (receiver || \"\").toString().toLowerCase();\n\n const rewardRouterAddress = getContract(chainId, \"RewardRouter\");\n\n const getError = () => {\n if (!account) {\n return t`Wallet is not connected`;\n }\n if (!isCorrectAccount) {\n return t`Incorrect Account`;\n }\n };\n\n const isPrimaryEnabled = () => {\n const error = getError();\n if (error) {\n return false;\n }\n if (isConfirming) {\n return false;\n }\n return true;\n };\n\n const getPrimaryText = () => {\n const error = getError();\n if (error) {\n return error;\n }\n return t`Complete Transfer`;\n };\n\n const onClickPrimary = () => {\n setIsConfirming(true);\n\n const contract = new ethers.Contract(rewardRouterAddress, RewardRouter.abi, library.getSigner());\n\n callContract(chainId, contract, \"acceptTransfer\", [sender], {\n sentMsg: t`Transfer submitted!`,\n failMsg: t`Transfer failed.`,\n setPendingTxns,\n })\n .then(async (res) => {\n setIsTransferSubmittedModalVisible(true);\n })\n .finally(() => {\n setIsConfirming(false);\n });\n };\n\n return (\n \n
\n \n
\n
\n \n Transfer Account \n
\n \n \n Please only use this for full account transfers.\n
\n This will transfer all your FXDX, esFXDX, FLP and Multiplier Points to your new account.\n
\n Transfers are only supported if the receiving account has not staked FXDX or FLP tokens before.\n
\n Transfers are one-way, you will not be able to transfer staked tokens back to the sending account.\n \n
\n {hasPendingReceiver && (\n \n This will transfer all your FXDX, esFXDX, FLP and Multiplier Points to your new account.\n
\n Transfers are only supported if the receiving account has not staked FXDX or FLP tokens before.\n
\n Transfers are one-way, you will not be able to transfer staked tokens back to the sending account.\n
\n \n You have a pending transfer to {pendingReceiver}.\n \n
\n )}\n \n
\n \n \n
\n \n \n
\n \n setReceiver(e.target.value)}\n className=\"text-input\"\n />\n
\n \n \n Sender has withdrawn all tokens from FXDX Vesting Vault \n \n \n Sender has withdrawn all tokens from FLP Vesting Vault \n \n \n Receiver has not staked FXDX tokens before \n \n \n Receiver has not staked FLP tokens before \n \n
\n \n onClickPrimary()}\n >\n {getPrimaryText()}\n \n
\n \n \n Your transfer has been completed. \n
\n
\n \nContinue \n \n \n
\n );\n}\n","// date format: d MMM yyyy, H:mm, time should be specifed based on UTC time\n\nexport type EventData = {\n id: string;\n title: string;\n isActive?: boolean;\n validTill: string;\n bodyText: string;\n buttons: {\n text: string;\n link: string;\n newTab: boolean;\n }[];\n};\n\nexport const homeEventsData: EventData[] = [\n // {\n // id: \"app-fxdx-io-launch\",\n // title: \"Frontend Updates\",\n // isActive: true,\n // validTill: \"10 Jul 2022, 12:00\",\n // bodyText:\n // \"Updates have been applied to the FXDX frontend to inform users of the separation between fxdx.io and app.fxdx.io\",\n // buttons: [\n // {\n // text: \"Read More\",\n // link: \"https://fxdxdex.medium.com/fxdx-frontend-updates-8d13f2346e1e\",\n // newTab: true,\n // },\n // ],\n // },\n // {\n // id: \"arbitrum-nitro-upgrade\",\n // title: \"Arbitrum Nitro Upgrade\",\n // isActive: true,\n // validTill: \"31 Aug 2022, 20:00\",\n // bodyText: \"The Arbitrum Nitro upgrade has been completed.\",\n // buttons: [\n // {\n // text: \"Read More\",\n // link: \"https://fxdxdex.medium.com/arbitrum-nitro-5f88c03a46fe\",\n // newTab: true,\n // },\n // ],\n // },\n];\n\nexport const appEventsData: EventData[] = [\n // {\n // id: \"removal-of-min-profit-rule\",\n // title: \"Trading improvements\",\n // isActive: true,\n // validTill: \"1 Apr 2022, 12:00\",\n // bodyText: \"The 1.5% minimum profit rule has been removed\",\n // buttons: [\n // {\n // text: \"Read more\",\n // link: \"https://fxdx.gitbook.io/fxdx/roadmap#30-march-2022\",\n // newTab: true,\n // },\n // {\n // text: \"Trade Now\",\n // link: \"https://fxdx.io/trade\",\n // },\n // ],\n // },\n // {\n // id: \"shorting-of-link-uni-re-enabled\",\n // title: \"Shorting of LINK and UNI\",\n // isActive: true,\n // validTill: \"20 Apr 2022, 12:00\",\n // bodyText: \"Shorting has been re-enabled for LINK and UNI.\",\n // buttons: [\n // {\n // text: \"Trade Now\",\n // link: \"https://fxdx.io/trade\",\n // },\n // ],\n // },\n // {\n // id: \"speed-up-page-loading\",\n // title: \"Speed Up Page Loading\",\n // isActive: true,\n // validTill: \"4 May 2022, 12:00\",\n // bodyText: \"If you experience data loading issues, please use a free RPC URL from Alchemy.\",\n // buttons: [\n // {\n // text: \"Learn More\",\n // link: \"https://fxdx.gitbook.io/fxdx/trading#backup-rpc-urls\",\n // newTab: true,\n // },\n // ],\n // },\n // {\n // id: \"referral-program-launch\",\n // title: \"Referral Program Launch\",\n // isActive: true,\n // validTill: \"4 May 2022, 12:00\",\n // bodyText: \"The FXDX referral program is now live! Get fee discounts and refer traders to earn rewards.\",\n // buttons: [\n // {\n // text: \"Read More\",\n // link: \"https://fxdx.io/referrals\",\n // },\n // {\n // text: \"Join Now\",\n // link: \"https://fxdx.io/referrals\",\n // },\n // ],\n // },\n // {\n // id: \"fxdx-arbitrum-odyssey\",\n // title: \"FXDX Arbitrum Odyssey\",\n // isActive: true,\n // validTill: \"3 Jul 2022, 12:00\",\n // bodyText:\n // \"The FXDX Arbitrum Odyssey is taking place this week, all participants will receive prizes. Read on to find out more.\",\n // buttons: [\n // {\n // text: \"Read More\",\n // link: \"https://fxdxdex.medium.com/fxdx-arbitrum-odyssey-fc12cba2d10d\",\n // },\n // ],\n // },\n // {\n // id: \"fix-arbitrum-transaction-issues\",\n // title: \"Fix Arbitrum Transactions\",\n // isActive: true,\n // validTill: \"30 Jun 2022, 12:00\",\n // bodyText:\n // \"If you experience transaction errors on Arbitrum or data loading issues, please use a free RPC URL from Alchemy.\",\n // buttons: [\n // {\n // text: \"Learn More\",\n // link: \"https://fxdx.gitbook.io/fxdx/trading#backup-rpc-urls\",\n // newTab: true,\n // },\n // ],\n // },\n // {\n // id: \"fxdx-arbitrum-odyssey-paused\",\n // title: \"FXDX Arbitrum Odyssey Paused\",\n // isActive: true,\n // validTill: \"3 Jul 2022, 12:00\",\n // bodyText: \"The FXDX Arbitrum Odyssey has been paused. Please read the linked post for more information.\",\n // buttons: [\n // {\n // text: \"Read More\",\n // link: \"https://twitter.com/FXDX_IO/status/1542163585111150592\",\n // newTab: true,\n // },\n // ],\n // },\n // {\n // id: \"app-fxdx-io\",\n // title: \"Frontend Updates\",\n // isActive: true,\n // validTill: \"6 Jul 2022, 12:00\",\n // bodyText:\n // \"On 6 Jul 2022, updates will be applied to the FXDX frontend to inform users of the separation between fxdx.io and app.fxdx.io\",\n // buttons: [\n // {\n // text: \"Read More\",\n // link: \"https://fxdxdex.medium.com/fxdx-frontend-updates-8d13f2346e1e\",\n // newTab: true,\n // },\n // ],\n // },\n // {\n // id: \"degraded-alchemy-performance\",\n // title: \"Alchemy RPC\",\n // isActive: true,\n // validTill: \"3 Jul 2022, 12:00\",\n // bodyText:\n // \"There are ongoing syncing issues on Alchemy for Arbitrum at the moment, please check their status page and use the public Arbitrum RPC in the meantime\",\n // buttons: [\n // {\n // text: \"Check Status\",\n // link: \"https://status.alchemy.com/\",\n // newTab: true,\n // },\n // {\n // text: \"Public RPC URL\",\n // link: \"https://metamask.zendesk.com/hc/en-us/articles/4415758358299-Network-profile-Arbitrum\",\n // newTab: true,\n // },\n // ],\n // },\n // {\n // id: \"app-fxdx-io-settings\",\n // title: \"Frontend Updates\",\n // isActive: true,\n // validTill: \"10 Jul 2022, 12:00\",\n // bodyText:\n // \"You are currently using app.fxdx.io. Customized settings have been reset, you may need to adjust your settings by clicking on the menu in the top right after connecting your wallet.\",\n // buttons: [\n // {\n // text: \"Read More\",\n // link: \"https://fxdxdex.medium.com/fxdx-frontend-updates-8d13f2346e1e\",\n // newTab: true,\n // },\n // ],\n // },\n // {\n // id: \"use-alchemy-rpc-url\",\n // title: \"Use Alchemy RPC URL\",\n // isActive: true,\n // validTill: \"10 Jul 2022, 12:00\",\n // bodyText:\n // \"If you experience data loading or transaction issues on Arbitrum, please use a free RPC URL from Alchemy.\",\n // buttons: [\n // {\n // text: \"Learn More\",\n // link: \"https://fxdx.gitbook.io/fxdx/trading#backup-rpc-urls\",\n // newTab: true,\n // },\n // ],\n // },\n // {\n // id: \"arbitrum-nitro-upgrade\",\n // title: \"Arbitrum Nitro Upgrade\",\n // isActive: true,\n // validTill: \"31 Aug 2022, 20:00\",\n // bodyText: \"The Arbitrum Nitro upgrade has been completed.\",\n // buttons: [\n // {\n // text: \"Read More\",\n // link: \"https://fxdxdex.medium.com/arbitrum-nitro-5f88c03a46fe\",\n // newTab: true,\n // },\n // ],\n // },\n {\n id: \"position-router-updates\",\n title: \"Position Router Updates\",\n isActive: true,\n validTill: \"19 Oct 2022, 20:00\",\n bodyText: \"Position routers have been updated, existing users may have to re-enable leverage.\",\n buttons: [\n {\n text: \"Read More\",\n link: \"https://fxdxdex.medium.com/fxdx-deployment-updates-a6a470df445f\",\n newTab: true,\n },\n ],\n },\n];\n","function Icon({ className }) {\n return (\n \n
\n \n
\n
\n {isCorrectAccount && (\n \n Complete Account Transfer \n
\n {!isCorrectAccount && (\n \n To complete the transfer, you must switch your connected account to {receiver}. \n
\n
\n\n You will need to be on this page to accept the transfer,{\" \"}\n {\n copyToClipboard(window.location.href);\n helperToast.success(\"Link copied to your clipboard\");\n }}\n >\n click here\n {\" \"}\n to copy the link to this page if needed.\n \n
\n
\n
\n )}\n {isCorrectAccount && (\n \n
\n
\n
\n
\n You have a pending transfer from {sender}. \n
\n
\n )}\n \n
\n
\n )}\n \n \n
\n \n \n
\n \n \n \n
\n );\n}\n","import { useLocalStorage } from \"react-use\";\nimport toast from \"react-hot-toast\";\nimport { homeEventsData, appEventsData } from \"config/events\";\nimport { useEffect } from \"react\";\nimport EventToast from \"./EventToast\";\nimport { isFuture, parse } from \"date-fns\";\nimport { isHomeSite } from \"lib/legacy\";\n\nfunction useEventToast() {\n const isHome = isHomeSite();\n const [visited, setVisited] = useLocalStorage(\"visited-announcements\", []);\n\n useEffect(() => {\n const eventsData = isHome ? homeEventsData : appEventsData;\n\n eventsData\n .filter((event) => event.isActive)\n .filter((event) => isFuture(parse(event.validTill + \", +00\", \"d MMM yyyy, H:mm, x\", new Date())))\n .filter((event) => Array.isArray(visited) && !visited.includes(event.id))\n .forEach((event) => {\n toast.custom(\n (t) => (\n \n
\n {event.title}
\n{event.bodyText}
\n\n {event.buttons.map((button) => {\n if (button.newTab) {\n return (\n \n {button.text}\n \n );\n } else {\n return (\n \n {button.text}\n \n );\n }\n })}\n
\n \n
\n \n
\n \n \n
\n FXDX Referral Program
\n Terms and Conditions
\n Last modified: August 1st, 2022
\n \n
\n \n
\n \n Welcome to fxdx.exchange (\"we,\" \"us,\" or \"our\"), the informational resource for FXDX Protocol, as defined below.\n
\n\n fxdx.exchange provides information and resources about the fundamentals of the decentralized non-custodial\n protocol called the FXDX Protocol (the \"FXDX Protocol,\" \"Protocol,\" or \"FXDX DApp\"). fxdx.exchange is not an\n available access point to the FXDX Protocol.\n
\n\n These Terms and Conditions and any other documents incorporated herein by reference (collectively, these\n \"Terms\") to you or the company or other legal entity you represent (\"you,\" \"your,\" \"the Referrer,\" \"the\n Affiliate\"), explains the terms and conditions by which you may use the FXDX Referral Program (\"Referral\n Program\") as defined below.\n
\n\n Please do not use the Referral Program if you disagree with any of these Terms.\n
\n\n
\n 1. USE OF THE REFERRAL PROGRAM
\nAll this content is for informational purposes only.
\n\n The Referral Program allows you to advertise the FXDX DApp, thereby driving traffic to it, whereby you\n may earn a portion of the fees generated (\"Rebates\") if a person that is not you (\"Trader,\" \"Referred\n User\") trades in the FXDX DApp after being referred to it from a hyperlink (\"Link\") or manually input\n code (\"Referral Code\"). The Trader will benefit from a fee discount (\"Discount\") associated with the\n Referrer's tier.\n
\n\n After being referred to the FXDX DApp from a Link, the Trader's browser will save your Referral Code,\n which will be assigned to the Trader on his first trade.\n
\n\n A Trader can also manually enter your Referral Code in the Traders section and change it at any time.\n
\n\n
\n 2. OBLIGATIONS
\n\n 2.1 As an Affiliate, FXDX DApp provides you with the Links and Referral Codes necessary to promote the\n FXDX Protocol. You acknowledge and agree it is your sole responsibility to indicate your correct Referral\n Code. You may promote the FXDX Protocol offers in any manner you choose unless it misleads someone about\n the FXDX Protocol.\n
\n\n 2.2 fxdx.exchange is not responsible for (i) lost sales or lost opportunity to earn Rebates due to any cause,\n such as technical difficulties or over-capacity, including system overload in the {IS_TESTNET ? 'Mumbai' : 'MoonBeam'}\n blockchain; (ii) tracking Rebates, Discounts, or any other data, as this is handled by independent,\n smart contracts.\n
\n\n 2.3 You will be excluded from the Referral Program, following the directives of the FXDX tokenholders:\n (i) if you use any language libelous, defamatory, profane, obscene, pornographic, sexually explicit,\n indecent, lewd, vulgar, suggestive, harassing, stalking, hateful, threatening, offensive,\n discriminatory, bigoted, abusive, inflammatory, fraudulent, deceptive, or otherwise objectionable or\n likely or intended to incite, threaten, facilitate, promote, or encourage hate, racial intolerance, or\n violent acts against others; (ii) if you try any form of gaming through self-referrals.\n
\n\n
\n 3. REBATES AND DISCOUNTS
\n\n Referrers will receive rebates based on a sliding percentage of fees paid by Referred Users. Rebates\n will never be retroactive.\n
\n\n fxdx.exchange is under no obligation for Rebates or Discounts to any Referrer or Trader. Rebates and Discounts\n are handled following the directives of the FXDX tokenholders.\n
\n\n The Rebates and Discounts percentages for the default tier Tier 1, and instructions to upgrade to Tier 2\n and Tier 3, are contained in{\" \"}\n \n https://fxdx.gitbook.io/fxdx/referrals.\n \n
\n\n
\n 4. LIMITATION OF LIABILITY
\n\n Under no circumstances shall fxdx.exchange be liable for any direct, indirect, incidental, punitive, special,\n consequential damages, or similar damages or liabilities whatsoever for any reason whatsoever related to\n these Terms, your use or inability to use our web site(s), or the materials and content of the web\n site(s) or any other web sites linked to such web site(s) or your provision of any personally\n identifiable information to a backend service provider or any third party. This limitation applies\n regardless of whether the alleged liability is based on contract, tort, warranty, negligence, strict\n liability, or any other basis, even if we have been advised of the possibility of such damages or such\n damages were reasonably foreseeable.\n
\n\n In no event shall fxdx.exchange's aggregate liability arising out of or in connection with the Site exceed five\n hundred Singapore Dollars (500 SGD).\n
\n\n
\n 5. INDEMNIFICATION
\n\n You will defend, indemnify, and hold harmless fxdx.exchange, its affiliates, members, member, managers,\n employees, attorneys, representatives, suppliers, and contractors from any claim, demand, lawsuit,\n action, proceeding, investigation, liability, damage, loss, cost or expense, including without\n limitation reasonable attorneys' fees, arising out of or relating to arising under these Terms, the\n service(s) provided by fxdx.exchange, or your use of the service(s) provided by fxdx.exchange, including, without\n limitation, an infringement by you, or by anyone else using such service(s) we provide to you, of any\n intellectual property or other proprietary rights of any person or entity, or from the violation of any\n of our operating rules or policies relating to the service(s) provided. When we may be involved in a\n suit involving a third party and which is related to our service(s) to you under these Terms, we may\n seek written assurances from you in which you promise to defend, indemnify and hold us harmless from the\n costs and liabilities described in this paragraph. Such written assurances may include, in our sole\n discretion, the posting of a performance bond(s) or other guarantees reasonably calculated to guarantee\n payment. We may consider your failure to provide such assurances a breach of these Terms by you. The\n terms of this paragraph will survive any termination or cancellation of the Terms.\n
\n\n
\n 6. MODIFICATION, SUSPENSION, AND TERMINATION
\n\n The Referral Program runs independently from fxdx.exchange, which the token holders of FXDX determine. Due to\n this, from time to time and with or without prior notice to you, the Referral Program could be subject\n to modifications, suspensions, or disabilities, in whole or in part, for any reason whatsoever.\n
\n\n fxdx.exchange will not be liable for any losses suffered by you resulting from any modification to the Referral\n Program or from any modification, suspension, or termination, for any reason, of your access to all or\n any portion of the Interface or the Protocol.\n
\n\n fxdx.exchange may revise these Terms from time to time. We will notify you by updating the date at the top of\n the Terms and maintaining a current version. The most current version of the Terms will always be at\n https://fxdx.exchange/referral-terms. All modifications will be effective when they are posted. By using the\n Referral Program after those revisions become effective, you agree to be bound by the revised Terms.\n
\n\n
\n 7. GOVERNING LAW
\n\n The interpretation and enforcement of these Terms, and any dispute related to these Terms, the Site, or\n the Interface, will be governed by and construed and enforced under the laws of the Bahamas, as\n applicable.\n
\n\n
\n 8. GENERAL
\n\n 8.1 These Terms, including other policies or agreements incorporated herein, constitute the entire and\n only agreement between you and fxdx.exchange concerning the subject matter of these Terms and supersede all\n prior or contemporaneous agreements, representations, warranties, and understandings, written or oral,\n concerning the subject matter of these Terms. Any failure by us to exercise or enforce any right or\n provision of the Terms shall not constitute a waiver of such right or provision.\n
\n\n 8.2 You must legally be able to enter into the Terms. Using the Referral Program, you represent and\n warrant that you meet the eligibility requirement. If you do not meet the requirement, you must not\n access the Referral Program.\n
\n\n 8.3 Nothing contained herein will be construed to create the relationship of principal and agent,\n employer and employee, partners or joint venturers. Each party shall ensure that the foregoing persons\n shall not represent to the contrary, either expressly, implicitly, by appearance, or otherwise.\n
\n\n 8.4 If any provision of these Terms shall be unenforceable or invalid under any applicable law or be\n held by any applicable court decision, such unenforceability or invalidity shall not render these Terms\n unenforceable or invalid as a whole. fxdx.exchange will amend or replace such provision with one that is valid\n and enforceable and which achieves, to the extent possible, our original objectives and intent as\n reflected in the original provision.\n
\n\n 8.5 You may not assign or transfer any right to use the Referral Program, or any of your rights or\n obligations under these Terms, without our express prior written consent, including by operation of law\n or in connection with any change of control. fxdx.exchange may assign or transfer any or all of our rights or\n obligations under these Terms, in whole or part, without notice or obtaining your consent or approval.\n
\n\n 8.6 fxdx.exchange will have no responsibility or liability for any failure or delay in performance of the Site,\n or any loss or damage that you may incur, due to any circumstance or event beyond our control, including\n without limitation any flood, extraordinary weather conditions, earthquake, or other act of God, fire,\n war, insurrection, riot, labor dispute, accident, any law, order regulation, direction, action or\n request of the government, communications, power failure, or equipment or software malfunction.\n
\n\n
\n 9. CONTACT INFORMATION
\n\n If you have any questions about these Terms, the Site, or the Interface, please get in touch with fxdx.exchange\n on any of our official channels.\n
\n\n
\n \n
\n \n \n
\n FXDX
\n Terms and Conditions
\n Last modified: Dec 14th, 2022
\n \n
\n \n
\n \n Welcome to fxdx.exchange (\"we,\" \"us,\" or \"our\"), the informational resource for FXDX Protocol, as defined below.\n
\n\n fxdx.exchange provides information and resources about the fundamentals of the decentralized non-custodial\n protocol called the FXDX Protocol (the \"FXDX Protocol,\" \"Protocol,\" or \"FXDX DApp\"). fxdx.exchange is not an\n available access point to the FXDX Protocol.\n
\n\n These Terms and Conditions and any other documents incorporated herein by reference (collectively, these\n \"Terms\") to you or the company or other legal entity you represent (\"you\" or \"your\") explains the terms\n and conditions by which you may access fxdx.exchange (\"the Site\") and app.fxdx.exchange (\"the Interface\"). Please do\n not use the Site or Interface if you disagree with any of these Terms.\n
\n\n
\n 1. USE OF THE SITE AND THE INTERFACE
\nThe fxdx.exchange site is for informational purposes only.
\n\n fxdx.exchange is not part of any transaction on the blockchain networks underlying the FXDX Protocol; we do not\n have possession, custody, or control over any crypto assets appearing on the Interface; and we do not\n have possession, custody, or control over any user's funds. Further, we do not store, send, or receive\n any crypto assets. You understand that when you interact with any FXDX Protocol smart contracts, you\n always retain control over your crypto assets. We do not have access to your private keys.\n
\n- \n
- \n
\n 1.1. As a condition to accessing or using the Site or Interface, you represent and warrant to fxdx.exchange\n the following:\n
\n- \n
- \n
\n 1.1.1. If you are an individual person, then you are of legal age in the jurisdiction in which\n you reside, and you have the legal capacity to enter into these Terms and be bound by them;\n
\n \n - \n
\n 1.1.2. If you are an entity, then you must have the legal authority to accept these Terms on\n that entity's behalf, in which case \"you\" (except as used in this paragraph) will mean that\n entity;\n
\n \n - \n
1.1.3. You are not a U.S. Person;
\n \n - \n
\n 1.1.4. You are not a resident, national, or agent of any country to which the United States, the\n United Kingdom, or the European Union embargoes goods or imposes similar sanctions\n (collectively, \"Restricted Territories\");\n
\n \n - \n
\n 1.1.5. You are not subject to economic or trade sanctions administered or enforced by any\n governmental authority; or otherwise, you are not a member of any sanctions list or equivalent\n maintained by the United States government, the United Kingdom government, the European Union,\n or the United Nations, including without limitation the U.S. Office of Foreign Asset Control\n Specifically Designated Nationals and Blocked Person List (collectively, \"Sanctions Lists\n Persons\");\n
\n \n - \n
\n 1.1.6. You do intend to transact with any Restricted Person or Sanctions List Person;\n
\n \n - \n
\n 1.1.7. You do not, and will not, use VPN software or any other privacy or anonymization tools or\n techniques, or other means, to circumvent, or attempt to circumvent, any restrictions that\n apply; and\n
\n \n - \n
\n 1.1.8. Your access is not (a) prohibited by and does not otherwise violate or assist you in\n violating any domestic or foreign law, rule, statute, regulation, by-law, order, protocol, code,\n decree, letter, or another directive, requirement, guidance, or guideline, published or in force\n that applies to or is otherwise intended to govern or regulate any person, property,\n transaction, activity, event or other matter, including any rule, letter, order, judgment,\n directive or other requirements, guidance, or guideline issued by any domestic or foreign\n federal, provincial or state, municipal, local or other governmental, regulatory, judicial or\n administrative authority having jurisdiction over fxdx.exchange or you as otherwise duly enacted,\n enforceable by law, the common law or equity (collectively, \"Applicable Laws\"); or (b)\n contribute to or facilitate any illegal activity.\n
\n \n
\n - \n
- \n
- \n
\n 1.2. As a condition to accessing or using the Site or the Interface, you acknowledge, understand,\n and agree to the following:\n
\n- \n
- \n
\n 1.2.1. From time to time, the Site or the Interface may be inaccessible or inoperable for any\n reason, including, but not limited to: (a) equipment malfunctions; (b) periodic maintenance\n procedures or repairs that fxdx.exchange or any of its suppliers or contractors may undertake from time\n to time; (c) causes beyond fxdx.exchange's control or that fxdx.exchange could not reasonably foresee; (d)\n disruptions and temporary or permanent unavailability of underlying blockchain infrastructure;\n or (e) unavailability of third-party service providers or external partners for any reason;\n
\n \n - \n
\n 1.2.2. We reserve the right to disable or modify access to the Site at any time in the event of\n any breach of these Terms, including, without limitation, if we reasonably believe any of your\n representations and warranties may be untrue or inaccurate, and we will not be liable to you for\n any losses or damages you may suffer as a result of or in connection with the Site or the\n Interface being inaccessible to you at any time or for any reason;\n
\n \n - \n
\n 1.2.3. The Interface may evolve, which means third parties may apply changes, replace, or\n discontinue (temporarily or permanently) the access at any time in their sole discretion;\n
\n \n - \n
\n 1.2.4. The pricing information provided on the Site or the Interface does not represent an\n offer, a solicitation of an offer, or any advice regarding, or recommendation to enter into, a\n transaction with fxdx.exchange;\n
\n \n - \n
1.2.5. fxdx.exchange does not act as a broker or advisor for you;
\n \n - \n
\n 1.2.6. You are solely responsible for your use of the Site or the Interface, including all of\n your transfers of digital assets;\n
\n \n - \n
\n 1.2.7. To the fullest not prohibited by Applicable Law, we owe no fiduciary duties or\n liabilities to you or any other party, and that to the extent any such duties or liabilities may\n exist at law or in equity, you hereby irrevocably disclaim, waive, and eliminate those duties\n and liabilities;\n
\n \n - \n
\n 1.2.8. You are solely responsible for reporting and paying any taxes applicable to your use of\n the Interface; and\n
\n \n - \n
\n 1.2.9. We have no control over, or liability for, the delivery, quality, safety, legality, or\n any other aspect of any digital assets that you may transfer to or from a third party, and we\n are not responsible for ensuring that an entity with whom you transact completes the transaction\n or is authorized to do so. If you experience a problem with any transactions in digital assets\n using the Site or the Interface, you bear the entire risk.\n
\n \n
\n - \n
\n
\n 2. FEES
\n\n You are required to pay all fees for transactions involving certain blockchain networks. These fees may\n include gas costs and all other fees reflected on the Interface at your use, including trading-related\n fees. fxdx.exchange does not receive fees for any blockchain transactions or using the Site or the Interface.\n
\n\n
\n 3. NO PROFESSIONAL ADVICE OR FIDUCIARY DUTIES
\n\n Nothing herein constitutes legal, financial, business, or tax advice, and you are strongly advised to\n consult an advisor(s) before engaging in any activity in connection herewith. All information provided\n by the Site is for informational purposes only and should not be construed as professional advice. You\n should not take, or refrain from taking, any action based on any information contained on the Site or\n any other information that we make available at any time, including, without limitation, blog posts,\n articles, links to third-party content, discord content, news feeds, tutorials, tweets, and videos. The\n Terms are not intended to, and do not, create or impose any fiduciary duties on us.\n
\n\n
\n 4. PROPRIETARY RIGHT
\n- \n
- \n
\n 4.1. fxdx.exchange own all rights, names, logos, and other marks used on the Site and the Interface,\n including, without limitation, any copyrights in and to any content, code, data, or other materials\n that you may access or use on or through the Site or the Interface; however, the code for the FXDX\n Protocol and the Interface (app.fxdx.exchange) deployed on IPFS is open-sourced. Except as expressly set\n forth herein, your use of or access to the Site or the Interface does not grant you any ownership or\n other rights therein.\n
\n \n - \n
\n 4.2. fxdx.exchange may use and share your comments, bug reports, ideas, or other feedback that you may\n provide, including suggestions about how we might improve. You agree that fxdx.exchange is free to use or\n not use any feedback we receive from you as we see fit, including copying and sharing such feedback\n with third parties, without any obligation to you.\n
\n \n
\n
\n 5. MODIFICATION, SUSPENSION, AND TERMINATION
\n- \n
- \n
\n 5.1. fxdx.exchange reserve the right, at our sole discretion, from time to time and with or without prior\n notice to you, to modify, suspend or disable (temporarily or permanently) the Site or our subdomain\n to the Interface, in whole or in part, for any reason whatsoever, including, without limitation.\n Upon termination of your access, your right to use the Site or the Interface from our subdomain will\n immediately cease. However, it would still be accessible via a third party since we do not host or\n own its code. fxdx.exchange will not be liable for any losses suffered by you resulting from any\n modification to the Site or the Interface or from any modification, suspension, or termination, for\n any reason, of your access to all or any portion of the Site or the Interface.\n
\n \n - \n
\n 5.2. fxdx.exchange may revise these Terms from time to time. We will notify you by updating the date at the\n top of the Terms and maintaining a current version. The most current version of the Terms will\n always be at https://fxdx.exchange/terms-and-conditions. All modifications will be effective when they\n are posted. By continuing to access or use the Site or the Interface after those revisions become\n effective, you agree to be bound by the revised Terms.\n
\n \n
\n
\n 6. RISKS
\n- \n
- \n
\n 6.1. The use of technology related to blockchain, smart contracts, and cryptocurrencies, among\n others, entails a risk that by accessing transactions, you are assuming. fxdx.exchange does not own or\n control any underlying software through which blockchain networks are formed. The software\n underlying blockchain networks are open-source so anyone can use, copy, modify, and distribute it.\n By using the Interface, you acknowledge and agree:\n
\n- \n
- \n
\n 6.1.1. That fxdx.exchange is not responsible for the operation of the open-source software and networks\n underlying the Interface;\n
\n \n - \n
\n 6.1.2. That there exists no guarantee of the functionality, security, or availability of that\n software and networks; and\n
\n \n - \n
\n 6.1.3. That the underlying networks are subject to sudden changes in operating rules, such as\n those commonly referred to as \"forks,\" which may materially affect the Interface. You are\n responsible for securing your private key(s). We do not have access to your private key(s);\n losing control of your private key(s) will permanently and irreversibly deny you access to any\n blockchain-based network. Neither fxdx.exchange nor any other person or entity will be able to retrieve\n or protect your digital assets. If your private key(s) are lost, you will not be able to\n transfer your digital assets to any blockchain address or wallet. If this occurs, you will not\n be able to realize any value or utility from the digital assets you may hold.\n
\n \n
\n - \n
- \n
\n 6.2. fxdx.exchange is not responsible for the content of any third party, including, but not limited to,\n information, materials, products, or services that fxdx.exchange does not own or control. In addition,\n third parties may offer promotions related to your access and use of the Interface. fxdx.exchange does not\n endorse or assume any responsibility for such resources or promotions. Suppose you access any such\n resources or participate in any such promotions. In that case, you do so at your own risk and\n understand that these Terms do not apply to your dealings or relationships with any third parties.\n You expressly relieve fxdx.exchange of all liability arising from using such resources or participating in\n such promotions.\n
\n \n - \n
\n 6.3. You understand that the {IS_TESTNET ? 'Mumbai' : 'MoonBeam'} blockchain remains under development, which\n creates technological and security risks when using the Interface, in addition to uncertainty\n relating to digital assets and transactions therein. You acknowledge that the cost of transacting on\n the {IS_TESTNET ? 'Mumbai' : 'MoonBeam'} blockchain is variable and may increase at any time, causing an impact on\n any activities taking place on these blockchains, which may result in price fluctuations or\n increased costs when using the Interface.\n
\n \n - \n
\n 6.4. Transactions entered into in connection with the Interface are irreversible and final, and\n there are no refunds. You acknowledge and agree that you will access and use the Interface at your\n own risk.\n
\n \n - \n
\n 6.5. We must comply with Applicable Law, which may require us to, upon request by government\n agencies, take certain actions or provide information that may not be in your best interests.\n
\n \n - \n
\n 6.6. You hereby assume and agree that fxdx.exchange will have no responsibility or liability for the risks\n in Section 9. You hereby irrevocably waive, release and discharge all claims, whether known or\n unknown to you, against fxdx.exchange, its affiliates, and their respective shareholders, members,\n directors, officers, employees, agents, representatives, suppliers, and contractors related to any\n of the risks set forth in this Section 6.\n
\n \n
\n
\n 7. PROHIBITED USES
\n- \n
- \n
\n 7.1 You agree not to engage in the prohibited uses set forth below. The specific activities set\n forth below are representative but not exhaustive. By using the Site or the Interface, you confirm\n that you will not do any of the following:\n
\n- \n
- \n
\n 7.1.1. Promote or facilitate illegal activities, including but not limited to money laundering,\n terrorist financing, tax evasion, buying or selling illegal drugs, contraband, counterfeit\n goods, or illegal weapons;\n
\n \n - \n
\n 7.1.2. Engage in transactions involving items that infringe or violate any copyright, trademark,\n right of publicity, privacy, or any other proprietary right of fxdx.exchange;\n
\n \n - \n
\n 7.1.3. Engage in improper or abusive trading practices, including but not limited to (a) any\n fraudulent act or scheme to defraud, deceive, trick, or mislead; (b) trading ahead of another\n user of the Site or the Interface or front-running; (c) fraudulent trading; (d) accommodation\n trading; (e) fictitious transactions; (f) pre-arranged or non-competitive transactions; or (g)\n cornering;\n
\n \n - \n
\n 7.1.4. Uploading or transmitting viruses, worms, Trojan horses, time bombs, cancelbots, spiders,\n malware, or any other type of malicious code that will or may be used in any way that will\n affect the functionality or operation of the Site or the Interface;\n
\n \n - \n
\n 7.1.5. Use the Site or Interface in any way that is, in our sole discretion, libelous,\n defamatory, profane, obscene, pornographic, sexually explicit, indecent, lewd, vulgar,\n suggestive, harassing, stalking, hateful, threatening, offensive, discriminatory, bigoted,\n abusive, inflammatory, fraudulent, deceptive, or otherwise objectionable or likely or intended\n to incite, threaten, facilitate, promote, or encourage hate, racial intolerance, or violent acts\n against others;\n
\n \n - \n
\n 7.1.6. Harass, abuse, or harm another person or entity, including fxdx.exchange's collaborator and\n service providers;\n
\n \n - \n
\n 7.1.7. Impersonate another user of the Site or the Interface or otherwise misrepresent yourself;\n or\n
\n \n - \n
\n 7.1.8. Engage or attempt to engage or encourage, induce or assist any third party, or yourself\n attempt, to engage in any of the activities prohibited under this Section 4 or any other\n provision of these Terms.\n
\n \n
\n - \n
\n
\n 8. DISCLOSURES; DISCLAIMERS
\n\n fxdx.exchange is an informational site for the FXDX Protocol. fxdx.exchange does not operate an exchange platform or\n offer trade execution or clearing services and has no oversight, involvement, or control concerning your\n transactions using the Interface. All transactions between users of the Interface are executed\n peer-to-peer directly between the users' blockchain addresses through a third-party developed\n open-source smart contract.\n
\n\n You are responsible for complying with all Applicable Laws that govern your Perpetual Contracts. As a\n result of restrictions under the Commodity Exchange Act and the regulations promulgated thereunder by\n the U.S. Commodity Futures Trading Commission (\"CFTC\"), no U.S. Person may enter into Perpetual\n Contracts using the Interface.\n
\n\n You understand that fxdx.exchange is not registered or licensed by any regulatory agency or authority. No such\n agency or authority has reviewed or approved the use of the Site or the Interface.\n
\n\n You agree that the Site and the Interface are provided on an \"AS IS\" and \"AS AVAILABLE\" basis. fxdx.exchange\n makes no guarantees of any kind or connection with the Site or the Interface.\n
\n\n
\n 9. LIMITATION OF LIABILITY
\n\n In no event shall fxdx.exchange, its affiliates, its suppliers and contractors, and its affiliates', suppliers'\n and contractors' respective stockholders, members, directors, officers, managers, employees, attorneys,\n agents, representatives, suppliers, and contractors shall be liable for any direct, indirect,\n incidental, special, punitive, consequential or similar damages or liabilities whatsoever (including,\n without limitation, damages for loss of fiat, assets, data, information, revenue, opportunities, use,\n goodwill, profits or other business or financial benefit) arising out of or in connection with the Site\n or the Interface, or other item provided by or on behalf of fxdx.exchange, whether under contract, tort\n (including negligence), civil liability, statute, strict liability, breach of warranties, or under any\n other theory of liability, and whether or not we have been advised of, knew of or should have known of\n the possibility of such damages and notwithstanding any failure of the essential purpose of these Terms\n or any limited remedy hereunder nor is fxdx.exchange in any way responsible for the execution or settlement of\n transactions between users of the Interface.\n
\n\n In no event shall fxdx.exchange's aggregate liability arising out of or in connection with the Site or\n Interface exceed one thousand Singapore Dollars (1,000.00 SGD).\n
\n\n
\n 10. INDEMNIFICATION
\n\n You will defend, indemnify, and hold harmless fxdx.exchange, its affiliates, members, member, managers,\n employees, attorneys, representatives, suppliers, and contractors from any claim, demand, lawsuit,\n action, proceeding, investigation, liability, damage, loss, cost or expense, including without\n limitation reasonable attorneys' fees, arising out of or relating to (a) your use of or conduct in\n connection with the Site or the Interface (b) your violation of these Terms; or (c) your misuse of the\n Site or the Interface, or any smart contract and/or script related thereto; (d) your violation of any\n laws, rules, regulations, codes, statutes, ordinances, or orders of any governmental or\n quasi-governmental authorities; (e) your violation of the rights of any third party, including any\n intellectual property right, publicity, confidentiality, property, or privacy right; (f) your use of a\n third-party product, service, and/or website; or (g) any misrepresentation made by you. We reserve the\n right to assume, at your expense, the exclusive defense, and control of any matter subject to\n indemnification by you. You agree to cooperate with our defense of any claim. You will not, in any\n event, settle any claim without.\n
\n\n
\n 11. DISPUTE RESOLUTION & ARBITRATION
\n\n fxdx.exchange will use its best efforts to resolve potential disputes through informal, good faith\n negotiations. If a potential dispute arises, you must contact us by sending a written notice of your\n claim (\"Notice\") to fxdx.exchange on any of our official channels. The notice must (a) describe the nature and\n basis of the claim and (b) set forth the specific relief sought. Our notice to you will be similar in\n form to that described above. If you and fxdx.exchange cannot reach an agreement to resolve the claim within\n sixty (60) days of your email, then you and fxdx.exchange agree to resolve the potential dispute according to\n the process set forth below.\n
\n\n Any claim or controversy arising out of or relating to the Site, the Interface, or these Terms, or any\n other acts or omissions for which you may contend that we are liable, including (but not limited to) any\n claim or controversy as to arbitrability (\"Dispute\"), shall be finally and exclusively settled by\n arbitration under the Corte Civil y Mercantil de Arbitraje (CIMA). You understand that you are required\n to resolve all Disputes by binding arbitration. The arbitration shall be confidential before a single\n arbitrator, who shall be selected pursuant to the CIMA rules. The arbitration will be held in Madrid,\n Spain, unless you and we both agree to hold it elsewhere. Unless we agree otherwise, the arbitrator may\n not consolidate your claims with those of any other party. Any judgment on the award rendered by the\n arbitrator may be entered in any court of competent jurisdiction.\n
\n\n Any claim arising out of or related to these Terms or the Site or the Interface must be filed within one\n year after such claim arose; otherwise, the claim is permanently barred, which means that you and fxdx.exchange\n will not have the right to assert the claim.\n
\n\n
\n 12. GOVERNING LAW
\n\n The interpretation and enforcement of these Terms, and any dispute related to these Terms, the Site, or\n the Interface, will be governed by and construed and enforced under the laws of the Bahamas, as\n applicable.\n
\n\n
\n 13. GENERAL INFORMATION
\n- \n
- \n
\n 13.1. Any right or remedy of fxdx.exchange set forth in these Terms is in addition to, and not in lieu of,\n any other right or remedy whether described in these Terms, under Applicable Law, at law, or in\n equity. The failure or delay of fxdx.exchange in exercising any right, power, or privilege under these\n Terms shall not operate as a waiver thereof.\n
\n \n - \n
\n 13.2. The following sections of these Terms will survive any termination of your access to the Site\n or the Interface, regardless of the reasons for its expiration or termination, in addition to any\n other provision which by law or by its nature should survive: Sections 3 through 12.\n
\n \n - \n
\n 13.3. The invalidity or unenforceability of any of these Terms shall not affect the validity or\n enforceability of any other of these Terms, all of which shall remain in full force and effect.\n
\n \n - \n
\n 13.4. fxdx.exchange will have no responsibility or liability for any failure or delay in performance of the\n Site or the Interface, or any loss or damage that you may incur, due to any circumstance or event\n beyond our control, including without limitation any flood, extraordinary weather conditions,\n earthquake, or other act of God, fire, war, insurrection, riot, labor dispute, accident, any law,\n order regulation, direction, action or request of the government, communications, power failure, or\n equipment or software malfunction.\n
\n \n - \n
\n 13.5. You may not assign or transfer any right to use the Site, the Interface, or any of your rights\n or obligations under these Terms, without our express prior written consent, including by operation\n of law or in connection with any change of control. We may assign or transfer any or all of our\n rights or obligations under these Terms, in whole or part, without notice or obtaining your consent\n or approval.\n
\n \n - \n
\n 13.6. These Terms contain the entire agreement between you and fxdx.exchange and supersede all prior and\n contemporaneous understandings between the parties regarding the Interface and the Site or the\n Interface.\n
\n \n - \n
\n 13.7. In the event of any conflict between these Terms and any other agreement you may have with us,\n these Terms will control unless the other agreement specifically identifies these Terms and declares\n that the other agreement supersedes these Terms.\n
\n \n - \n
\n 13.8. You agree that, except as otherwise expressly provided in these Terms, there shall be no\n third-party beneficiaries to the Terms other than the Indemnified Parties.\n
\n \n
\n
\n CONTACT INFORMATION
\n\n If you have any questions about these Terms, the Site, or the Interface, please get in touch with fxdx.exchange\n on any of our official channels.\n
\n\n
\n
\n
\n
\n
\n By clicking Agree you accept the
\n
\n
\n \n Don't show this message again for 30 days. \n \n
\n \n
\n \n \n \n
\n \n
\n \n Jobs \n
\n \n Job openings at FXDX Exchange. \n
\n \n
\n \n
\n \n
\n//
\n// What you will do:
\n//- \n//
- Work closely with the FXDX team on the FXDX front-end website. \n//
- Collaborate and discuss features to be worked on. \n//
- Remote full-time position, flexible working hours. \n//
\n//
\n// What we are looking for:
\n//- \n//
- Required skills: HTML5, CSS3, React, Ethers, Web3 JS. \n//
- Bonus skills: Node JS. \n//
- 5+ years of experience. \n//
- Previous DeFi experience and knowledge. \n//
- Must speak fluent English and available to start right away. \n//
- Comfortable making changes to the interface following our current design guidelines. \n//
The salary is 60,000 to 120,000 USD + 1,000 to 3,000 FXDX a year.
\n//\n// If the job suits you, please get in touch with{\" \"}\n// \n// jobs@fxdx.io\n// {\" \"}\n// using the following email subject: Application for Senior front-end developer: [Your name]\n//
\n// setActiveModal(NETWORK_MODAL_KEY)}>\n
\n ) : (\n \n
\n \n
\n \n \n \n \n );\n}\n\nfunction NetworkMenuItems({ networkOptions, selectorLabel, onNetworkSelect }) {\n async function handleNetworkSelect(option) {\n await onNetworkSelect(option);\n }\n return networkOptions.map((network) => {\n const networkIcon = importImage(network.icon);\n return (\n \n
\n \n 
\n
\n {network.label}\n \n \n
\n \n \n
\n \n {isTestLanguage(item) ? \"🫐\" : ![{locales[item]}]({image})
}\n
\n {locales[item]}\n \n {currentLanguage.current === item && ![{locales[item]}]({checkedIcon})
}\n
\n \n );\n });\n}\nfunction NetworkModalContent({ networkOptions, onNetworkSelect, selectorLabel, setActiveModal, openSettings }) {\n async function handleNetworkSelect(option) {\n await onNetworkSelect(option);\n }\n return (\n \n More Options \n \n {\n setActiveModal(LANGUAGE_MODAL_KEY);\n }}\n >\n
\n \n \n Networks \n \n\n {networkOptions.map((network) => {\n const networkIcon = importImage(network.icon);\n return (\n handleNetworkSelect({ value: network.value })}\n key={network.value}\n >\n
\n );\n })}\n \n \n \n {network.label}\n
\n \n \n 
\n Language\n
\n \n 
\n \n Settings \n \n
\n \n \n \n );\n}\n","import React, { useRef, useState } from \"react\";\nimport ModalWithPortal from \"../Modal/ModalWithPortal\";\nimport { t } from \"@lingui/macro\";\nimport cx from \"classnames\";\nimport \"./NetworkDropdown.css\";\nimport language24Icon from \"img/ic_language24.svg\";\nimport checkedIcon from \"img/ic_checked.svg\";\nimport { importImage, isHomeSite } from \"lib/legacy\";\nimport { defaultLocale, dynamicActivate, locales } from \"lib/i18n\";\nimport { LANGUAGE_LOCALSTORAGE_KEY } from \"config/localStorage\";\n\nexport default function LanguagePopupHome() {\n const currentLanguage = useRef(localStorage.getItem(LANGUAGE_LOCALSTORAGE_KEY) || defaultLocale);\n const [isLanguageModalOpen, setIsLanguageModalOpen] = useState(false);\n\n return (\n <>\n setIsLanguageModalOpen(true)}>\n
\n\n \n \n
\n \n
\n \n \n
\n {locales[item]}\n \n {currentLanguage.current === item && }\n
\n \n );\n })}\n \n \n );\n}\n","import { useWeb3React } from \"@web3-react/core\";\nimport AddressDropdown from \"../AddressDropdown/AddressDropdown\";\nimport ConnectWalletButton from \"../Common/ConnectWalletButton\";\nimport React, { useCallback, useEffect } from \"react\";\nimport { HeaderLink } from \"./HeaderLink\";\nimport connectWalletImg from \"img/ic_wallet_24.svg\";\n\nimport \"./Header.css\";\nimport { isHomeSite, getAccountUrl } from \"lib/legacy\";\n// import { isDevelopment } from \"lib/legacy\";\nimport cx from \"classnames\";\nimport { Trans } from \"@lingui/macro\";\nimport NetworkDropdown from \"../NetworkDropdown/NetworkDropdown\";\nimport LanguagePopupHome from \"../NetworkDropdown/LanguagePopupHome\";\nimport { getChainName, GOERLI, MUMBAI, IS_TESTNET, MOONBEAM } from \"config/chains\";\nimport { switchNetwork } from \"lib/wallets\";\nimport { useChainId } from \"lib/chains\";\n\ntype Props = {\n openSettings: () => void;\n small?: boolean;\n setWalletModalVisible: (visible: boolean) => void;\n disconnectAccountAndCloseSettings: () => void;\n redirectPopupTimestamp: number;\n showRedirectModal: (to: string) => void;\n};\n\nexport function AppHeaderUser({\n openSettings,\n small,\n setWalletModalVisible,\n disconnectAccountAndCloseSettings,\n redirectPopupTimestamp,\n showRedirectModal,\n}: Props) {\n const { chainId } = useChainId();\n const { active, account } = useWeb3React();\n const showConnectionOptions = !isHomeSite();\n\n const networkOptions = IS_TESTNET ? [\n {\n label: getChainName(MUMBAI),\n value: MUMBAI,\n icon: \"ic_ethereum_24.svg\",\n color: \"#264f79\",\n },\n ] : [\n {\n label: getChainName(MOONBEAM),\n value: MOONBEAM,\n icon: \"ic_moonbeam_24.svg\",\n color: \"#264f79\",\n },\n // {\n // label: getChainName(ARBITRUM),\n // value: ARBITRUM,\n // icon: \"ic_arbitrum_24.svg\",\n // color: \"#264f79\",\n // },\n // {\n // label: getChainName(AVALANCHE),\n // value: AVALANCHE,\n // icon: \"ic_avalanche_24.svg\",\n // color: \"#E841424D\",\n // },\n ];\n // if (isDevelopment()) {\n // networkOptions.push({\n // label: getChainName(ARBITRUM_TESTNET),\n // value: ARBITRUM_TESTNET,\n // icon: \"ic_arbitrum_24.svg\",\n // color: \"#264f79\",\n // });\n // }\n\n useEffect(() => {\n if (active) {\n setWalletModalVisible(false);\n }\n }, [active, setWalletModalVisible]);\n\n const onNetworkSelect = useCallback(\n (option) => {\n if (option.value === chainId) {\n return;\n }\n return switchNetwork(option.value, active);\n },\n [chainId, active]\n );\n\n const selectorLabel = getChainName(chainId);\n\n if (!active) {\n return (\n \n setWalletModalVisible(true)} imgSrc={connectWalletImg}>\n {small ? Connect : Connect Wallet }\n \n
\n );\n }\n\n const accountUrl = getAccountUrl(chainId, account);\n\n return (\n \n \n Trade \n \n
\n\n {showConnectionOptions ? (\n <>\n \n
\n );\n}\n","import React from \"react\";\nimport { FiX } from \"react-icons/fi\";\nimport { Trans } from \"@lingui/macro\";\nimport { Link } from \"react-router-dom\";\n\nimport { HeaderLink } from \"./HeaderLink\";\nimport \"./Header.css\";\nimport { isHomeSite } from \"lib/legacy\";\nimport ExternalLink from \"components/ExternalLink/ExternalLink\";\nimport logoImg from \"img/logo.png\";\n\ntype Props = {\n small?: boolean;\n clickCloseIcon?: () => void;\n openSettings?: () => void;\n redirectPopupTimestamp: number;\n showRedirectModal: (to: string) => void;\n};\n\nexport function AppHeaderLinks({\n small,\n openSettings,\n clickCloseIcon,\n redirectPopupTimestamp,\n showRedirectModal,\n}: Props) {\n return (\n \n \n Trade \n \n
\n\n {showConnectionOptions ? (\n <>\n \n
\n \n {small && (\n
\n )}\n \n \n \n \n clickCloseIcon && clickCloseIcon()}\n >\n
\n \n \n Dashboard \n \n
\n \n \n Earn \n \n
\n \n \n Buy \n \n
\n \n \n Referrals \n \n
\n {/* \n \n Ecosystem \n \n
*/}\n \n \n About \n \n
\n {small && !isHomeSite() && (\n \n {/* eslint-disable-next-line */}\n \n Settings \n \n
\n )}\n \n );\n}\n","import React, { ReactNode, useEffect, useState } from \"react\";\nimport cx from \"classnames\";\n\nimport { AppHeaderUser } from \"./AppHeaderUser\";\nimport { AppHeaderLinks } from \"./AppHeaderLinks\";\n\nimport logoImg from \"img/logo.png\";\nimport logoSmallImg from \"img/logo.png\";\nimport { RiMenuLine } from \"react-icons/ri\";\nimport { FaTimes } from \"react-icons/fa\";\nimport { AnimatePresence as FramerAnimatePresence, motion } from \"framer-motion\";\n\nimport \"./Header.css\";\nimport { Link } from \"react-router-dom\";\n\n// Fix framer-motion old React FC type (solved in react 18)\nconst AnimatePresence = (props: React.ComponentProps\n
\n \n \n \n 
\n \n
\n \n
\n \n \n
\n \n \n
\n setIsDrawerVisible(!isDrawerVisible)}>\n {!isDrawerVisible &&
\n setIsDrawerVisible(!isDrawerVisible)}>\n \n \n
\n \n
\n \n MetaMask not detected. \n
\n
\n {userOnMobileDevice ? (\n\n Install MetaMask , and use FXDX with its built-in\n browser\n \n ) : (\n \n Install MetaMask to start using FXDX\n \n )}\n
\n );\n return false;\n }\n attemptActivateWallet(\"MetaMask\");\n };\n const activateCoinBase = () => {\n if (!hasCoinBaseWalletExtension()) {\n helperToast.error(\n \n
\n {userOnMobileDevice ? (\n
\n Coinbase Wallet not detected. \n
\n
\n {userOnMobileDevice ? (\n\n Install Coinbase Wallet , and use FXDX\n with its built-in browser\n \n ) : (\n \n Install Coinbase Wallet to start using\n FXDX\n \n )}\n
\n );\n return false;\n }\n attemptActivateWallet(\"CoinBase\");\n };\n\n const attemptActivateWallet = (providerName) => {\n localStorage.setItem(SHOULD_EAGER_CONNECT_LOCALSTORAGE_KEY, true);\n localStorage.setItem(CURRENT_PROVIDER_LOCALSTORAGE_KEY, providerName);\n activateInjectedProvider(providerName);\n connectInjectedWallet();\n };\n\n const [walletModalVisible, setWalletModalVisible] = useState(false);\n const [redirectModalVisible, setRedirectModalVisible] = useState(false);\n const [shouldHideRedirectModal, setShouldHideRedirectModal] = useState(false);\n const [redirectPopupTimestamp, setRedirectPopupTimestamp, removeRedirectPopupTimestamp] =\n useLocalStorage(REDIRECT_POPUP_TIMESTAMP_KEY);\n const [selectedToPage, setSelectedToPage] = useState(\"\");\n const connectWallet = () => setWalletModalVisible(true);\n\n const [isSettingsVisible, setIsSettingsVisible] = useState(false);\n const [savedSlippageAmount, setSavedSlippageAmount] = useLocalStorageSerializeKey(\n [chainId, SLIPPAGE_BPS_KEY],\n DEFAULT_SLIPPAGE_AMOUNT\n );\n const [slippageAmount, setSlippageAmount] = useState(0);\n const [isPnlInLeverage, setIsPnlInLeverage] = useState(false);\n const [shouldDisableValidationForTesting, setShouldDisableValidationForTesting] = useState(false);\n const [showPnlAfterFees, setShowPnlAfterFees] = useState(false);\n\n const [savedIsPnlInLeverage, setSavedIsPnlInLeverage] = useLocalStorageSerializeKey(\n [chainId, IS_PNL_IN_LEVERAGE_KEY],\n false\n );\n\n const [savedShowPnlAfterFees, setSavedShowPnlAfterFees] = useLocalStorageSerializeKey(\n [chainId, SHOW_PNL_AFTER_FEES_KEY],\n false\n );\n const [savedShouldDisableValidationForTesting, setSavedShouldDisableValidationForTesting] =\n useLocalStorageSerializeKey([chainId, DISABLE_ORDER_VALIDATION_KEY], false);\n\n const [savedShouldShowPositionLines, setSavedShouldShowPositionLines] = useLocalStorageSerializeKey(\n [chainId, SHOULD_SHOW_POSITION_LINES_KEY],\n false\n );\n\n const openSettings = () => {\n const slippage = parseInt(savedSlippageAmount);\n setSlippageAmount((slippage / BASIS_POINTS_DIVISOR) * 100);\n setIsPnlInLeverage(savedIsPnlInLeverage);\n setShowPnlAfterFees(savedShowPnlAfterFees);\n setShouldDisableValidationForTesting(savedShouldDisableValidationForTesting);\n setIsSettingsVisible(true);\n };\n\n const saveAndCloseSettings = () => {\n const slippage = parseFloat(slippageAmount);\n if (isNaN(slippage)) {\n helperToast.error(t`Invalid slippage value`);\n return;\n }\n if (slippage > 5) {\n helperToast.error(t`Slippage should be less than 5%`);\n return;\n }\n\n const basisPoints = (slippage * BASIS_POINTS_DIVISOR) / 100;\n if (parseInt(basisPoints) !== parseFloat(basisPoints)) {\n helperToast.error(t`Max slippage precision is 0.01%`);\n return;\n }\n\n setSavedIsPnlInLeverage(isPnlInLeverage);\n setSavedShowPnlAfterFees(showPnlAfterFees);\n setSavedShouldDisableValidationForTesting(shouldDisableValidationForTesting);\n setSavedSlippageAmount(basisPoints);\n setIsSettingsVisible(false);\n };\n\n const localStorageCode = window.localStorage.getItem(REFERRAL_CODE_KEY);\n const baseUrl = getAppBaseUrl();\n let appRedirectUrl = baseUrl + selectedToPage;\n if (localStorageCode && localStorageCode.length > 0 && localStorageCode !== ethers.constants.HashZero) {\n const decodedRefCode = decodeReferralCode(localStorageCode);\n if (decodedRefCode) {\n appRedirectUrl = `${appRedirectUrl}?ref=${decodedRefCode}`;\n }\n }\n\n const [pendingTxns, setPendingTxns] = useState([]);\n\n const showRedirectModal = (to) => {\n setRedirectModalVisible(true);\n setSelectedToPage(to);\n };\n\n useEffect(() => {\n const checkPendingTxns = async () => {\n const updatedPendingTxns = [];\n for (let i = 0; i < pendingTxns.length; i++) {\n const pendingTxn = pendingTxns[i];\n const receipt = await library.getTransactionReceipt(pendingTxn.hash);\n if (receipt) {\n if (receipt.status === 0) {\n const txUrl = getExplorerUrl(chainId) + \"tx/\" + pendingTxn.hash;\n helperToast.error(\n \n
\n {userOnMobileDevice ? (\n
\n \n Txn failed. View \n \n
\n
\n );\n }\n if (receipt.status === 1 && pendingTxn.message) {\n const txUrl = getExplorerUrl(chainId) + \"tx/\" + pendingTxn.hash;\n helperToast.success(\n \n
\n {pendingTxn.message}{\" \"}\n \n View \n \n
\n
\n );\n }\n continue;\n }\n updatedPendingTxns.push(pendingTxn);\n }\n\n if (updatedPendingTxns.length !== pendingTxns.length) {\n setPendingTxns(updatedPendingTxns);\n }\n };\n\n const interval = setInterval(() => {\n checkPendingTxns();\n }, 2 * 1000);\n return () => clearInterval(interval);\n }, [library, pendingTxns, chainId]);\n\n const vaultAddress = getContract(chainId, \"Vault\");\n const positionRouterAddress = getContract(chainId, \"PositionRouter\");\n\n useEffect(() => {\n const wsVaultAbi = Vault.abi;\n const wsProvider = getWsProvider(active, chainId);\n if (!wsProvider) {\n return;\n }\n\n const wsVault = new ethers.Contract(vaultAddress, wsVaultAbi, wsProvider);\n const wsPositionRouter = new ethers.Contract(positionRouterAddress, PositionRouter.abi, wsProvider);\n\n const callExchangeRef = (method, ...args) => {\n if (!exchangeRef || !exchangeRef.current) {\n return;\n }\n\n exchangeRef.current[method](...args);\n };\n\n // handle the subscriptions here instead of within the Exchange component to avoid unsubscribing and re-subscribing\n // each time the Exchange components re-renders, which happens on every data update\n const onUpdatePosition = (...args) => callExchangeRef(\"onUpdatePosition\", ...args);\n const onClosePosition = (...args) => callExchangeRef(\"onClosePosition\", ...args);\n const onIncreasePosition = (...args) => callExchangeRef(\"onIncreasePosition\", ...args);\n const onDecreasePosition = (...args) => callExchangeRef(\"onDecreasePosition\", ...args);\n const onCancelIncreasePosition = (...args) => callExchangeRef(\"onCancelIncreasePosition\", ...args);\n const onCancelDecreasePosition = (...args) => callExchangeRef(\"onCancelDecreasePosition\", ...args);\n\n wsVault.on(\"UpdatePosition\", onUpdatePosition);\n wsVault.on(\"ClosePosition\", onClosePosition);\n wsVault.on(\"IncreasePosition\", onIncreasePosition);\n wsVault.on(\"DecreasePosition\", onDecreasePosition);\n wsPositionRouter.on(\"CancelIncreasePosition\", onCancelIncreasePosition);\n wsPositionRouter.on(\"CancelDecreasePosition\", onCancelDecreasePosition);\n\n return function cleanup() {\n wsVault.off(\"UpdatePosition\", onUpdatePosition);\n wsVault.off(\"ClosePosition\", onClosePosition);\n wsVault.off(\"IncreasePosition\", onIncreasePosition);\n wsVault.off(\"DecreasePosition\", onDecreasePosition);\n wsPositionRouter.off(\"CancelIncreasePosition\", onCancelIncreasePosition);\n wsPositionRouter.off(\"CancelDecreasePosition\", onCancelDecreasePosition);\n };\n }, [active, chainId, vaultAddress, positionRouterAddress]);\n\n return (\n <>\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n )}\n {!isHome && (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {/* \n \n \n */}\n \n \n \n \n \n \n {/* \n */}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n
\n \n
\n \n Allowed Slippage \n
\n \n setSlippageAmount(e.target.value)}\n />\n
\n %
\n \n \n Display PnL after fees \n \n
\n \n \n Include PnL in leverage display \n \n
\n {isDevelopment() && (\n \n \n Disable order validations \n \n
\n )}\n\n \n \n \n );\n}\n\nfunction App() {\n useScrollToTop();\n useEffect(() => {\n const defaultLanguage = localStorage.getItem(LANGUAGE_LOCALSTORAGE_KEY) || defaultLocale;\n dynamicActivate(defaultLanguage);\n }, []);\n return (\n