Merge pull request #5 from rhaicode/development

Development

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",

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>

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>

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: 2,
+      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

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>
   )
 }