beta chip

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

@@ -148,8 +148,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] // Base and Arbitrum
+
   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>

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