Skip to content

Commit

Permalink
updated UI to account for unlimited tokens
Browse files Browse the repository at this point in the history
  • Loading branch information
@JacobHomanics
JacobHomanics committed Jan 18, 2024
1 parent 535f052 commit ebade82
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 203 deletions.
166 changes: 28 additions & 138 deletions packages/nextjs/components/example-ui/ContractData.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,154 +1,46 @@
import { useERC1155Information } from "./tokens/TokenInteractions";
// import { ImageProperties } from "./tokens/token-card/ImageCard";
// import { DefaultTokenGroupCard } from "./tokens/token-group-card/DefaultTokenGroupCard";
// import {
// mainCardPropertiesClasses,
// mainCardRenderProps,
// mainCardWithNumberOverlayPropertiesClasses,
// navBarPropertiesClasses,
// navBarRenderProps,
// prettifyLoadingProps,
// } from "./tokens/token-group-card/TokenGroupCardConfig";
// import { useEffect, useState } from "react";
// import { useEffect, useState } from "react";
import { ImageProperties } from "./tokens/token-card/ImageCard";
import { DefaultTokenGroupCard } from "./tokens/token-group-card/DefaultTokenGroupCard";
import {
mainCardPropertiesClasses,
mainCardRenderProps,
mainCardWithNumberOverlayPropertiesClasses,
navBarPropertiesClasses,
navBarRenderProps, // prettifyLoadingProps,
} from "./tokens/token-group-card/TokenGroupCardConfig";
import { useAccount } from "wagmi";

// import { useScaffoldContract, useScaffoldContractRead } from "~~/hooks/scaffold-eth";
// import { useScaffoldContract, useScaffoldContractRead } from "~~/hooks/scaffold-eth";

