From 8bc8470f3a4506af29fa7d95e039eb4065a8f749 Mon Sep 17 00:00:00 2001 From: Nnamdi Okeke Date: Sun, 21 Jul 2024 12:51:11 +0100 Subject: [PATCH] bug fix for the token page --- lib/stacks-api.ts | 2 +- pages/portfolio/index.tsx | 16 ++-- pages/tokens/index.tsx | 169 ++++++++++++++++++++++---------------- 3 files changed, 110 insertions(+), 77 deletions(-) diff --git a/lib/stacks-api.ts b/lib/stacks-api.ts index 35bb897f..a5ef9a3c 100644 --- a/lib/stacks-api.ts +++ b/lib/stacks-api.ts @@ -1020,7 +1020,7 @@ export async function getCreaturePower( } export async function getClaimableAmount(creatureId: number, sender: string) { - const response = await scApi.callReadOnlyFunction({ + const response = await scApi?.callReadOnlyFunction({ contractAddress: 'SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS', contractName: 'creatures-kit', functionName: 'get-untapped-amount', diff --git a/pages/portfolio/index.tsx b/pages/portfolio/index.tsx index 2048f9ff..1294a4bc 100644 --- a/pages/portfolio/index.tsx +++ b/pages/portfolio/index.tsx @@ -207,10 +207,10 @@ function TokenBalances({ data }: Props) { const tokenBalances = tokenList.map(token => { const address = token.proxy ? token.proxy.address : token.address; const factor = token.proxy ? token.proxy.factor : 1; - const balance = getBalanceByKey(`${token.address}::${token.ft}`) + const balance = getBalanceByKey(`${token.address}::${token.ft}`); const tokenData = tokens.find((t: any) => t.contractAddress === address); const amount = balance?.balance / (Math.pow(10, token.decimals) || 1); - const totalValueUSD = amount * Number(tokenData.price || 0) * factor; + const totalValueUSD = amount * Number(tokenData?.price || 0) * factor; return { ...token, @@ -229,8 +229,12 @@ function TokenBalances({ data }: Props) { - Image - Name + + Image + + + Name + Token Amount Total Value (USD) @@ -250,9 +254,7 @@ function TokenBalances({ data }: Props) {
{token.name}
 - - {token.amount} - + {token.amount} {token.totalValueUSD} diff --git a/pages/tokens/index.tsx b/pages/tokens/index.tsx index 92d2c1a7..425337e7 100644 --- a/pages/tokens/index.tsx +++ b/pages/tokens/index.tsx @@ -1,4 +1,3 @@ - import { GetServerSideProps, GetStaticProps } from 'next'; import { SkipNavContent } from '@reach/skip-nav'; @@ -13,19 +12,19 @@ import { CardDescription, CardFooter, CardHeader, - CardTitle, -} from "@components/ui/card" + CardTitle +} from '@components/ui/card'; import Link from 'next/link'; import { useState } from 'react'; -import wishingWell from '@public/wishing-well-1.png' -import kangarooBurrow from '@public/kangaroo-borrow-1.png' -import uppsala from '@public/uppsala-21.png' -import woo from '@public/woo-icon.png' -import fenrir from '@public/fenrir-icon-2.png' -import odinsRaven from '@public/odins-raven/img/4.gif' +import wishingWell from '@public/wishing-well-1.png'; +import kangarooBurrow from '@public/kangaroo-borrow-1.png'; +import uppsala from '@public/uppsala-21.png'; +import woo from '@public/woo-icon.png'; +import fenrir from '@public/fenrir-icon-2.png'; +import odinsRaven from '@public/odins-raven/img/4.gif'; import { StaticImport } from 'next/dist/shared/lib/get-img-props'; import { UrlObject } from 'url'; -import featherFallFund from '@public/feather-fall-fund-logo.png' +import featherFallFund from '@public/feather-fall-fund-logo.png'; import liquidStakedWelsh from '@public/liquid-staked-welshcorgicoin.png'; import liquidStakedRoo from '@public/liquid-staked-roo.png'; import liquidStakedOdin from '@public/liquid-staked-odin.png'; @@ -34,7 +33,6 @@ import { uniq, uniqBy } from 'lodash'; import { Checkbox } from '@components/ui/checkbox'; export const getServerSideProps: GetServerSideProps = async () => { - const pools = [ { guild: { @@ -50,10 +48,16 @@ export const getServerSideProps: GetServerSideProps = async () => { slug: 'stake/SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.liquid-staked-charisma', wip: false, apps: [ - { slug: '/crafting/SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.feather-fall-fund-v1', img: featherFallFund }, - { slug: '/crafting/SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.charismatic-corgi', img: '/indexes/charismatic-corgi-logo.png' }, + { + slug: '/crafting/SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.feather-fall-fund-v1', + img: featherFallFund + }, + { + slug: '/crafting/SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.charismatic-corgi', + img: '/indexes/charismatic-corgi-logo.png' + } ], - lowTVL: false, + lowTVL: false }, { guild: { @@ -76,7 +80,7 @@ export const getServerSideProps: GetServerSideProps = async () => { // { slug: '/apps/title-fight', img: titleFight }, { slug: '/crafting/fenrir', img: fenrir } ], - lowTVL: false, + lowTVL: false }, { guild: { @@ -114,7 +118,7 @@ export const getServerSideProps: GetServerSideProps = async () => { lowTVL: false, apps: [ { slug: '/kangaroo-burrow', img: kangarooBurrow }, - { slug: '/crafting/woo', img: woo }, + { slug: '/crafting/woo', img: woo } // { slug: '/apps/title-fight', img: titleFight }, ] }, @@ -131,7 +135,7 @@ export const getServerSideProps: GetServerSideProps = async () => { }, slug: 'stake/SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.liquid-staked-leo', wip: false, - lowTVL: false, + lowTVL: false }, { guild: { @@ -146,7 +150,7 @@ export const getServerSideProps: GetServerSideProps = async () => { }, slug: 'stake/SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.liquid-staked-pepe', wip: false, - lowTVL: false, + lowTVL: false }, { guild: { @@ -161,7 +165,7 @@ export const getServerSideProps: GetServerSideProps = async () => { }, slug: 'stake/SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.liquid-staked-rock', wip: false, - lowTVL: false, + lowTVL: false }, { guild: { @@ -176,7 +180,7 @@ export const getServerSideProps: GetServerSideProps = async () => { }, slug: 'stake/SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.liquid-staked-not', wip: false, - lowTVL: true, + lowTVL: true }, { guild: { @@ -191,7 +195,7 @@ export const getServerSideProps: GetServerSideProps = async () => { }, slug: 'stake/SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.liquid-staked-long', wip: false, - lowTVL: true, + lowTVL: true }, { guild: { @@ -313,7 +317,7 @@ export const getServerSideProps: GetServerSideProps = async () => { wip: false, lowTVL: true } - ] + ]; const contracts = await getDeployedIndexes(); @@ -321,26 +325,31 @@ export const getServerSideProps: GetServerSideProps = async () => { const blacklist = [ 'SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.feather-fall-fund', 'SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.presidential-pepe', - 'SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.president-pepe' + 'SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.president-pepe', + 'SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.leo-unchained' ]; const enabledContracts = uniq(contracts).filter((contract: any) => !blacklist.includes(contract)); + let tokenMetadata = []; + try { + // lookup metadata for each contract + const tokenMetadataPromises = enabledContracts.map(async (contract: any) => { + const tokenMetadata = await getTokenURI(contract); + const unqiueTokens = uniqBy(tokenMetadata.contains, 'address'); + const baseTokens = await Promise.all( + unqiueTokens.map(async (token: any) => { + const baseTokenMetadata = await getTokenURI(token.address); + return baseTokenMetadata; + }) + ); + tokenMetadata.tokens = baseTokens; + return tokenMetadata; + }); - // lookup metadata for each contract - const tokenMetadataPromises = enabledContracts.map(async (contract: any) => { - const tokenMetadata = await getTokenURI(contract); - const unqiueTokens = uniqBy(tokenMetadata.contains, 'address'); - const baseTokens = await Promise.all( - unqiueTokens.map(async (token: any) => { - const baseTokenMetadata = await getTokenURI(token.address); - return baseTokenMetadata; - }) - ); - tokenMetadata.tokens = baseTokens; - return tokenMetadata; - }); - - const tokenMetadata = await Promise.all(tokenMetadataPromises); + tokenMetadata = await Promise.all(tokenMetadataPromises); + } catch (error) { + console.log(error); + } const modifiedApps = tokenMetadata.map((metadata: any, k: number) => { return { @@ -369,7 +378,7 @@ export const getServerSideProps: GetServerSideProps = async () => { props: { pools, indexes: modifiedApps - }, + } // revalidate: 60000 }; }; @@ -380,7 +389,6 @@ type Props = { }; export default function Tokens({ pools, indexes }: Props) { - const meta = { title: 'Charisma | Tokens', description: META_DESCRIPTION, @@ -402,7 +410,9 @@ export default function Tokens({ pools, indexes }: Props) {
-

Liquid Staking Pools

+

+ Liquid Staking Pools +

Stake your tokens to earn rewards and participate in the Charisma ecosystem.

@@ -415,25 +425,38 @@ export default function Tokens({ pools, indexes }: Props) { />
-
- {activePools.map((pool) => { +
+ {activePools.map(pool => { return ( - - - + + + -
-
- {pool.guild.logo.url ? - - :
- } +
+
+ {pool.guild.logo.url ? ( + + ) : ( +
+ )}
-
-
+
+
{pool.title}
-
+
{pool.subtitle}
@@ -443,14 +466,26 @@ export default function Tokens({ pools, indexes }: Props) { src={pool.cardImage.url} height={1200} width={600} - alt='pool-featured-image' - className={cn("w-full object-cover transition-all group-hover/card:scale-105", "aspect-[1/2]", 'opacity-80', 'group-hover/card:opacity-100', 'flex', 'z-10', 'relative')} + alt="pool-featured-image" + className={cn( + 'w-full object-cover transition-all group-hover/card:scale-105', + 'aspect-[1/2]', + 'opacity-80', + 'group-hover/card:opacity-100', + 'flex', + 'z-10', + 'relative' + )} /> -
-
+
+
- + {/*
Staking Rewards {pool.apps && Apps and indexes that utilize this pool:} @@ -468,7 +503,7 @@ export default function Tokens({ pools, indexes }: Props) {
*/} - ) + ); })}
@@ -577,7 +612,9 @@ export default function Tokens({ pools, indexes }: Props) {
{/* Pool Funding */} @@ -617,14 +654,8 @@ export default function Tokens({ pools, indexes }: Props) { ); })}
- - -
- - - ); -} \ No newline at end of file +}