Redo add funds modal without daisy and actually use it (#963)

web/components/add-funds-button.tsx

@@ -1,84 +0,0 @@
-import clsx from 'clsx'
-import { useEffect, useState } from 'react'
-
-import { useUser } from 'web/hooks/use-user'
-import { checkoutURL } from 'web/lib/service/stripe'
-import { FundsSelector } from './yes-no-selector'
-
-export function AddFundsButton(props: { className?: string }) {
-  const { className } = props
-  const user = useUser()
-
-  const [amountSelected, setAmountSelected] = useState<1000 | 2500 | 10000>(
-    2500
-  )
-
-  const location = useLocation()
-
-  return (
-    <>
-      <label
-        htmlFor="add-funds"
-        className={clsx(
-          'btn btn-xs btn-outline modal-button font-normal normal-case',
-          className
-        )}
-      >
-        Get M$
-      </label>
-      <input type="checkbox" id="add-funds" className="modal-toggle" />
-
-      <div className="modal">
-        <div className="modal-box">
-          <div className="mb-6 text-xl">Get Mana</div>
-
-          <div className="mb-6 text-gray-500">
-            Buy mana (M$) to trade in your favorite markets. <br /> (Not
-            redeemable for cash.)
-          </div>
-
-          <div className="mb-2 text-sm text-gray-500">Amount</div>
-          <FundsSelector
-            selected={amountSelected}
-            onSelect={setAmountSelected}
-          />
-
-          <div className="mt-6">
-            <div className="mb-1 text-sm text-gray-500">Price USD</div>
-            <div className="text-xl">
-              ${Math.round(amountSelected / 100)}.00
-            </div>
-          </div>
-
-          <div className="modal-action">
-            <label htmlFor="add-funds" className={clsx('btn btn-ghost')}>
-              Back
-            </label>
-
-            <form
-              action={checkoutURL(user?.id || '', amountSelected, location)}
-              method="POST"
-            >
-              <button
-                type="submit"
-                className="btn btn-primary bg-gradient-to-r from-indigo-500 to-blue-500 px-10 font-medium hover:from-indigo-600 hover:to-blue-600"
-              >
-                Checkout
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
-// needed in next js
-// window not loaded at runtime
-const useLocation = () => {
-  const [href, setHref] = useState('')
-  useEffect(() => {
-    setHref(window.location.href)
-  }, [])
-  return href
-}

web/components/add-funds-modal.tsx

@@ -0,0 +1,58 @@
+import { manaToUSD } from 'common/util/format'
+import { useState } from 'react'
+import { useUser } from 'web/hooks/use-user'
+import { checkoutURL } from 'web/lib/service/stripe'
+import { Button } from './button'
+import { Modal } from './layout/modal'
+import { FundsSelector } from './yes-no-selector'
+
+export function AddFundsModal(props: {
+  open: boolean
+  setOpen(open: boolean): void
+}) {
+  const { open, setOpen } = props
+
+  const user = useUser()
+
+  const [amountSelected, setAmountSelected] = useState<1000 | 2500 | 10000>(
+    2500
+  )
+
+  return (
+    <Modal open={open} setOpen={setOpen} className="rounded-md bg-white p-8">
+      <div className="mb-6 text-xl text-indigo-700">Get Mana</div>
+
+      <div className="mb-6 text-gray-700">
+        Buy mana (M$) to trade in your favorite markets. <br /> (Not redeemable
+        for cash.)
+      </div>
+
+      <div className="mb-2 text-sm text-gray-500">Amount</div>
+      <FundsSelector selected={amountSelected} onSelect={setAmountSelected} />
+
+      <div className="mt-6">
+        <div className="mb-1 text-sm text-gray-500">Price USD</div>
+        <div className="text-xl">{manaToUSD(amountSelected)}</div>
+      </div>
+
+      <div className="modal-action">
+        <Button color="gray-white" onClick={() => setOpen(false)}>
+          Back
+        </Button>
+
+        <form
+          action={checkoutURL(
+            user?.id || '',
+            amountSelected,
+            window.location.href
+          )}
+          method="POST"
+        >
+          <Button type="submit" color="gradient">
+            Checkout
+          </Button>
+        </form>
+      </div>
+    </Modal>
+  )
+}

web/components/amount-input.tsx

@@ -1,11 +1,11 @@
 import clsx from 'clsx'
-import React from 'react'
+import React, { useState } from 'react'
 import { useUser } from 'web/hooks/use-user'
 import { formatMoney } from 'common/util/format'
 import { Col } from './layout/col'
-import { SiteLink } from './site-link'
 import { ENV_CONFIG } from 'common/envs/constants'
 import { Row } from './layout/row'
+import { AddFundsModal } from './add-funds-modal'
 
 export function AmountInput(props: {
   amount: number | undefined
@@ -35,6 +35,8 @@ export function AmountInput(props: {
     onChange(isInvalid ? undefined : amount)
   }
 
+  const [addFundsModalOpen, setAddFundsModalOpen] = useState(false)
+
   return (
     <>
       <Col className={className}>
@@ -66,9 +68,16 @@ export function AmountInput(props: {
             {error === 'Insufficient balance' ? (
               <>
                 Not enough funds.
-                <span className="ml-1 text-indigo-500">
+                <button
-                  <SiteLink href="/add-funds">Buy more?</SiteLink>
+                  className="ml-1 text-indigo-500 hover:underline hover:decoration-indigo-400"
-                </span>
+                  onClick={() => setAddFundsModalOpen(true)}
+                >
+                  Buy more?
+                </button>
+                <AddFundsModal
+                  open={addFundsModalOpen}
+                  setOpen={setAddFundsModalOpen}
+                />
               </>
             ) : (
               error

web/pages/create.tsx

@@ -36,6 +36,8 @@ import { MultipleChoiceAnswers } from 'web/components/answers/multiple-choice-an
 import { MINUTE_MS } from 'common/util/time'
 import { ExternalLinkIcon } from '@heroicons/react/outline'
 import { SiteLink } from 'web/components/site-link'
+import { Button } from 'web/components/button'
+import { AddFundsModal } from 'web/components/add-funds-modal'
 
 export const getServerSideProps = redirectIfLoggedOut('/', async (_, creds) => {
   return { props: { auth: await getUserAndPrivateUser(creds.uid) } }
@@ -168,6 +170,8 @@ export function NewContract(props: {
   const [showGroupSelector, setShowGroupSelector] = useState(true)
   const [visibility, setVisibility] = useState<visibility>('public')
 
+  const [fundsModalOpen, setFundsModalOpen] = useState(false)
+
   const closeTime = closeDate
     ? dayjs(`${closeDate}T${closeHoursMinutes}`).valueOf()
     : undefined
@@ -507,12 +511,17 @@ export function NewContract(props: {
           {ante > balance && !deservesFreeMarket && (
             <div className="mb-2 mt-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide">
               <span className="mr-2 text-red-500">Insufficient balance</span>
-              <button
+              <Button
-                className="btn btn-xs btn-primary"
+                size="xs"
-                onClick={() => (window.location.href = '/add-funds')}
+                color="green"
+                onClick={() => setFundsModalOpen(true)}
               >
                 Get M$
-              </button>
+              </Button>
+              <AddFundsModal
+                open={fundsModalOpen}
+                setOpen={setFundsModalOpen}
+              />
             </div>
           )}
         </div>

web/pages/profile.tsx

@@ -1,11 +1,9 @@
 import { RefreshIcon } from '@heroicons/react/outline'
 import { PrivateUser, User } from 'common/user'
 import { cleanDisplayName, cleanUsername } from 'common/util/clean-username'
-import { formatMoney } from 'common/util/format'
 import Link from 'next/link'
 import React, { useState } from 'react'
 import Textarea from 'react-expanding-textarea'
-import { AddFundsButton } from 'web/components/add-funds-button'
 import { ConfirmationButton } from 'web/components/confirmation-button'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
@@ -198,14 +196,6 @@ export default function ProfilePage(props: {
             </div>
           </div>
 
-          <div>
-            <label className="label">Balance</label>
-            <Row className="ml-1 items-start gap-4 text-gray-500">
-              {formatMoney(user.balance)}
-              <AddFundsButton />
-            </Row>
-          </div>
-
           <div>
             <label className="label">API key</label>
             <div className="input-group w-full">