af6387bbf3
* basic working payments * Select funds amount and prettier funds button / dialog * Add funds page and nav menu option * Format funds amount. Use ghost button for back. * Add mantic dollars description * Improve styles of add funds page * about styling * change faq => about * change default font to Courier * header sign out menu item; remove user card * keep logo font * fix header issue * stripe webhook: handle repeat events * Make add funds button a gradient * add funds referer url * Fix add funds page after merge * Slight VisD tweaks * Update add funds button position. Mantic => Manifold * Remove Add funds menu option for now. * Set up product ids and endpoint for stripe prod * Swap back order in profile menu Co-authored-by: mantikoros <sgrugett@gmail.com> Co-authored-by: Austin Chen <akrolsmir@gmail.com>
69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import { useState } from 'react'
|
|
import { Col } from '../components/layout/col'
|
|
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'
|
|
import Image from 'next/image'
|
|
import { Spacer } from '../components/layout/spacer'
|
|
import { Page } from '../components/page'
|
|
|
|
export default function AddFundsPage() {
|
|
const user = useUser()
|
|
|
|
const [amountSelected, setAmountSelected] = useState<
|
|
500 | 1000 | 2500 | 10000
|
|
>(500)
|
|
|
|
return (
|
|
<Page>
|
|
<SEO title="Add funds" description="Add funds" url="/add-funds" />
|
|
|
|
<Col className="items-center">
|
|
<Col>
|
|
<Title text="Get Manifold Dollars" />
|
|
<Image
|
|
className="block mt-6"
|
|
src="/praying-mantis-light.svg"
|
|
width={200}
|
|
height={200}
|
|
/>
|
|
|
|
<div className="text-gray-500 mb-6">
|
|
Use Manifold Dollars to trade in your favorite markets. <br /> (Not
|
|
redeemable for cash.)
|
|
</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 className="text-xl">
|
|
${Math.round(amountSelected / 100)}.00
|
|
</div>
|
|
</div>
|
|
|
|
<form
|
|
action={checkoutURL(user?.id || '', amountSelected)}
|
|
method="POST"
|
|
className="mt-12"
|
|
>
|
|
<button
|
|
type="submit"
|
|
className="btn btn-primary w-full font-medium bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600"
|
|
>
|
|
Checkout
|
|
</button>
|
|
</form>
|
|
</Col>
|
|
</Col>
|
|
</Page>
|
|
)
|
|
}
|