Feat/Base Chain support (#1741)

* base chain changes

* add custom scroll bar

package.json

@@ -34,7 +34,7 @@
     "@metamask/eth-sig-util": "^4.0.0",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.5.0",
-    "@pushprotocol/restapi": "1.7.20",
+    "@pushprotocol/restapi": "1.7.23",
     "@pushprotocol/socket": "0.5.3",
     "@pushprotocol/uiweb": "1.4.2",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
@@ -50,11 +50,11 @@
     "@uniswap/widgets": "^2.47.3",
     "@unstoppabledomains/resolution": "8.5.0",
     "@web3-name-sdk/core": "^0.1.18",
-    "@web3-onboard/coinbase": "^2.2.5",
-    "@web3-onboard/core": "2.21.6",
-    "@web3-onboard/injected-wallets": "2.10.16",
-    "@web3-onboard/react": "^2.8.9",
-    "@web3-onboard/walletconnect": "2.5.5",
+    "@web3-onboard/coinbase": "^2.4.1",
+    "@web3-onboard/core": "2.22.2",
+    "@web3-onboard/injected-wallets": "2.11.1",
+    "@web3-onboard/react": "^2.9.2",
+    "@web3-onboard/walletconnect": "2.6.1",
     "@yisheng90/react-loading": "1.2.3",
     "assert": "2.0.0",
     "babel-plugin-styled-components": "1.10.7",

src/blocks/box/Box.tsx

@@ -7,6 +7,7 @@ import { getBlocksColor, getBlocksBorder, getBlocksBorderRadius } from '../Block
 import { BoxCSSProps, BoxComponentProps } from './Box.types';
 import { getBoxResponsiveCSS } from './Box.utils';
 import { boxRestrictedCSSPropKeys } from './Box.constants';
+import { colorBrands } from 'blocks/theme/colors/colors.brands';
 
 export type BoxProps = BoxCSSProps & BoxComponentProps & TransformedHTMLAttributes<HTMLDivElement>;
 
@@ -28,27 +29,24 @@ const StyledBox = styled.div.withConfig({
   position: ${(props) => props.position};
 
   // push custom scroll
-  &::-webkit-scrollbar-track {
-    background-color: none;
-    border-radius: 9px;
-  }
+  ${(props) =>
+    props.customScrollbar &&
+    `
+    &::-webkit-scrollbar-track {
+      background-color: none;
+      border-radius: 9px;
+    }
 
-  &::-webkit-scrollbar {
-    background-color: none;
-    width: 4px;
-  }
+    &::-webkit-scrollbar {
+      background-color: none;
+      width: 4px;
+    }
 
-  &::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background-image: -webkit-gradient(
-      linear,
-      left top,
-      left bottom,
-      color-stop(0.44, #cf1c84),
-      color-stop(0.72, #cf1c84),
-      color-stop(0.86, #cf1c84)
-    );
-  }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background: ${colorBrands[`primary-500`]};
+    }
+  `}
 
   /* Extra CSS prop */
   ${(props) => props.css || ''}

src/blocks/box/Box.types.ts

@@ -75,6 +75,8 @@ export type BoxComponentProps = {
   css?: FlattenSimpleInterpolation;
   /* Child react nodes rendered by Box */
   children?: ReactNode;
+  // option to add custom scroll bar to box
+  customScrollbar?: boolean;
 };
 
 export type BoxResponsiveCSSProperties =

src/components/ChangeNetwork.tsx

@@ -53,7 +53,7 @@ const ChangeNetwork = () => {
           color="#fff"
           radius="15px"
           padding="20px 20px"
-          onClick={() => switchChain(aliasChainId)}
+          onClick={() => switchChain(parseInt(aliasChainId))}
         >
           <Span
             color="#fff"

src/components/Faucets.tsx

@@ -88,6 +88,13 @@ const Faucets = () => {
       function: () => {},
       link: 'https://cyber-testnet.testnets.rollbridge.app/',
     },
+    {
+      id: '84532',
+      value: 'Base Sepolia',
+      title: 'Base Sepolia Faucet',
+      function: () => {},
+      link: 'https://www.alchemy.com/faucets/base-sepolia',
+    },
   ];
 
   // render

src/components/VerifyAlias.tsx

@@ -69,6 +69,10 @@ const VerifyAlias = ({ aliasEthAccount, setAliasVerified }) => {
       label: 'Cyber ETH',
       url: 'https://cyber-testnet.testnets.rollbridge.app/',
     },
+    84532: {
+      label: 'Base Sepolia',
+      url: 'https://www.alchemy.com/faucets/base-sepolia',
+    },
   };
 
   const checkAlias = async () => {

src/config/config-dev.js

@@ -32,6 +32,7 @@ export const config = {
     421614, // arbitrum testnet
     123, // fuse testnet
     111557560, // Cyber testnet
+    84532, //base sepolia
   ],
 
   /**
@@ -182,4 +183,11 @@ export const CHAIN_DETAILS = {
     rpcUrl: 'https://cyber-testnet.alt.technology/',
     commAddress: '0x9cb3bd7550B5c92baA056Fc0F08132f49508145F',
   },
+  84532: {
+    label: 'Base Sepolia',
+    name: 'BASE_TESTNET',
+    chainid: 84532,
+    rpcUrl: 'https://sepolia.base.org/',
+    commAddress: '0x9cb3bd7550B5c92baA056Fc0F08132f49508145F',
+  },
 };

src/config/config-prod.js

@@ -31,6 +31,7 @@ export const config = {
     1101, // polygon zkevm mainnet
     122, // fuse mainnet
     7560, // Cyber mainnet
+    8453, //base mainnet
   ],
 
   /**
@@ -175,4 +176,11 @@ export const CHAIN_DETAILS = {
     rpcUrl: 'https://cyber.alt.technology/',
     commAddress: '0xb3971BCef2D791bc4027BbfedFb47319A4AAaaAa',
   },
+  8453: {
+    label: 'Base Mainnet',
+    name: 'BASE_MAINNET',
+    chainid: 8453,
+    rpcUrl: 'https://mainnet.base.org/',
+    commAddress: '0xb3971BCef2D791bc4027BbfedFb47319A4AAaaAa',
+  },
 };

src/config/config-staging.js

@@ -33,6 +33,7 @@ export const config = {
     421614, // arbitrum testnet
     123, // fuse testnet
     111557560, // Cyber testnet
+    84532, //base sepolia
   ],
 
   /**
@@ -179,4 +180,11 @@ export const CHAIN_DETAILS = {
     rpcUrl: 'https://cyber-testnet.alt.technology/',
     commAddress: '0x6e489B7af21cEb969f49A90E481274966ce9D74d',
   },
+  84532: {
+    label: 'Base Sepolia',
+    name: 'BASE_TESTNET',
+    chainid: 84532,
+    rpcUrl: 'https://sepolia.base.org/',
+    commAddress: '0x6e489B7af21cEb969f49A90E481274966ce9D74d',
+  },
 };

src/connectors/chains.ts

@@ -130,6 +130,12 @@ export const MAINNET_CHAINS: ChainConfig = {
     nativeCurrency: ETH,
     blockExplorerUrls: ['https://cyberscan.co/'],
   },
+  8453: {
+    name: 'Base Mainnet',
+    urls: ['https://mainnet.base.org/'],
+    nativeCurrency: ETH,
+    blockExplorerUrls: ['https://basescan.org/'],
+  },
 };
 
 export const TESTNET_CHAINS: ChainConfig = {
@@ -192,6 +198,12 @@ export const TESTNET_CHAINS: ChainConfig = {
     nativeCurrency: ETH,
     blockExplorerUrls: ['https://testnet.cyberscan.co/'],
   },
+  84532: {
+    name: 'Base Sepolia',
+    urls: ['https://sepolia.base.org/'],
+    nativeCurrency: ETH,
+    blockExplorerUrls: ['https://sepolia-explorer.base.org/'],
+  },
 };
 
 export const CHAINS: ChainConfig = {

src/helpers/CaipHelper.ts

@@ -2,7 +2,7 @@
 import { appConfig } from '../config/index.js';
 
 export const Eip155EnabledIds: Array<Number> = [
-  1, 56, 137, 10, 1101, 42161, 11155111, 97, 80002, 11155420, 2442, 421614, 122, 123, 111557560, 7560,
+  1, 56, 137, 10, 1101, 42161, 11155111, 97, 80002, 11155420, 2442, 421614, 122, 123, 111557560, 7560, 84532, 8453,
 ];
 
 // Types

src/helpers/UtilityHelper.ts

@@ -19,7 +19,8 @@ const UtilityHelper = {
       chainId === 10 ||
       chainId === 42161 ||
       chainId === 122 ||
-      chainId === 7560
+      chainId === 7560 ||
+      chainId === 8453
     ) {
       return true;
     }
@@ -62,6 +63,8 @@ export const MaskedAliasChannels: {
   123: {},
   111557560: {},
   7560: {},
+  8453: {},
+  84532: {},
 };
 
 export const findObject = (data: any, parentArray: any[], property: string): boolean => {
@@ -126,6 +129,8 @@ export const networkName = {
   123: 'Fuse Testnet',
   111557560: 'Cyber Testnet',
   7560: 'Cyber Mainnet',
+  8453: 'Base Mainnet',
+  84532: 'Base Sepolia',
 };
 
 export const chainNameBackendStandard = {
@@ -151,6 +156,8 @@ export const aliasChainIdToChainName = {
   123: 'FUSE',
   111557560: 'CYBERCONNECT',
   7560: 'CYBERCONNECT',
+  8453: 'BASE',
+  84532: 'BASE',
 };
 
 export const aliasChainIdsMapping = {
@@ -259,6 +266,20 @@ export const NETWORK_DETAILS = {
     rpcUrls: ['https://cyber.alt.technology/'],
     blockExplorerUrls: [' https://.cyberscan.co/'],
   },
+  BASE_TESTNET: {
+    chainId: utils.hexValue(84532),
+    chainName: 'Base Testnet',
+    nativeCurrency: { name: 'ETH', symbol: 'ETH', decimals: 18 },
+    rpcUrls: ['https://sepolia.base.org/'],
+    blockExplorerUrls: ['https://sepolia-explorer.base.org/'],
+  },
+  BASE_MAINNET: {
+    chainId: utils.hexValue(8453),
+    chainName: 'Base Mainnet',
+    nativeCurrency: { name: 'ETH', symbol: 'ETH', decimals: 18 },
+    rpcUrls: ['https://mainnet.base.org/'],
+    blockExplorerUrls: ['https://basescan.org/'],
+  },
 };
 
 export const CORE_CHAIN_ID: number = appConfig.coreContractChain;
@@ -283,34 +304,48 @@ export const LOGO_FROM_CHAIN_ID: {
   123: 'Fuse.svg',
   111557560: 'Cyber.svg',
   7560: 'Cyber.svg',
+  8453: 'Base.svg',
+  84532: 'Base.svg',
 };
 
 export type getAliasResponseType = {
   address: string | null;
   chainId: string | null;
 };
 
+// check code and verify with sc team or be before removing
+// export const getAliasFromChannelDetails = (channelDetails: Object | null | string): getAliasResponseType => {
+//   if (!channelDetails || channelDetails === 'unfetched') return null;
+
+//   if (channelDetails['aliasDetails']) {
+//     const aliasDetails = channelDetails['aliasDetails'];
+//     const aliasDetail = { chainId: null, address: null };
+//     appConfig.allowedNetworks.forEach((chainID) => {
+//       const caipChainId = convertChainIdToChainCaip(chainID);
+//       if (aliasDetails[caipChainId!]) {
+//         aliasDetail.address = aliasDetails[caipChainId!];
+//         aliasDetail.chainId = chainID;
+//       }
+//     });
+//     if (aliasDetail.address) return aliasDetail;
+//   } else if (channelDetails['address'] != null && channelDetails['address'] != '') {
+//     if (appConfig.allowedNetworks.includes(+channelDetails['chain_id'])) {
+//       return { address: channelDetails['address'], chainId: channelDetails['chain_id'] };
+//     }
+//   }
+
+//   return { address: null, chainId: null };
+// };
+
 export const getAliasFromChannelDetails = (channelDetails: Object | null | string): getAliasResponseType => {
   if (!channelDetails || channelDetails === 'unfetched') return null;
 
-  if (channelDetails['aliasDetails']) {
-    const aliasDetails = channelDetails['aliasDetails'];
-    const aliasDetail = { chainId: null, address: null };
-    appConfig.allowedNetworks.forEach((chainID) => {
-      const caipChainId = convertChainIdToChainCaip(chainID);
-      if (aliasDetails[caipChainId!]) {
-        aliasDetail.address = aliasDetails[caipChainId!];
-        aliasDetail.chainId = chainID;
-      }
-    });
-    if (aliasDetail.address) return aliasDetail;
-  } else if (channelDetails['address'] != null && channelDetails['address'] != '') {
-    if (appConfig.allowedNetworks.includes(+channelDetails['chain_id'])) {
-      return { address: channelDetails['address'], chainId: channelDetails['chain_id'] };
+  if (channelDetails['alias_address'] != null && channelDetails['alias_address'] != '') {
+    if (appConfig.allowedNetworks.includes(+channelDetails['alias_blockchain_id'])) {
+      return { address: channelDetails['alias_address'], chainId: channelDetails['alias_blockchain_id'] };
     }
   }
-
-  return { address: null, chainId: null };
+  return null;
 };
 
 export const CHANNEL_TYPE = {

src/hooks/useInactiveListener.ts

@@ -16,9 +16,9 @@ export function useInactiveListener() {
     if (appConfig.coreContractChain === 42)
       return 'Unsupported Network, please connect to the Ethereum Kovan network or Polygon Amoy network';
     else if (appConfig.coreContractChain === 11155111)
-      return 'Unsupported Network, please connect to the Ethereum Sepolia, Polygon Amoy, BNB testnet, Optimism Sepolia, Arbitrum Sepolia or Polygon zkEVM testnet';
+      return 'Unsupported Network, please connect to the Ethereum Sepolia, Polygon Amoy, BNB testnet, Optimism Sepolia, Arbitrum Sepolia, Base Sepolia or Polygon zkEVM testnet';
     else
-      return 'Unsupported Network, please connect to the Ethereum, Polygon, BNB, Optimism, Arbitrum or Polygon zkEVM Mainnet';
+      return 'Unsupported Network, please connect to the Ethereum, Polygon, BNB, Optimism, Arbitrum, Base or Polygon zkEVM Mainnet';
   };
 
   useEffect(() => {

src/modules/channelDashboard/ChannelOwnerDashboard.tsx

@@ -73,8 +73,9 @@ const ChannelOwnerDashboard = () => {
   useEffect(() => {
     if (!onCoreNetwork || !channelDetails || aliasAddrFromContract || channelDetails === 'unfetched') return;
 
-    const { address: aliasAddress, chainId: aliasChainId } = getAliasFromChannelDetails(channelDetails);
-    if (aliasAddress) {
+    const aliasDetails = getAliasFromChannelDetails(channelDetails);
+    if (aliasDetails) {
+      const { address: aliasAddress, chainId: aliasChainId } = aliasDetails;
       dispatch(setAliasAddressFromContract(aliasAddress));
       dispatch(setAliasChainId(aliasChainId));
       // dispatch(setAliasAddress(aliasAddress));

src/modules/rewards/components/LeaderBoardList.tsx

@@ -1,7 +1,6 @@
 // React and other libraries
 import { FC } from 'react';
 import InfiniteScroll from 'react-infinite-scroller';
-import { css } from 'styled-components';
 
 //Hooks
 import { useGetRewardsLeaderboard, ModelledLeaderBoardUser } from 'queries';
@@ -42,12 +41,8 @@ const LeaderBoardList: FC = () => {
         <LeaderboardListColumns />
         <Box
           height="calc(100vh - 356px)"
-          overflow="hidden"
-          css={css`
-            &:hover {
-              overflow: auto;
-            }
-          `}
+          overflow="auto"
+          customScrollbar={true}
         >
           <InfiniteScroll
             pageStart={0}