diff --git a/components/FundAccountSubmitted.tsx b/components/FundAccountSubmitted.tsx index 318d51f..6571dd5 100644 --- a/components/FundAccountSubmitted.tsx +++ b/components/FundAccountSubmitted.tsx @@ -4,6 +4,11 @@ import LoadingFeedback from "components/LoadingFeedback" import {Box, Flex, Link, Themed, ThemeUICSSObject} from "theme-ui" import {ClientFundAccountResult} from "./FundAccountPanel" import publicConfig from "lib/publicConfig" +import {useEffect, useState} from "react" +import {sendScript} from "../lib/flow/send" +import * as fcl from "@onflow/fcl" +import * as t from "@onflow/types" +import {getAddressType} from "../lib/common" const styles: Record = { resultsContainer: { @@ -29,10 +34,84 @@ export default function FundAccountSubmitted({ }: { result?: ClientFundAccountResult }) { + const [isFetchingBalance, setIsFetchingBalance] = useState(false) + const [balance, setBalance] = useState("") + const [balanceError, setBalanceError] = useState("") + + useEffect(() => { + if (typeof result === "undefined") return + + const fetchBalance = async (addr: string) => { + try { + setIsFetchingBalance(true) + + const addressType = getAddressType(result.address) + let addressArg + + const addressArgType = + publicConfig.network === "testnet" || addressType === "FLOW" + ? t.Address + : t.String + + if (addressType === "FLOWEVM") { + const withoutPrefix = fcl.sansPrefix(result.address) + if (!withoutPrefix) { + throw new Error("Invalid address") + } + + addressArg = withoutPrefix + } else { + addressArg = addr + } + + const balanceScript = + publicConfig.network === "previewnet" && addressType === "FLOWEVM" + ? `import EVM from ${publicConfig.contractEVM} + + /// Returns the Flow balance of a given EVM address in FlowEVM + /// + access(all) fun main(address: String): UFix64 { + let bytes = address.decodeHex() + let addressBytes: [UInt8; 20] = [ + bytes[0], bytes[1], bytes[2], bytes[3], bytes[4], + bytes[5], bytes[6], bytes[7], bytes[8], bytes[9], + bytes[10], bytes[11], bytes[12], bytes[13], bytes[14], + bytes[15], bytes[16], bytes[17], bytes[18], bytes[19] + ] + return EVM.EVMAddress(bytes: addressBytes).balance().inFLOW() + }` + : `import FungibleToken from ${publicConfig.contractFungibleToken} +import FlowToken from ${publicConfig.contractFlowToken} + +access(all) fun main(account: Address): UFix64 { + + let vaultRef = getAccount(account) + .capabilities.borrow<&{FungibleToken.Balance}>(/public/flowTokenBalance) + ?? panic("Could not borrow Balance reference to the Vault") + + return vaultRef.balance +}` + + const res = await sendScript({ + script: balanceScript, + args: [fcl.arg(addressArg, addressArgType)], + }) + setBalance(res) + } catch (error) { + setBalance("--") + setBalanceError("An error occurred") + } finally { + setIsFetchingBalance(false) + } + } + + fetchBalance(result.address) + }, [result]) + return ( <> - Funding account + Funding Account Great! Your request has been submitted. @@ -60,15 +139,32 @@ export default function FundAccountSubmitted({ result.token } tokens`} - - View Account - + {publicConfig.network === "testnet" && ( + + View Account + + )} + {publicConfig.network === "previewnet" && ( + <> + + {isFetchingBalance ? ( +
Fetching...
+ ) : ( + <> +
{balance}
+ {balanceError && balanceError.length > 0 && ( +
{balanceError}
+ )} + + )} + + )}
)} diff --git a/lib/common.ts b/lib/common.ts index 2d605d9..8ff9d4e 100644 --- a/lib/common.ts +++ b/lib/common.ts @@ -16,3 +16,11 @@ export function verifyAPIKey(req: string, keys: string[]): boolean { } return false } + +export const getAddressType = function (address: string): "FLOW" | "FLOWEVM" { + if (address.length <= 18) { + return "FLOW" + } else { + return "FLOWEVM" + } +} diff --git a/lib/flow/fund.ts b/lib/flow/fund.ts index 0a94214..d93d58c 100644 --- a/lib/flow/fund.ts +++ b/lib/flow/fund.ts @@ -3,6 +3,7 @@ import * as t from "@onflow/types" import {FLOW_TYPE} from "../constants" import publicConfig, {TOKEN_FUNDING_AMOUNTS} from "../publicConfig" import {sendTransaction} from "./send" +import {getAddressType} from "../common" const txFundAccountFLOW = ` import FlowToken from ${publicConfig.contractFlowToken} @@ -86,15 +87,6 @@ export const tokens: Tokens = { FLOW: {tx: txFundAccountFLOW, amount: TOKEN_FUNDING_AMOUNTS[FLOW_TYPE]}, FLOWEVM: {tx: txFundAccountFlowEVM, amount: TOKEN_FUNDING_AMOUNTS[FLOW_TYPE]}, } - -function getAddressType(address: string): "FLOW" | "FLOWEVM" { - if (address.length <= 18) { - return "FLOW" - } else { - return "FLOWEVM" - } -} - export async function fundAccount( address: string, token: TokenType, diff --git a/lib/flow/send.ts b/lib/flow/send.ts index 1d73cff..25e40ae 100644 --- a/lib/flow/send.ts +++ b/lib/flow/send.ts @@ -24,3 +24,13 @@ export async function sendTransaction({ return fcl.tx(response).onceSealed() } + +export async function sendScript({ + script, + args, +}: { + script: string + args: fcl.TransactionArg[] +}) { + return fcl.send([fcl.script(script), fcl.args(args)]).then(fcl.decode) +}