Add funds page and nav menu option

web/components/add-funds-button.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx'
 import { useState } from 'react'
 
 import { useUser } from '../hooks/use-user'
+import { checkoutURL } from '../lib/service/stripe'
 import { FundsSelector } from './yes-no-selector'
 
 export function AddFundsButton() {
@@ -41,7 +42,10 @@ export function AddFundsButton() {
               Back
             </label>
 
-            <form action={checkoutURL(user?.id || '', 500)} method="POST">
+            <form
+              action={checkoutURL(user?.id || '', amountSelected)}
+              method="POST"
+            >
               <button type="submit" className="btn btn-primary">
                 Checkout
               </button>
@@ -52,9 +56,3 @@ export function AddFundsButton() {
     </>
   )
 }
-
-const checkoutURL = (userId: string, manticDollarQuantity: number) => {
-  const endpoint =
-    'https://us-central1-mantic-markets.cloudfunctions.net/createCheckoutSession'
-  return `${endpoint}?userId=${userId}&manticDollarQuantity=${manticDollarQuantity}`
-}

web/components/header.tsx

@@ -35,6 +35,10 @@ function getNavigationOptions(user: User, options: { mobile: boolean }) {
       name: 'Your markets',
       href: `/${user.username}`,
     },
+    {
+      name: 'Add funds',
+      href: '/add-funds',
+    },
   ]
 }
 

web/components/yes-no-selector.tsx

@@ -83,7 +83,7 @@ export function FundsSelector(props: {
       {fundAmounts.map((amount) => (
         <Button
           key={amount}
-          color={selected === amount ? 'purple' : 'gray'}
+          color={selected === amount ? 'green' : 'gray'}
           onClick={() => onSelect(amount as any)}
           className={btnClassName}
         >

web/lib/service/stripe.ts

@@ -0,0 +1,5 @@
+export const checkoutURL = (userId: string, manticDollarQuantity: number) => {
+  const endpoint =
+    'https://us-central1-mantic-markets.cloudfunctions.net/createCheckoutSession'
+  return `${endpoint}?userId=${userId}&manticDollarQuantity=${manticDollarQuantity}`
+}

web/pages/add-funds.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react'
+import { Header } from '../components/header'
+import { SEO } from '../components/SEO'
+import { Title } from '../components/title'
+import { FundsSelector } from '../components/yes-no-selector'
+import { useUser } from '../hooks/use-user'
+import { checkoutURL } from '../lib/service/stripe'
+
+export default function AddFundsPage() {
+  const user = useUser()
+
+  const [amountSelected, setAmountSelected] = useState<
+    500 | 1000 | 2500 | 10000
+  >(500)
+
+  return (
+    <div className="max-w-4xl px-4 pb-8 mx-auto">
+      <SEO title="Add funds" description="Add funds" url="/add-funds" />
+      <Header />
+
+      <Title text="Add funds" />
+
+      <div>
+        <div className="text-lg mb-6">Buy Mantic Dollars</div>
+
+        <div className="text-gray-500 text-sm mb-2">Amount</div>
+        <FundsSelector
+          className="max-w-md"
+          selected={amountSelected}
+          onSelect={setAmountSelected}
+        />
+
+        <div className="mt-6">
+          <div className="text-gray-500 text-sm mb-1">Price USD</div>
+          <div>${Math.round(amountSelected / 100)}.00</div>
+        </div>
+
+        <form
+          action={checkoutURL(user?.id || '', amountSelected)}
+          method="POST"
+          className="mt-6"
+        >
+          <button type="submit" className="btn btn-primary">
+            Checkout
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}