diff --git a/public/icons/arbitrum_logo.svg b/public/icons/arbitrum_logo.svg
new file mode 100644
index 000000000..622097b6a
--- /dev/null
+++ b/public/icons/arbitrum_logo.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/icons/avail_logo.svg b/public/icons/avail_logo.svg
new file mode 100644
index 000000000..ed09991e5
--- /dev/null
+++ b/public/icons/avail_logo.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/icons/brc20_logo.svg b/public/icons/brc20_logo.svg
new file mode 100644
index 000000000..3443e733b
--- /dev/null
+++ b/public/icons/brc20_logo.svg
@@ -0,0 +1,4 @@
+
diff --git a/public/icons/chain1_logo.svg b/public/icons/celestia_logo.svg
similarity index 100%
rename from public/icons/chain1_logo.svg
rename to public/icons/celestia_logo.svg
diff --git a/public/icons/chain2_logo.svg b/public/icons/eigen_logo.svg
similarity index 100%
rename from public/icons/chain2_logo.svg
rename to public/icons/eigen_logo.svg
diff --git a/public/icons/near_logo.svg b/public/icons/near_logo.svg
new file mode 100644
index 000000000..1e5bcdc88
--- /dev/null
+++ b/public/icons/near_logo.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/icons/rollkit_logo.svg b/public/icons/rollkit_logo.svg
new file mode 100644
index 000000000..2b1d2028b
--- /dev/null
+++ b/public/icons/rollkit_logo.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/icons/starknet_logo.svg b/public/icons/starknet_logo.svg
new file mode 100644
index 000000000..a92ecf107
--- /dev/null
+++ b/public/icons/starknet_logo.svg
@@ -0,0 +1,9 @@
+
diff --git a/public/icons/chain3_logo.svg b/public/icons/zksync_logo.svg
similarity index 100%
rename from public/icons/chain3_logo.svg
rename to public/icons/zksync_logo.svg
diff --git a/src/modules/building-blocks/Section_2_vs2/config.tsx b/src/modules/building-blocks/Section_2_vs2/config.tsx
index 5a8056f6c..b0fc28293 100644
--- a/src/modules/building-blocks/Section_2_vs2/config.tsx
+++ b/src/modules/building-blocks/Section_2_vs2/config.tsx
@@ -1,7 +1,10 @@
export type BlockItemType = {
key: string;
label?: string;
- logoStack?: string[];
+ networkList?: {
+ logoUrl: string;
+ name: string;
+ }[];
bgColor?: string;
bgCircle?: string;
zIndex?: number;
@@ -13,11 +16,31 @@ export const BlockDataList: BlockItemType[] = [
{
key: 'Data Availability',
label: 'Data Availability',
- logoStack: [
- '/icons/btc_logo.svg',
- '/icons/polygon_logo.svg',
- '/icons/chain1_logo.svg',
- '/icons/chain2_logo.svg',
+ networkList: [
+ {
+ logoUrl: '/icons/btc_logo.svg',
+ name: 'Bitcoin',
+ },
+ {
+ logoUrl: '/icons/polygon_logo.svg',
+ name: 'Polygon',
+ },
+ {
+ logoUrl: '/icons/celestia_logo.svg',
+ name: 'Celestia',
+ },
+ {
+ logoUrl: '/icons/eigen_logo.svg',
+ name: 'Eigen',
+ },
+ {
+ logoUrl: '/icons/avail_logo.svg',
+ name: 'Avail',
+ },
+ {
+ logoUrl: '/icons/near_logo.svg',
+ name: 'NearDA',
+ },
],
bgColor: '#7069DC',
bgCircle: '#8D87E3',
@@ -28,7 +51,12 @@ export const BlockDataList: BlockItemType[] = [
{
key: 'Settlement',
label: 'Settlement',
- logoStack: ['/icons/btc_logo.svg'],
+ networkList: [
+ {
+ logoUrl: '/icons/btc_logo.svg',
+ name: 'Bitcoin',
+ },
+ ],
bgColor: '#29892A',
bgCircle: '#54A155',
zIndex: 9,
@@ -38,10 +66,27 @@ export const BlockDataList: BlockItemType[] = [
{
key: 'Execution',
label: 'Execution',
- logoStack: [
- '/icons/op_logo.svg',
- '/icons/polygon_logo.svg',
- '/icons/chain3_logo.svg',
+ networkList: [
+ {
+ logoUrl: '/icons/op_logo.svg',
+ name: 'Optimism',
+ },
+ {
+ logoUrl: '/icons/polygon_logo.svg',
+ name: 'Polygon ZKEVM',
+ },
+ {
+ logoUrl: '/icons/zksync_logo.svg',
+ name: 'ZKSync ZKVM',
+ },
+ {
+ logoUrl: '/icons/arbitrum_logo.svg',
+ name: 'Arbitrum',
+ },
+ {
+ logoUrl: '/icons/starknet_logo.svg',
+ name: 'Starknet',
+ },
],
bgColor: '#F7931A',
bgCircle: '#F9A948',
@@ -49,18 +94,49 @@ export const BlockDataList: BlockItemType[] = [
isLastItem: false,
isHide: false,
},
+ {
+ key: 'Rollup Framework',
+ label: 'Rollup Framework',
+ networkList: [
+ {
+ logoUrl: '/icons/op_logo.svg',
+ name: 'Optimism',
+ },
+ {
+ logoUrl: '/icons/rollkit_logo.svg',
+ name: 'Rollkit',
+ },
+ ],
+ bgColor: '#25C0EF',
+ bgCircle: '#51CDF2',
+ zIndex: 6,
+ isLastItem: false,
+ isHide: false,
+ },
{
key: 'Interop',
label: 'Interop',
- logoStack: [
- '/icons/btc_logo.svg',
- '/icons/wbtc_logo.svg',
- '/icons/eth_logo.svg',
- '/icons/sol_logo.svg',
+ networkList: [
+ {
+ logoUrl: '/icons/btc_logo.svg',
+ name: 'Bitcoin Bridge',
+ },
+ {
+ logoUrl: '/icons/brc20_logo.svg',
+ name: 'BRC20 Bridge',
+ },
+ {
+ logoUrl: '/icons/eth_logo.svg',
+ name: 'Ethereum Bridge',
+ },
+ {
+ logoUrl: '/icons/sol_logo.svg',
+ name: 'Solana Bridge',
+ },
],
bgColor: '#FF5C5C',
bgCircle: '#FF7D7D',
- zIndex: 6,
+ zIndex: 5,
isLastItem: true,
isHide: false,
},
diff --git a/src/modules/building-blocks/Section_2_vs2/index.tsx b/src/modules/building-blocks/Section_2_vs2/index.tsx
index caded9f9c..2abaf5b34 100644
--- a/src/modules/building-blocks/Section_2_vs2/index.tsx
+++ b/src/modules/building-blocks/Section_2_vs2/index.tsx
@@ -45,7 +45,7 @@ const Section2 = () => {
lineHeight={'100%'}
fontWeight={500}
>
- {item.logoStack?.length || 1}
+ {item.networkList?.length || 1}
{!item.isLastItem && (
@@ -75,25 +75,35 @@ const Section2 = () => {
);
};
- const renderStackIcons = (logoURLStack?: string[]) => {
+ const renderNetworkList = (
+ item?: {
+ logoUrl: string;
+ name: string;
+ }[],
+ ) => {
return (
- {logoURLStack &&
- logoURLStack.map((url, index) => (
+ {item &&
+ item.map((obj, index) => (
+
+
+ {obj.name || ''}
+
))}
@@ -104,7 +114,7 @@ const Section2 = () => {
return (
{renderLabelData(item)}
- {renderStackIcons(item.logoStack)}
+ {renderNetworkList(item.networkList)}
);
};