scroll

package.json

@@ -68,7 +68,6 @@
     ]
   },
   "dependencies": {
-    "@alch/alchemy-sdk": "^1.0.6",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@mui/material": "^5.6.1"

packages/react-app/package.json

@@ -58,7 +58,6 @@
     "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",

packages/react-app/src/App.tsx

@@ -98,7 +98,7 @@ function App() {
 
   return (
     <div className="App">
-      <BadgeContext.Provider value={contextPayload}>
+      <BadgeContext.Provider value={contextPayload}>      
         <Layout tabValue={tabValue} setTabValue={setTabValue}>
           {loaded && tabValue === 0 && <BrowseBadges />}
 

packages/react-app/src/components/Account.tsx

@@ -189,7 +189,7 @@ export default function Account({ minimized }: AccountsProps) {
     const chainInfo = await getCurrentChainId()
     const { chainId } = chainInfo[0]
     console.log({ chainId })
-    if (chainId !== selectedChainId) {
+    if (chainId !== 5 && chainId !== 534352) {
       setShowWrongNetworkToast(true)
       await switchNetworkChain(selectedChainId)
       accounts = await (window.ethereum as any).request({
@@ -199,7 +199,7 @@ export default function Account({ minimized }: AccountsProps) {
       setNetInfo(chainInfo)
       return
     }
-    if (chainId === selectedChainId) {
+    if (chainId !== 5 || chainId !== 534352) {
       accounts = await (window.ethereum as any).request({
         method: 'eth_requestAccounts',
       })

packages/react-app/src/components/AddressedCard.tsx

@@ -8,7 +8,7 @@ export default function AddressedCard({ badges, etherscanRef }: { badges: any[],
     <>
       {badges && badges.length > 0 ? (
         badges.map(badge => {
-          const src = 'https://ipfs.io/ipfs/' + badge.decodedIpfsHash
+          const src = 'https://ipfs-cluster.ethdevops.io/ipfs/' + badge.decodedIpfsHash // badge.fileName // 'https://ipfs.io/ipfs/' + badge.decodedIpfsHash
           const txLink = etherscanRef + badge.transactionHash
           return (
             <Box

packages/react-app/src/components/NftCard.tsx

@@ -10,8 +10,10 @@ import Snackbar from '@mui/material/Snackbar'
 import MuiAlert, { AlertProps } from '@mui/material/Alert'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { NftCardProps, TokensData } from '../types/rewardTypes'
+import { getTokenData, getEnsName } from '../helpers/getTokenData'
 
 export const toBase58 = (contentHash: any) => {
+  if (!contentHash) return ''
   let hex = contentHash.substring(2)
   let buf = multihash.fromHexString(hex)
   return multihash.toB58String(buf)
@@ -46,12 +48,12 @@ export default function NftCard(props: NftCardProps) {
   }
   const run = useCallback(async () => {
     try {
-      let data: TokensData = await contract.tokensData(ethers.BigNumber.from(id === '0x' ? '0x0' : id))
+      let data: TokensData = await getTokenData(props.chainId, ethers.BigNumber.from(id === '0x' ? '0x0' : id))
       let toFormatted = ethers.utils.hexZeroPad(ethers.utils.hexStripZeros(to), 20)
-      const name = await mainnet.lookupAddress(toFormatted)
+      const name = await getEnsName(toFormatted)
       let title = name ? name : toFormatted
 
-      const src = 'https://ipfs.io/ipfs/' + toBase58(data.hash)
+      const src = 'https://ipfs-cluster.ethdevops.io/ipfs/' + toBase58(data.hash) // data.image || '' // 'https://ipfs.io/ipfs/' + toBase58(data.hash)
       const txLink = etherscan + transactionHash
       setState({ data, title, src, txLink })
     } catch (error) {
@@ -83,13 +85,9 @@ export default function NftCard(props: NftCardProps) {
       >
         <Card variant={'outlined'} sx={{ borderRadius: 5, zIndex: 10 }}>
           {state.src.length < 55 ? (
-            <>
-              <Skeleton variant={'rectangular'} width={300} height={350}>
-                <CardMedia component={'img'} width={200} image={state.src} alt={'nftimage'} />
-              </Skeleton>
-            </>
+            <CardMedia component={'img'} width={200} height={360} image={state.src} alt={'Remixer test NFT'} />
           ) : state.data.tokenType === 'Remixer' ? (
-            <CardMedia component={'img'} width={200} height={360} image={state.src} alt={'Remixer NFT'} />
+            <CardMedia component={'img'} width={200} height={360} image={state.src} alt={'Remixer NFT test'} />
           ) : (
             <CardMedia component={'img'} width={200} image={state.src} alt={'nftimage'} />
           )}

packages/react-app/src/components/RewardGroupCard.tsx

@@ -9,6 +9,7 @@ import MuiAlert, { AlertProps } from '@mui/material/Alert'
 import AccordionInnards from './AccordionInnards'
 
 export const toBase58 = (contentHash: any) => {
+  if (!contentHash) return ''
   let hex = contentHash.substring(2)
   let buf = multihash.fromHexString(hex)
   return multihash.toB58String(buf)
@@ -40,10 +41,11 @@ export default function RewardGroupCard(props: any) {
 
   const run = useCallback(async () => {
     try {
+      console.log('RewardGroupCard', props.event)
       const title = props.event[0].tokenType
       const tokenType = props.event[0].tokenType
       const payload = props.event[0].payload
-      const src = 'https://ipfs.io/ipfs/' + toBase58(props.event[0].hash)
+      const src = 'https://ipfs-cluster.ethdevops.io/ipfs/' + toBase58(props.event[0].hash) // props.event[0].fileName || 'https://ipfs.io/ipfs/' + toBase58(props.event[0].hash)
 
       const rewardCount = props.event.length
       setState({ title, src, rewardCount, tokenType, payload })
@@ -77,13 +79,9 @@ export default function RewardGroupCard(props: any) {
     >
       <Card variant={'outlined'} sx={{ borderRadius: 5, zIndex: 10 }}>
         {state.src.length < 55 ? (
-          <>
-            <Skeleton variant={'rectangular'} width={300} height={350}>
-              <CardMedia component={'img'} width={200} image={state.src} alt={'nftimage'} />
-            </Skeleton>
-          </>
+          <CardMedia component={'img'} width={200} image={state.src} alt={'Remixer NFT'} />
         ) : state.tokenType === 'Remixer' ? (
-          <CardMedia component={'img'} width={200} height={360} image={state.src} alt={'Remixer NFT'} />
+          <CardMedia component={'img'} width={200} image={state.src} alt={'Remixer NFT'} />
         ) : (
           <CardMedia component={'img'} width={200} image={state.src} alt={'nftimage'} />
         )}

packages/react-app/src/contracts/external_contracts.js

@@ -1616,6 +1616,16 @@ module.exports = {
     provider: 'https://opt-mainnet.g.alchemy.com/v2/cdGnPX6sQLXv-YWkbzYAXnTVVfuL8fhb',
     etherscan: 'https://optimistic.etherscan.io/tx/'
   },
+  534352: {
+    contracts: {      
+      REMIX_REWARD: {
+        address: "0x2bC16Bf30435fd9B3A3E73Eb759176C77c28308D",
+        abi: remixRewardAbi
+      }
+    },
+    provider: 'https://scroll-mainnet.chainstacklabs.com',
+    etherscan: 'https://scrollscan.com/tx/'
+  },
   5: {
     contracts: {
       REMIX_REWARD: {

packages/react-app/src/helpers/SwitchToOptimism.js

@@ -64,6 +64,38 @@ export async function switchNetworkChain(selectedChainId) {
     await switchToGoerli(correctHexChainId)
     return
   }
+  if (selectedChainId === 534352) {
+    await switchToScroll(correctHexChainId)
+    return
+  }
+}
+
+export async function switchToScroll(correctHexChainId) {
+  console.log({ correctHexChainId })
+  try {
+    await window.ethereum.request({
+      method: 'wallet_switchEthereumChain',
+      params: [{ chainId: correctHexChainId }],
+    })
+  } catch (switchError) {
+    console.log({ switchError })
+    try {
+      await window.ethereum.request({
+        method: 'wallet_addEthereumChain',
+        params: [
+          {
+            chainId: correctHexChainId,
+            chainName: externalParams[1].testchainName,
+            rpcUrls: [...externalParams[1].testrpcUrls],
+          },
+        ],
+      })
+      await window.ethereum.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{ chainId: correctHexChainId }],
+      })
+    } catch (addError) {}
+  }
 }
 
 export async function switchToGoerli(correctHexChainId) {

packages/react-app/src/helpers/getAllRewards.js

@@ -15,14 +15,15 @@ export async function getAllRewards(contractAddress, provider) {
         {
           address: '' + contractAddress + '',
           topics: ['0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef'],
-          fromBlock: '0x58B5AB',
+          fromBlock: '0x0',
         },
       ],
       id: 0,
     }),
   })
   result = await result.json()
   // @ts-ignore
+  console.log('reward', result, contractAddress, provider)
   return result.result.reverse()
 }
 

packages/react-app/src/helpers/getTokenData.js

@@ -0,0 +1,56 @@
+
+const chains = {
+    10: 'optimism',
+    534352: 'scroll'
+}
+
+const chainsAddresses = {
+    'optimism': '0x5d470270e889b61c08C51784cDC73442c4554011',
+    'scroll': '0x2bC16Bf30435fd9B3A3E73Eb759176C77c28308D'
+}
+
+const cache = {}
+
+export async function getTokenData(chainId, id) {
+    id = parseInt(id)
+   let result
+    if (cache[chainId + ' ' + id]) {
+        result = cache[chainId + ' ' + id]
+    }
+
+
+    if (!result) {
+        try {
+            console.log('getTokenData', id)
+            result = await fetch(`https://remix-reward-api.vercel.app/api-${chains[chainId]}/${id}`)
+            console.log('getTokenData response', id)
+            result = await result.json()
+            cache[chainId + ' ' + id] = result
+        } catch (e) {
+            return {
+                tokenType: `token type ${id}`,
+                payload: `payload ${id}`,
+                hash: null
+            }
+        }
+    }
+    result.data.push(result.image)
+    return result.data
+}
+
+export async function getEnsName(address) {
+    let result
+    if (cache['ens_' + address]) {
+        result = cache['ens_' + address]
+    } else {
+        try {
+            result = await fetch(`https://remix-reward-api.vercel.app/ens/${address}`)
+            result = await result.json()
+            cache['ens_' + address] = result            
+        } catch (e) {
+            return undefined
+        }
+    }
+    return result.name
+}
+

packages/react-app/src/types/rewardTypes.ts

@@ -62,12 +62,14 @@ export interface NftCardProps {
   transactionHash: string
   contract: any
   mainnet: any
+  chainId: number
 }
 
 export interface TokensData {
   payload: string
   tokenType: string
   hash: string
+  image?: string
 }
 
 export interface NavbarProps {