Fix search

funding.json

@@ -0,0 +1,5 @@
+{
+  "opRetro": {
+    "projectId": "0x754c37e401e2527ab24b9d7ca3e042bfcbfebeef54a533f8833d46242d2c3017"
+  }
+}

package.json

@@ -39,17 +39,6 @@
     "fundedwallet": "cd packages/hardhat && npx hardhat fundedwallet",
     "flatten": "cd packages/hardhat && npx hardhat flatten",
     "clean": "cd packages/hardhat && npx hardhat clean",
-    "run-graph-node": "yarn workspace @scaffold-eth/services run-graph-node",
-    "remove-graph-node": "yarn workspace @scaffold-eth/services remove-graph-node",
-    "clean-graph-node": "yarn workspace @scaffold-eth/services clean-graph-node",
-    "graph-prepare": "mustache packages/subgraph/config/config.json packages/subgraph/src/subgraph.template.yaml > packages/subgraph/subgraph.yaml",
-    "graph-codegen": "yarn workspace @scaffold-eth/subgraph graph codegen",
-    "graph-build": "yarn workspace @scaffold-eth/subgraph graph build",
-    "graph-create-local": "yarn workspace @scaffold-eth/subgraph graph create --node http://localhost:8020/ scaffold-eth/your-contract",
-    "graph-remove-local": "yarn workspace @scaffold-eth/subgraph graph remove --node http://localhost:8020/ scaffold-eth/your-contract",
-    "graph-deploy-local": "yarn workspace @scaffold-eth/subgraph graph deploy --node http://localhost:8020/ --ipfs http://localhost:5001 scaffold-eth/your-contract",
-    "graph-ship-local": "yarn graph-prepare && yarn graph-codegen && yarn graph-deploy-local",
-    "deploy-and-graph": "yarn deploy && yarn graph-ship-local",
     "theme": "yarn workspace @scaffold-eth/react-app theme",
     "watch-theme": "yarn workspace @scaffold-eth/react-app watch",
     "postinstall": "husky install"
