Canvas profile perks

.env.template

@@ -1,35 +1,73 @@
 REACT_APP_VERSION="1.0.0"
-REACT_APP_MAIN_ENVIRONMENT = "Sepolia" # used to determine which SCROLL_ENVIRONMENT is to be treated as the main/production one
-REACT_APP_SCROLL_ENVIRONMENT = "Sepolia"
+
+REACT_APP_MAIN_ENVIRONMENT = "Mainnet" # used to determine which SCROLL_ENVIRONMENT is to be treated as the main/production one
 REACT_APP_ETH_SYMBOL = "ETH"
 REACT_APP_PREFIX_CLS = "scroll"
 REACT_APP_SENTRY_DSN = "https://791d7df9132d46a9868de0863bd6583c@o4504371258785792.ingest.sentry.io/4504371261079552"
 REACT_APP_GOOGLE_ANALYTICS_ID = "G-XR3MGVSHFC"
 REACT_APP_CONNECT_WALLET_PROJECT_ID = "14efbaafcf5232a47d93a68229b71028"
+REACT_APP_UNIFRA_API_KEY = "9d431c1c-d717-4931-9595-ad0b3a246d13"
+REACT_APP_NFT_VIEWER_URL="https://nft.scroll.io"
+REACT_APP_NFT_API_URI="https://nft.scroll.io"
+REACT_APP_ENS_API_URL="https://ens.scroll.cat"
+
+REACT_APP_SCROLL_ENVIRONMENT = "Staging"
 REACT_APP_API_BASE_URI = "https://sepolia-api.scroll.io"
-REACT_APP_BRIDGE_API_URI = "https://sepolia-api-bridge.scroll.io/api"
+REACT_APP_BRIDGE_API_URI = "https://sepolia-api-bridge-v2.scroll.io/api"
 REACT_APP_ROLLUPSCAN_API_URI = "https://sepolia-api-re.scroll.io/api"
 REACT_APP_CHAIN_ID_L1 = "11155111"
 REACT_APP_CHAIN_ID_L2 = "534351"
 REACT_APP_EXTERNAL_RPC_URI_L1 = "https://ethereum-sepolia.blockpi.network/v1/rpc/public"
 REACT_APP_EXTERNAL_RPC_URI_L2 = "https://sepolia-rpc.scroll.io"
 REACT_APP_EXTERNAL_EXPLORER_URI_L1 = "https://sepolia.etherscan.io"
-REACT_APP_EXTERNAL_EXPLORER_URI_L2 = "https://sepolia-blockscout.scroll.io"
-REACT_APP_L2_SCAN_URI = "https://scroll.unifra.xyz/"
-REACT_APP_EXTERNAL_EXPLORER_URI_DORA = "https://www.ondora.xyz/zh/network/scroll-sepolia/interactions"
-REACT_APP_ETHERSCAN_L2 = "https://sepolia.scrollscan.dev"
+REACT_APP_EXTERNAL_EXPLORER_URI_L2 = "https://sepolia.scrollscan.com"
+REACT_APP_L2_SCAN_URI = "https://scroll-sepolia.l2scan.co"
+REACT_APP_EXTERNAL_EXPLORER_URI_DORA = "https://www.ondora.xyz/network/scroll-sepolia"
+REACT_APP_ETHERSCAN_L2 = "https://sepolia.scrollscan.com"
+REACT_APP_SCROLL_VENUS_URI = "https://sepolia-venus.scroll.io"
 REACT_APP_L2_SWAP_URI = "https://uniswap-showcase.sepolia.scroll.xyz/"
