Merge pull request #29 from Propy/feat/claim-your-address-map

Feat/claim your address map

package.json

@@ -14,6 +14,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
+    "@types/leaflet": "^1.9.8",
     "@types/node": "^12.0.0",
     "@types/numeral": "^2.0.2",
     "@types/react": "^17.0.35",
@@ -23,18 +24,23 @@
     "@types/styled-components": "^5.1.0",
     "@usedapp/core": "1.2.10",
     "@walletconnect/web3-provider": "1.8.0",
+    "@web3modal/wagmi": "^3.4.0",
     "assert": "^2.0.0",
     "axios": "^1.4.0",
     "dayjs": "^1.11.9",
     "ethers": "5.5.1",
     "formik": "^2.2.9",
     "formik-mui": "^5.0.0-alpha.0",
     "https-browserify": "^1.0.0",
+    "leaflet": "^1.9.4",
     "numeral": "^2.0.6",
     "os-browserify": "^0.3.0",
     "react": "^17.0.1",
     "react-app-rewired": "^2.2.1",
     "react-dom": "^17.0.1",
+    "react-fast-marquee": "^1.6.2",
+    "react-leaflet": "^4.2.1",
+    "react-leaflet-cluster": "^2.1.0",
     "react-redux": "^7.2.2",
     "react-router-dom": "6.4.5",
     "redux": "^4.0.5",
@@ -48,6 +54,8 @@
     "typescript": "^4.1.2",
     "url": "^0.11.0",
     "util": "^0.12.5",
+    "viem": "^1.19.11",
+    "wagmi": "^1.4.7",
     "web-vitals": "^1.0.1",
     "web3modal": "^1.9.5",
     "yup": "^1.0.0"

src/components/AllTokensBanner.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 
-import { useEthers } from '@usedapp/core'
+import { useAccount } from 'wagmi';
 
 import { Theme } from '@mui/material/styles';
 
