Skip to content

Commit

Permalink
show basket details script & token supply
Browse files Browse the repository at this point in the history
  • Loading branch information
@hckrg
hckrg committed Jul 17, 2023
1 parent c4b5cb5 commit 7309bd9
Show file tree
Hide file tree
Showing 6 changed files with 206 additions and 45 deletions.
29 changes: 29 additions & 0 deletions src/cadence/scripts/GetFTDetails.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import * as fcl from "@onflow/fcl";


export type FTDetailType = Record<string, {
tokenIdentifier: string
tokenName: string
tokenContratName: string
tokenstring: string
tokenSymbol: string
vaultPath: string
receiverPath: string
balancePath: string
}>

export const getFTDetails = async () => {
const code = `
import BasketTokenV2 from 0xf88c87364f7f298e
pub fun main(): {String: BasketTokenV2.TokenInfo} {
let tokens = BasketTokenV2.getTokens()
return tokens
}
`
const data = await fcl.query({
cadence: code
})
console.log(data)
return data
}
38 changes: 38 additions & 0 deletions src/cadence/scripts/GetUnderlyingTokens.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import * as fcl from "@onflow/fcl";

export const GetUnderlyingTokens = (contractName: string) => {
return `
import ${contractName} from 0xf88c87364f7f298e
pub struct UnderLyingTokenData {
pub let tokenIdentifier: String
pub let amount: UFix64
init(tokenIdentifier: String, amount: UFix64) {
self.tokenIdentifier = tokenIdentifier
self.amount = amount
}
}
pub fun main(): [UnderLyingTokenData] {
let tokens = ${contractName}.getUnderlyingTokens()
let amounts = ${contractName}.getUnderlyingTokensAmount()
let data: [UnderLyingTokenData] = []
for i, _ in tokens {
let d = UnderLyingTokenData(tokenIdentifier :tokens[i], amount: amounts[i])
data.append(d)
}
return data
}
`
}

export const getUnderlyingTokensData = async (contractName: string) => {
const data = await fcl.query({
cadence: GetUnderlyingTokens(contractName)
})

return data
}
16 changes: 16 additions & 0 deletions src/cadence/scripts/getTokenSupply.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as fcl from "@onflow/fcl";

export const getTokenTotalSupply = async (contractName: string, adminAddress: string) => {
const code = `
import ${contractName} from ${adminAddress}
pub fun main(): UFix64 {
return ${contractName}.totalSupply
}
`
const data = await fcl.query({
cadence: code
})

return data
}
111 changes: 69 additions & 42 deletions src/pages/ExploreBasket.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,44 @@
import Dashboard_Navbar from "../components/Dashboard_Navbar"
import logo from '../assets/react.svg'
import { allTokens, getTokenBySymbol } from "../utils/getTokenDetails";
import { useNavigate } from "react-router-dom";
import { TokenDetails } from "./ExploreDashboard";
import { useState } from "react";
import { allTokens, getTokenByIdentifier, getTokenBySymbol } from "../utils/getTokenDetails";
import { useNavigate, useParams } from "react-router-dom";
// import { TokenDetails } from "./ExploreDashboard";
import { useEffect, useState } from "react";
import IssueTokenModal from "../components/IssueModal";
import { useRecoilValue } from "recoil";
import { BasketData, basketsAtom } from "./ExploreDashboard";
import { GetUnderlyingTokens, getUnderlyingTokensData } from "../cadence/scripts/GetUnderlyingTokens";
import { ftTokens } from "../App";
import RedeemTokenModal from "../components/RedeemModal";