@@ -59,19 +48,17 @@
       "packages/*"
     ],
     "nohoist": [
-      "**/@graphprotocol/graph-ts",
-      "**/@graphprotocol/graph-ts/**",
       "**/hardhat",
       "**/hardhat/**",
       "**/hardhat-ts",
       "**/hardhat-ts/**"
     ]
   },
   "dependencies": {
-    "@alch/alchemy-sdk": "^1.0.6",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@mui/material": "^5.6.1"
+    "@mui/material": "^5.6.1",
+    "multihashes": "4.0.3"
   },
   "devDependencies": {
     "husky": "^7.0.2"

packages/hardhat/package.json

@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "@nomiclabs/hardhat-ethers": "npm:hardhat-deploy-ethers",
+    "@nomiclabs/hardhat-etherscan": "^3.0.1",
     "@nomiclabs/hardhat-waffle": "^2.0.0",
     "@openzeppelin/contracts": "^4.4.2",
     "@tenderly/hardhat-tenderly": "^1.0.10",
-    "@nomiclabs/hardhat-etherscan": "^3.0.1",
     "chai": "^4.2.0",
     "chalk": "^4.1.0",
     "dotenv": "^8.2.0",

packages/react-app/package.json

@@ -33,6 +33,12 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.8",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-blockies": "^1.4.1",
+    "@types/react-copy-to-clipboard": "^5.0.4",
+    "@types/react-dom": "^18.0.9",
+    "@types/react-router-dom": "^5.3.3",
     "@uniswap/sdk": "^3.0.3",
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
     "@walletconnect/web3-provider": "^1.5.2",
@@ -52,10 +58,10 @@
     "fortmatic": "^2.2.1",
     "graphiql": "^1.4.7",
     "graphql": "^15.3.0",
-    "ipfs-http-client": "^55.0.0",
     "isomorphic-fetch": "^3.0.0",
     "node-watch": "^0.7.1",
     "postcss": "^8.2.6",
+    "prop-types": "^15.8.1",
     "qrcode.react": "^1.0.0",
     "react": "^17.0.2",
     "react-blockies": "^1.4.1",
@@ -64,16 +70,19 @@
     "react-dom": "^17.0.2",
     "react-qr-reader": "^2.2.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.0",
+    "react-scripts": "5.0.1",
     "searchico": "^1.2.1",
+    "typescript": "^4.9.3",
     "walletlink": "^2.1.5",
     "web3modal": "^1.9.1",
     "yarn": "^1.22.18"
   },
   "devDependencies": {
     "@apollo/client": "^3.3.21",
     "@testing-library/dom": "^6.12.2",
-    "@types/react": "^16.9.19",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
     "autoprefixer": "^10.2.4",
     "chalk": "^4.1.0",
     "eslint-config-prettier": "^8.3.0",
@@ -83,10 +92,12 @@
     "gulp-debug": "^4.0.0",
     "gulp-less": "^4.0.1",
     "gulp-postcss": "^9.0.0",
+    "husky": "^7.0.2",
     "less-plugin-npm-import": "^2.1.0",
     "prettier": "^2.0.5",
     "s3-folder-upload": "^2.3.1",
-    "surge": "^0.21.5"
+    "surge": "^0.21.5",
+    "typescript": "^4.9.3"
   },
   "eslintConfig": {
     "extends": [

packages/react-app/public/index.html

@@ -31,6 +31,13 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Remix Rewards</title>
+    <style>
+      body {
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+      }
+    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

packages/react-app/src/App.jsx → packages/react-app/src/App.tsx

@@ -1,18 +1,19 @@
 import React, { useCallback, useEffect, useState } from 'react'
-// import { useUserProviderAndSigner } from 'eth-hooks'
 import { NETWORKS } from './constants'
 import { Layout } from './components'
 import { BrowseBadges } from './views'
 import MintingPage from './views/MintingPage'
 import CloseIcon from '@mui/icons-material/Close'
 import IconButton from '@mui/material/IconButton'
-import Toast from 'components/Toast'
-import { BadgeContext } from 'contexts/BadgeContext'
-import externalContracts from 'contracts/external_contracts'
+import Toast from './components/Toast'
+import { BadgeContext } from './contexts/BadgeContext'
+import externalContracts from './contracts/external_contracts'
+import AboutPage from './views/AboutPage'
 const { ethers } = require('ethers')
 const temmainnet = new ethers.providers.StaticJsonRpcProvider(
   'https://mainnet.infura.io/v3/1b3241e53c8d422aab3c7c0e4101de9c',
 )
+
 function App() {
   // @ts-ignore
   const [localProvider, setLocalProvider] = useState(null)
@@ -29,19 +30,6 @@ function App() {
 
   const targetNetwork = NETWORKS['optimism']
 
-  let contractRef
-  let providerRef
-  if (
-    externalContracts[selectedChainId] &&
-    externalContracts[selectedChainId].contracts &&
-    externalContracts[selectedChainId].contracts.REMIX_REWARD
-  ) {
-    contractRef = externalContracts[selectedChainId].contracts.REMIX_REWARD
-    providerRef = externalContracts[selectedChainId].provider
-  } else {
-    console.log('kosi externalContract')
-  }
-
   const closeToast = () => {
     setShowToast(false)
   }
@@ -50,20 +38,24 @@ function App() {
     return window.ethereum === undefined ? 'Not Found' : 'Found'
   }, [])
 
-  const displayToast = useCallback(msg => {
+  const displayToast = useCallback((msg: string) => {
     console.log(msg)
     setShowToast(true)
   }, [])
 
   useEffect(() => {
     const run = async () => {
-      const local = new ethers.providers.StaticJsonRpcProvider(providerRef)
-      await local.ready
-      setLocalProvider(local)
-      setLoaded(true)
+      //@ts-ignore
+      const extContract: any = externalContracts[selectedChainId]
+      if (extContract && extContract.contracts && extContract.contracts.REMIX_REWARD) {
+        const local = new ethers.providers.StaticJsonRpcProvider(extContract.provider)
+        await local.ready
+        setLocalProvider(local)
+        setLoaded(true)
+      }      
     }
     run()
-  }, [providerRef])
+  }, [selectedChainId])
 
   const snackBarAction = (
     <>
@@ -92,7 +84,6 @@ function App() {
     contractConfig,
     displayToast,
     externalContracts,
-    contractRef,
     setShowToast,
     closeWrongNetworkToast,
     showWrongNetworkToast,
@@ -102,11 +93,13 @@ function App() {
 
   return (
     <div className="App">
-      <BadgeContext.Provider value={contextPayload}>
+      <BadgeContext.Provider value={contextPayload}>      
         <Layout tabValue={tabValue} setTabValue={setTabValue}>
           {loaded && tabValue === 0 && <BrowseBadges />}
 
           {tabValue === 1 && <MintingPage />}
+
+          {tabValue === 2 && <AboutPage />}
           <Toast
             showToast={showToast}
             closeToast={closeToast}

packages/react-app/src/components/About/InfoCard.tsx

@@ -0,0 +1,54 @@
+import { CardContent } from '@mui/material'
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import Typography from '@mui/material/Typography'
+import { RewardNames } from '../../types/rewardTypes'
+
+export interface InfoCardProps {
+  imageSrc: string
+  rewardType: RewardNames
+  text: JSX.Element
+}
+
+export default function InfoCard({ imageSrc, rewardType, text }: InfoCardProps) {
+  return (
+    <Card
+      sx={{
+        background: 'rgba(255,255,255,0.6)',
+        boxShadow: '1px 1px 4px 0px rgb(170,170,170)',
+        width: 530,
+        borderRadius: 5,
+        zIndex: 900,
+      }}
+    >
+      <Box sx={{ display: 'flex', height: '100%' }}>
+        {rewardType === 'Remixer' ? (
+          <img
+            style={{ borderRadius: '10px', border: '1px solid #ccc', objectFit: 'cover', marginLeft: 0 }}
+            width={200}
+            height={241}
+            src={imageSrc}
+            alt={'Reward description'}
+          />
+        ) : (
+          <img
+            style={{ borderRadius: '10px', border: '1px solid #ccc', objectFit: 'cover', marginLeft: 0 }}
+            width={200}
+            src={imageSrc}
+            alt={'Reward description'}
+          />
+        )}
+        <Box sx={{ marginLeft: 2 }}>
+          <CardContent>
+            <Typography variant="h5" fontWeight={700} color={'#333333'} align={'left'}>
+              {rewardType}
+            </Typography>
+            <Typography align="left" variant="body1" fontWeight={500} color={'#333333'}>
+              {text}
+            </Typography>
+          </CardContent>
+        </Box>
+      </Box>
+    </Card>
+  )
+}