Read query parameters (key, sigAlgo and source) from URL

components/CreateAccountForm.tsx

@@ -14,8 +14,14 @@ import {accountCreated} from "../lib/metrics"
 
 export default function CreateAccountForm({
   clientCreateAccount,
+  publicKey,
+  trafficSource,
+  sigAlgo,
 }: {
-  clientCreateAccount: ClientCreateAccount
+  clientCreateAccount: ClientCreateAccount,
+  publicKey: string,
+  trafficSource: string,
+  sigAlgo: string,
 }) {
   const [errors, setErrors] = useState<string[]>([])
   const [captchaToken, setCaptchaToken] = useState("")
@@ -26,8 +32,8 @@ export default function CreateAccountForm({
     <FormContainer>
       <Formik
         initialValues={{
-          publicKey: "",
-          signatureAlgorithm: "ECDSA_P256",
+          publicKey,
+          signatureAlgorithm: sigAlgo || "ECDSA_P256",
           hashAlgorithm: "SHA3_256",
         }}
         validationSchema={createAccountSchemaClient}
@@ -50,8 +56,7 @@ export default function CreateAccountForm({
           } else if (response.address) {
             const {address} = response
             setAddress(address)
-            mixpanel.track("Faucet: Create Account", {address})
-
+            mixpanel.track("Faucet: Create Account", {address, trafficSource})
             try {
               await accountCreated(mixpanel.get_distinct_id(), address)
             } catch (err) {

components/CreateAccountPanel.tsx

@@ -1,14 +1,14 @@
 import Sidebar from "components/Sidebar"
-import {clientCreateAccount} from "lib/client"
+import {clientCreateAccount, CreateAccountURLParams} from "lib/client"
 import {Box, Grid} from "theme-ui"
 import CreateAccountForm from "./CreateAccountForm"
 
-export default function CreateAccountPanel() {
+export default function CreateAccountPanel({ publicKey, trafficSource, sigAlgo} : CreateAccountURLParams) {
   return (
     <div>
       <Grid gap={[0, 0, 40, 100]} columns={["auto", "auto", "1.6fr 1fr"]}>
         <Box>
-          <CreateAccountForm clientCreateAccount={clientCreateAccount} />
+          <CreateAccountForm sigAlgo={sigAlgo} publicKey={publicKey} trafficSource={trafficSource} clientCreateAccount={clientCreateAccount} />
         </Box>
         <Box>
           <Sidebar />

lib/client.ts

@@ -1,5 +1,11 @@
 import {CREATE_ACCOUNT_ERROR, FUND_ACCOUNT_ERROR} from "lib/constants"
 
+export type CreateAccountURLParams = {
+  publicKey: string
+  trafficSource: string
+  sigAlgo: string
+}
+
 export type ClientCreateAccountResult = {
   address: string
   token: string

pages/index.tsx

@@ -2,13 +2,21 @@ import AppContainer from "components/AppContainer"
 import CreateAccountPanel from "components/CreateAccountPanel"
 import Header from "components/Header"
 import PageTitle from "components/PageTitle"
+import { CreateAccountURLParams } from "lib/client"
 
-export default function Home() {
+export default function Home(props: CreateAccountURLParams) {
   return (
     <AppContainer>
       <PageTitle>Create Account</PageTitle>
       <Header fund={true} />
-      <CreateAccountPanel />
+      <CreateAccountPanel {...props} />
     </AppContainer>
   )
 }
+
+Home.getInitialProps = async (context: any) => {
+  const key: string = context.query.key || ""
+  const source: string = context.query.source || ""
+  const sigAlgo: string = context.query["sig-algo"] || "ECDSA_P256"
+  return { publicKey: key, sigAlgo, trafficSource: source }
+}