Skip to content

bug fix for the token page #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Nemo144 wants to merge 1 commit into
base: beta
Choose a base branch
from
Open

bug fix for the token page #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/stacks-api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
16 changes: 9 additions & 7 deletions pages/portfolio/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -229,8 +229,12 @@ function TokenBalances({ data }: Props) {
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[100px] sm:table-cell"><span className="sr-only">Image</span></TableHead>
<TableHead><span className="sr-only">Name</span></TableHead>
<TableHead className="w-[100px] sm:table-cell">
<span className="sr-only">Image</span>
</TableHead>
<TableHead>
<span className="sr-only">Name</span>
</TableHead>
<TableHead className="md:table-cell text-right">Token Amount</TableHead>
<TableHead className="md:table-cell text-right">Total Value (USD)</TableHead>
</TableRow>
Expand All @@ -250,9 +254,7 @@ function TokenBalances({ data }: Props) {
<TableCell className="font-medium">
<div className="text-lg">{token.name}</div>
</TableCell>
<TableCell className="md:table-cell text-xl text-right">
{token.amount}
</TableCell>
<TableCell className="md:table-cell text-xl text-right">{token.amount}</TableCell>
<TableCell className="md:table-cell text-xl text-right">
{token.totalValueUSD}
</TableCell>
Expand Down
169 changes: 100 additions & 69 deletions pages/tokens/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

import { GetServerSideProps, GetStaticProps } from 'next';
import { SkipNavContent } from '@reach/skip-nav';

Expand All @@ -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';
Expand All @@ -34,7 +33,6 @@ import { uniq, uniqBy } from 'lodash';
import { Checkbox } from '@components/ui/checkbox';

export const getServerSideProps: GetServerSideProps<Props> = async () => {

const pools = [
{
guild: {
Expand All @@ -50,10 +48,16 @@ export const getServerSideProps: GetServerSideProps<Props> = 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: {
Expand All @@ -76,7 +80,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async () => {
// { slug: '/apps/title-fight', img: titleFight },
{ slug: '/crafting/fenrir', img: fenrir }
],
lowTVL: false,
lowTVL: false
},
{
guild: {
Expand Down Expand Up @@ -114,7 +118,7 @@ export const getServerSideProps: GetServerSideProps<Props> = 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 },
]
},
Expand All @@ -131,7 +135,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async () => {
},
slug: 'stake/SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.liquid-staked-leo',
wip: false,
lowTVL: false,
lowTVL: false
},
{
guild: {
Expand All @@ -146,7 +150,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async () => {
},
slug: 'stake/SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.liquid-staked-pepe',
wip: false,
lowTVL: false,
lowTVL: false
},
{
guild: {
Expand All @@ -161,7 +165,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async () => {
},
slug: 'stake/SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.liquid-staked-rock',
wip: false,
lowTVL: false,
lowTVL: false
},
{
guild: {
Expand All @@ -176,7 +180,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async () => {
},
slug: 'stake/SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.liquid-staked-not',
wip: false,
lowTVL: true,
lowTVL: true
},
{
guild: {
Expand All @@ -191,7 +195,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async () => {
},
slug: 'stake/SP2ZNGJ85ENDY6QRHQ5P2D4FXKGZWCKTB2T0Z55KS.liquid-staked-long',
wip: false,
lowTVL: true,
lowTVL: true
},
{
guild: {
Expand Down Expand Up @@ -313,34 +317,39 @@ export const getServerSideProps: GetServerSideProps<Props> = async () => {
wip: false,
lowTVL: true
}
]
];

const contracts = await getDeployedIndexes();

// blacklist ones that are not active
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 {
Expand Down Expand Up @@ -369,7 +378,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async () => {
props: {
pools,
indexes: modifiedApps
},
}
// revalidate: 60000
};
};
Expand All @@ -380,7 +389,6 @@ type Props = {
};

export default function Tokens({ pools, indexes }: Props) {

const meta = {
title: 'Charisma | Tokens',
description: META_DESCRIPTION,
Expand All @@ -402,7 +410,9 @@ export default function Tokens({ pools, indexes }: Props) {
<Layout>
<div className="sm:container sm:mx-auto sm:py-10 space-y-6 m-2">
<div className="space-y-1">
<h2 className="text-4xl font-semibold tracking-tight text-secondary">Liquid Staking Pools</h2>
<h2 className="text-4xl font-semibold tracking-tight text-secondary">
Liquid Staking Pools
</h2>
<p className="text-muted-foreground text-base">
Stake your tokens to earn rewards and participate in the Charisma ecosystem.
</p>
Expand All @@ -415,25 +425,38 @@ export default function Tokens({ pools, indexes }: Props) {
/>
</label>
</div>
<div className='grid gap-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-7'>
{activePools.map((pool) => {
<div className="grid gap-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-7">
{activePools.map(pool => {
return (
<Card key={pool.slug} className={cn('bg-black text-primary-foreground border-accent-foreground p-0 flex relative overflow-hidden rounded-md group/card', pool.wip && 'opacity-25 hover:opacity-60')}>
<Link href={`${pool.slug}`} className='w-full'>
<CardContent className='w-full p-0'>
<Card
key={pool.slug}
className={cn(
'bg-black text-primary-foreground border-accent-foreground p-0 flex relative overflow-hidden rounded-md group/card',
pool.wip && 'opacity-25 hover:opacity-60'
)}
>
<Link href={`${pool.slug}`} className="w-full">
<CardContent className="w-full p-0">
<CardHeader className="absolute inset-0 z-20 p-2 h-min backdrop-blur-sm group-hover/card:backdrop-blur-3xl">
<div className='flex gap-2'>
<div className='min-w-max'>
{pool.guild.logo.url ?
<Image src={pool.guild.logo.url} width={40} height={40} alt='guild-logo' className='w-10 h-10 border rounded-full grow' />
: <div className='w-10 h-10 bg-white border rounded-full' />
}
<div className="flex gap-2">
<div className="min-w-max">
{pool.guild.logo.url ? (
<Image
src={pool.guild.logo.url}
width={40}
height={40}
alt="guild-logo"
className="w-10 h-10 border rounded-full grow"
/>
) : (
<div className="w-10 h-10 bg-white border rounded-full" />
)}
</div>
<div className=''>
<div className='text-sm font-semibold leading-none text-secondary'>
<div className="">
<div className="text-sm font-semibold leading-none text-secondary">
{pool.title}
</div>
<div className='mt-1 text-xs leading-tight font-fine text-secondary'>
<div className="mt-1 text-xs leading-tight font-fine text-secondary">
{pool.subtitle}
</div>
</div>
Expand All @@ -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'
)}
/>
<div className='absolute inset-0 z-0 bg-gradient-to-b from-white/50 to-transparent opacity-30' />
<div className='absolute inset-0 bg-gradient-to-b from-transparent from-0% to-black/50 to-69% opacity-90 z-20' />
<div className="absolute inset-0 z-0 bg-gradient-to-b from-white/50 to-transparent opacity-30" />
<div className="absolute inset-0 bg-gradient-to-b from-transparent from-0% to-black/50 to-69% opacity-90 z-20" />
</CardContent>
</Link>
<CardFooter className={cn('z-20 absolute inset-0 top-auto flex p-0 mb-1 opacity-100 transition-all')}>
<CardFooter
className={cn(
'z-20 absolute inset-0 top-auto flex p-0 mb-1 opacity-100 transition-all'
)}
>
{/* <div className='z-20 p-2'>
<CardTitle className='z-30 mt-2 text-lg font-semibold leading-none text-white'>Staking Rewards</CardTitle>
{pool.apps && <CardDescription className='z-30 mb-2 text-sm text-white font-fine'>Apps and indexes that utilize this pool:</CardDescription>}
Expand All @@ -468,7 +503,7 @@ export default function Tokens({ pools, indexes }: Props) {
</div> */}
</CardFooter>
</Card>
)
);
})}
</div>

Expand Down Expand Up @@ -577,7 +612,9 @@ export default function Tokens({ pools, indexes }: Props) {
</CardContent>
</Link>
<CardFooter
className={cn('z-20 absolute inset-0 top-auto flex p-0 mb-1 opacity-100 transition-all')}
className={cn(
'z-20 absolute inset-0 top-auto flex p-0 mb-1 opacity-100 transition-all'
)}
>
<div className="z-20 p-2">
{/* <CardTitle className='z-30 mt-2 text-lg font-semibold leading-none text-white'>Pool Funding</CardTitle> */}
Expand Down Expand Up @@ -617,14 +654,8 @@ export default function Tokens({ pools, indexes }: Props) {
);
})}
</div>



</div>



</Layout>
</Page>
);
}
}