function ExploreBasket() {
const [showIssueModal, setShowIssueModal] = useState(false)
const [showRedeemModal, setShowRedeemModal] = useState(false)
const [basketDetails, setBasketDetails] = useState<BasketData>()
const ftTokenList = useRecoilValue(ftTokens)

const baskets = useRecoilValue(basketsAtom)
const { contractName } = useParams()

useEffect(() => {
if (contractName && baskets)
setBasketDetails(baskets.find((b) => b.basketContratName == contractName))
}, [contractName])

// useEffect(() => {
// const getUnderlyingTokensNames = async (contractName: string) => {
// const data = await getUnderlyingTokensData(contractName)
// console.log(data)
// }

// if (basketDetails) {
// getUnderlyingTokensNames(basketDetails.basketContratName)
// }
// }, [basketDetails])

const navigate = useNavigate()
const data = allTokens[0]
console.log(basketDetails)
return (
<>
<div className="flex flex-col items-center bg-custom-400">
Expand All @@ -20,10 +47,10 @@ function ExploreBasket() {
<div onClick={() => navigate("/")} className="font-semibold text-base cursor-pointer mb-7 px-1 text-gray-400">{"<"} Back to explore</div>
<div className="flex justify-between">
<div className="flex items-center gap-2">
<img className="h-[50px] w-[50px] rounded-full mr-4" src={data.image} />
<img className="h-[50px] w-[50px] rounded-full mr-4" src={basketDetails?.basketImage} />
<div className="flex flex-col">
<p className="text-4xl font-medium">{data.name}</p>
<p className="text-gray-400 font-semibold text-2xl">{data.symbol}</p>
<p className="text-4xl font-medium">{basketDetails?.basketName}</p>
<p className="text-gray-400 font-semibold text-2xl">${basketDetails?.basketSymbol}</p>
</div>
</div>
<div className="flex gap-2">
Expand All @@ -38,16 +65,16 @@ function ExploreBasket() {
</div>
<hr className="bg-gray-200" />
<div className="flex justify-between w-full py-7 px-10 ">
<TokenIcon logo={data.image} symbol={data.name} />
<TokenIcon logo={basketDetails?.basketImage} symbol={basketDetails?.basketName} />
</div>
<div className="py-2 px-10 bg-custom-300 text-sm font-semibold text-gray-500">
Underlying Tokens
</div>
{
data.underlyingTokens.map(s => getTokenBySymbol(s)).map((token) => (
basketDetails?.underlyingTokens.map(s => ({ amount: s.amount , token: getTokenByIdentifier(s.tokenIdentifier)})).map((t) => (
<div className="flex justify-between w-full py-6 px-10 ">
<TokenIcon logo={token?.logo} symbol={token?.name} />
<p>10 {token?.symbol}</p>
<TokenIcon logo={t.token?.logo} symbol={t.token?.name} />
<p>{t.amount} {t.token?.symbol}</p>
</div>
))
}
Expand All @@ -71,7 +98,7 @@ function ExploreBasket() {
className="absolute top-0 left-0 w-screen h-screen bg-gray-600 opacity-50"
></div>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<IssueTokenModal type="issue" tokenDetails={data} onClose={() => setShowIssueModal(false)} />
<IssueTokenModal type="issue" basketDetails={basketDetails} onClose={() => setShowIssueModal(false)} />
</div>
</div>
)}
Expand All @@ -82,7 +109,7 @@ function ExploreBasket() {
className="absolute top-0 left-0 w-screen h-screen bg-gray-600 opacity-50"
></div>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<IssueTokenModal tokenDetails={data} type="redeem" onClose={() => setShowRedeemModal(false)} />
<RedeemTokenModal basketDetails={basketDetails} onClose={() => setShowRedeemModal(false)} />
</div>
</div>
)}
Expand All @@ -91,35 +118,35 @@ function ExploreBasket() {
}


type TokenDetailCardProps = {
tokenDetails: TokenDetails
}
// type TokenDetailCardProps = {
// tokenDetails: TokenDetails
// }

const TokenDetailCard = ({ tokenDetails }: TokenDetailCardProps) => {
return (
<>
<hr className="bg-gray-300" />
<div className="flex w-full p-4 hover:scale-[1.01] hover:shadow-md hover:shadow-gray-200 text-gray-600">
<div className="w-1/4 flex gap-4">
<img src={logo} className="h-6 w-6 rounded-full" />
<p className="font-semibold text-gray-600">{tokenDetails.name}</p>
</div>
<div className="w-1/4 flex flex-col gap-4">
<p className="font-semibold text-gray-600">{tokenDetails.symbol}</p>
<div className="flex gap-2 text-xs">
<img src={logo} className="h-2 w-2 rounded-full" />
<p>BTC</p>
<img src={logo} className="h-2 w-2 rounded-full" />
<p>BTC</p>
+ 3 more
</div>
</div>
<p className="w-1/4">{tokenDetails.supply}</p>
<p className="w-1/4">{tokenDetails.company}</p>
</div>
</>
)
}
// const TokenDetailCard = ({ tokenDetails }: TokenDetailCardProps) => {
// return (
// <>
// <hr className="bg-gray-300" />
// <div className="flex w-full p-4 hover:scale-[1.01] hover:shadow-md hover:shadow-gray-200 text-gray-600">
// <div className="w-1/4 flex gap-4">
// <img src={logo} className="h-6 w-6 rounded-full" />
// <p className="font-semibold text-gray-600">{tokenDetails.name}</p>
// </div>
// <div className="w-1/4 flex flex-col gap-4">
// <p className="font-semibold text-gray-600">{tokenDetails.symbol}</p>
// <div className="flex gap-2 text-xs">
// <img src={logo} className="h-2 w-2 rounded-full" />
// <p>BTC</p>
// <img src={logo} className="h-2 w-2 rounded-full" />
// <p>BTC</p>
// + 3 more
// </div>
// </div>
// <p className="w-1/4">{tokenDetails.supply}</p>
// <p className="w-1/4">{tokenDetails.company}</p>
// </div>
// </>
// )
// }

type TokenIconProps = {
symbol?: string,
Expand Down
49 changes: 48 additions & 1 deletion src/utils/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,32 @@
import { baseToken } from "../globalTypes";
import { singerAuth } from "./authz";

export const AllTokens: Record<any, any> = {
"A.e45c64ecfe31e465.stFlowToken": {
symbol: "stFlow",
name: "st Flow Token",
logo: "https://cdn.jsdelivr.net/gh/FlowFans/flow-token-list@main/token-registry/A.d6f80565193ad727.stFlowToken/logo.svg",
decimals: 8,
},
"A.a983fecbed621163.FiatToken": {
symbol: "USDC",
name: "Fiat Token",
logo: "https://cdn.jsdelivr.net/gh/FlowFans/flow-token-list@main/token-registry/A.b19436aae4d94622.FiatToken/logo.svg",
decimals: 8,
},
"A.e223d8a629e49c68.FUSD": {
symbol: "FUSD",
name: "Flow USD",
logo: "https://cdn.jsdelivr.net/gh/FlowFans/flow-token-list@main/token-registry/A.3c5959b568896393.FUSD/logo.svg",
decimals: 8,
},
"A.40212f3e288efd03.MyToken": {
symbol: "MY",
name: "My Token",
logo: "https://cdn.jsdelivr.net/gh/FlowFans/flow-token-list@main/token-registry/A.348fe2042c8a70d8.MyToken/logo.svg",

}
}

export const tempTokens: baseToken[] = [
{
Expand Down Expand Up @@ -36,4 +63,24 @@ export const tempTokens: baseToken[] = [

export const pinataTokenJWT = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5mb3JtYXRpb24iOnsiaWQiOiI2NTBhNDU2NS02ZjM0LTQ1YTYtYmVmOS04ZmIxMGE0NmVlN2EiLCJlbWFpbCI6ImdhdXJhdmRoYWxsYTE0OTNAZ21haWwuY29tIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInBpbl9wb2xpY3kiOnsicmVnaW9ucyI6W3siaWQiOiJGUkExIiwiZGVzaXJlZFJlcGxpY2F0aW9uQ291bnQiOjF9LHsiaWQiOiJOWUMxIiwiZGVzaXJlZFJlcGxpY2F0aW9uQ291bnQiOjF9XSwidmVyc2lvbiI6MX0sIm1mYV9lbmFibGVkIjpmYWxzZSwic3RhdHVzIjoiQUNUSVZFIn0sImF1dGhlbnRpY2F0aW9uVHlwZSI6InNjb3BlZEtleSIsInNjb3BlZEtleUtleSI6Ijk2ZmUyNTE3MTViNTU4NGE0MTk1Iiwic2NvcGVkS2V5U2VjcmV0IjoiMWM1MjFiMDRiMjUyODM5MGU4MTkwNDU0NDk4MmYyNjJlMmZkY2JkNzc0YjI1YzI2YjQxM2RjM2VjODgzNzk1YSIsImlhdCI6MTY3NzQzNTY2N30.w8elVwSZ_U62af_MVKlVcawik9dQ-eLsoUVE4osqzlc"
export const pinataApiKey = "96fe251715b5584a4195"
export const pinataApiSecret = "1c521b04b2528390e81904544982f262e2fdcbd774b25c26b413dc3ec883795a"
export const pinataApiSecret = "1c521b04b2528390e81904544982f262e2fdcbd774b25c26b413dc3ec883795a"

export const ACCESS_NODE_URLS = {
'local': 'http://localhost:8888',
'testnet': 'https://rest-testnet.onflow.org',
'mainnet': 'https://rest-mainnet.onflow.org'
}

export const BLOCK_EXPLORER_URLS = {
'testnet': 'https://testnet.flowscan.org',
'mainnet': 'https://flowscan.org'
}

export const admin = "0xf88c87364f7f298e";
export const adminKey ="88896b6ab053cba07d4835fb1bfa7db771871da5703798a03a60f1697f0771f3";

export function getTimestamp10MinutesAfterCurrentTime(): number {
const currentTime = new Date();
const tenMinutesLater = new Date(currentTime.getTime() + 10 * 60 * 1000); // Adding 10 minutes in milliseconds
return Math.floor(tenMinutesLater.getTime() / 1000); // Converting to UNIX timestamp (seconds since epoch)
}
8 changes: 6 additions & 2 deletions src/utils/getTokenDetails.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { baseToken } from "../globalTypes"
import { tempTokens } from "./constants"
import { AllTokens, tempTokens } from "./constants"
import index1 from "../images/index-1.svg";
import index2 from "../images/index-2.png";
import index3 from "../images/index-3.svg";
Expand Down Expand Up @@ -52,4 +52,8 @@ export const allTokens = [

export const getTokenBySymbol = (symbol: string): baseToken | undefined => {
return tempTokens.find((token) => token.symbol == symbol)
}
}

export const getTokenByIdentifier = (identifier: any) => {
return AllTokens[identifier]
}

0 comments on commit 7309bd9

Please sign in to comment.