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}
+ >
+
+
+
+ {'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',