@@ -53,7 +53,7 @@ const AllTokensBanner = (props: IAllTokensBanner) => {
   const [allTokenBalances, setAllTokenBalances] = useState<IBalanceRecord[]>([]);
   const [allTokenAssets, setAllTokenAssets] = useState<IAllTokenAssets>({});
 
-  const { account } = useEthers();
+  const { address } = useAccount();
 
   const classes = useStyles();
 
@@ -92,7 +92,7 @@ const AllTokensBanner = (props: IAllTokensBanner) => {
     return () => {
       isMounted = false;
     }
-  }, [account])
+  }, [address])
 
   return (
     <>

src/components/App.tsx

@@ -7,11 +7,13 @@ import { Toaster } from 'sonner'
 import { createTheme, StyledEngineProvider, Theme, ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 
+import 'leaflet/dist/leaflet.css';
 import '../styles/App.scss';
 import { PropsFromRedux } from '../containers/AppContainer';
 
 import BlockNumberIndicator from './BlockNumberIndicator';
 import PageContainerContainer from '../containers/PageContainerContainer';
+import RecentHomeNftScrollingBanner from './RecentHomeNftScrollingBanner';
 
 import { useWindowSize } from '../hooks';
 
@@ -75,7 +77,7 @@ const App = (props: PropsFromRedux) => {
           },
           secondary: {
             main: "#434343",
-          }
+          },
         },
         components: {
           MuiCardContent :{
@@ -113,6 +115,7 @@ const App = (props: PropsFromRedux) => {
         <StyledEngineProvider injectFirst>
           <ThemeProvider theme={theme}>
             <CssBaseline/>
+            <RecentHomeNftScrollingBanner />
             <Toaster richColors position="bottom-right" />
             <PageContainerContainer/>
             <BlockNumberIndicator/>

src/components/BlockNumberIndicator.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState, useRef} from 'react';
 import styled, { keyframes } from 'styled-components'
 import Typography from '@mui/material/Typography';
-import { useBlockNumber, useEthers } from '@usedapp/core'
+import { useBlockNumber, useNetwork } from 'wagmi';
 
 import { getEtherscanLinkByChainId } from '../utils';
 
@@ -79,8 +79,10 @@ const BlockNumberContainer = styled.div`
 `
 
 const BlockNumberIndicator = () => {
-    const blockNumber = useBlockNumber()
-    const { chainId } = useEthers()
+
+    const { data: blockNumber } = useBlockNumber();
+    const { chain } = useNetwork()
+
     const [showSpinner, setShowSpinner] = useState(false)
     const [blockSyncStatus, setBlockSyncStatus] = useState('connecting');
 
@@ -114,9 +116,9 @@ const BlockNumberIndicator = () => {
         }
     }, [blockNumber])
     return (blockNumber ?
-        <ExternalLink href={chainId && blockNumber ? getEtherscanLinkByChainId(chainId, blockNumber.toString(), 'block') : ''}>
+        <ExternalLink href={blockNumber && chain?.id ? getEtherscanLinkByChainId(chain.id, blockNumber.toString(), 'block') : ''}>
             <BlockNumberContainer>
-                <StyledPollingDot blockSyncStatus={blockSyncStatus}>{showSpinner && <Spinner/>}</StyledPollingDot><span style={{opacity: !showSpinner ? '0.6' : '0.8'}}><Typography variant="overline" style={{fontFamily: 'monospace', lineHeight: 0}}>{blockNumber}</Typography></span>
+                <StyledPollingDot blockSyncStatus={blockSyncStatus}>{showSpinner && <Spinner/>}</StyledPollingDot><span style={{opacity: !showSpinner ? '0.6' : '0.8'}}><Typography variant="overline" style={{fontFamily: 'monospace', lineHeight: 0}}>{blockNumber.toString()}</Typography></span>
             </BlockNumberContainer>
         </ExternalLink> : null
     )

src/components/CollectionBanner.tsx

@@ -57,6 +57,7 @@ interface ICollectionBanner {
   collectionSlug: string
   title?: string
   showPagination?: boolean
+  firstElementShim?: React.ReactNode
 }
 
 interface INftAssets {
@@ -85,8 +86,13 @@ const CollectionBanner = (props: ICollectionBanner & PropsFromRedux) => {
     collectionSlug,
     showPagination = false,
     isConsideredMobile,
+    firstElementShim,
   } = props;
 
+  if(firstElementShim && maxRecords) {
+    maxRecords = maxRecords - 1;
+  }
+
   useEffect(() => {
     let isMounted = true;
     const fetchCollection = async () => {
@@ -151,6 +157,11 @@ const CollectionBanner = (props: ICollectionBanner & PropsFromRedux) => {
         </div>
       }
       <Grid className={classes.sectionSpacer} container spacing={2} columns={{ xs: 4, sm: 8, md: 12, lg: 20, xl: 30 }}>
+        {!isLoading && nftRecords && firstElementShim && 
+          <Grid key={`single-token-card-first-element-shim-${new Date().getTime()}`} item xs={4} sm={4} md={6} lg={5} xl={6}>
+            {firstElementShim}
+          </Grid>
+        }
         {!isLoading && nftRecords && nftRecords.sort((a, b) => {
           if(nftAssets[a?.asset_address]?.standard && nftAssets[b?.asset_address]?.standard) {
             return (nftAssets[a?.asset_address]?.standard).localeCompare(nftAssets[b?.asset_address]?.standard);

src/components/DappProviderWagmi.tsx

@@ -0,0 +1,41 @@
+import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
+
+import { WagmiConfig } from 'wagmi'
+// import { arbitrum, mainnet } from 'viem/chains'
+import { arbitrum, mainnet } from 'wagmi/chains'
+
+import AppContainer from '../containers/AppContainer';
+
+// 1. Get projectId at https://cloud.walletconnect.com
+const projectId = 'f230464ddad38c3d4ab987793e5d2b64'
+
+// 2. Create wagmiConfig
+const metadata = {
+  name: 'Web3Modal',
+  description: 'Web3Modal Example',
+  url: 'https://web3modal.com',
+  icons: ['https://avatars.githubusercontent.com/u/37784886']
+}
+
+const chains = [mainnet, arbitrum]
+const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })
+
+// 3. Create modal
+createWeb3Modal({ 
+  wagmiConfig,
+  projectId,
+  chains,
+  themeMode: 'light',
+  // chainImages: {
+  //   1: EthLogo,
+  //   42161: ArbitrumLogo
+  // }
+})
+
+export default function DappProviderWagmi() {
+  return (
+    <WagmiConfig config={wagmiConfig}>
+      <AppContainer />
+    </WagmiConfig>
+  )
+}

src/components/FloatingActionButton.tsx

@@ -11,7 +11,7 @@ interface IFloatingActionButton {
   checkboxMode?: boolean
   checked?: boolean
   size?: 'large' | 'medium' | 'small'
-  buttonColor?: 'primary' | 'secondary' | "default"
+  buttonColor?: 'primary' | 'secondary' | "default" | "info"
   textColor?: string
   className?: string
   component?: "button" | "div"

src/components/GenericTitle.tsx

@@ -18,6 +18,9 @@ const useStyles = makeStyles((theme: Theme) =>
       marginBottom: theme.spacing(4),
       marginTop: theme.spacing(6),
       borderBottom: '2px solid #EFEFEF',
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
     },
     title: {
       fontWeight: 500,
@@ -46,6 +49,7 @@ interface IGenericBannerPage {
   paddingBottom?: number,
   marginBottom?: number,
   marginTop?: number,
+  actionComponent?: React.ReactNode,
 }
 
 const GenericTitle = (props: PropsFromRedux & IGenericBannerPage) => {
@@ -58,6 +62,7 @@ const GenericTitle = (props: PropsFromRedux & IGenericBannerPage) => {
     paddingBottom = 16,
     marginBottom = 16,
     marginTop = 48,
+    actionComponent,
   } = props;
 
   return (
@@ -67,6 +72,7 @@ const GenericTitle = (props: PropsFromRedux & IGenericBannerPage) => {
             <Typography variant={variant} component="h2" className={[classes.title].join(" ")}>
               {title}
             </Typography>
+            {actionComponent && actionComponent}
           </div>
         }
     </div>

src/components/HorizontalScrollingTextBanner.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+
+import { Theme } from '@mui/material/styles';
+
+import makeStyles from '@mui/styles/makeStyles';
+import createStyles from '@mui/styles/createStyles';
+import { Typography } from '@mui/material';
+
+import Marquee from "react-fast-marquee";
+
+import LinkWrapper from './LinkWrapper';
+
+import {
+  GLOBAL_TOP_BANNER_HEIGHT
+} from '../utils/constants';
+
+import {
+  IHorizontalScrollingTextEntry,
+} from '../interfaces';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      backgroundColor: 'black',
+      color: 'white',
+    },
+    marqueeContainer: {
+      // max-width: 100%;
+      // overflow: hidden;
+      zIndex: 2000,
+      position: 'fixed',
+      backgroundColor: 'black',
+      color: 'white',
+      display: 'flex',
+      alignItems: 'center',
+      minWidth: '100%',
+    }
+  }),
+);
+
+interface IHorizontalScrollingTextBannerProps {
+  entries: IHorizontalScrollingTextEntry[]
+}
+
+const HorizontalScrollingTextBanner = (props: IHorizontalScrollingTextBannerProps) => {
+
+  const {
+    entries
+  } = props;
+
+  const classes = useStyles();
+
+  return (
+    <div className={classes.marqueeContainer} style={{height: GLOBAL_TOP_BANNER_HEIGHT}}>
+      <Marquee
+        speed={25}
+        pauseOnHover={true}
+      >
+        {entries && entries.map((entry, index) => 
+          <div style={{display: 'flex', alignItems: 'center'}}>
+            <LinkWrapper link={entry.link}>
+              <Typography variant="body1" style={{fontSize: '0.8rem', fontWeight: 'bold'}} key={`horizontal-text-scroller-banner-entry-${index}`} className="marquee-proto-span">
+                {entry.string}
+              </Typography>
+            </LinkWrapper>
+            &nbsp;&nbsp;|&nbsp;&nbsp;
+          </div>
+         )}
+      </Marquee>
+    </div>
+  )
+}
+
+export default HorizontalScrollingTextBanner;