Merge pull request #65 from onflow/ianthpun/query-param-account

onflow · Dec 22, 2023 · b8b81d7 · b8b81d7 · vercel · Dec 22, 2023
2 parents 6daded2 + 3e35b6c
commit b8b81d7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/components/FundAccountForm.tsx b/components/FundAccountForm.tsx
@@ -13,7 +13,7 @@ import {ClientFundAccountResult} from "./FundAccountPanel"
 import FundAccountSubmitted from "./FundAccountSubmitted"
 import publicConfig from "../lib/publicConfig"
 
-export default function FundAccountForm() {
+export default function FundAccountForm({address}: {address: string}) {
   const [errors, setErrors] = useState<string[]>([])
   const [captchaToken, setCaptchaToken] = useState("")
   const {mixpanel} = useMixpanel()
@@ -25,9 +25,10 @@ export default function FundAccountForm() {
     <FormContainer>
       <Formik
         initialValues={{
-          address: "",
+          address: address,
           token: FLOW_TYPE,
         }}
+        enableReinitialize
         validationSchema={fundAccountSchemaClient}
         onSubmit={async ({address, token}, {setSubmitting}) => {
           setErrors([])

diff --git a/components/FundAccountPanel.tsx b/components/FundAccountPanel.tsx
@@ -8,12 +8,12 @@ export type ClientFundAccountResult = {
   amount: string
 }
 
-export default function FundAccountPanel() {
+export default function FundAccountPanel({address}: {address: string}) {
   return (
     <div>
       <Grid gap={[0, 0, 40, 100]} columns={["auto", "auto", "1.6fr 1fr"]}>
         <Box>
-          <FundAccountForm />
+          <FundAccountForm address={address} />
         </Box>
         <Box>
           <Sidebar />

diff --git a/pages/fund-account.tsx b/pages/fund-account.tsx
@@ -2,13 +2,18 @@ import AppContainer from "components/AppContainer"
 import FundAccountPanel from "components/FundAccountPanel"
 import Header from "components/Header"
 import PageTitle from "components/PageTitle"
+import {useRouter} from "next/router"
 
 export default function Fund() {
+  const router = useRouter()
+  const {address} = router.query
+  const formattedAddress = Array.isArray(address) ? address[0] : address || ""
+
   return (
     <AppContainer>
       <PageTitle>Fund Account</PageTitle>
       <Header />
-      <FundAccountPanel />
+      <FundAccountPanel address={formattedAddress} />
     </AppContainer>
   )
 }