apollo-boost#from JavaScript Examples
The following examples show how to use
apollo-boost#from.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Index.js From acy-dex-interface with MIT License | 4 votes |
|
Swap = props => {
const { savedIsPnlInLeverage, setSavedIsPnlInLeverage, savedSlippageAmount, pendingTxns, setPendingTxns } = props
const { account, library, chainId, farmSetting: { API_URL: apiUrlPrefix }, globalSettings, } = useConstantLoader();
// console.log("this is constantInstance ", constantInstance);
const supportedTokens = constantInstance.perpetuals.tokenList;
const [isConfirming, setIsConfirming] = useState(false);
const [isPendingConfirmation, setIsPendingConfirmation] = useState(false);
const [pricePoint, setPricePoint] = useState(0);
const [pastToken1, setPastToken1] = useState('ETH');
const [pastToken0, setPastToken0] = useState('USDC');
const [isReceiptObtained, setIsReceiptObtained] = useState(false);
const [routeData, setRouteData] = useState([]);
const [format, setFormat] = useState('h:mm:ss a');
const [activeToken1, setActiveToken1] = useState(supportedTokens[1]);
const [activeToken0, setActiveToken0] = useState(supportedTokens[0]);
const [activeTimeScale, setActiveTimeScale] = useState("5m");
const [activeAbsoluteChange, setActiveAbsoluteChange] = useState('+0.00');
const [activeRate, setActiveRate] = useState('Not available');
const [range, setRange] = useState('1D');
const [chartData, setChartData] = useState([]);
const [alphaTable, setAlphaTable] = useState('Line');
const [visibleLoading, setVisibleLoading] = useState(false);
const [visible, setVisible] = useState(false);
const [visibleConfirmOrder, setVisibleConfirmOrder] = useState(false);
const [transactionList, setTransactionList] = useState([]);
const [tableLoading, setTableLoading] = useState(true);
const [transactionNum, setTransactionNum] = useState(0);
// this are new states for PERPETUAL
const [tableContent, setTableContent] = useState(POSITIONS);
const [positionsData, setPositionsData] = useState([]);
const { active, activate } = useWeb3React();
const [placement, setPlacement] = useState('5m');
const [high24, setHigh24] = useState(0);
const [low24, setLow24] = useState(0);
const [deltaPrice24, setDeltaPrice24] = useState(0);
const [percentage24, setPercentage24] = useState(0);
const [currentAveragePrice, setCurrentAveragePrice] = useState(0);
const tokens = supportedTokens;
const defaultTokenSelection = useMemo(() => ({
["Pool"]: {
from: AddressZero,
to: getTokenBySymbol(tokens, ARBITRUM_DEFAULT_COLLATERAL_SYMBOL).address,
// to: getTokenBySymbol(tokens, 'BTC').address,
},
["Long"]: {
from: AddressZero,
to: AddressZero,
},
["Short"]: {
from: getTokenBySymbol(tokens, ARBITRUM_DEFAULT_COLLATERAL_SYMBOL).address,
// from: getTokenBySymbol(tokens, 'BTC').address,
to: AddressZero,
}
}), [chainId, ARBITRUM_DEFAULT_COLLATERAL_SYMBOL])
// }), [chainId])
const [tokenSelection, setTokenSelection] = useLocalStorageByChainId(chainId, "Exchange-token-selection-v2", defaultTokenSelection)
const [swapOption, setSwapOption] = useLocalStorageByChainId(chainId, 'Swap-option-v2', "Long")
const setFromTokenAddress = useCallback((selectedSwapOption, address) => {
const newTokenSelection = JSON.parse(JSON.stringify(tokenSelection))
newTokenSelection[selectedSwapOption].from = address
setTokenSelection(newTokenSelection)
}, [tokenSelection, setTokenSelection])
const setToTokenAddress = useCallback((selectedSwapOption, address) => {
const newTokenSelection = JSON.parse(JSON.stringify(tokenSelection))
newTokenSelection[selectedSwapOption].to = address
setTokenSelection(newTokenSelection)
}, [tokenSelection, setTokenSelection])
const fromTokenAddress = tokenSelection[swapOption].from
const toTokenAddress = tokenSelection[swapOption].to
const { perpetuals } = useConstantLoader()
const readerAddress = perpetuals.getContract("Reader")
const vaultAddress = perpetuals.getContract("Vault")
const usdgAddress = perpetuals.getContract("USDG")
const nativeTokenAddress = perpetuals.getContract("NATIVE_TOKEN")
const routerAddress = perpetuals.getContract("Router")
const glpManagerAddress = perpetuals.getContract("GlpManager")
const glpAddress = perpetuals.getContract("GLP")
const orderBookAddress = perpetuals.getContract("OrderBook")
//---------- FOR TESTING
const whitelistedTokens = supportedTokens.filter(token => token.symbol !== "USDG");
const whitelistedTokenAddresses = whitelistedTokens.map(token => token.address);
const positionQuery = getPositionQuery(whitelistedTokens, nativeTokenAddress)
const { data: vaultTokenInfo, mutate: updateVaultTokenInfo } = useSWR([chainId, readerAddress, "getFullVaultTokenInfo"], {
fetcher: fetcher(library, Reader, [vaultAddress, nativeTokenAddress, expandDecimals(1, 18), whitelistedTokenAddresses]),
})
const { data: positionData, mutate: updatePositionData } = useSWR([chainId, readerAddress, "getPositions", vaultAddress, account], {
fetcher: fetcher(library, Reader, [positionQuery.collateralTokens, positionQuery.indexTokens, positionQuery.isLong]),
})
const tokenAddresses = tokens.map(token => token.address)
const { data: tokenBalances, mutate: updateTokenBalances } = useSWR([chainId, readerAddress, "getTokenBalances", account], {
fetcher: fetcher(library, Reader, [tokenAddresses]),
})
const { data: fundingRateInfo, mutate: updateFundingRateInfo } = useSWR(account && [chainId, readerAddress, "getFundingRates"], {
fetcher: fetcher(library, Reader, [vaultAddress, nativeTokenAddress, whitelistedTokenAddresses]),
})
const { data: totalTokenWeights, mutate: updateTotalTokenWeights } = useSWR([chainId, vaultAddress, "totalTokenWeights"], {
fetcher: fetcher(library, Vault),
})
const { data: usdgSupply, mutate: updateUsdgSupply } = useSWR([chainId, usdgAddress, "totalSupply"], {
fetcher: fetcher(library, Glp),
})
const { data: orderBookApproved, mutate: updateOrderBookApproved } = useSWR(account && [chainId, routerAddress, "approvedPlugins", account, orderBookAddress], {
fetcher: fetcher(library, Router)
});
const infoTokens = getInfoTokens(tokens, tokenBalances, whitelistedTokens, vaultTokenInfo, fundingRateInfo);
const { positions, positionsMap } = getPositions(chainId, positionQuery, positionData, infoTokens, true, nativeTokenAddress);
const flagOrdersEnabled = true;
const [orders] = useAccountOrders(flagOrdersEnabled);
const [isWaitingForPluginApproval, setIsWaitingForPluginApproval] = useState(false);
const [isPluginApproving, setIsPluginApproving] = useState(false);
// for stats alp price
const NOW = Math.floor(Date.now() / 1000)
const DEFAULT_GROUP_PERIOD = 86400
const [groupPeriod, setGroupPeriod] = useState(DEFAULT_GROUP_PERIOD)
const params = { undefined, NOW, groupPeriod }
const [feesData, feesLoading] = useFeesData(params)
const [alpData, alpLoading] = useAlpData(params)
const [alpPriceData, alpPriceDataLoading] = useAlpPriceData(alpData, feesData, params)
const approveOrderBook = () => {
setIsPluginApproving(true)
return approvePlugin(chainId, orderBookAddress, {
library,
pendingTxns,
setPendingTxns
}).then(() => {
setIsWaitingForPluginApproval(true)
updateOrderBookApproved(undefined, true);
}).finally(() => {
setIsPluginApproving(false)
})
}
//---------
useEffect(() => {
if (!supportedTokens) return
// reset on chainId change => supportedTokens change
setPricePoint(0);
setPastToken1('ETH');
setPastToken0('USDC');
setIsReceiptObtained(false);
setRouteData([]);
setFormat('h:mm:ss a');
setActiveToken1(supportedTokens[1]);
setActiveToken0(supportedTokens[0]);
setActiveAbsoluteChange('+0.00');
setActiveRate('Not available');
setRange('1D');
setChartData([]);
setAlphaTable('Line');
setVisibleLoading(false);
setVisible(false);
setVisibleConfirmOrder(false);
setTransactionList([]);
setTableLoading(true);
setTransactionNum(0);
for (let item of samplePositionsData) {
item['collateralToken'] = findTokenWithSymbol(item.collateralTokenSymbol);
item['indexToken'] = findTokenWithSymbol(item.indexTokenSymbol);
item['liqPrice'] = getLiquidationPrice(item);
}
setPositionsData(samplePositionsData);
}, [chainId])
useEffect(() => {
library.on('block', (blockNum) => {
updateVaultTokenInfo()
updateTokenBalances()
updatePositionData()
updateFundingRateInfo()
updateTotalTokenWeights()
updateUsdgSupply()
updateOrderBookApproved()
})
return () => {
library.removeAllListeners('block');
}
}, [library])
const refContainer = useRef();
refContainer.current = transactionList;
// connect to provider, listen for wallet to connect
const connectWalletByLocalStorage = useConnectWallet();
useEffect(() => {
if (!account) {
connectWalletByLocalStorage()
}
}, [account]);
// 时间段选择
const onhandPeriodTimeChoose = periodTimeName => {
let pt;
switch (periodTimeName) {
case '24h': pt = '1D'; break;
case 'Max': pt = '1M'; break;
}
let _format = 'h:mm:ss a';
switch (pt) {
case '1D':
_format = 'h:mm:ss a';
break;
case '1W':
_format = 'ha DD MMM';
break;
case '1M':
_format = 'DD/MM';
break;
default:
_format = 'h:mm:ss a';
}
setRange(pt);
setFormat(_format);
};
// useEffect(async () => {
// // dispatch({
// // type: "swap/updateTokens",
// // payload: {
// // token0: activeToken0,
// // token1: activeToken1
// // }
// // });
// console.log("hereim", activeToken1);
// // setChartData(await getKChartData(activeToken1.symbol, "56", "1h", "1650234954", "1650378658", "chainlink"))
// }, [activeToken0, activeToken1]);
const getRoutePrice = (token0Address, token1Address) => {
if (!token0Address || !token1Address) return;
axios
.post(
`${apiUrlPrefix}/chart/swap?token0=${token0Address}&token1=${token1Address}&range=1D`
)
.then(data => {
});
}
const getCurrentTime = () => {
let currentTime = Math.floor(new Date().getTime() / 1000);
return currentTime;
}
const getFromTime = (currentTime) => {
let fromTime = currentTime - 100 * 24 * 60 * 60;
// console.log("hereim from time", fromTime);
return fromTime;
}
// useEffect(async () => {
// let currentTime = getCurrentTime();
// let previous24 = currentTime - 24*60*60;
// console.log("hereim time", previous24, currentTime);
// let data24 = await getKChartData(activeToken1.symbol, "56", "1d", previous24.toString(), currentTime.toString(), "chainlink");
// console.log("hereim data24", data24);
// let high24 = 0;
// let low24 = 0;
// let deltaPrice24 = 0;
// let currentAveragePrice = 0;
// let percentage = 0;
// if (data24.length > 1) {
// high24 = Math.round(data24[0].high * 100) / 100;
// low24 = Math.round(data24[0].low * 100) / 100;
// deltaPrice24 = Math.round(data24[0].open * 100) / 100;
// currentAveragePrice = ((high24+low24)/2);
// percentage = Math.round((currentAveragePrice - deltaPrice24) *100 / currentAveragePrice *100)/100;
// }
// setHigh24(high24);
// setLow24(low24);
// setDeltaPrice24(deltaPrice24);
// setPercentage24(percentage);
// }, [activeToken1])
useEffect(async () => {
let currentTime = getCurrentTime();
let previousTime = currentTime - 24 * 60 * 60;
let data24 = await getKChartData(activeToken1.symbol, "56", "5m", previousTime.toString(), currentTime.toString(), "chainlink");
let high24 = 0;
let low24 = 0;
let deltaPrice24 = 0;
let percentage = 0;
let average = 0;
let highArr = [];
let lowArr = [];
if (data24.length > 0) {
for (let i = 1; i < data24.length; i++) {
highArr.push(data24[i].high);
lowArr.push(data24[i].low);
}
high24 = Math.max(...highArr);
low24 = Math.min(...lowArr);
high24 = Math.round(high24 * 100) / 100;
low24 = Math.round(low24 * 100) / 100;
deltaPrice24 = Math.round(data24[0].open * 100) / 100;
average = Math.round(((high24 + low24) / 2) * 100) / 100;
percentage = Math.round((average - deltaPrice24) * 100 / average * 100) / 100;
}
setHigh24(high24);
setLow24(low24);
setDeltaPrice24(deltaPrice24);
setPercentage24(percentage);
setCurrentAveragePrice(average);
// console.log("hereim show 24 cal", "high24:", high24, " low24:", low24, " average:", currentAveragePrice, " delta:", deltaPrice24);
}, [activeToken1])
const lineTitleRender = () => {
// let token0logo = null;
// let token1logo = null;
// for (let j = 0; j < supportedTokens.length; j++) {
// if (activeToken0.symbol === supportedTokens[j].symbol) {
// token0logo = supportedTokens[j].logoURI;
// }
// if (activeToken1.symbol === supportedTokens[j].symbol) {
// token1logo = supportedTokens[j].logoURI;
// }
// }
// console.log("hereim after await", high24 );
// const chartToken = getTokenInfo(infoTokens, activeToken1.address)
// const swapTokenPosition = () => {
// const tempSwapToken = activeToken0;
// setActiveToken0(activeToken1);
// setActiveToken1(tempSwapToken);
// }
// const onSelectToken = (token) => {
// console.log ("tmp", token)
// const tmp = getTokenInfo(infoTokens, token.address)
// //setActiveToken0(tmp)
// setActiveToken1(tmp, token.address)
// }
return [
// <div style={{ width: 50%}}>
<div className={styles.maintitle}>
<div>
<div className={styles.secondarytitle}> 24h Change </div>
<div className={styles.lighttitle}> {percentage24} % </div>
</div>
<div>
<div className={styles.secondarytitle}> 24h High </div>
<div className={styles.lighttitle}> $ {high24} </div>
</div>
<div>
<div className={styles.secondarytitle}> 24h Low </div>
<div className={styles.lighttitle}> $ {low24} </div>
</div>
</div>
];
};
const selectTime = pt => {
const dateSwitchFunctions = {
Line: () => {
setAlphaTable('Line');
},
Bar: () => {
setAlphaTable('Bar');
},
};
dateSwitchFunctions[pt]();
};
const onClickDropdown = e => {
// console.log("hereim dropdown", e.key);
setActiveToken1((supportedTokens.filter(ele => ele.symbol == e))[0]);
};
// 选择Coin
const onClickCoin = () => {
setVisible(true);
};
const onCancel = () => {
setVisible(false);
};
const onHandModalConfirmOrder = falg => {
setVisibleConfirmOrder(!!falg);
};
const getTokenSymbol = async (address, library, account) => {
const tokenContract = getTokenContract(address, library, account);
return tokenContract.symbol();
};
const getTokenDecimal = async (address, library, account) => {
const tokenContract = getTokenContract(address, library, account);
return tokenContract.decimals();
};
const updateTransactionList = async (receipt) => {
setTableLoading(true);
appendNewSwapTx(refContainer.current, receipt, account, library).then((data) => {
if (data && data.length > 0) setTransactionList(data);
setTableLoading(false);
})
}
const onGetReceipt = async (receipt, library, account) => {
updateTransactionList(receipt);
};
const {
isMobile,
transaction: { transactions },
swap: { token0, token1 },
dispatch
} = props;
const updateActiveChartData = (data, dataIndex) => {
const prevData = dataIndex === 0 ? 0 : chartData[dataIndex - 1][1];
const absoluteChange = (dataIndex === 0 ? 0 : data - prevData).toFixed(3);
const formattedAbsChange = absoluteChange > 0 ? "+" + absoluteChange : absoluteChange;
setActiveRate(data.toFixed(3));
setActiveAbsoluteChange(formattedAbsChange);
}
useEffect(() => {
if (!chartData.length)
return;
const lastDataIndex = chartData.length - 1;
updateActiveChartData(chartData[lastDataIndex][1], lastDataIndex);
}, [chartData])
// Glp Swap
const [isBuying, setIsBuying] = useState(true)
const [showTokenTable, setShowTokenTable] = useState(false)
const [swapTokenAddress, setSwapTokenAddress] = useState(tokens[0].address)
const [isWaitingForApproval, setIsWaitingForApproval] = useState(false)
// const history = useHistory()
// useEffect(() => {
// const hash = history.location.hash.replace('#', '')
// const buying = !(hash === 'redeem')
// setIsBuying(buying)
// }, [history.location.hash])
const glp_tokenList = whitelistedTokens.filter(t => !t.isWrapped)
// const tokensForBalanceAndSupplyQuery = [stakedGlpTrackerAddress, usdgAddress]
// const { data: balancesAndSupplies, mutate: updateBalancesAndSupplies } = useSWR([chainId, readerAddress, "getTokenBalancesWithSupplies", account || PLACEHOLDER_ACCOUNT], {
// fetcher: fetcher(library, ReaderV2, [tokensForBalanceAndSupplyQuery]),
// })
// const { data: aums, mutate: updateAums } = useSWR([chainId, glpManagerAddress, "getAums"], {
// fetcher: fetcher(library, GlpManager),
// })
const { data: glpBalance, mutate: updateGlpBalance } = useSWR([chainId, glpAddress, "balanceOf", account || PLACEHOLDER_ACCOUNT], {
fetcher: fetcher(library, Glp),
})
// const { data: glpBalance, mutate: updateGlpBalance } = useSWR([chainId, feeGlpTrackerAddress, "stakedAmounts", account || PLACEHOLDER_ACCOUNT], {
// fetcher: fetcher(library, RewardTracker),
// })
const [glpValue, setGlpValue] = useState("")
const glpAmount = parseValue(glpValue, GLP_DECIMALS)
const { data: glpSupply, mutate: updateGlpSupply } = useSWR([chainId, glpAddress, "totalSupply"], {
fetcher: fetcher(library, Glp),
})
// todo: usdgSupply -> vaultUtil
// const { data: glpUsdgSupply, mutate: updateGlpUsdgSupply } = useSWR([chainId, vaultAddress, "vaultUtils"], {
// fetcher: fetcher(library, Vault),
// })
const { data: glpUsdgSupply, mutate: updateGlpUsdgSupply } = useSWR([chainId, usdgAddress, "totalSupply"], {
fetcher: fetcher(library, Usdg),
})
// const glpSupply = balancesAndSupplies ? balancesAndSupplies[1] : bigNumberify(0)
// const glp_usdgSupply = balancesAndSupplies ? balancesAndSupplies[3] : bigNumberify(0)
// let aum
// if (aums && aums.length > 0) {
// aum = isBuying ? aums[0] : aums[1]
// }
const { data: aumInUsdg, mutate: updateAumInUsdg } = useSWR([chainId, glpManagerAddress, "getAumInUsda", true], {
fetcher: fetcher(library, GlpManager),
})
const glpPrice = (aumInUsdg && aumInUsdg.gt(0) && glpSupply && glpSupply.gt(0)) ? aumInUsdg.mul(expandDecimals(1, GLP_DECIMALS)).div(glpSupply) : expandDecimals(1, USD_DECIMALS)
// const glpPrice = (aum && aum.gt(0) && glpSupply.gt(0)) ? aum.mul(expandDecimals(1, GLP_DECIMALS)).div(glpSupply) : expandDecimals(1, USD_DECIMALS)
let glpBalanceUsd
if (glpBalance) {
glpBalanceUsd = glpBalance.mul(glpPrice).div(expandDecimals(1, GLP_DECIMALS))
}
const glpSupplyUsd = glpSupply ? glpSupply.mul(glpPrice).div(expandDecimals(1, GLP_DECIMALS)) : bigNumberify(0)
const onChangeMode = (mode) => {
if (mode === "Pool") {
setShowTokenTable(true)
} else {
setShowTokenTable(false)
}
}
const { Option } = Select;
const [updatingKchartsFlag, setUpdatingKchartsFlag] = useState(false);
//charttokenselection
const { Header, Footer, Sider, Content } = Layout;
// const tokenPlacements = ['BTC', 'ETH'];
// const tokenPlacementChange = e => {
// console.log("hereim set placement", e)
// setActiveToken1((supportedTokens.filter(ele => ele.symbol == e.target.value))[0]);
// // setPlacement(e.target.value);
// // setActiveTimeScale(e.target.value);
// };
// const tokenPlacementChange = value => {
// console.log("hereim set placement", value)
// // setActiveToken1((supportedTokens.filter(ele => ele.symbol == e.target.value))[0]);
// // setPlacement(e.target.value);
// // setActiveTimeScale(e.target.value);
// };
const onClickSetActiveToken = (e) => {
console.log("hereim see click token", e)
setActiveToken1((supportedTokens.filter(ele => ele.symbol == e))[0]);
}
const chartPanes = [
{ title: 'BTC', content: 'BTC', key: 'BTC', closable: false },
{ title: 'ETH', content: 'ETH', key: 'ETH' },
// { title: 'Tab 3', content: 'Content of Tab 3', key: '3'},
];
const [activeKey, setActiveKey] = useState(chartPanes[0].key);
const [panes, setPanes] = useState(chartPanes);
const newTabIndex = useRef(0);
const onChange = (newActiveKey) => {
setActiveKey(newActiveKey);
setActiveToken1((supportedTokens.filter(ele => ele.symbol == newActiveKey))[0])
};
const add = () => {
const newActiveKey = `newTab${newTabIndex.current++}`;
const newPanes = [...panes];
newPanes.push({
title: 'New Tab',
content: 'Content of new Tab',
key: newActiveKey,
});
setPanes(newPanes);
setActiveKey(newActiveKey);
};
const remove = (targetKey) => {
let newActiveKey = activeKey;
let lastIndex = -1;
panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const newPanes = panes.filter((pane) => pane.key !== targetKey);
if (newPanes.length && newActiveKey === targetKey) {
if (lastIndex >= 0) {
newActiveKey = newPanes[lastIndex].key;
} else {
newActiveKey = newPanes[0].key;
}
}
setPanes(newPanes);
setActiveKey(newActiveKey);
};
const onEdit = (targetKey, action) => {
if (action === 'add') {
add();
} else {
remove(targetKey);
}
};
// let options = supportedTokens;
// const menu = (
// <div className={styles.tokenSelector}>
// <Menu onClick={onClickDropdown}>
// {
// // supportedTokens.filter(token => !token.symbol !== 'USDT').map((option) => (
// // <Menu.Item key={option.symbol}>
// // <span>{option.symbol} / USD</span>
// // {/* for showing before hover */}
// // </Menu.Item>
// // ))
// }
// </Menu>
// </div>
// );
// function onChange (value) {
// // console.log("hereim onchange",value);
// setActiveToken1(option);
// }
const [kChartTab, setKChartTab] = useState("BTC")
const kChartTabs = ["BTC", "ETH"]
const selectChart = item => {
setKChartTab(item)
onClickSetActiveToken(item)
}
return (
<PageHeaderWrapper>
<div className={styles.main}>
<div className={styles.rowFlexContainer}>
{ swapOption != "Pool" && (
<div style={{ padding: "0 0 3rem" }}>
<div className={styles.chartTokenSelectorTab}>
<PerpetualTabs
option={kChartTab}
options={kChartTabs}
onChange={selectChart}
/>
</div>
<div className={styles.kchartBox}>
<div style={{ backgroundColor: '#0E0304', height: "450px", display: "flex", flexDirection: "column", marginBottom:"30px" }}>
<div className={`${styles.colItem} ${styles.priceChart}`} style={{ flex: 1 }}>
{
// currentAveragePrice === 0 ?
// <Spin/>
// // : <KChart activeToken0={activeToken0} activeToken1={activeToken1} activeTimeScale={activeTimeScale} currentAveragePrice={currentAveragePrice} />
// :
<ExchangeTVChart
swapOption={swapOption}
fromTokenAddress={fromTokenAddress}
toTokenAddress={toTokenAddress}
infoTokens={infoTokens}
chainId={chainId}
positions={positions}
// savedShouldShowPositionLines,
orders={orders}
setToTokenAddress={setToTokenAddress}
/>
}
</div>
</div>
</div>
</div>
)}
{ swapOption == 'Pool' && (
<div>
<div className={styles.chart}>
<ChartWrapper
title="Alp Price Comparison"
loading={alpLoading}
data={alpPriceData}
// csvFields={[{ key: 'syntheticPrice' }, { key: 'alpPrice' }, { key: 'alpPlusFees' }, { key: 'lpBtcPrice' }, { key: 'lpEthPrice' }]}
>
<ResponsiveContainer width="100%" height={CHART_HEIGHT}>
<LineChart data={alpPriceData} syncId="syncAlp">
<CartesianGrid strokeDasharray="3 3" stroke='#333333' />
<XAxis dataKey="timestamp" tickFormatter={tooltipLabelFormatter} minTickGap={30} />
<YAxis dataKey="performanceSyntheticCollectedFees" domain={[60, 210]} unit="%" tickFormatter={yaxisFormatterNumber} width={YAXIS_WIDTH} />
<YAxis dataKey="alpPrice" domain={[0.4, 1.7]} orientation="right" yAxisId="right" tickFormatter={yaxisFormatterNumber} width={YAXIS_WIDTH} />
<Tooltip
formatter={tooltipFormatterNumber}
labelFormatter={tooltipLabelFormatter}
contentStyle={{ textAlign: 'left' }}
/>
<Legend />
{/* <Line dot={false} isAnimationActive={false} type="monotone" unit="%" strokeWidth={2} dataKey="performanceLpBtcCollectedFees" name="% LP BTC-USDC (w/ fees)" stroke={COLORS[2]} />
<Line dot={false} isAnimationActive={false} type="monotone" unit="%" strokeWidth={2} dataKey="performanceLpEthCollectedFees" name="% LP ETH-USDC (w/ fees)" stroke={COLORS[4]} />
<Line dot={false} isAnimationActive={false} type="monotone" unit="%" strokeWidth={2} dataKey="performanceSyntheticCollectedFees" name="% Index (w/ fees)" stroke={COLORS[0]} /> */}
{/* <Line isAnimationActive={false} type="monotone" unit="$" strokeWidth={1} yAxisId="right" dot={false} dataKey="syntheticPrice" name="Index Price" stroke={COLORS[2]} /> */}
<Line isAnimationActive={false} type="monotone" unit="$" strokeWidth={1} yAxisId="right" dot={false} dataKey="alpPrice" name="Alp Price" stroke={COLORS[1]} strokeWidth={1} />
<Line isAnimationActive={false} type="monotone" unit="$" strokeWidth={1} yAxisId="right" dot={false} dataKey="alpPlusFees" name="Alp w/ fees" stroke={COLORS[3]} strokeWidth={1} />
{/* <Line isAnimationActive={false} type="monotone" unit="$" strokeWidth={1} yAxisId="right" dot={false} dataKey="lpBtcPrice" name="LP BTC-USDC" stroke={COLORS[2]} />
<Line isAnimationActive={false} type="monotone" unit="$" strokeWidth={1} yAxisId="right" dot={false} dataKey="lpEthPrice" name="LP ETH-USDC" stroke={COLORS[4]} /> */}
</LineChart>
</ResponsiveContainer>
<div className="chart-description">
<p>
<span style={{ color: COLORS[3] }}>Alp with fees</span> is based on ALP share of fees received<br />
{/* <span style={{ color: COLORS[0] }}>% of Index (with fees)</span> is Alp with fees / Index Price * 100<br />
<span style={{ color: COLORS[4] }}>% of LP ETH-USDC (with fees)</span> is Alp Price with fees / LP ETH-USDC * 100<br />
<span style={{ color: COLORS[2] }}>Index Price</span> is 25% BTC, 25% ETH, 50% USDC */}
</p>
</div>
</ChartWrapper>
</div>
</div>
)}
{/* Position table */}
{!showTokenTable ?
<>
<AcyPerpetualCard style={{ backgroundColor: '#0E0304', padding: '10px' }}>
<div className={`${styles.colItem} ${styles.priceChart}`}>
<div className={`${styles.colItem}`}>
<a className={`${styles.colItem} ${styles.optionTab}`} onClick={() => { setTableContent(POSITIONS) }}>Positions</a>
<a className={`${styles.colItem} ${styles.optionTab}`} onClick={() => { setTableContent(ORDERS) }}>Orders</a>
<a className={`${styles.colItem} ${styles.optionTab}`} onClick={() => { setTableContent(ACTIONS) }}>Actions </a>
</div>
<div className={styles.positionsTable}>
{tableContent == POSITIONS && (
<PositionsTable
isMobile={isMobile}
dataSource={positions}
setPendingTxns={setPendingTxns}
infoTokens={infoTokens}
/>
)}
{tableContent == ORDERS && (
<OrderTable
isMobile={isMobile}
dataSource={orders}
infoTokens={infoTokens}
/>
)}
{tableContent == ACTIONS && (
<ActionHistoryTable
isMobile={isMobile}
dataSource={positionsData}
/>
)}
</div>
</div>
</AcyPerpetualCard>
</> :
<>
<GlpSwapTokenTable
isBuying={isBuying}
setIsBuying={setIsBuying}
setSwapTokenAddress={setSwapTokenAddress}
setIsWaitingForApproval={setIsWaitingForApproval}
tokenList={glp_tokenList}
infoTokens={infoTokens}
glpAmount={glpAmount}
glpPrice={glpPrice}
usdgSupply={glpUsdgSupply}
totalTokenWeights={totalTokenWeights}
/>
</>}
{/* <div className={styles.rowFlexContainer}>
<div className={`${styles.colItem}`}>
<a className={`${styles.colItem} ${styles.optionTab}`} onClick={()=>{setTableContent(POSITIONS)}}>Positions</a>
<a className={`${styles.colItem} ${styles.optionTab}`} onClick={()=>{setTableContent(ORDERS)}}>Orders</a>
<a className={`${styles.colItem} ${styles.optionTab}`} onClick={()=>{setTableContent(ACTIONS)}}>Actions </a>
</div>
</div> */}
{/* <div className={styles.rowFlexContainer}>
<div className={`${styles.colItem} ${styles.priceChart}`}>
<div className={styles.positionsTable}>
<RenderTable/>
</div>
</div>
<div className={styles.exchangeItem}>
</div>
</div> */}
<AcyModal onCancel={onCancel} width={600} visible={visible}>
<div className={styles.title}>
<AcyIcon name="back" /> Select a token
</div>
<div className={styles.search}>
<AcyInput
placeholder="Enter the token symbol or address"
suffix={<AcyIcon name="search" />}
/>
</div>
<div className={styles.coinList}>
<AcyTabs>
<AcyTabPane tab="All" key="1">
<AcyCoinItem />
<AcyCoinItem />
<AcyCoinItem />
<AcyCoinItem />
</AcyTabPane>
<AcyTabPane tab="Favorite" key="2" />
<AcyTabPane tab="Index" key="3" />
<AcyTabPane tab="Synth" key="4" />
</AcyTabs>
</div>
</AcyModal>
<AcyApprove
onCancel={() => setVisibleLoading(false)}
visible={visibleLoading}
/>
</div>
{/* <div className={styles.rowFlexContainer}> */}
{/* Perpetual Component */}
<div className={styles.perpetualComponent}>
<PerpetualComponent
swapOption={swapOption}
setSwapOption={setSwapOption}
activeToken0={activeToken0}
setActiveToken0={setActiveToken0}
activeToken1={activeToken1}
setActiveToken1={setActiveToken1}
fromTokenAddress={fromTokenAddress}
setFromTokenAddress={setFromTokenAddress}
toTokenAddress={toTokenAddress}
setToTokenAddress={setToTokenAddress}
positionsMap={positionsMap}
pendingTxns={pendingTxns}
setPendingTxns={setPendingTxns}
savedIsPnlInLeverage={savedIsPnlInLeverage}
approveOrderBook={approveOrderBook}
isWaitingForPluginApproval={isWaitingForPluginApproval}
setIsWaitingForPluginApproval={setIsWaitingForPluginApproval}
isPluginApproving={isPluginApproving}
isConfirming={isConfirming}
setIsConfirming={setIsConfirming}
isPendingConfirmation={isPendingConfirmation}
setIsPendingConfirmation={setIsPendingConfirmation}
isBuying={isBuying}
setIsBuying={setIsBuying}
onChangeMode={onChangeMode}
swapTokenAddress={swapTokenAddress}
setSwapTokenAddress={setSwapTokenAddress}
glp_isWaitingForApproval={isWaitingForApproval}
glp_setIsWaitingForApproval={setIsWaitingForApproval}
orders={orders}
/>
</div>
</div>
{/* </div> */}
</PageHeaderWrapper>
);
}
