diff --git a/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx b/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx index 3fd1e91ddf..149783fe1c 100644 --- a/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx +++ b/src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx @@ -20,6 +20,7 @@ import { Text } from '../../../../styled/Common'; import { RiExternalLinkLine } from 'react-icons/ri'; import cantoLogo from '../../../../assets/images/networks/canto.png'; import scrollLogo from '../../../../assets/images/networks/scroll_logo.svg'; +import zircuitLogo from '../../../../assets/images/networks/zircuit-green-icon.svg'; import blastLogo from '../../../../assets/images/networks/blast_logo.png'; import blastSepoliaLogo from '../../../../assets/images/networks/blast_sepolia_logo.webp'; import scrollSepoliaLogo from '../../../../assets/images/networks/scroll_sepolia_logo.webp'; @@ -192,6 +193,33 @@ export default function NetworkSelector() { ); + const zircuitNetwork: JSX.Element = ( + handleClick(chainMap.get('0xbf04'))} + key='zircuit' + custom={0} + variants={ItemEnterAnimation} + tabIndex={0} + > + + scroll network + + {'Zircuit'} + + + + ); + // JSX element to select canto network (external link) const cantoNetwork: JSX.Element = ( { + if (!provider) return 0; + return ( + bigIntToFloat((await provider.getFeeData()).gasPrice || BigInt(0)) * + 1e-9 + ); + }, +}; diff --git a/src/ambient-utils/types/chainIds.ts b/src/ambient-utils/types/chainIds.ts index 5b6e076f71..d105f2d053 100644 --- a/src/ambient-utils/types/chainIds.ts +++ b/src/ambient-utils/types/chainIds.ts @@ -5,4 +5,5 @@ export type chainIds = | '0xaa36a7' | '0xa0c71fd' | '0x8274f' - | '0x13e31'; + | '0x13e31' + | '0xbf04'; diff --git a/src/assets/branding/ambientProductionBrandAssets.ts b/src/assets/branding/ambientProductionBrandAssets.ts index 316e1e5bf2..a190a9a19d 100644 --- a/src/assets/branding/ambientProductionBrandAssets.ts +++ b/src/assets/branding/ambientProductionBrandAssets.ts @@ -2,6 +2,7 @@ import { brandIF } from './types'; import large from '../images/logos/large.svg'; import scrollLogo from '../../assets/images/logos/scroll_brand_logo.svg'; import blastLogo from '../../assets/images/logos/blast_logo.svg'; +import zircuitLogo from '../../assets/images/logos/zircuit-light-logo.svg'; export const ambientProductionBrandAssets: brandIF = { networks: { @@ -23,6 +24,15 @@ export const ambientProductionBrandAssets: brandIF = { { content: blastLogo, processAs: 'image' }, ], }, + // zircuit mainnet + '0xbf04': { + color: 'purple_dark', + hero: [ + { content: 'ambient', processAs: 'text' }, + { content: '×', processAs: 'separator' }, + { content: zircuitLogo, processAs: 'image' }, + ], + }, // ethereum mainnet '0x1': { color: 'purple_dark', diff --git a/src/assets/branding/defaultBrandAssets.ts b/src/assets/branding/defaultBrandAssets.ts index 3743ead628..1a074f7141 100644 --- a/src/assets/branding/defaultBrandAssets.ts +++ b/src/assets/branding/defaultBrandAssets.ts @@ -2,6 +2,7 @@ import { brandIF } from './types'; import large from '../images/logos/large.svg'; import scrollLogo from '../../assets/images/logos/scroll_brand_logo.svg'; import blastLogo from '../../assets/images/logos/blast_logo.svg'; +import zircuitLogo from '../../assets/images/logos/zircuit-light-logo.svg'; export const defaultBrandAssets: brandIF = { networks: { @@ -51,6 +52,15 @@ export const defaultBrandAssets: brandIF = { { content: blastLogo, processAs: 'image' }, ], }, + // zircuit mainnet + '0xbf04': { + color: 'purple_dark', + hero: [ + { content: 'ambient', processAs: 'text' }, + { content: '×', processAs: 'separator' }, + { content: zircuitLogo, processAs: 'image' }, + ], + }, }, platformName: 'ambient', fontSet: 'ambient', diff --git a/src/assets/branding/index.ts b/src/assets/branding/index.ts index 5105d02d23..1dcd1187b3 100644 --- a/src/assets/branding/index.ts +++ b/src/assets/branding/index.ts @@ -3,4 +3,5 @@ export { ambientProductionBrandAssets } from './ambientProductionBrandAssets'; export { ambientTestnetBrandAssets } from './ambientTestnetBrandAssets'; export { blastBrandAssets } from './blastBrandAssets'; export { scrollBrandAssets } from './scrollBrandAssets'; +export { zircuitBrandAssets } from './zircuitBrandAssets'; export { futaBrandAssets } from './futaBrandAssets'; diff --git a/src/assets/branding/zircuitBrandAssets.ts b/src/assets/branding/zircuitBrandAssets.ts new file mode 100644 index 0000000000..1d1b8b4107 --- /dev/null +++ b/src/assets/branding/zircuitBrandAssets.ts @@ -0,0 +1,23 @@ +import { brandIF } from './types'; +import large from '../images/logos/large.svg'; +import zircuitLogo from '../../assets/images/logos/zircuit-light-logo.svg'; + +export const zircuitBrandAssets: brandIF = { + networks: { + // zircuit mainnet + '0xbf04': { + color: 'purple_dark', + hero: [ + { content: 'ambient', processAs: 'text' }, + { content: '×', processAs: 'separator' }, + { content: zircuitLogo, processAs: 'image' }, + ], + }, + }, + platformName: 'zircuit', + fontSet: 'ambient', + showPoints: true, + showDexStats: true, + headerImage: large as string, + includeCanto: false, +}; diff --git a/src/assets/images/logos/zircuit-light-logo.svg b/src/assets/images/logos/zircuit-light-logo.svg new file mode 100644 index 0000000000..6e0356b1a5 --- /dev/null +++ b/src/assets/images/logos/zircuit-light-logo.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/networks/zircuit-green-icon.svg b/src/assets/images/networks/zircuit-green-icon.svg new file mode 100644 index 0000000000..25c6ee8513 --- /dev/null +++ b/src/assets/images/networks/zircuit-green-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/contexts/BrandContext.tsx b/src/contexts/BrandContext.tsx index 5189648484..ddb4553089 100644 --- a/src/contexts/BrandContext.tsx +++ b/src/contexts/BrandContext.tsx @@ -10,6 +10,7 @@ import { ambientProductionBrandAssets, ambientTestnetBrandAssets, futaBrandAssets, + zircuitBrandAssets, } from '../assets/branding'; import { UserDataContext } from './UserDataContext'; @@ -67,6 +68,8 @@ export const BrandContextProvider = (props: { children: ReactNode }) => { return blastBrandAssets; case 'scroll': return scrollBrandAssets; + case 'zircuit': + return zircuitBrandAssets; case 'futa': return futaBrandAssets; case 'ambientProduction': diff --git a/src/index.tsx b/src/index.tsx index 3bdde067d7..896893a1d3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -15,6 +15,7 @@ import { WALLETCONNECT_PROJECT_ID, } from './ambient-utils/constants'; import scrollLogo from './assets/images/networks/scroll_logo.webp'; +import zircuitLogo from './assets/images/networks/zircuit-green-icon.svg'; import blastLogo from './assets/images/networks/blast_logo.png'; import blastSepoliaLogo from './assets/images/networks/blast_sepolia_logo.webp'; import scrollSepoliaLogo from './assets/images/networks/scroll_sepolia_logo.webp'; @@ -68,6 +69,7 @@ const modal = createWeb3Modal({ 534351: scrollSepoliaLogo, 534352: scrollLogo, 11155111: sepoliaLogo, + 48900: zircuitLogo, }, termsConditionsUrl: '/terms', privacyPolicyUrl: '/privacy',