-REACT_APP_L1_ETH_GATEWAY_PROXY_ADDR="0x8A54A2347Da2562917304141ab67324615e9866d"
-REACT_APP_L2_ETH_GATEWAY_PROXY_ADDR="0x91e8ADDFe1358aCa5314c644312d38237fC1101C"
-REACT_APP_L1_WETH_GATEWAY_PROXY_ADDR="0x3dA0BF44814cfC678376b3311838272158211695"
-REACT_APP_L2_WETH_GATEWAY_PROXY_ADDR="0x481B20A927206aF7A754dB8b904B052e2781ea27"
+REACT_APP_L1_ETH_GATEWAY_PROXY_ADDR = "0x8A54A2347Da2562917304141ab67324615e9866d"
+REACT_APP_L2_ETH_GATEWAY_PROXY_ADDR = "0x91e8ADDFe1358aCa5314c644312d38237fC1101C"
+REACT_APP_L1_WETH_GATEWAY_PROXY_ADDR = "0x3dA0BF44814cfC678376b3311838272158211695"
+REACT_APP_L2_WETH_GATEWAY_PROXY_ADDR = "0x481B20A927206aF7A754dB8b904B052e2781ea27"
+REACT_APP_L1_CUSTOM_ERC20_GATEWAY_PROXY_ADDR = "0x31C994F2017E71b82fd4D8118F140c81215bbb37"
+REACT_APP_L2_CUSTOM_ERC20_GATEWAY_PROXY_ADDR = "0x058dec71E53079F9ED053F3a0bBca877F6f3eAcf"
+REACT_APP_L1_USDC_GATEWAY_PROXY_ADDR = ""
+REACT_APP_L2_USDC_GATEWAY_PROXY_ADDR= ""
+REACT_APP_L1_DAI_GATEWAY_PROXY_ADDR = "0x8b0B9c4e9f41b9bbDEfFee24F9f11C328093d248"
+REACT_APP_L2_DAI_GATEWAY_PROXY_ADDR = "0xbF28c28490988026Dca2396148DE50136A54534e"
+REACT_APP_L1_LIDO_GATEWAY_PROXY_ADDR = "0xF22B24fa7c3168f30b17fd97b71bdd3162DDe029"
+REACT_APP_L2_LIDO_GATEWAY_PROXY_ADDR = "0x635B054A092F6aE61Ce0Fddc397A704F6626510D"
+REACT_APP_L1_PUFFER_GATEWAY_PROXY_ADDR = "0xA033Ff09f2da45f0e9ae495f525363722Df42b2a"
+REACT_APP_L2_PUFFER_GATEWAY_PROXY_ADDR = "0x9eBf2f33526CD571f8b2ad312492cb650870CFd6"
 REACT_APP_L1_STANDARD_ERC20_GATEWAY_PROXY_ADDR = "0x65D123d6389b900d954677c26327bfc1C3e88A13"
 REACT_APP_L2_STANDARD_ERC20_GATEWAY_PROXY_ADDR = "0xaDcA915971A336EA2f5b567e662F5bd74AEf9582"
-REACT_APP_L1_SCROLL_MESSENGER="0x50c7d3e7f7c656493D1D76aaa1a836CedfCBB16A"
-REACT_APP_L2_SCROLL_MESSENGER="0xBa50f5340FB9F3Bd074bD638c9BE13eCB36E603d"
+REACT_APP_L1_SCROLL_MESSENGER = "0x50c7d3e7f7c656493D1D76aaa1a836CedfCBB16A"
+REACT_APP_L2_SCROLL_MESSENGER = "0xBa50f5340FB9F3Bd074bD638c9BE13eCB36E603d"
 REACT_APP_L1_GATEWAY_ROUTER_PROXY_ADDR = "0x13FBE0D0e5552b8c9c4AE9e2435F38f37355998a"
 REACT_APP_L2_GATEWAY_ROUTER_PROXY_ADDR = "0x9aD3c5617eCAa556d6E166787A97081907171230"
 REACT_APP_L1_GAS_PRICE_ORACLE = "0x5300000000000000000000000000000000000002"
+REACT_APP_SCROLL_CHAIN = "0x2D567EcE699Eabe5afCd141eDB7A4f2D0D6ce8a0"
+REACT_APP_L1_MESSAGE_QUEUE = "0xF0B2293F5D834eAe920c6974D50957A1732de763"
+REACT_APP_L1_BATCH_BRIDGE_GATEWAY_PROXY_ADDR = "0xE86ad3312FA693aDeD34dEc3899176d97ac883B2"
+REACT_APP_SCROLL_ORIGINS_NFT="0x90a274D591d5AB1a25f0DD0F06F28533C34D7d9f"
+REACT_APP_SCROLL_ORIGINS_NFT_V2="0xDd7d857F570B0C211abfe05cd914A85BefEC2464"
+REACT_APP_L1_MESSAGE_QUEUE_WITH_GAS_PRICE_ORACLE="0xF0B2293F5D834eAe920c6974D50957A1732de763"
+REACT_APP_OPEN_BLOCK_URI="https://kx58j6x5me.execute-api.us-east-1.amazonaws.com"
+REACT_APP_OKX_URI="https://www.okx.com/web3/explorer/scroll?channelId=scroll"
+REACT_APP_BLOCKSCOUT_URI="https://scroll.blockscout.com/"
 REACT_APP_L2_GAS_PRICE_ORACLE = "0x247969F4fad93a33d4826046bc3eAE0D36BdE548"
