From 794df1b40dca6d3a25bbcff51c2d0ff0b77bb72b Mon Sep 17 00:00:00 2001
From: Rhaidzsal Ali <rhaidzsalali@gmail.com>
Date: Fri, 31 Dec 2021 10:30:07 +0800
Subject: [PATCH 1/2] Add SVG Wall.

---
 package-lock.json          |  1 +
 package.json               |  1 +
 src/components/SVGWall.tsx | 56 ++++++++++++++++++++++++++++++++++++++
 src/pages/Landing.tsx      |  9 ++++--
 4 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 src/components/SVGWall.tsx

diff --git a/package-lock.json b/package-lock.json
index 5bbdf84..6bc025d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "ethers": "^5.5.2",
         "framer-motion": "^4.1.17",
         "jotai": "^1.4.9",
+        "lodash": "^4.17.21",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.2.0",
diff --git a/package.json b/package.json
index 3f3c535..19df72b 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "ethers": "^5.5.2",
     "framer-motion": "^4.1.17",
     "jotai": "^1.4.9",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
diff --git a/src/components/SVGWall.tsx b/src/components/SVGWall.tsx
new file mode 100644
index 0000000..09c4e57
--- /dev/null
+++ b/src/components/SVGWall.tsx
@@ -0,0 +1,56 @@
+import { Grid } from '@chakra-ui/react'
+import { motion } from 'framer-motion'
+import { sample, uniqueId } from 'lodash'
+
+const getBackgroundColor = () =>
+  sample([
+    '#081C26',
+    '#1990CC',
+    '#0E4967',
+    '#156F9C',
+    '#005078',
+    '#0D7EB7',
+    '#0D7EB7',
+    '#0D7EB7',
+    '#0D7EB7',
+    '#0D7EB7',
+    '#0D7EB7',
+    '#0D7EB7',
+    '#081C26',
+    '#081C26',
+    '#081C26',
+  ])
+
+const SVGBox: React.FC = () => (
+  <motion.div
+    initial={{
+      backgroundColor: getBackgroundColor(),
+    }}
+    animate={{
+      backgroundColor: getBackgroundColor(),
+    }}
+    transition={{
+      ease: 'linear',
+      duration: 3,
+      delay: 2,
+      repeatDelay: 2,
+      repeat: Infinity,
+      repeatType: 'mirror',
+    }}
+  />
+)
+
+const SVGWall: React.FC = () => (
+  <Grid
+    height="100px"
+    width="100vw"
+    templateRows="repeat(4, 1fr)"
+    templateColumns="repeat(auto-fill, 30px)"
+  >
+    {Array.from({ length: 4 }).map((_, __) =>
+      Array.from({ length: 50 }).map((_, __) => <SVGBox key={uniqueId()} />)
+    )}
+  </Grid>
+)
+
+export default SVGWall
diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index 3b934de..57619e7 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -1,20 +1,25 @@
+import { Box } from '@chakra-ui/react'
+
 import Hero from '../components/Landing/Hero'
 import WhoWillYouBe from '../components/Landing/WhoWillYouBe'
 import YourWallet from '../components/Landing/YourWallet'
 import Footer from '../components/Footer'
 
 import { useWallet } from '../hooks'
+import SVGWall from '../components/SVGWall'
 
 const Landing: React.FC = () => {
   const { currentAccount } = useWallet()
 
   return (
-    <>
+    <Box overflowX="hidden">
       <Hero />
+      <SVGWall />
       {currentAccount && <YourWallet />}
       <WhoWillYouBe />
+      <SVGWall />
       <Footer />
-    </>
+    </Box>
   )
 }
 

From f8718d8a5fc283f950615999092e06c0c1a44070 Mon Sep 17 00:00:00 2001
From: Rhaidzsal Ali <rhaidzsalali@gmail.com>
Date: Fri, 31 Dec 2021 10:33:32 +0800
Subject: [PATCH 2/2] Update landing.

---
 src/components/Landing/YourWallet/Staked.tsx  | 19 ++-----------------
 .../Landing/YourWallet/Unstaked.tsx           | 19 ++-----------------
 src/components/SVGWall.tsx                    |  2 +-
 3 files changed, 5 insertions(+), 35 deletions(-)

diff --git a/src/components/Landing/YourWallet/Staked.tsx b/src/components/Landing/YourWallet/Staked.tsx
index a983759..fc66020 100644
--- a/src/components/Landing/YourWallet/Staked.tsx
+++ b/src/components/Landing/YourWallet/Staked.tsx
@@ -1,13 +1,4 @@
-import {
-  Box,
-  Flex,
-  NumberDecrementStepper,
-  NumberIncrementStepper,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-  Text,
-} from '@chakra-ui/react'
+import { Box, Flex, Input, Text } from '@chakra-ui/react'
 import styled from '@emotion/styled'
 
 import ThemedButton from '../../../themed/Button'
@@ -30,13 +21,7 @@ const Staked: React.FC = () => (
       direction="column"
       mt="32px"
     >
-      <NumberInput size="lg" min={1} step={1}>
-        <NumberInputField fontSize="22px" />
-        <NumberInputStepper>
-          <NumberIncrementStepper />
-          <NumberDecrementStepper />
-        </NumberInputStepper>
-      </NumberInput>
+      <Input type="text" size="lg" fontSize="22px" />
       <ThemedButton size="lg" minW="160px" mt="24px" mx="auto">
         STAKE
       </ThemedButton>
diff --git a/src/components/Landing/YourWallet/Unstaked.tsx b/src/components/Landing/YourWallet/Unstaked.tsx
index b25f9f7..d37e995 100644
--- a/src/components/Landing/YourWallet/Unstaked.tsx
+++ b/src/components/Landing/YourWallet/Unstaked.tsx
@@ -1,13 +1,4 @@
-import {
-  Box,
-  Flex,
-  NumberDecrementStepper,
-  NumberIncrementStepper,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-  Text,
-} from '@chakra-ui/react'
+import { Box, Flex, Input, Text } from '@chakra-ui/react'
 import styled from '@emotion/styled'
 
 import ThemedButton from '../../../themed/Button'
@@ -31,13 +22,7 @@ const Unstaked: React.FC = () => (
       direction="column"
       mt="32px"
     >
-      <NumberInput size="lg" min={1} step={1}>
-        <NumberInputField fontSize="22px" />
-        <NumberInputStepper>
-          <NumberIncrementStepper />
-          <NumberDecrementStepper />
-        </NumberInputStepper>
-      </NumberInput>
+      <Input type="text" size="lg" fontSize="22px" />
       <ThemedButton size="lg" minW="160px" mt="24px" mx="auto">
         UNSTAKE
       </ThemedButton>
diff --git a/src/components/SVGWall.tsx b/src/components/SVGWall.tsx
index 09c4e57..8222099 100644
--- a/src/components/SVGWall.tsx
+++ b/src/components/SVGWall.tsx
@@ -31,7 +31,7 @@ const SVGBox: React.FC = () => (
     }}
     transition={{
       ease: 'linear',
-      duration: 3,
+      duration: 2,
       delay: 2,
       repeatDelay: 2,
       repeat: Infinity,