Skip to content

Commit

Permalink
update token table chart and add liquidity page
Browse files Browse the repository at this point in the history
  • Loading branch information
@foxier25
foxier25 committed Nov 27, 2024
1 parent eb5acfe commit 0d00d08
Show file tree
Hide file tree
Showing 7 changed files with 105 additions and 93 deletions.
9 changes: 6 additions & 3 deletions src/components/Tokens/TokenDetails/About.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,11 @@ export function AboutSection({ address, chainId, description, homepageUrl, twitt

//must remove
let displayTokenDescription = tokenDescription;
if (chainId == 200200 && tokenDescription?.includes("Wrapped LUX")) {
displayTokenDescription = tokenDescription?.replace(/LUX/g, 'ZOO')
if (tokenDescription?.includes("Wrapped LUX")) {
displayTokenDescription = tokenDescription?.replace(/Wrapped LUX/g, 'LUX')
}
if (chainId == 200200 && tokenDescription?.includes("LUX")) {
displayTokenDescription = displayTokenDescription?.replace(/LUX/g, 'ZOO')
}

const baseExplorerUrl = getChainInfo(chainId).explorer
Expand Down Expand Up @@ -120,4 +123,4 @@ export function AboutSection({ address, chainId, description, homepageUrl, twitt
</ResourcesContainer>
</AboutContainer>
)
}
}
1 change: 1 addition & 0 deletions src/components/Tokens/TokenDetails/ChartSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ function Chart({
// Initializes time period to global & maintain separate time period for subsequent changes
const timePeriod = useAtomValue(pageTimePeriodAtom)
const prices = usePriceHistory(tokenPriceQuery, timePeriod)
console.log(tokenPriceQuery, prices);

return (
<ChartContainer data-testid="chart-container">
Expand Down
6 changes: 4 additions & 2 deletions src/components/Tokens/TokenDetails/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import { isAddress } from 'utils'
import { OnChangeTimePeriod } from './ChartSection'
import InvalidTokenDetails from './InvalidTokenDetails'
import Swap from 'pages/Swap'
import { to } from 'make-plural'

const TokenSymbol = styled.span`
text-transform: uppercase;
Expand Down Expand Up @@ -173,6 +174,7 @@ export default function TokenDetails({
if (token === undefined || !address) {
return <InvalidTokenDetails chainName={address && getChainInfo(pageChainId)?.label} />
}

return (
<Trace
page={InterfacePageName.TOKEN_DETAILS_PAGE}
Expand All @@ -189,8 +191,8 @@ export default function TokenDetails({
<TokenNameCell>
<CurrencyLogo currency={token} size="32px" hideL2Icon={false} />
{/* must edit */}
{token.name ? (token?.chainId == 200200 && token?.symbol == "WLUX" ? "Wrapped ZOO" : token?.name) : <Trans>Name not found</Trans>}
<TokenSymbol>{token.symbol ? (token?.chainId == 200200 && token?.symbol == "WLUX" ? "WZOO" : token?.symbol) : <Trans>Symbol not found</Trans>}</TokenSymbol>
{token.name ? (token?.chainId == 200200 && token?.symbol == "WLUX" ? "ZOO" : (token?.chainId == 96369 && token?.symbol == "WLUX" ? 'LUX' : token?.name)) : <Trans>Name not found</Trans>}
<TokenSymbol>{token.symbol ? (token?.chainId == 200200 && token?.symbol == "WLUX" ? "ZOO" : (token?.chainId == 96369 && token?.symbol == "WLUX" ? 'LUX' : token?.symbol)) : <Trans>Symbol not found</Trans>}</TokenSymbol>
</TokenNameCell>
<TokenActions>
<ShareButton currency={token} />
Expand Down
164 changes: 85 additions & 79 deletions src/components/Tokens/TokenTable/TokenTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,8 +176,8 @@ export default function TokenTable() {
luxClient = zooNetClient;
}
const tokenAddresses = TOKENS_LUX_LIST.tokens
.filter((token) => token.chainId === CHAIN_NAME_TO_CHAIN_ID[chainName]) // Filter by chainId
.map((token) => token.address.toUpperCase()); // Extract the address
.filter((token) => token.chainId === CHAIN_NAME_TO_CHAIN_ID[chainName]) // Filter by chainId
.map((token) => token.address.toUpperCase()); // Extract the address
const { data: luxData, loading: luxLoading, refetch } = useQuery(getTokenInfoQuery, {
client: luxClient,
pollInterval: 5000,
Expand All @@ -192,95 +192,101 @@ export default function TokenTable() {
const calculateTransformedTokens = useCallback(() => {
refetch();
return luxData?.tokens
?.filter((token: any) => tokenAddresses.includes(token.id.toUpperCase())).map((token: any) => {
const tokenDayData = token.tokenDayData || [];
const tokenHourData = token.tokenHourData || [];
let nowPrice = 0;
let previousPrice = 0;
let mostRecentData = null;

if (duration == "HOUR") {
// Process hourly duration logic
mostRecentData = tokenHourData[0] || null;
nowPrice = mostRecentData ? mostRecentData.priceUSD : 0;
previousPrice = nowPrice;
if (tokenHourData[1]?.periodStartUnix && tokenHourData[1].periodStartUnix * 1000 <= new Date(currentHourTime).getTime() - 3600 * 1000 && tokenHourData[1].priceUSD != 0)
previousPrice = tokenHourData[1].priceUSD;
} else {
let i;
let daysPer;

mostRecentData = tokenDayData[0] || null;
nowPrice = mostRecentData ? mostRecentData.priceUSD : 0;
daysPer = 1;

if (duration == "DAY") {
daysPer = 1;
} else if (duration == "WEEK") {
daysPer = 7;
} else if (duration == "MONTH") {
daysPer = 31;
} else if (duration == "YEAR") {
daysPer = 365;
}

if (tokenDayData.length == 0) {
?.filter((token: any) => tokenAddresses.includes(token.id.toUpperCase())).map((token: any) => {
const tokenDayData = token.tokenDayData || [];
const tokenHourData = token.tokenHourData || [];
let nowPrice = 0;
let previousPrice = 0;
let mostRecentData = null;

if (duration == "HOUR") {
// Process hourly duration logic
mostRecentData = tokenHourData[0] || null;
nowPrice = mostRecentData ? mostRecentData.priceUSD : 0;
previousPrice = nowPrice;
if (tokenHourData[1]?.periodStartUnix && tokenHourData[1].periodStartUnix * 1000 <= new Date(currentHourTime).getTime() - 3600 * 1000 && tokenHourData[1].priceUSD != 0)
previousPrice = tokenHourData[1].priceUSD;
} else {
for (i = 0; i < tokenDayData.length; i++) {
if (tokenDayData[i]?.date && tokenDayData[i].date * 1000 <= new Date(todayDate).getTime() - daysPer * 24 * 60 * 60 * 1000) {
previousPrice = tokenDayData[i].priceUSD;
break;
}
let i;
let daysPer;

mostRecentData = tokenDayData[0] || null;
nowPrice = mostRecentData ? mostRecentData.priceUSD : 0;
daysPer = 1;

if (duration == "DAY") {
daysPer = 1;
} else if (duration == "WEEK") {
daysPer = 7;
} else if (duration == "MONTH") {
daysPer = 31;
} else if (duration == "YEAR") {
daysPer = 365;
}
if (previousPrice == 0) {
for (i = tokenDayData.length - 1; i >= 0; i--) {
if (tokenDayData[i].priceUSD != 0) {

if (tokenDayData.length == 0) {
previousPrice = nowPrice;
} else {
for (i = 0; i < tokenDayData.length; i++) {
if (tokenDayData[i]?.date && tokenDayData[i].date * 1000 <= new Date(todayDate).getTime() - daysPer * 24 * 60 * 60 * 1000) {
previousPrice = tokenDayData[i].priceUSD;
break;
}
}
if (previousPrice == 0) {
for (i = tokenDayData.length - 1; i >= 0; i--) {
if (tokenDayData[i].priceUSD != 0) {
previousPrice = tokenDayData[i].priceUSD;
break;
}
}
}
}
}
}

let priceChangePercent = previousPrice !== 0
? ((ethPriceUSD * parseFloat(token.derivedETH) - previousPrice) / previousPrice) * 100
: 0;

if (nowPrice == 0)
priceChangePercent = 0;

return {
name: token.name,
chain: chainName,
address: token.id,
symbol: token.symbol,
market: {
totalValueLocked: {
value: parseFloat(token.totalValueLockedUSD),
},
price: {
value: ethPriceUSD && token.derivedETH ? parseFloat(ethPriceUSD) * parseFloat(token.derivedETH) : 0,
},
pricePercentChange: {
value: priceChangePercent,
let priceChangePercent = previousPrice !== 0
? ((ethPriceUSD * parseFloat(token.derivedETH) - previousPrice) / previousPrice) * 100
: 0;

if (nowPrice == 0)
priceChangePercent = 0;

let tokenName = token.name;
let tokenSymbol = token.symbol;
if (token.name == 'Wrapped LUX') {
tokenName = tokenSymbol = 'LUX';
}

return {
name: tokenName,//token.name,
chain: chainName,
address: token.id,
symbol: tokenSymbol,//token.symbol,
market: {
totalValueLocked: {
value: parseFloat(token.totalValueLockedUSD),
},
price: {
value: ethPriceUSD && token.derivedETH ? parseFloat(ethPriceUSD) * parseFloat(token.derivedETH) : 0,
},
pricePercentChange: {
value: priceChangePercent,
},
volume: {
value: parseFloat(token.volumeUSD),
},
},
volume: {
value: parseFloat(token.volumeUSD),
project: {
__typename: 'TokenProject',
id: 'VG9rZW5Qcm9qZWN0OkVUSEVSRVVNXzB4YzAyYWFhMzliMjIzZmU4ZDBhMGU1YzRmMjdlYWQ5MDgzYzc1NmNjMl9XRVRI',
logoUrl: 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png',
},
},
project: {
__typename: 'TokenProject',
id: 'VG9rZW5Qcm9qZWN0OkVUSEVSRVVNXzB4YzAyYWFhMzliMjIzZmU4ZDBhMGU1YzRmMjdlYWQ5MDgzYzc1NmNjMl9XRVRI',
logoUrl: 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png',
},
chainId: 1,
decimals: 18,
isNative: true,
isToken: false,
};
});
chainId: 1,
decimals: 18,
isNative: true,
isToken: false,
};
});
}, [luxData, ethPriceUSD, duration]);

// Update transformed tokens when luxData, ethPriceUSD, or duration changes
Expand Down
8 changes: 4 additions & 4 deletions src/pages/AddLiquidity/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,7 @@ export default function AddLiquidity() {
if (idB === undefined) {
navigate(`/add/${idA}`)
} else {
navigate(`/add/${idA}/${idB}`)
navigate(`/add/${idB}/${idA}`)
}
},
[handleCurrencySelect, currencyIdB, navigate]
Expand All @@ -377,7 +377,7 @@ export default function AddLiquidity() {
if (idA === undefined) {
navigate(`/add/${idB}`)
} else {
navigate(`/add/${idA}/${idB}`)
navigate(`/add/${idB}/${idA}`)
}
},
[handleCurrencySelect, currencyIdA, navigate]
Expand All @@ -387,7 +387,7 @@ export default function AddLiquidity() {
(newFeeAmount: FeeAmount) => {
onLeftRangeInput('')
onRightRangeInput('')
navigate(`/add/${currencyIdA}/${currencyIdB}/${newFeeAmount}`)
navigate(`/add/${currencyIdB}/${currencyIdA}/${newFeeAmount}`)
},
[currencyIdA, currencyIdB, navigate, onLeftRangeInput, onRightRangeInput]
)
Expand Down Expand Up @@ -568,7 +568,7 @@ export default function AddLiquidity() {
onFieldAInput(formattedAmounts[Field.CURRENCY_B] ?? '')
}
navigate(
`/add/${currencyIdB as string}/${currencyIdA as string}${feeAmount ? '/' + feeAmount : ''}`
`/add/${currencyIdA as string}/${currencyIdB as string}${feeAmount ? '/' + feeAmount : ''}`
)
}}
/>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,9 +227,9 @@ export default function App() {
</Route>
<Route path="add" element={<RedirectDuplicateTokenIds />}>
{/* this is workaround since react-router-dom v6 doesn't support optional parameters any more */}
<Route path=":currencyIdA" />
<Route path=":currencyIdA/:currencyIdB" />
<Route path=":currencyIdA/:currencyIdB/:feeAmount" />
<Route path=":currencyIdB" />
<Route path=":currencyIdB/:currencyIdA" />
<Route path=":currencyIdB/:currencyIdA/:feeAmount" />
</Route>

<Route path="increase" element={<AddLiquidity />}>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/TokenDetails/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ function getQueryParams(timePeriod: any) {
case 2:
return [2, 168];
case 3:
return [30, 2];
return [2, 720];
case 4:
return [365, 2];
}
Expand Down Expand Up @@ -204,7 +204,7 @@ export default function TokenDetailsPage() {
id: "QW1vdW50OjFfVVNE", // Encoded amount ID
value: parseFloat(ethPriceUSD) * parseFloat(ethPrice),
},
priceHistory: timePeriod < 3 ? tokenHourData : tokenDayData,
priceHistory: timePeriod < 4 ? tokenHourData : tokenDayData,
},
},
};
Expand Down

0 comments on commit 0d00d08

Please sign in to comment.