-REACT_APP_SCROLL_CHAIN="0x2D567EcE699Eabe5afCd141eDB7A4f2D0D6ce8a0"
-REACT_APP_L1_MESSAGE_QUEUE="0xF0B2293F5D834eAe920c6974D50957A1732de763"
+
+REACT_APP_EAS_ADDRESS="0xaEF4103A04090071165F78D45D83A0C0782c2B2a"
+REACT_APP_BADGE_SCHEMA="0xa35b5470ebb301aa5d309a8ee6ea258cad680ea112c86e456d5f2254448afc74"
+REACT_APP_PROFILE_REGISTRY_ADDRESS="0x26aa585d5Da74A373E58c4fA723E1E1f6FD6474f"
+REACT_APP_BADGE_RESOLVER_ADDRESS="0xd2270b3540FD2220Fa1025414e1625af8B0dd8f3"
+REACT_APP_EAS_GRAPHQL_URL="https://scroll-sepolia.easscan.org/graphql"
+REACT_APP_CANVAS_BACKEND_URI="https://skelly-backend-git-sepolia-scroll-tech.vercel.app"
+REACT_APP_FFRONTENDS_URL = "https://scroll-skelly.env.scroll.io"
+REACT_APP_EAS_EXPLORER_URL = "https://scroll-sepolia.easscan.org"
+REACT_APP_ETHEREUM_YEAR_BADGE_API_URI = "https://genesis-nft-backend-git-sepolia-scroll-tech.vercel.app"
+REACT_APP_BADGE_REGISTRY_URL="https://badge-registry.canvas.scroll.cat"
+REACT_APP_BADGE_INDEXER_URL="https://canvas-indexer.scroll.cat"
+REACT_APP_ETHEREUM_YEAR_BADGE_ADDRESS = "0xB59B6466B21a089c93B14030AF88b164905a58fd"
+REACT_APP_SCR_HOLDING_BADGE_ADDRESS = "0xef071708e09becfeac1e3d8afa1602bb6eb57922"

.envrc

@@ -0,0 +1,3 @@
+layout node
+
+dotenv_if_exists .env

.github/workflows/bump_version.yml

@@ -6,7 +6,7 @@ name: "Bump Version on sepolia"
 on:
   push:
     branches:
-      - sepolia
+      - disabled-sepolia
 
 jobs:
   bump-version:

.github/workflows/merge_prod_back_to_dev.yml

@@ -5,7 +5,7 @@ name: "Merge Prod Back to Dev"
 on:
   push:
     branches:
-      - mainnet
+      - disabled-mainnet
 
 jobs:
   merge-back:

.gitignore

@@ -24,4 +24,13 @@ yarn-error.log*
 
 .vscode
 .env
-.tool-versions
+.tool-versions
+
+
+.next
+next-env.d.ts
+
+/src/pages/blog/data.json
+
+# Local Netlify folder
+.netlify

craco.config.js

@@ -2,7 +2,8 @@ const CracoLessPlugin = require("craco-less")
 const webpack = require("webpack")
 const path = require("path")
 const MiniCssExtractPlugin = require("mini-css-extract-plugin")
-const SentryWebpackPlugin = require("@sentry/webpack-plugin")
+// const SentryWebpackPlugin = require("@sentry/webpack-plugin")
+require("./scripts/download-blog-posts.data.json.js")
 
 module.exports = {
   babel: {
@@ -73,14 +74,22 @@ module.exports = {
           fullySpecified: false,
         },
       })
