Dashboard Integration

src-mobile/src/components/DashboardHeader.tsx

@@ -19,14 +19,41 @@ export const truncateText = (text: string, maxLength: number) => {
   return `${start}...${end}`;
 };
 
+const EllipsisTypography = styled(Typography)({
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "150px",
+});
+
+const truncateText = (text: string, maxLength: number) => {
+  if (text.length <= maxLength) return text;
+  const start = text.substring(0, maxLength - 3);
+  const end = text.substring(text.length - 3, text.length);
+  return `${start}...${end}`;
+};
+
 interface IProps {
   onProfileClick: () => void;
   profileAddress: string;
 }
 
 const DashboardHeader: FC<IProps> = ({ onProfileClick, profileAddress }) => {
-  const address = profileAddress ?? "aleo1ab3j...82k";
-  const truncatedAddress = truncateText(address, 10);
+  const addressP = profileAddress ?? 'aleo1ab3j...82k';
+  const truncatedAddress = truncateText(addressP, 10);
+
+  const navigate = useNavigate();
+  const [address, setAddress] = useState("");
+  get_address()
+    .then((res) => {
+      setAddress(res);
+    })
+    .catch((error) => {
+      console.log(error);
+      toast("Failed to get address");
+    });
+
+
 
   const navigate = useNavigate();
   return (

src-mobile/src/layouts/DashboardLayout.tsx

@@ -95,7 +95,8 @@ import homeIcon from "../assets/dashboard_item/home-icon.svg";
 import coloredHomeIcon from "../assets/dashboard_item/home.svg";
 import splashImg from "../assets/green-splash.svg";
 
-interface IProps extends PropsWithChildren {}
+interface IProps extends PropsWithChildren { }
+
 
 const DashboardLayout: FC<IProps> = ({ children }) => {
   const navigate = useNavigate();

src-mobile/src/views/Dashboard.tsx

@@ -6,7 +6,9 @@ import diamondShinyIcon from "../assets/diamond-shiny-icon.svg";
 import sendIcon from "../assets/send-icon.svg";
 import receiveIcon from "../assets/receive-icon.svg";
 
+import { open_url } from "../services/utils/open";
 
+import availLogo from "../assets/avail-icon.svg";
 
 import NftDisplay from "../components/NftDisplay";
 import NftDetailsDisplay from "../components/NftDetailsDisplay";
@@ -16,8 +18,11 @@ import React, { useState } from "react";
 import ActivityDetails from "../components/ActivityDetails";
 import AsssetDisplay from "../components/AsssetDisplay";
 import DashboardCarousel from "../components/DashboardCarousel";
+import { useNavigate } from "react-router-dom";
 import { getName } from "../services/states/util";
 import { getAddress } from "../services/states/util";
+import { AirdropNft } from "../components/Nft";
+
 
 // Services
 import { get_nfts } from "../services/nfts/fetch";
@@ -28,17 +33,22 @@ import { type INft, disruptorWhitelist } from "../types/nfts/nft";
 import {
   type WhitelistResponse,
   type Collection,
+  testCollection,
+
 } from "../types/quests/quest_types";
 import { type AvailError } from "../types/errors";
 
 // Interfaces
 import { type AssetType } from "../types/assets/asset";
+import { AvailEvent } from "../services/wallet-connect/WCTypes";
 import { handleGetTokens } from "services/tokens/get_tokens";
 import { useTranslation } from "react-i18next";
 
 //Images
 import noNftsImage from "../assets/images/no_nfts.png";
 import noAssetsImage from "../assets/images/no_balance.png";
+import noActivyityImage from "../assets/images/no_activity.png";
+import { SuccinctAvailEvent } from "types/avail-events/event";
 import { listen } from "@tauri-apps/api/event";
 import { useScan } from "../../../src/context/ScanContext";
 import { useRecentEvents } from "../../../src/context/EventsContext";
@@ -61,6 +71,17 @@ const Dashboard = () => {
   const [message, setMessage] = React.useState<string>("");
   const [loading, setLoading] = React.useState(true);
 
+  const [nfts, setNfts] = React.useState<INft[]>([]);
+  const [airdropNfts, setAirdropNfts] = React.useState<Collection[]>([]);
+
+  // Alert states
+  const [errorAlert, setErrorAlert] = React.useState(false);
+  const [successAlert, setSuccessAlert] = React.useState(false);
+  const [warningAlert, setWarningAlert] = React.useState(false);
+  const [infoAlert, setInfoAlert] = React.useState(false);
+  const [message, setMessage] = React.useState<string>("");
+  const [loading, setLoading] = React.useState(true);
+
   const [open, setOpen] = React.useState<boolean>(false);
   const [recieve, setReceiveActive] = React.useState<boolean>(false);
   const [showUserQr, setShowUserQr] = useState(false);
@@ -81,9 +102,21 @@ const Dashboard = () => {
     setOpenActivityDetails(newOpen);
   };
 
+  const handleWhitelistCollectionCheck = (
+    whitelist: WhitelistResponse,
+    collections: Collection[]
+  ) => {
+    collections.forEach((collection) => {
+      if (collection.name === whitelist.collection_name) {
+        console.log("Adding airdrop nft");
+        console.log(collection);
+        console.log(airdropNfts);
+        setAirdropNfts([...airdropNfts, collection]);
+      }
+    });
+  };
   //Bottom Sheet
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
-
   const checkWhitelists = (
     whitelists: WhitelistResponse[],
     collections: Collection[]
@@ -101,19 +134,12 @@ const Dashboard = () => {
     setAirdropNfts(selectedCollections);
   };
 
-  //Bottom sheet
-  const handleItemClick = (index: number) => {
-    console.log("I am being clicked");
-    // console.log("NOTE: <<address has been copied>>");
-    if (index === 2) {
-      setReceiveActive(!recieve);
-    }
-  };
-
-  const handleClose = () => {
-    console.log("INFO: Tapped on receive -- killing bottom sheet");
-    setIsBottomSheetOpen(false);
+  const handleXlink = async (url: string) => {
+    await open_url(url);
   };
+  // let address = get_address().then((data) => {
+  //   console.log("address", data);
+  // });
 
   const sampleData = {
     recipient: "@zack_x",
@@ -145,9 +171,15 @@ const Dashboard = () => {
   const [balance, setBalance] = React.useState<number>(0);
   const [assets, setAssets] = React.useState<AssetType[]>([]);
 
+  /* --Event Drawer-- */
+  const [eventDrawerOpen, setEventDrawerOpen] = React.useState(false);
+  const [event, setEvent] = React.useState<SuccinctAvailEvent | undefined>();
+
   /* --Block Scan State-- */
   const { scanInProgress, startScan, endScan } = useScan();
 
+  const [localScan, setLocalScan] = React.useState<boolean>(false);
+
   const [scanProgressPercent, setScanProgressPercent] =
     React.useState<number>(0);
 
@@ -287,32 +319,17 @@ const Dashboard = () => {
           width="90%"
           mx="auto"
         >
-          {DASHBOARD_ITEMS.map((item, index) => (
-            <Button
-              key={index}
-              onClick={() => handleItemClick(index)}
-              sx={{
-                borderRadius: "9px",
-                p: 1,
-                height: "63px",
-                width: "62px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                bgcolor: "#2A2A2A",
-                cursor: "pointer",
-                outline: "none",
-                border: "none",
-                "&:focus": {
-                  outline: "none",
-                },
-                "&:active": {
-                  bgcolor: "#2A2A2A",
-                },
-                "&:hover": {
-                  bgcolor: "#2A2A2A",
-                },
-              }}
+          {DASHBOARD_ITEMS.map(({ icon, path }, i) => (
+            <Box
+              borderRadius="9px"
+              p={1}
+              height="63px"
+              width="62px"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+              bgcolor="#2A2A2A"
+              key={i}
             >
               <img src={item.icon} alt={`icon-${index}`} />
             </Button>