export const ContractData = () => {
const { address } = useAccount();

// const { data: repTokensInstance } = useScaffoldContract({ contractName: "ReputationTokensStandalone" });
// const tokenIds = [0, 1, 2];

// const [result, setResult] = useState<bigint[]>([]);

// useEffect(() => {
// async function getBalances() {
// if (!address) return;
// if (!repTokensInstance)
// return;

// const arr = [];
// for (let i = 0; i < tokenIds.length; i++) {
// const balanceOf = await repTokensInstance.read.balanceOf([address, BigInt(tokenIds[i])]);
// if (balanceOf != undefined)
// arr.push(balanceOf);
// }

// setResult([...arr]);
// }

// if (repTokensInstance) getBalances();
// }, [address, repTokensInstance]);

// console.log(result);

// const {data: numOfTokens} = useScaffoldContractRead({contractName: "ReputationTokensStandalone", functionName: "getNumOfTokenTypes"});

// const addressArr = [];
// const tokenIdsArr: bigint[] = [];

// for (let i = 0; i < numOfTokens!; i++) {
// addressArr.push(address!);
// tokenIdsArr.push(BigInt(i));
// }

// const {data: balanceOfBatch} = useScaffoldContractRead({contractName: "ReputationTokensStandalone", functionName: "balanceOfBatch", args: [addressArr, tokenIdsArr]});
// console.log(balanceOfBatch);

// useEffect(()=> {
// async function getUris() {
// if (!address) return;
// if (!repTokensInstance)
// return;

// const arr = [];
// for (let i = 0; i < tokenIds.length; i++) {
// const balanceOf = await repTokensInstance.read.uri([tokenIdsArr[i]]);
// if (balanceOf != undefined)
// arr.push(balanceOf);
// }

// console.log(arr);
// }
const { tokens } = useERC1155Information(address);

// getUris();
// }, [address, repTokensInstance]);
for (let i = 0; i < tokens.length; i++) {
tokens[i].image = tokens[i].image?.replace("ipfs://", "https://ipfs.io/ipfs/");
}

//const { token0, token1 } =
useERC1155Information(address);

// const { data: repTokensInstance } = useScaffoldContract({ contractName: "ReputationTokensStandalone" });

// const { data: numOfTokens } = useScaffoldContractRead({
// contractName: "ReputationTokensStandalone",
// functionName: "getNumOfTokenTypes",
// });

// const addressArr = [];
// const tokenIdsArr: bigint[] = [];

// for (let i = 0; i < numOfTokens!; i++) {
// addressArr.push(address!);
// tokenIdsArr.push(BigInt(i));
// }

// const { data: balanceOfBatch } = useScaffoldContractRead({
// contractName: "ReputationTokensStandalone",
// functionName: "balanceOfBatch",
// args: [addressArr, tokenIdsArr],
// });
// console.log(balanceOfBatch);

// const [uris, setUris] = useState<string[]>([]);

// useEffect(() => {
// async function getUris() {
// if (!address || !repTokensInstance || tokenIdsArr.length === 0) return;

// const arr = [];
// for (let i = 0; i < tokenIdsArr.length; i++) {
// const result = await repTokensInstance.read.uri([tokenIdsArr[i]]);
// if (result !== undefined) arr.push(result);
// }

// console.log(arr);
// setUris([...arr]);
// }

// // Run the effect only once when the component mounts
// if (uris.length === 0) {
// getUris();
// }
// }, [address, repTokensInstance, tokenIdsArr]); // Empty dependency array to run the effect only once

// console.log(uris);

// token0.image = token0.image?.replace("ipfs://", "https://ipfs.io/ipfs/");
// token1.image = token1.image?.replace("ipfs://", "https://ipfs.io/ipfs/");
console.log(tokens);

// const tokenGroup = {
// token0: token0,
// token1: token1,
// };

// const navBarCardImageProperties0 = new ImageProperties("Token 0", 64, 64);
const navBarCardImageProperties0 = new ImageProperties("Token 0", 64, 64);
// const navBarCardImageProperties1 = new ImageProperties("Token 1", 64, 64);

// const mainCardImageProperties0 = new ImageProperties("Token 0", 256, 256);
const mainCardImageProperties0 = new ImageProperties("Token 0", 256, 256);
// const mainCardImageProperties1 = new ImageProperties("Token 1", 256, 256);

return (
<>
{/* <div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
<div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
<div>
<DefaultTokenGroupCard
tokenGroup={tokenGroup}
imageProperties0={navBarCardImageProperties0}
imageProperties1={navBarCardImageProperties1}
prettifyLoadingProps={prettifyLoadingProps}
tokens={tokens}
imageProperties={navBarCardImageProperties0}
// imageProperties1={navBarCardImageProperties1}
// prettifyLoadingProps={prettifyLoadingProps}
propertiesClasses={navBarPropertiesClasses}
renderProps={navBarRenderProps}
/>
Expand All @@ -158,10 +50,9 @@ export const ContractData = () => {
<div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
<div>
<DefaultTokenGroupCard
tokenGroup={tokenGroup}
imageProperties0={mainCardImageProperties0}
imageProperties1={mainCardImageProperties1}
prettifyLoadingProps={prettifyLoadingProps}
tokens={tokens}
imageProperties={mainCardImageProperties0}
// prettifyLoadingProps={prettifyLoadingProps}
propertiesClasses={mainCardPropertiesClasses}
renderProps={mainCardRenderProps}
/>
Expand All @@ -171,15 +62,14 @@ export const ContractData = () => {
<div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
<div>
<DefaultTokenGroupCard
tokenGroup={tokenGroup}
imageProperties0={mainCardImageProperties0}
imageProperties1={mainCardImageProperties1}
prettifyLoadingProps={prettifyLoadingProps}
tokens={tokens}
imageProperties={mainCardImageProperties0}
// prettifyLoadingProps={prettifyLoadingProps}
propertiesClasses={mainCardWithNumberOverlayPropertiesClasses}
renderProps={mainCardRenderProps}
/>
</div>
</div> */}
</div>
</>
);
};
59 changes: 37 additions & 22 deletions packages/nextjs/components/example-ui/tokens/TokenInteractions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useEffect, useState } from "react";
import { useFetch } from "usehooks-ts";
// import { useFetch } from "usehooks-ts";
import { useScaffoldContract, useScaffoldContractRead } from "~~/hooks/scaffold-eth";

