Mark Base and Arbitrum as beta (#1747)

centrifuge-app/src/components/DebugFlags/config.ts

@@ -35,8 +35,6 @@ export type Key =
   | 'evmAddress'
   | 'batchMintNFTs'
   | 'persistDebugFlags'
-  | 'showBase'
-  | 'showArbitrum'
   | 'showUnusedFlags'
   | 'allowInvestBelowMin'
   | 'alternativeTheme'
@@ -75,16 +73,6 @@ export const flagsConfig: Record<Key, DebugFlagConfig> = {
     default: false,
     alwaysShow: true,
   },
-  showBase: {
-    type: 'checkbox',
-    default: false,
-    alwaysShow: true,
-  },
-  showArbitrum: {
-    type: 'checkbox',
-    default: false,
-    alwaysShow: true,
-  },
   showTestNets: {
     type: 'checkbox',
     default: isTestEnv,

centrifuge-app/src/components/Root.tsx

@@ -9,6 +9,7 @@ import {
 import { FabricProvider, GlobalStyle as FabricGlobalStyle } from '@centrifuge/fabric'
 import arbitrumLogo from '@centrifuge/fabric/assets/logos/arbitrum.svg'
 import baseLogo from '@centrifuge/fabric/assets/logos/base.svg'
+import celoLogo from '@centrifuge/fabric/assets/logos/celo.svg'
 import ethereumLogo from '@centrifuge/fabric/assets/logos/ethereum.svg'
 import goerliLogo from '@centrifuge/fabric/assets/logos/goerli.svg'
 import * as React from 'react'
@@ -83,14 +84,14 @@ const evmChains = {
   ...baseEvmChains,
   8453: {
     name: 'Base',
-    nativeCurrency: { name: 'Base', symbol: 'bETH', decimals: 18 },
+    nativeCurrency: { name: 'Base Ether', symbol: 'bETH', decimals: 18 },
     blockExplorerUrl: 'https://basescan.org/',
     urls: ['https://mainnet.base.org'],
     iconUrl: baseLogo,
   },
   84531: {
     name: 'Base Goerli',
-    nativeCurrency: { name: 'Base Goerli', symbol: 'gbETH', decimals: 18 },
+    nativeCurrency: { name: 'Base Goerli Ether', symbol: 'gbETH', decimals: 18 },
     blockExplorerUrl: 'https://goerli.basescan.org/',
     urls: [`https://goerli.base.org`],
     iconUrl: baseLogo,
@@ -117,6 +118,28 @@ const evmChains = {
     urls: [`https://arbitrum-goerli.infura.io/v3/${infuraKey}`],
     iconUrl: arbitrumLogo,
   },
+  42220: {
+    name: 'Celo',
+    nativeCurrency: {
+      name: 'Celo',
+      symbol: 'CELO',
+      decimals: 18,
+    },
+    blockExplorerUrl: 'https://celoscan.io/',
+    urls: ['https://forno.celo.org'],
+    iconUrl: celoLogo,
+  },
+  44787: {
+    name: 'Celo Alfajores',
+    nativeCurrency: {
+      name: 'Celo',
+      symbol: 'CELO',
+      decimals: 18,
+    },
+    blockExplorerUrl: 'https://alfajores.celoscan.io/',
+    urls: ['https://alfajores-forno.celo-testnet.org'],
+    iconUrl: celoLogo,
+  },
 }
 export function Root() {
   const [debugState, setDebugState] = React.useState(initialFlagsState)
@@ -148,8 +171,6 @@ export function Root() {
                 subscanUrl={import.meta.env.REACT_APP_SUBSCAN_URL}
                 walletConnectId={import.meta.env.REACT_APP_WALLETCONNECT_ID}
                 showAdvancedAccounts={debugState.showAdvancedAccounts as any}
-                showBase={debugState.showBase as any}
-                showArbitrum={debugState.showArbitrum as any}
                 showTestNets={debugState.showTestNets as any}
               >
                 <OnboardingAuthProvider>

centrifuge-react/src/components/WalletProvider/SelectButton.tsx

@@ -1,4 +1,4 @@
-import { Box, Shelf, Spinner, Text } from '@centrifuge/fabric'
+import { BetaChip, Box, Shelf, Spinner, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import styled, { useTheme } from 'styled-components'
 import type { State } from './types'
@@ -10,6 +10,7 @@ type SelectButtonProps = {
   href?: string
   disabled?: boolean
   muted?: boolean
+  beta?: boolean
   loading?: boolean
   logo?: React.ReactNode
   children: React.ReactNode
@@ -53,10 +54,11 @@ export function SelectButton({
       disabled={disabled}
       p={2}
       border={0}
-      borderRadius="input"
+      borderRadius="10px"
       textAlign="center"
       backgroundColor={active ? 'backgroundSecondary' : 'backgroundPrimary'}
       muted={muted}
+      position="relative"
     >
       <Content {...restProps} />
     </Root>
@@ -76,10 +78,11 @@ export function SelectAnchor({
       href={href}
       target="_blank"
       p={2}
-      borderRadius="input"
+      borderRadius="10px"
       disabled={disabled}
       backgroundColor={active ? 'backgroundSecondary' : 'backgroundPrimary'}
       muted={muted}
+      position="relative"
     >
       <Content {...restProps} />
     </Root>
@@ -122,13 +125,12 @@ export function Logo({
   return <Icon size={size} />
 }
 
-function Content({ loading = false, logo, children, iconRight }: SelectButtonProps) {
+function Content({ loading, beta, logo, children, iconRight }: SelectButtonProps) {
   const { sizes } = useTheme()
 
   return (
     <>
       {loading ? <Spinner size={sizes.iconRegular} /> : logo ? logo : <FallbackLogo />}
-
       {!iconRight ? (
         <Label>{children}</Label>
       ) : (
@@ -137,6 +139,11 @@ function Content({ loading = false, logo, children, iconRight }: SelectButtonPro
           {iconRight}
         </Shelf>
       )}
+      {beta && (
+        <Box position="absolute" right={1} top={1}>
+          <BetaChip />
+        </Box>
+      )}
     </>
   )
 }

centrifuge-react/src/components/WalletProvider/WalletDialog.tsx

@@ -30,8 +30,6 @@ import { useCentEvmChainId, useWallet, wallets } from './WalletProvider'
 type Props = {
   evmChains: EvmChains
   showAdvancedAccounts?: boolean
-  showBase?: boolean
-  showArbitrum?: boolean
   showTestNets?: boolean
 }
 
@@ -41,16 +39,8 @@ const title = {
   accounts: 'Choose account',
 }
 
-export function WalletDialog({
-  evmChains: allEvmChains,
-  showAdvancedAccounts,
-  showBase,
-  showArbitrum,
-  showTestNets,
-}: Props) {
+export function WalletDialog({ evmChains: allEvmChains, showAdvancedAccounts, showTestNets }: Props) {
   const evmChains = Object.keys(allEvmChains)
-    .filter((chain) => (!showBase ? !['8453', '84531'].includes(chain) : true))
-    .filter((chain) => (!showArbitrum ? !['42161', '421613'].includes(chain) : true))
     .filter((chain) => (!showTestNets ? !['5', '84531', '421613', '43113'].includes(chain) : true))
     .reduce((obj, key) => {
       obj[key] = allEvmChains[key]
@@ -71,6 +61,8 @@ export function WalletDialog({
     substrate: { evmChainId },
   } = ctx
 
+  const betaChains = [8453, 84531, 42161, 421613, 42220, 44787] // Base, Arbitrum and Celo
+
   const getNetworkName = useGetNetworkName()
 
   const isCentChainSelected = selectedNetwork === 'centrifuge' || selectedNetwork === evmChainId
@@ -155,6 +147,7 @@ export function WalletDialog({
                   onClick={() => showWallets(chainId)}
                   active={selectedNetwork === chainId}
                   muted={isMuted(chainId)}
+                  beta={betaChains.includes(chainId)}
                 >
                   {info.name}
                 </SelectButton>

centrifuge-react/src/components/WalletProvider/WalletProvider.tsx

@@ -127,8 +127,6 @@ type WalletProviderProps = {
   walletConnectId?: string
   subscanUrl?: string
   showAdvancedAccounts?: boolean
-  showBase?: boolean
-  showArbitrum?: boolean
   showTestNets?: boolean
 }
 
@@ -146,8 +144,6 @@ export function WalletProvider({
   walletConnectId,
   subscanUrl,
   showAdvancedAccounts,
-  showBase,
-  showArbitrum,
   showTestNets,
 }: WalletProviderProps) {
   if (!evmChainsProp[1]?.urls[0]) throw new Error('Mainnet should be defined in EVM Chains')
@@ -492,13 +488,7 @@ export function WalletProvider({
   return (
     <WalletContext.Provider value={ctx}>
       {children}
-      <WalletDialog
-        evmChains={evmChains}
-        showAdvancedAccounts={showAdvancedAccounts}
-        showBase={showBase}
-        showArbitrum={showArbitrum}
-        showTestNets={showTestNets}
-      />
+      <WalletDialog evmChains={evmChains} showAdvancedAccounts={showAdvancedAccounts} showTestNets={showTestNets} />
     </WalletContext.Provider>
   )
 }

fabric/src/components/BetaChip/index.tsx

@@ -0,0 +1,19 @@
+import css from '@styled-system/css'
+import styled from 'styled-components'
+import { Text } from '../Text'
+
+export const BetaChip = styled(Text)(
+  css({
+    display: 'inline-block',
+    px: 1,
+    bg: 'statusPromote',
+    borderRadius: 20,
+    fontSize: '10px',
+    color: 'white',
+    whiteSpace: 'nowrap',
+    lineHeight: '15px',
+  })
+)
+BetaChip.defaultProps = {
+  children: 'Beta',
+}

fabric/src/index.ts

@@ -1,5 +1,6 @@
 export * from './components/Accordion'
 export * from './components/Banner'
+export * from './components/BetaChip'
 export * from './components/Box'
 export * from './components/Button'
 export * from './components/Card'

fabric/src/theme/tokens/modeDark.ts

@@ -5,6 +5,7 @@ const statusInfo = '#006ef5'
 const statusOk = '#74B634'
 const statusWarning = '#a86500'
 const statusCritical = '#d43F2b'
+const statusPromote = '#f81071'
 
 const darkColors = {
   textPrimary: 'white',
@@ -28,11 +29,13 @@ const darkColors = {
   statusOk,
   statusWarning,
   statusCritical,
+  statusPromote,
   statusDefaultBg: 'transparent',
   statusInfoBg: 'transparent',
   statusOkBg: 'transparent',
   statusWarningBg: 'transparent',
   statusCriticalBg: 'transparent',
+  statusPromoteBg: 'transparent',
 
   backgroundButtonPrimary: altairYellow,
   backgroundButtonPrimaryFocus: altairYellow,

fabric/src/theme/tokens/modeLight.ts

@@ -5,12 +5,14 @@ const statusInfo = '#1253ff'
 const statusOk = '#519b10'
 const statusWarning = '#ffc012'
 const statusCritical = '#d43f2b'
+const statusPromote = '#f81071'
 
 const statusDefaultBg = `${grayScale[800]}14`
 const statusInfoBg = '#1253ff14'
 const statusOkBg = '#519b1014'
 const statusWarningBg = '#ffc01214'
 const statusCriticalBg = '#d43f2b14'
+const statusPromoteBg = '#f8107114'
 
 const lightColors = {
   textPrimary: 'black',
@@ -34,11 +36,13 @@ const lightColors = {
   statusOk,
   statusWarning,
   statusCritical,
+  statusPromote,
   statusDefaultBg,
   statusInfoBg,
   statusOkBg,
   statusWarningBg,
   statusCriticalBg,
+  statusPromoteBg,
 
   backgroundButtonPrimary: centrifugeBlue,
   backgroundButtonPrimaryFocus: centrifugeBlue,

fabric/src/theme/types.ts

@@ -1,6 +1,6 @@
 import { ResponsiveValue } from 'styled-system'
 
-type Status = 'Default' | 'Info' | 'Ok' | 'Warning' | 'Critical'
+type Status = 'Default' | 'Info' | 'Ok' | 'Warning' | 'Critical' | 'Promote'
 
 // Colors