Merge pull request #1151 from scroll-tech/session-zero-tokens

Session zero tokens

src/pages/bridge/Send/SendTransaction/TokenList.tsx

@@ -12,7 +12,7 @@ import ListItemText from "@mui/material/ListItemText"
 import { EXPLORER_URL } from "@/constants"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
 import useAddToken, { TOKEN_LEVEL } from "@/hooks/useAddToken"
-import { tokenList } from "@/pages/sessions/SessionZeroMarks/tokenList"
+import { tokenList } from "@/pages/sessions-one/SessionZeroMarks/tokenList"
 import useBridgeStore from "@/stores/bridgeStore"
 import { generateExploreLink, truncateHash } from "@/utils"
 

src/pages/sessions-one/SessionZeroMarks/List.tsx

@@ -1,4 +1,4 @@
-import { isNumber } from "lodash"
+import { isNull, isNumber } from "lodash"
 
 import { Avatar, Box, Button, Link, List, ListItem, ListItemIcon, ListItemText, Skeleton, Stack, SvgIcon, Typography } from "@mui/material"
 import { useTheme } from "@mui/material/styles"
@@ -83,7 +83,11 @@ const MarkList = props => {
             }}
           >
             <ListItemIcon sx={{ minWidth: "unset" }}>
-              <Avatar variant="square" sx={{ width: ["4rem", "4.8rem", "5.6rem"], height: ["4rem", "4.8rem", "5.6rem"] }} src={item.logoURI}></Avatar>
+              <Avatar
+                variant="square"
+                sx={{ width: ["4rem", "4.8rem", "5.6rem"], height: ["4rem", "4.8rem", "5.6rem"], borderRadius: "0.6rem" }}
+                src={item.logoURI}
+              ></Avatar>
             </ListItemIcon>
             <ListItemText sx={{ mt: 0, mb: 0 }}>
               {type === MarksType.GAS_SPENT && (
@@ -109,7 +113,7 @@ const MarkList = props => {
               {type === MarksType.ELIGIBLE_ASSETS && (
                 <>
                   <Typography
-                    sx={{ fontSize: ["1.6rem", "2rem"], lineHeight: ["2.4rem", "3.2rem"], fontWeight: 600, maxWidth: ["12rem", "12rem", "unset"] }}
+                    sx={{ fontSize: ["1.6rem", "2rem"], lineHeight: ["2.4rem", "3.2rem"], fontWeight: 600, maxWidth: ["12rem", "15rem", "unset"] }}
                   >
                     {item.name}
                   </Typography>
@@ -129,7 +133,7 @@ const MarkList = props => {
               )}
             </ListItemText>
 
-            <MarksTooltip key={item.marks} disabled={!item.marks} title={item.marks ? commafy(item.marks) : "--"}>
+            {isNull(item.marks) ? (
               <Box
                 sx={{
                   justifySelf: "flex-end",
@@ -138,18 +142,34 @@ const MarkList = props => {
                     position: "absolute",
                     left: "50%",
                     transform: "translateX(-50%)",
-                    // p: "0.8rem 1.6rem",
                   },
                 }}
               >
-                <Statistic
-                  count={isNumber(item.marks) ? formatLargeNumber(item.marks, 2) : "--"}
-                  label="Marks earned"
-                  isLoading={isLoading}
-                  sx={{}}
-                ></Statistic>
+                <Typography sx={{ fontSize: ["1.4rem", "1.6rem"] }}>Coming soon</Typography>
               </Box>
-            </MarksTooltip>
+            ) : (
+              <MarksTooltip key={item.marks} disabled={!item.marks} title={item.marks ? commafy(item.marks) : "--"}>
+                <Box
+                  sx={{
+                    justifySelf: "flex-end",
+                    // will replace responsive css in Statistic
+                    [theme.breakpoints.up("sm")]: {
+                      position: "absolute",
+                      left: "50%",
+                      transform: "translateX(-50%)",
+                      // p: "0.8rem 1.6rem",
+                    },
+                  }}
+                >
+                  <Statistic
+                    count={isNumber(item.marks) && item.marks >= 0 ? formatLargeNumber(item.marks, 2) : "--"}
+                    label="Marks earned"
+                    isLoading={isLoading}
+                    sx={{}}
+                  ></Statistic>
+                </Box>
+              </MarksTooltip>
+            )}
 
             {type === MarksType.ELIGIBLE_ASSETS && (
               <Button

src/pages/sessions-one/SessionZeroMarks/index.tsx

@@ -1,3 +1,4 @@
+import { isUndefined } from "lodash"
 import useSWR from "swr"
 
 import { Divider, Typography } from "@mui/material"
@@ -14,11 +15,11 @@ import MarkList, { MarksType } from "./List"
 import { gasList, tokenList } from "./tokenList"
 
 const defaultMarks = {
-  tokensMarks: tokenList.map(item => ({ ...item, marks: null })),
+  tokensMarks: tokenList.map(item => ({ ...item, marks: -1 })),
   gasMarks: gasList.map(item => ({
     ...item,
     amount: null,
-    marks: null,
+    marks: -1,
   })),
 }
 
@@ -36,8 +37,10 @@ const BridgePoints = () => {
 
         const list = await scrollRequest(url)
         const tokensMarks = tokenList.map(item => {
-          const withMarks = list.filter(item => item.points).find(i => i.bridge_asset.toUpperCase() === item.key.toUpperCase())
-          let marks = withMarks?.points ?? 0
+          const withMarks = list
+            .filter(item => Object.keys(item).includes("points"))
+            .find(i => i.bridge_asset.toUpperCase() === item.key.toUpperCase())
+          let marks = isUndefined(withMarks?.points) ? 0 : withMarks?.points
 
           return {
             ...item,

src/pages/sessions-one/SessionZeroMarks/tokenList.ts

@@ -33,6 +33,18 @@ export const tokenList = [
     logoURI: "https://scroll-tech.github.io/token-list/data/USDT/logo.svg",
     address: "0xf55BEC9cafDbE8730f096Aa55dad6D22d44099Df",
   },
+  {
+    name: "weETH",
+    symbol: "weETH",
+    key: "weETH",
+    logoURI: "/imgs/sessions/tokens/weETH.png",
+    address: "0xcA0bFd5f735924e34Cc567146989e467fFbbCe1a",
+    thirdPartyBridge: {
+      url: "https://stargate.finance/bridge",
+      name: "Stargate",
+      // name:"etherfi"
+    },
+  },
   {
     name: "wrsETH",
     symbol: "wrsETH",
@@ -51,6 +63,24 @@ export const tokenList = [
     logoURI: "/imgs/sessions/tokens/wstETH.svg",
     address: "0xf610A9dfB7C89644979b4A0f27063E9e7d7Cda32",
   },
+  {
+    name: "WBTC",
+    symbol: "WBTC",
+    key: "WBTC",
+    logoURI: "/imgs/sessions/tokens/WBTC.svg",
+    address: "0x3C1BCa5a656e69edCD0D4E36BEbb3FcDAcA60Cf1",
+  },
+  {
+    name: "SolvBTC.b",
+    symbol: "SolvBTC.b",
+    key: "solvBTC",
+    logoURI: "/imgs/sessions/tokens/solvBTC.png",
+    address: "0x3Ba89d490AB1C0c9CC2313385b30710e838370a4",
+    thirdPartyBridge: {
+      url: "https://free.tech/",
+      name: "Free",
+    },
+  },
   {
     name: "STONE",
     symbol: "STONE",
@@ -76,6 +106,26 @@ export const tokenList = [
       name: "Tranchess",
     },
   },
+  {
+    name: "Assets on Pencils’ Vaults",
+    key: "PENCILS",
+    logoURI: "/imgs/sessions/tokens/Pencils.jpeg",
+    containedTokens: [
+      { logoURI: ETHSvg, symbol: ETH_SYMBOL },
+      { logoURI: "https://scroll-tech.github.io/token-list/data/USDC/logo.svg", symbol: "USDC" },
+      { logoURI: "https://scroll-tech.github.io/token-list/data/USDT/logo.svg", symbol: "USDT" },
+      { logoURI: "/imgs/sessions/tokens/weETH.png", symbol: "weETH" },
+      { logoURI: "/imgs/sessions/tokens/wrsETH.svg", symbol: "wrsETH" },
+      { logoURI: "https://scroll-tech.github.io/token-list/data/wstETH/logo.svg", symbol: "wstETH" },
+      { logoURI: "/imgs/sessions/tokens/WBTC.svg", symbol: "WBTC" },
+      { logoURI: "/imgs/sessions/tokens/solvBTC.png", symbol: "SolvBTC.b" },
+      { logoURI: "/imgs/sessions/tokens/stone-white.svg", symbol: "STONE" },
+    ],
+    thirdPartyBridge: {
+      url: "https://pencilsprotocol.io/staking",
+      name: "Pencils",
+    },
+  },
 ]
 
 export const gasList = [