-      if (env === "production") {
-        const sentryPlugin = new SentryWebpackPlugin({
-          org: "scroll-zkp",
-          project: "scroll-io",
-          include: "./build",
-          release: process.env.REACT_APP_VERSION,
-        })
-        webpackConfig.plugins.push(sentryPlugin)
+
+      webpackConfig.module.rules.push({
+        test: /\.m?js$/,
+        include: /node_modules/,
+        type: "javascript/auto",
+        resolve: {
+          fullySpecified: false,
+        },
+      })
+
+      if (env === "production" && process.env.CI) {
+        // const sentryPlugin = new SentryWebpackPlugin({
+        //   include: "./build",
+        //   release: process.env.REACT_APP_VERSION,
+        // })
+        // webpackConfig.plugins.push(sentryPlugin)
 
         const instanceOfMiniCssExtractPlugin = webpackConfig.plugins.find(plugin => plugin instanceof MiniCssExtractPlugin)
         instanceOfMiniCssExtractPlugin.options.ignoreOrder = true

docs/canvas.md

@@ -0,0 +1,80 @@
+# Scroll Canvas - Anthropomorphic "assistants" Integration Guide for Developers
+
+## Introduction
+
+This guide provides developers with the necessary steps to integrate the Canvas minting functionality on the Scroll network into third-party platforms. By following this guide, you will enable your users to mint badges directly from your platform.
+
+## Prerequisites
+
+Ensure that your platform is compatible with and connected to the Scroll network. Developers should have a basic understanding of blockchain interactions and contract operations within the Scroll ecosystem.
+
+## Integration Steps
+
+### Step 1: Network Connection
+
+Before initiating any minting operations, verify that the platform is connected to the Scroll network.
+
+### Step 2: Compliance with Minting Requirements
+
+Check for compliance with predefined minting rules set by your platform. These rules are defined by partners and should be verified before proceeding.
+
+### Step 3: Mint Prompt
+
+A scrolly can be placed in the corner of the page to remind the user to mint a badge.
+![Canvas on Bridge](https://github.com/user-attachments/assets/3b8445f5-8890-453f-b92c-4834dad5846c)
+[Reference code](https://github.com/scroll-tech/frontends/blob/mainnet/src/pages/bridge/components/MintBadge/index.tsx)
+
+After clicking the button, there are two ways to show the badge introduction:
+
+- Redirect to badge introduction page 【officially used】
+  ![CleanShot 2024-09-11 at 13 58 01@2x](https://github.com/user-attachments/assets/62a21eb5-3bbf-49a5-8599-8d1c2fc71805)
+  [Reference code](https://github.com/scroll-tech/frontends/blob/mainnet/src/pages/canvas/badgeContract/index.tsx)
+- Show a mint pop-up displaying badge introduction
+  ![BadgeDetailDialog](https://github.com/user-attachments/assets/8a664aa2-9d17-4f38-a170-11bb0f413e20)
+  [Reference code](https://github.com/scroll-tech/frontends/blob/mainnet/src/pages/canvas/Dashboard/BadgeDetailDialog/index.tsx)
+
+##### Main actions:
+
+1. Retrieve the badge description information according to [badgeTokenURI](https://github.com/scroll-tech/canvas-contracts/blob/master/src/badge/extensions/ScrollBadgeDefaultURI.sol) and display it to the user.
+2. Check if the user already has this badge
+3. Check user eligibility for minting
+4. Display an ineligibility message according to the badge type
+5. Disable the mint button for ineligible users
+6. Enable the mint button for eligible users
+
+### Step 4: Additional Conditions
+
+Badges and Canvas are not inherently linked, meaning a user can mint a badge without minting a Canvas. However, if you want to require the user to mint the Canvas first before minting the badge (so that the minted badge can be automatically attached to the Scroll Canvas), you can add an extra check for this.
+
+- On a badge introduction page  
+  ![BadgeDetailPage without Canvas](https://github.com/user-attachments/assets/6c6e1dfe-cac1-4e82-8e8d-02c3e88ae148)
+
+- On a badge introduction modal  
+  ![BadgeDetailDialog without Canvas](https://github.com/user-attachments/assets/56d92a81-81c8-42fc-98e1-4f6df729bc67)
+
+[Reference Code](https://github.com/scroll-tech/frontends/blob/mainnet/src/services/canvasService.ts#L128)
+
+### Step 5: Execute Mint Operation
+
+Scroll supports 3 different types of badges, each with its corresponding minting method except for gifted badge which would be minted by the issuer. You can refer to [the function](https://github.com/scroll-tech/frontends/blob/mainnet/src/services/canvasService.ts#L330) for details.
+
+### Step 6: Post-Mint Process
+
+After minting successfully,
+
+- Redirect to the user’s badge detail page and display the badge details.
+  ![BadgeDetailPage](https://github.com/user-attachments/assets/4a0d53ae-7a24-4c1c-abdf-d6c7716a2a4c)
+  [Reference code](https://github.com/scroll-tech/frontends/blob/mainnet/src/pages/canvas/badge/index.tsx)
+
+- Only display a success notification.
+  [Reference code](https://github.com/scroll-tech/frontends/blob/mainnet/src/pages/canvas/Dashboard/BadgeDetailDialog/index.tsx#L121)
+
+## Conclusion
+
+[canvasService](https://github.com/scroll-tech/frontends/blob/mainnet/src/services/canvasService.ts) includes many useful methods for interacting with Canvas-related contracts, like: `getBadgeMetadata`, `checkIfHasBadgeByAddress`, `mintBadge`.
+
+[badgeContract](https://github.com/scroll-tech/frontends/blob/mainnet/src/pages/canvas/badgeContract/index.tsx) and [badge](https://github.com/scroll-tech/frontends/blob/mainnet/src/pages/canvas/badge/index.tsx) are the two important parts currently used in the Scroll frontend's mint badge process.
+
+Additionally, if you want a more lightweight way to integrate the mint badge process into your website, [BadgeDetailDialog](https://github.com/scroll-tech/frontends/blob/mainnet/src/pages/canvas/Dashboard/BadgeDetailDialog/index.tsx) is a solution worth trying.
+
+This guide should assist you in integrating the Canvas mint functionality within your platform. If you need additional support or have some questions, please contact our developer support team.