fix(passport): avatar

front/src/constants.ts

@@ -1 +1,3 @@
-export const BASE_DENOM = 'boot';
+export const BASE_DENOM = "boot";
+
+export const CYBER_GATEWAY = "https://gateway.ipfs.cybernode.ai";

front/src/pages/Main/Passport/Passport.tsx

@@ -1,15 +1,17 @@
 import { Citizenship } from "@/types";
-import React from "react";
 import Balances from "./ui/Balances/Balances";
+import Avatar from "./ui/Avatar/Avatar";
 
 function Passport({ passport }: { passport: Citizenship }) {
-
   const address = passport?.owner;
+  const cid = passport?.extension.avatar;
 
   return (
     <div>
       {JSON.stringify(passport)}
 
+      <Avatar cid={cid} />
+
       <Balances address={address} />
 
       {/* <MusicalAddress address={passport.owner} /> */}

front/src/pages/Main/Passport/ui/Avatar/Avatar.module.scss

@@ -0,0 +1,10 @@
+$size: 130px;
+
+.wrapper {
+
+  img {
+    width: $size;
+    height: $size;
+    border-radius: 50%;
+  }
+}

front/src/pages/Main/Passport/ui/Avatar/Avatar.tsx

@@ -0,0 +1,15 @@
+import { CYBER_GATEWAY } from '@/constants';
+import styles from './Avatar.module.scss';
+
+function Avatar({ cid }: {cid: string}) {
+
+  const urlCid = `${CYBER_GATEWAY}/ipfs/${cid}`;
+
+  return (
+    <div className={styles.wrapper}>
+      <img src={urlCid} alt="avatar" />
+    </div>
+  );
+}
+
+export default Avatar;

front/src/pages/Main/Passport/ui/Balances/Balances.module.scss

@@ -1,19 +1,6 @@
-$size-title: 14px;
 $size-item-text: 16px;
 
 .wrapper {
-  display: grid;
-  gap: 15px;
-
-  .title {
-    text-align: center;
-    font-size: $size-title;
-    color: #616161;
-  }
-
-}
-
-.wrapperList {
   display: grid;
   gap: 20px;
 }

front/src/pages/Main/Passport/ui/Balances/Balances.tsx

@@ -3,6 +3,7 @@ import { Denom } from "./type";
 import { DenomListKey, configDenom } from "./utils/configDenom";
 import styles from "./Balances.module.scss";
 import { formatNumber } from "./utils/formatNumber";
+import TitleItem from "../TitleItem/TitleItem";
 
 function BalancesItem({
   amount,
@@ -32,10 +33,9 @@ function Balances({ address }: { address: string }) {
     });
 
     return (
-      <div className={styles.wrapper}>
-        <span className={styles.title}>balances</span>
-        <div className={styles.wrapperList}>{renderItem}</div>
-      </div>
+      <TitleItem title="Balances">
+        <div className={styles.wrapper}>{renderItem}</div>
+      </TitleItem>
     );
   }
 

front/src/pages/Main/Passport/ui/TitleItem/TitleItem.module.scss

@@ -0,0 +1,13 @@
+$size-title: 14px;
+
+.wrapper {
+  display: grid;
+  gap: 15px;
+
+  .title {
+    text-align: center;
+    font-size: $size-title;
+    color: #616161;
+  }
+
+}

front/src/pages/Main/Passport/ui/TitleItem/TitleItem.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import styles from './TitleItem.module.scss';
+
+function TitleItem({
+  title,
+  children,
+}: {
+  title: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className={styles.wrapper}>
+      <span className={styles.title}>{title}</span>
+      {children}
+    </div>
+  );
+}
+
+export default TitleItem;