Add chains logos

web-portal/frontend/components/home/04-Supported-Chains.tsx

@@ -1,9 +1,71 @@
-import { Container } from "@mantine/core";
-import SectionTitle from "./common/SectionTitle";
+import { Container, Flex, Title, Text, Stack, Grid, Box } from "@mantine/core";
+import { redRose, crimson } from "@frontend/utils/theme";
+import { chainLogos } from "@frontend/utils/consts";
+import Image from "next/image";
+
+const chainLogosInGrid = chainLogos.map((c: (typeof chainLogos)[0]) => (
+    <Box
+        key={c.src}
+        m={8}
+        h={c.height}
+        w={c.width}
+        opacity={0.8}
+        bg="#fff"
+        style={{
+            display: "flex",
+            borderRadius: 10,
+            alignItems: "center",
+            justifyContent: "center",
+        }}
+    >
+        <Image
+            src={c.src}
+            height={(c.height * 2) / 4}
+            width={(c.width * 2) / 4}
+            alt={"logo"}
+        />
+    </Box>
+));
+
 export default function SupportedChains() {
-  return (
-    <Container size="md" mt={"xl"}>
-      <SectionTitle title="Supported Chains" />
-    </Container>
-  );
+    return (
+        <Container
+            size="md"
+            mt={"xl"}
+            c="umbra"
+            style={{
+                textAlign: "center",
+                justifyContent: "center",
+                alignItems: "center",
+            }}
+        >
+            <Title
+                style={{
+                    fontFamily: redRose.style.fontFamily,
+                    fontWeight: 600,
+                    fontSize: 40,
+                }}
+            >
+                More than 40+
+                <br />
+                supported chains
+            </Title>
+            <Text
+                opacity={0.9}
+                mt="md"
+                style={{
+                    fontFamily: crimson.style.fontFamily,
+                    fontSize: 20,
+                    textAlign: "center",
+                }}
+            >
+                Look ma {` `}
+                <s>no hands</s> how many chains we support!
+            </Text>
+
+            <Grid m={24} p={10} align="center" justify="center">
+                {chainLogosInGrid}
+            </Grid>
+        </Container>
+    );
 }

web-portal/frontend/utils/consts.ts

@@ -1,5 +1,34 @@
 import { Address } from "viem";
 import { IToken } from "./types";
+import abt from "@frontend/public/chains/abt.png";
+import avax from "@frontend/public/chains/avax.png";
+import boba from "@frontend/public/chains/boba.png";
+import celo from "@frontend/public/chains/celo.png";
+import dog from "@frontend/public/chains/dog.png";
+import eth from "@frontend/public/chains/eth.png";
+import evmos from "@frontend/public/chains/evmos.png";
+import frax from "@frontend/public/chains/frax.png";
+import ftm from "@frontend/public/chains/ftm.png";
+import fuse from "@frontend/public/chains/fuse.png";
+import glmr from "@frontend/public/chains/glmr.png";
+import gno from "@frontend/public/chains/gno.png";
+import kava from "@frontend/public/chains/kava.png";
+import klay from "@frontend/public/chains/klay.png";
+import matic from "@frontend/public/chains/matic.png";
+import metis from "@frontend/public/chains/metis.png";
+import movr from "@frontend/public/chains/movr.png";
+import mtrg from "@frontend/public/chains/mtrg.png";
+import near from "@frontend/public/chains/near.png";
+import oas from "@frontend/public/chains/oas.png";
+import one from "@frontend/public/chains/one.png";
+import op from "@frontend/public/chains/op.png";
+import osmo from "@frontend/public/chains/osmo.png";
+import pokt from "@frontend/public/chains/pokt.png";
+import sol from "@frontend/public/chains/sol.png";
+import sui from "@frontend/public/chains/sui.png";
+import tia from "@frontend/public/chains/tia.png";
+import vlx from "@frontend/public/chains/vlx.png";
+import xrd from "@frontend/public/chains/xrd.png";
 
 export const portrAddress = "0x54d5f8a0e0f06991e63e46420bcee1af7d9fe944";
 
@@ -32,3 +61,35 @@ export const supportedChains = [
         portrAddress: "to-be-deployed",
     },
 ];
+
+export const chainLogos = [
+    abt,
+    avax,
+    boba,
+    celo,
+    dog,
+    eth,
+    evmos,
+    frax,
+    ftm,
+    fuse,
+    glmr,
+    gno,
+    kava,
+    klay,
+    matic,
+    metis,
+    movr,
+    mtrg,
+    near,
+    oas,
+    one,
+    op,
+    osmo,
+    pokt,
+    sol,
+    sui,
+    tia,
+    vlx,
+    xrd,
+];