styling, polygon

src/components/AppConfig.tsx

@@ -7,12 +7,12 @@ import { infuraProvider } from 'wagmi/providers/infura'
 import { publicProvider } from 'wagmi/providers/public'
 
 const { chains, provider } = configureChains(
-  [chain.goerli],
+  [chain.goerli, chain.polygonMumbai],
   [infuraProvider({ apiKey: INFURA_ID }), publicProvider()]
 )
 
 const { connectors } = getDefaultWallets({
-  appName: 'My RainbowKit App',
+  appName: 'Allyu',
   chains
 })
 

src/components/Navbar.tsx

@@ -1,7 +1,7 @@
 import { ConnectButton } from '@rainbow-me/rainbowkit'
-import logo from 'assets/logo.png'
 import Image from 'next/image'
 import Link from 'next/link'
+import Logo from './Logo'
 
 export default function Navbar() {
   return (
@@ -10,8 +10,8 @@ export default function Navbar() {
         <Link href="/">
           <a>
             <div className="flex items-center space-x-2">
-              <Image src={logo} alt="Allyu logo" height="55" width="62.83" />
-              <span className="font-secondary text-2xl leading-none">ALLYU</span>
+              <Logo className="w-[50px]" />
+              <span className="font-secondary text-3xl leading-none">ALLYU</span>
             </div>
           </a>
         </Link>

src/components/bill/FundModal.tsx

@@ -59,6 +59,10 @@ export default function FundModal({
       const codeHash = `0x${hash(code)}`
 
       const balance = await dai.balanceOf(address)
+      if (balance.lt(bill.value)) {
+        throw new Error('Insufficient funds inDai')
+      }
+
       const daiRes = await dai.approve(allyu.address, balance)
       await daiRes.wait()
 
@@ -71,8 +75,10 @@ export default function FundModal({
         maxFeePerGas: maxFeePerGas?.add(1000000000),
         maxPriorityFeePerGas: maxPriorityFeePerGas?.add(1000000000)
       })
+
       const transaction = await res.wait()
       setTransaction(transaction)
+
       setBill({ ...bill, isFunded: true })
       setIsSuccess(true)
       if (containerRef.current) {

src/components/request/Step2.tsx

@@ -27,7 +27,7 @@ export default function Step2(props: RequestProps) {
         <Input
           onChange={onChange}
           value={props.data.numberOfBills}
-          className="border-b-2 border-dotted border-black pb-1 text-center font-secondary text-6xl"
+          className="w-full border-b-2 border-dotted border-black pb-1 text-center font-secondary text-6xl"
         />
       </div>
       <div>

src/components/ui/Loading.tsx

@@ -1,3 +1,10 @@
+import Logo from 'components/Logo'
+
 export default function Loading() {
-  return <div></div>;
+  return (
+    <div className="fixed inset-0 z-10 flex h-screen w-screen flex-col items-center justify-center bg-orange">
+      <Logo className="w-[80px]" />
+      <div className="mt-3 font-secondary text-xl">Loading...</div>
+    </div>
+  )
 }

src/eth-sdk/config.ts

@@ -4,7 +4,11 @@ export default defineConfig({
   contracts: {
     goerli: {
       dai: '0x11fE4B6AE13d2a6055C8D9cF65c55bac32B5d844',
-      allyu: '0xDd803437C05E6B7463a5889249Bd1f8687bD1CB8'
+      allyu: '0xdAb87c1670972D389e625dcb9f8813dC5AB30bE5'
+    },
+    polygonMumbai: {
+      dai: '0x001B3B4d0F3714Ca98ba10F6042DaEbF0B1B7b6F',
+      allyu: '0x12c2c185f8B14006aadE9f8914508C49CE019A84'
     }
   }
 })

src/pages/404.tsx

@@ -12,9 +12,9 @@ const NotFound: NextPage = () => {
       </Head>
       <div className="flex items-center">
         <div className="container-content pt-36">
-          <div className="grid text-center">
+          <div className="grid text-center font-secondary">
             <h1 className="text-[200px] leading-none">404</h1>
-            <p className="mb-6 text-3xl">Page not found</p>
+            <p className="mb-6 text-2xl">Page not found</p>
             <Link href="/">
               <a>
                 <Button>Go home</Button>

src/pages/500.tsx

@@ -12,7 +12,7 @@ const InternalError: NextPage = () => {
       </Head>
       <div className="flex items-center">
         <div className="container-content pt-36">
-          <div className="grid text-center">
+          <div className="grid text-center font-secondary">
             <h1 className="text-[200px] leading-none">500</h1>
             <p className="mb-6 text-3xl">Something went wrong</p>
           </div>

src/pages/index.tsx

@@ -1,7 +1,24 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
+import Image from 'next/image'
+import { useEffect, useState } from 'react'
+import { BillValue } from 'types/types'
+import { getBillImage } from 'utils/images'
+import { formatNumber } from 'utils/number'
 
 const Home: NextPage = () => {
+  const [count, setCount] = useState(12089654)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (Math.random() > 0.35) {
+        setCount((prev) => prev + 1)
+      }
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [])
+
   return (
     <>
       <Head>
@@ -10,9 +27,70 @@ const Home: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main></main>
+      <main>
+        <div className="container-content">
+          <div className="mt-12 mb-20 flex items-end font-secondary">
+            <h1 className="text-[120px] leading-none">${formatNumber(count)}</h1>
+            <span className="ml-3 pb-3.5 text-4xl">in crypto-backed cash</span>
+          </div>
+        </div>
+        <BillsGrid count={count} />
+      </main>
     </>
   )
 }
 
+const BillsGrid = ({ count }: { count: number }) => {
+  const [randomBills, setRandomBills] = useState<BillValue[][]>([])
+  const rows = 6
+  const columns = 6
+  const positions = ['2', '4', '6', '8', '10', '4']
+
+  const billValues = [
+    BillValue.Five,
+    BillValue.Ten,
+    BillValue.Twenty,
+    BillValue.Fifty,
+    BillValue.OneHundred,
+    BillValue.FiveHundred
+  ]
+
+  const generateRandomBills = () => {
+    const bills = []
+    for (let i = 0; i < rows; i++) {
+      const col = []
+
+      for (let j = 0; j < columns; j++) {
+        const randomIndex = Math.floor(Math.random() * billValues.length)
+        const bill = billValues[randomIndex]
+        col.push(bill)
+      }
+
+      bills.push(col)
+    }
+
+    setRandomBills(bills)
+  }
+
+  useEffect(() => {
+    generateRandomBills()
+  }, [])
+
+  return (
+    <div className=" grid gap-4 overflow-hidden pb-20">
+      {randomBills.map((row, i) => (
+        <div key={`row_${i}`} className={`relative h-[130px] -translate-x-[${positions[i]}px]`}>
+          <div className={`absolute flex items-center`}>
+            {row.map((col, j) => (
+              <div key={`bill_${i}_${j}`} className="m3-4 relative mr-4 aspect-[2.44] h-[130px]">
+                {<Image src={getBillImage(col)} alt="" layout="fill" />}
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
 export default Home

src/utils/number.ts

@@ -10,3 +10,9 @@ export function isValidAmount(amount: BigNumberish | undefined): boolean {
     return false
   }
 }
+
+export function formatNumber(amount: BigNumberish): string {
+  return BigNumber.from(amount)
+    .toString()
+    .replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}