Feat/Base Chain support

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}