request form

.vscode/settings.json

@@ -53,6 +53,7 @@
   "cSpell.words": [
     "dethcrypto",
     "esnext",
+    "Numberish",
     "rainbowkit",
     "tailwindcss",
     "typechain",

next.config.js

@@ -1,7 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  optimizeFonts: false,
   reactStrictMode: true,
-  swcMinify: true,
+  swcMinify: true
 }
 
 module.exports = nextConfig

src/components/request/Step1.tsx

@@ -0,0 +1,25 @@
+import { RequestProps } from 'pages/request'
+
+export default function Step1(props: RequestProps) {
+  const options = ['5', '10', '20', '50', '100']
+
+  return (
+    <div>
+      <h2 className="font-secondary">Choose your bill denomination</h2>
+      <div>
+        {options.map((option, i) => (
+          <div
+            key={`opt_${i}`}
+            className="cursor-pointer"
+            onClick={() => {
+              props.setData({ ...props.data, amountPerBill: option })
+              props.setStep(props.step + 1)
+            }}
+          >
+            ${option}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

src/components/request/Step2.tsx

@@ -0,0 +1,30 @@
+import Button from 'components/ui/Button'
+import Input from 'components/ui/Input'
+import { BigNumber } from 'ethers'
+import { RequestProps } from 'pages/request'
+
+export default function Step2(props: RequestProps) {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target
+    if (value === '' || value.includes('.')) return
+
+    const totalAmount = BigNumber.from(value).mul(props.data.amountPerBill).toString()
+    props.setData({ ...props.data, numberOfBills: value, totalAmount })
+  }
+
+  return (
+    <div>
+      <h2>Enter amount of bills</h2>
+      <div>
+        <Input onChange={onChange} value={props.data.numberOfBills} />
+        <p>{`Total amount to issue: $${props.data.totalAmount || '0'}`}</p>
+      </div>
+      <Button
+        onClick={() => props.setStep(props.step + 1)}
+        disabled={props.data.totalAmount.length === 0}
+      >
+        Next
+      </Button>
+    </div>
+  )
+}

src/components/request/Step3.tsx

@@ -0,0 +1,51 @@
+import Button from 'components/ui/Button'
+import { BigNumber } from 'ethers'
+import useEthereum from 'hooks/useEthereum'
+import { RequestProps } from 'pages/request'
+import { useState } from 'react'
+import { useSigner } from 'wagmi'
+
+export default function Step3(props: RequestProps) {
+  const { allyu } = useEthereum()
+  const { amountPerBill, numberOfBills, totalAmount } = props.data
+  const [error, setError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const onClick = async () => {
+    if (isLoading) return
+
+    try {
+      if (!props.fee) {
+        setError('Failed to estimate request fee')
+        return
+      }
+
+      setIsLoading(true)
+      const amountToSend = BigNumber.from(numberOfBills).add(props.fee)
+      const response = await allyu.requestBills(amountPerBill, numberOfBills, {
+        value: amountToSend
+      })
+
+      await response.wait()
+      props.setStep(props.step + 1)
+    } catch (e) {
+      console.error(e)
+      setError('Something went wrong')
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div>
+      <h2>Confirm your request</h2>
+      <div>
+        <div>${totalAmount}</div>
+        <div>{`${numberOfBills} bills of $${amountPerBill}`}</div>
+      </div>
+      <div>
+        <Button onClick={onClick}>Confirm request</Button>
+        {error && <div>{error}</div>}
+      </div>
+    </div>
+  )
+}

src/components/request/Step4.tsx

@@ -0,0 +1,17 @@
+import Button from 'components/ui/Button'
+import Link from 'next/link'
+import { RequestProps } from 'pages/request'
+
+export default function Step4(props: RequestProps) {
+  return (
+    <div>
+      <h2>You are all set!</h2>
+      <div>Your bills will be sent to Agora Bogota</div>
+      <Link href="/">
+        <a>
+          <Button>Go home</Button>
+        </a>
+      </Link>
+    </div>
+  )
+}

src/components/ui/Button.tsx

@@ -1,16 +1,16 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react'
 export default function Button({
   onClick,
   disabled,
-  children,
+  children
 }: {
-  onClick?: () => void;
-  disabled?: boolean;
-  children: ReactNode;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement> | undefined) => void
+  disabled?: boolean
+  children: ReactNode
 }) {
   return (
     <button disabled={disabled} onClick={onClick}>
       {children}
     </button>
-  );
+  )
 }

src/components/ui/Input.tsx

@@ -1,3 +1,9 @@
-export default function Input() {
-  return <input />
+export default function Input({
+  onChange,
+  value
+}: {
+  value: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+}) {
+  return <input onChange={onChange} value={value} />
 }

src/eth-sdk/config.ts

@@ -4,7 +4,7 @@ export default defineConfig({
   contracts: {
     goerli: {
       dai: '0x11fE4B6AE13d2a6055C8D9cF65c55bac32B5d844',
-      allyu: '0xB076bB11b8E3126994091Bd35ff28F7D60bd3B2a'
+      allyu: '0xdbf20E8AaA24660fb4e566d5D6FF47E726E5B13b'
     }
   }
 })

src/hooks/useEthereum.ts

@@ -9,6 +9,7 @@ export default function useEthereum() {
   const { dai, allyu } = getGoerliSdk(signerOrProvider)
 
   return {
+    isConnected: !!signerOrProvider,
     dai,
     allyu
   }

src/pages/_document.tsx

@@ -0,0 +1,25 @@
+import { Head, Html, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head>
+        <link rel="icon" href="/favicon.ico" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Londrina+Solid&family=Mulish:wght@400;500;700&display=swap"
+          rel="stylesheet"
+        />
+        <meta property="og:title" content="Allyu" />
+        <meta property="og:type" content="website" />
+        <meta property="og:description" content="Allyu is the first crypto-backed cash" />
+        <meta property="og:url" content="https://www.allyu.xyz" />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}

src/pages/request.tsx

@@ -1,16 +1,79 @@
-import type { NextPage } from "next";
-import Head from "next/head";
+import Step1 from 'components/request/Step1'
+import Step2 from 'components/request/Step2'
+import Step3 from 'components/request/Step3'
+import Step4 from 'components/request/Step4'
+import { BigNumberish } from 'ethers'
+import useEthereum from 'hooks/useEthereum'
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import { useEffect, useState } from 'react'
+
+export enum Steps {
+  Step1 = 1,
+  Step2 = 2,
+  Step3 = 3,
+  Step4 = 4
+}
+
+export interface RequestData {
+  amountPerBill: string
+  numberOfBills: string
+  totalAmount: string
+}
+
+export interface RequestProps {
+  fee: BigNumberish | undefined
+  step: Steps
+  setStep: (step: Steps) => void
+  data: RequestData
+  setData: (data: RequestData) => void
+}
 
 const Request: NextPage = () => {
+  const { allyu, isConnected } = useEthereum()
+  const [fee, setFee] = useState<BigNumberish | undefined>()
+  const [step, setStep] = useState(Steps.Step1)
+  const [data, setData] = useState<RequestData>({
+    amountPerBill: '',
+    numberOfBills: '',
+    totalAmount: ''
+  })
+
+  useEffect(() => {
+    const getFee = async () => {
+      const feePerBill = await allyu.getFeePerBill()
+      setFee(feePerBill.toString())
+    }
+
+    if (isConnected) getFee()
+  }, [isConnected])
+
+  const stepsComponents = {
+    [Steps.Step1]: Step1,
+    [Steps.Step2]: Step2,
+    [Steps.Step3]: Step3,
+    [Steps.Step4]: Step4
+  }
+
+  const props: RequestProps = { fee, data, setData, step, setStep }
+  const Component = stepsComponents[step]
+
   return (
     <>
       <Head>
         <title>Request bills</title>
         <meta name="description" content="Request crypto cash" />
       </Head>
-      <main>Request money</main>
+      <main>
+        {step > 1 && (
+          <div onClick={() => setStep(step - 1)} className="cursor-pointer">
+            {'Go back'}
+          </div>
+        )}
+        <Component {...props} />
+      </main>
     </>
-  );
-};
+  )
+}
 
-export default Request;
+export default Request

src/styles/globals.css

@@ -27,5 +27,17 @@ a {
 
 /*  todo: setup styling */
 @tailwind base;
+@layer base {
+  html,
+  body {
+    @apply h-full w-full bg-orange font-primary font-normal text-black;
+    @apply selection:bg-blue selection:text-white;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
 @tailwind components;
 @tailwind utilities;

tailwind.config.js

@@ -2,6 +2,48 @@
 module.exports = {
   content: ['./src/pages/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}'],
   theme: {
+    fontFamily: {
+      primary: ['Mulish', 'sans-serif'],
+      secondary: ['Londrina Solid', 'cursive']
+    },
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      primary: '#AAED4A',
+      orange: '#FFA62B',
+      violet: '#210535',
+      black: '#12021D',
+      green: {
+        DEFAULT: '#AAED4A',
+        25: '#353A2D'
+      },
+      red: {
+        DEFAULT: '#EF466F',
+        25: '#491331'
+      },
+      wgb: {
+        grey2: '#E4E6E9'
+      },
+      gradient: {
+        start: 'rgba(49, 12, 74, 0.5)',
+        end: 'rgba(6, 14, 37, 0.95)'
+      },
+      blue: {
+        DEFAULT: '#3772FF',
+        25: '#1B1E55'
+      },
+      white: {
+        DEFAULT: '#FEFEFE',
+        50: '#EFEEE9',
+        250: '#B8B3B6',
+        500: '#807883',
+        750: '#493D50',
+        900: '#281A31',
+        950: '#1D0E27',
+        1000: '#12021D'
+      },
+      purple: '#71458E'
+    },
     extend: {}
   },
   plugins: []