diff --git a/centrifuge-app/src/components/DebugFlags/config.ts b/centrifuge-app/src/components/DebugFlags/config.ts index fa1c557d01..5b5f1634e2 100644 --- a/centrifuge-app/src/components/DebugFlags/config.ts +++ b/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 = { default: false, alwaysShow: true, }, - showBase: { - type: 'checkbox', - default: false, - alwaysShow: true, - }, - showArbitrum: { - type: 'checkbox', - default: false, - alwaysShow: true, - }, showTestNets: { type: 'checkbox', default: isTestEnv, diff --git a/centrifuge-app/src/components/Root.tsx b/centrifuge-app/src/components/Root.tsx index 7f59d8a778..4bbffdbe93 100644 --- a/centrifuge-app/src/components/Root.tsx +++ b/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} > diff --git a/centrifuge-react/src/components/WalletProvider/SelectButton.tsx b/centrifuge-react/src/components/WalletProvider/SelectButton.tsx index 2531f192ef..29b2ab7dbd 100644 --- a/centrifuge-react/src/components/WalletProvider/SelectButton.tsx +++ b/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" > @@ -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" > @@ -122,13 +125,12 @@ export function Logo({ return } -function Content({ loading = false, logo, children, iconRight }: SelectButtonProps) { +function Content({ loading, beta, logo, children, iconRight }: SelectButtonProps) { const { sizes } = useTheme() return ( <> {loading ? : logo ? logo : } - {!iconRight ? ( ) : ( @@ -137,6 +139,11 @@ function Content({ loading = false, logo, children, iconRight }: SelectButtonPro {iconRight} )} + {beta && ( + + + + )} ) } diff --git a/centrifuge-react/src/components/WalletProvider/WalletDialog.tsx b/centrifuge-react/src/components/WalletProvider/WalletDialog.tsx index fcbdd9c37a..f0e8b34cef 100644 --- a/centrifuge-react/src/components/WalletProvider/WalletDialog.tsx +++ b/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} diff --git a/centrifuge-react/src/components/WalletProvider/WalletProvider.tsx b/centrifuge-react/src/components/WalletProvider/WalletProvider.tsx index 8f5a1d1534..7092eebedd 100644 --- a/centrifuge-react/src/components/WalletProvider/WalletProvider.tsx +++ b/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 ( {children} - + ) } diff --git a/fabric/assets/logos/celo.svg b/fabric/assets/logos/celo.svg new file mode 100644 index 0000000000..6a70219687 --- /dev/null +++ b/fabric/assets/logos/celo.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/fabric/src/components/BetaChip/index.tsx b/fabric/src/components/BetaChip/index.tsx new file mode 100644 index 0000000000..294c4eb8fa --- /dev/null +++ b/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', +} diff --git a/fabric/src/index.ts b/fabric/src/index.ts index 0c351e3fe7..ea168d1491 100644 --- a/fabric/src/index.ts +++ b/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' diff --git a/fabric/src/theme/tokens/modeDark.ts b/fabric/src/theme/tokens/modeDark.ts index 1ebdd1dc21..3c1b50197a 100644 --- a/fabric/src/theme/tokens/modeDark.ts +++ b/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, diff --git a/fabric/src/theme/tokens/modeLight.ts b/fabric/src/theme/tokens/modeLight.ts index b4ce1d3f49..786ac09c07 100644 --- a/fabric/src/theme/tokens/modeLight.ts +++ b/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, diff --git a/fabric/src/theme/types.ts b/fabric/src/theme/types.ts index 0332cc7853..4993d51aa1 100644 --- a/fabric/src/theme/types.ts +++ b/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