export type TokenGroup = {
Expand All @@ -12,6 +12,7 @@ export type Token = {
image: string;
name: string;
description: string;
id: number;
};

export interface Nft {
Expand All @@ -37,11 +38,11 @@ export const useBalanceOf = (address?: string, tokenId?: number) => {
};

export const useERC1155Information = (address?: string) => {
const { data: uri0 } = useUri(0);
const { data: uri1 } = useUri(1);
// const { data: uri0 } = useUri(0);
// const { data: uri1 } = useUri(1);

const { data: balanceOf0 } = useBalanceOf(address, 0);
const { data: balanceOf1 } = useBalanceOf(address, 1);
// const { data: balanceOf0 } = useBalanceOf(address, 0);
// const { data: balanceOf1 } = useBalanceOf(address, 1);

const { data: repTokensInstance } = useScaffoldContract({ contractName: "ReputationTokensStandalone" });

Expand Down Expand Up @@ -110,21 +111,35 @@ export const useERC1155Information = (address?: string) => {

console.log(responses);

const { data: json0 /* error: error0 */ } = useFetch<Nft>(uri0?.replace("ipfs://", "https://ipfs.io/ipfs/"));
const { data: json1 /* error: error1 */ } = useFetch<Nft>(uri1?.replace("ipfs://", "https://ipfs.io/ipfs/"));

return {
token0: {
balance: balanceOf0,
name: json0?.name,
description: json0?.description,
image: json0?.image,
},
token1: {
balance: balanceOf1,
name: json1?.name,
description: json1?.description,
image: json1?.image,
},
} as TokenGroup;
// const { data: json0 /* error: error0 */ } = useFetch<Nft>(uri0?.replace("ipfs://", "https://ipfs.io/ipfs/"));
// const { data: json1 /* error: error1 */ } = useFetch<Nft>(uri1?.replace("ipfs://", "https://ipfs.io/ipfs/"));

const tokens: Token[] = [];
for (let i = 0; i < responses.length; i++) {
const obj = {
id: i,
balance: balanceOfBatch![i],
name: responses[i]?.name,
description: responses[i]?.description,
image: responses[i]?.image,
};
tokens.push(obj);
}

return { tokens };

// return {
// token0: {
// balance: balanceOf0,
// name: json0?.name,
// description: json0?.description,
// image: json0?.image,
// },
// token1: {
// balance: balanceOf1,
// name: json1?.name,
// description: json1?.description,
// image: json1?.image,
// },
// } as TokenGroup;
};
79 changes: 36 additions & 43 deletions packages/nextjs/components/example-ui/tokens/token-group-card/DefaultTokenGroupCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import { TokenGroup } from "../TokenInteractions";
import { Token } from "../TokenInteractions";
import { TBaseTokenCardBooleanSet } from "../token-card/BaseTokenCard";
import { DefaultTokenCard, TTokenCardPrettifyLoadingProps } from "../token-card/DefaultTokenCard";
import { TTokenCardPropertiesClasses } from "../token-card/DefaultTokenCard";
import { ImageProperties } from "../token-card/ImageCard";

type TTokenGroupCardProps = {
tokenGroup: TokenGroup;
imageProperties0: ImageProperties;
imageProperties1: ImageProperties;
tokens: Token[];
imageProperties: ImageProperties;
propertiesClasses?: TTokenCardGroupPropertiesClasses;
prettifyLoadingProps?: TTokenGroupCardPrettifyLoadingProps;
// prettifyLoadingProps?: TTokenGroupCardPrettifyLoadingProps;
renderProps?: TBaseTokenCardBooleanSet;
};

Expand All @@ -25,50 +24,44 @@ export type TTokenGroupCardPrettifyLoadingProps = {
};

export const DefaultTokenGroupCard = ({
tokenGroup,
imageProperties0,
imageProperties1,
tokens,
imageProperties,
propertiesClasses,
prettifyLoadingProps,
// prettifyLoadingProps,
renderProps,
}: TTokenGroupCardProps) => {
const output = (
<>
<DefaultTokenCard
token={tokenGroup.token0}
imageProperties={imageProperties0}
propertiesClasses={propertiesClasses?.tokenCardPropertyClasses}
prettifyLoadingProps={prettifyLoadingProps?.tokenCardPrettifyLoadingProps}
renderProps={renderProps}
/>
<DefaultTokenCard
token={tokenGroup.token1}
imageProperties={imageProperties1}
propertiesClasses={propertiesClasses?.tokenCardPropertyClasses}
prettifyLoadingProps={prettifyLoadingProps?.tokenCardPrettifyLoadingProps}
renderProps={renderProps}
/>
</>
);
const components = tokens.map((token, index) => (
<DefaultTokenCard
key={`${token.id}+${index}`}
token={token}
imageProperties={imageProperties}
propertiesClasses={propertiesClasses?.tokenCardPropertyClasses}
// prettifyLoadingProps={prettifyLoadingProps?.tokenCardPrettifyLoadingProps}
renderProps={renderProps}
></DefaultTokenCard>
));

return (
<div className={propertiesClasses?.card}>
{prettifyLoadingProps?.card ? (
tokenGroup.token0.balance !== undefined &&
tokenGroup.token0.name !== undefined &&
tokenGroup.token0.description !== undefined &&
tokenGroup.token0.image !== undefined &&
tokenGroup.token1.balance !== undefined &&
tokenGroup.token1.name !== undefined &&
tokenGroup.token1.description !== undefined &&
tokenGroup.token1.image !== undefined ? (
<div className={propertiesClasses?.container}>{output}</div>
) : (
<>Loading Reputation Tokens...</>
)
) : (
<div className={propertiesClasses?.container}>{output}</div>
)}
<div className={propertiesClasses?.container}>{components}</div>
</div>
// <div className={propertiesClasses?.card}>
// {prettifyLoadingProps?.card ? (
// tokenGroup.token0.balance !== undefined &&
// tokenGroup.token0.name !== undefined &&
// tokenGroup.token0.description !== undefined &&
// tokenGroup.token0.image !== undefined &&
// tokenGroup.token1.balance !== undefined &&
// tokenGroup.token1.name !== undefined &&
// tokenGroup.token1.description !== undefined &&
// tokenGroup.token1.image !== undefined ? (
// <div className={propertiesClasses?.container}>{output}</div>
// ) : (
// <>Loading Reputation Tokens...</>
// )
// ) : (
// <div className={propertiesClasses?.container}>{output}</div>
// )}
// </div>
);
};

0 comments on commit ebade82

Please sign in to comment.