add optimizations

allyu-xyz · Oct 10, 2022 · 68c62cf · 68c62cf
1 parent 4057863
commit 68c62cf
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 16 deletions.
diff --git a/src/components/AppConfig.tsx b/src/components/AppConfig.tsx
@@ -1,7 +1,7 @@
 import { getDefaultWallets, lightTheme, RainbowKitProvider } from '@rainbow-me/rainbowkit'
 import '@rainbow-me/rainbowkit/styles.css'
 import { INFURA_ID } from 'config'
-import { ReactElement } from 'react'
+import { ReactNode } from 'react'
 import { chain, configureChains, createClient, WagmiConfig } from 'wagmi'
 import { infuraProvider } from 'wagmi/providers/infura'
 import { publicProvider } from 'wagmi/providers/public'
@@ -57,7 +57,8 @@ const customTheme = {
     walletLogo: 'none'
   }
 }
-export default function AppConfig({ children }: { children: ReactElement }) {
+
+export default function AppConfig({ children }: { children: ReactNode }) {
   return (
     <WagmiConfig client={client}>
       <RainbowKitProvider chains={chains} theme={customTheme} modalSize="compact">

diff --git a/src/components/NetworkListener.tsx b/src/components/NetworkListener.tsx
@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react'
+import { useAccount, useNetwork } from 'wagmi'
+
+export default function NetworkListener() {
+  const { chain } = useNetwork()
+  const currentChain = useRef(chain?.id)
+
+  useEffect(() => {
+    if (chain?.id && currentChain.current && chain.id !== currentChain.current) {
+      window.location.reload()
+    }
+  }, [chain])
+
+  return <></>
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,16 +1,18 @@
-import type { AppProps } from "next/app";
-import AppConfig from "../components/AppConfig";
-import Layout from "../components/Layout";
-import "../styles/globals.css";
+import NetworkListener from 'components/NetworkListener'
+import type { AppProps } from 'next/app'
+import AppConfig from '../components/AppConfig'
+import Layout from '../components/Layout'
+import '../styles/globals.css'
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <AppConfig>
+        <NetworkListener />
         <Layout>
           <Component {...pageProps} />
         </Layout>
       </AppConfig>
     </>
-  );
+  )
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,24 +1,28 @@
 import type { NextPage } from 'next'
 import Head from 'next/head'
 import Image from 'next/image'
-import { useEffect, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, 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)
+  const [count, setCount] = useState(parseInt(new Date().valueOf().toString().slice(-8)))
+  const [isMounted, setIsMounted] = useState(false)
 
   useEffect(() => {
+    setIsMounted(true)
     const interval = setInterval(() => {
-      if (Math.random() > 0.35) {
+      if (Math.random() > 0.4) {
         setCount((prev) => prev + 1)
       }
     }, 1000)
 
     return () => clearInterval(interval)
   }, [])
 
+  if (!isMounted) return null
+
   return (
     <>
       <Head>
@@ -34,17 +38,19 @@ const Home: NextPage = () => {
             <span className="ml-3 pb-3.5 text-4xl">in crypto-backed cash</span>
           </div>
         </div>
-        <BillsGrid />
+        <BillsGrid count={count} />
       </main>
     </>
   )
 }
 
-const BillsGrid = () => {
+const BillsGrid = ({ count }: { count: number }) => {
   const [randomBills, setRandomBills] = useState<BillValue[][]>([])
+  const rowsContainer = useRef<HTMLDivElement>(null)
   const rows = 6
   const columns = 6
-  const positions = ['2', '4', '6', '8', '10', '4']
+  const rowHeight = '132'
+  const rowPositions = ['0', '-220', '-10', '-300', '-100', '-200']
 
   const billValues = [
     BillValue.Five,
@@ -72,17 +78,139 @@ const BillsGrid = () => {
     setRandomBills(bills)
   }
 
+  const moveRows = () => {
+    const container = rowsContainer.current
+    if (!container) return
+
+    container.childNodes.forEach((child, i) => {
+      const row = child as HTMLDivElement
+      const position = rowPositions[i]
+      if (position) {
+        row.style.transform = `translateX(${position}px)`
+      }
+    })
+  }
+
+  const addBill = () => {
+    const container = rowsContainer.current
+    if (!container) return
+
+    const randomIndex = Math.floor(Math.random() * billValues.length)
+    const newBill = billValues[randomIndex]
+    const newBills = [...randomBills]
+
+    for (let i = 0; i < randomBills.length; i++) {
+      if (i === 0) {
+        newBills[i].unshift(newBill)
+      } else {
+        const lastPrevCol = newBills[i - 1].pop()!
+        newBills[i].unshift(lastPrevCol)
+
+        if (i === randomBills.length - 1) {
+          newBills[i].pop()!
+        }
+      }
+    }
+
+    setRandomBills(newBills)
+  }
+
+  useLayoutEffect(() => {
+    generateRandomBills()
+  }, [])
+
+  useLayoutEffect(() => {
+    if (rowsContainer.current && randomBills[0]?.length === columns) {
+      moveRows()
+    }
+  }, [randomBills, rowsContainer])
+
   useEffect(() => {
+    if (rowsContainer.current && randomBills.length > 0) {
+      addBill()
+    }
+  }, [count, rowsContainer])
+
+  return (
+    <div ref={rowsContainer} className=" grid gap-4 overflow-hidden pb-20">
+      {randomBills.map((row, i) => (
+        <div key={`row-${i}`} className={`relative h-[${rowHeight}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-[${rowHeight}px]`}
+              >
+                {<Image src={getBillImage(col)} alt="" layout="fill" />}
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const BillsGrid2 = () => {
+  const [randomBills, setRandomBills] = useState<BillValue[]>([])
+  const billsContainer = useRef<HTMLDivElement>(null)
+
+  const ROWS = 6
+  const COLUMNS = 6
+  const TOTAL_BILLS = ROWS * COLUMNS
+  const rowPositions = ['-150', '-220', '-10', '-300', '-100', '-200']
+
+  const billValues = [
+    BillValue.Five,
+    BillValue.Ten,
+    BillValue.Twenty,
+    BillValue.Fifty,
+    BillValue.OneHundred,
+    BillValue.FiveHundred
+  ]
+
+  const generateRandomBills = () => {
+    const bills = []
+
+    for (let i = 0; i < TOTAL_BILLS; i++) {
+      const randomIndex = Math.floor(Math.random() * billValues.length)
+      const bill = billValues[randomIndex]
+      bills.push(bill)
+    }
+
+    setRandomBills(bills)
+  }
+
+  const moveRows = () => {
+    const container = billsContainer.current
+    if (!container) return
+
+    container.childNodes.forEach((child, i) => {
+      const row = child as HTMLDivElement
+      const position = rowPositions[i]
+      if (position) {
+        row.style.transform = `translateX(${position}px)`
+      }
+    })
+  }
+
+  useLayoutEffect(() => {
     generateRandomBills()
   }, [])
 
+  useLayoutEffect(() => {
+    if (billsContainer.current && randomBills.length > 0) {
+      moveRows()
+    }
+  }, [randomBills, billsContainer])
+
   return (
-    <div className=" grid gap-4 overflow-hidden pb-20">
+    <div ref={billsContainer} className={` grid gap-4 grid-cols=${COLUMNS} overflow-hidden pb-20`}>
       {randomBills.map((row, i) => (
-        <div key={`row_${i}`} className={`relative h-[130px] -translate-x-[${positions[i]}px]`}>
+        <div key={`row-${i}`} className="relative h-[132px]">
           <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]">
+              <div key={`bill_${i}_${j}`} className="m3-4 relative mr-4 aspect-[2.44] h-[132px]">
                 {<Image src={getBillImage(col)} alt="" layout="fill" />}
               </div>
             ))}