Merge pull request #11 from KcPele/newFixs

changed modal
blahkheart · Aug 13, 2023 · 13da61f · 13da61f
2 parents 0d4a7cb + ca4669f
commit 13da61f
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 29 deletions.
diff --git a/packages/nextjs/components/blockexplorer/TransactionsTable.tsx b/packages/nextjs/components/blockexplorer/TransactionsTable.tsx
@@ -8,7 +8,7 @@ export const TransactionsTable = ({ blocks, transactionReceipts, isLoading }: Tr
   const targetNetwork = getTargetNetwork();
 
   return (
-    <div className="flex justify-center">
+    <div className=" justify-center">
       <table className="table table-zebra w-full shadow-lg">
         <thead>
           <tr>

diff --git a/packages/nextjs/components/superhack/PageHOC.tsx b/packages/nextjs/components/superhack/PageHOC.tsx
@@ -1,25 +1,17 @@
 import React from "react";
 import Navbar from "./Navbar";
 import Sidebar from "./Sidebar";
-import { AccountContextProvider } from "~~/context/AccountContext";
 
-// Define the type for the props that the wrapped component will receive
-type ComponentProps = {
-  // Define your props here
-};
-
-const PageHOC = (Component: React.ComponentType<ComponentProps>) => {
-  const WrappedComponent = (props: ComponentProps) => (
+const PageHOC = <T extends object>(Component: React.ComponentType<T>) => {
+  const WrappedComponent = (T: any) => (
     <div className="pagehoc__container">
       <div className="">
         <Sidebar />
       </div>
 
       <div className="w-full px-8 lg:px-16">
         <Navbar />
-        <AccountContextProvider>
-          <Component {...props} />
-        </AccountContextProvider>
+        <Component {...T} />
       </div>
     </div>
   );

diff --git a/packages/nextjs/components/superhack/Sidebar.tsx b/packages/nextjs/components/superhack/Sidebar.tsx
@@ -26,7 +26,7 @@ const Sidebar = () => {
     {
       name: "Transactions",
       icon: <BiCalendar size={24} className="" />,
-      path: "/dashboard/transactions",
+      path: "/blockexplorer",
     },
   ];
   return (

diff --git a/packages/nextjs/pages/blockexplorer/index.tsx b/packages/nextjs/pages/blockexplorer/index.tsx
@@ -4,6 +4,7 @@ import { hardhat } from "wagmi/chains";
 import { PaginationButton } from "~~/components/blockexplorer/PaginationButton";
 import { SearchBar } from "~~/components/blockexplorer/SearchBar";
 import { TransactionsTable } from "~~/components/blockexplorer/TransactionsTable";
+import PageHOC from "~~/components/superhack/PageHOC";
 import { useFetchBlocks } from "~~/hooks/scaffold-eth";
 import { getTargetNetwork, notification } from "~~/utils/scaffold-eth";
 
@@ -57,4 +58,4 @@ const Blockexplorer: NextPage = () => {
   );
 };
 
-export default Blockexplorer;
+export default PageHOC(Blockexplorer);
diff --git a/packages/nextjs/pages/blockexplorer/transaction/[txHash].tsx b/packages/nextjs/pages/blockexplorer/transaction/[txHash].tsx
@@ -5,6 +5,7 @@ import { Transaction, TransactionReceipt, formatEther, formatUnits } from "viem"
 import { usePublicClient } from "wagmi";
 import { hardhat } from "wagmi/chains";
 import { Address } from "~~/components/scaffold-eth";
+import PageHOC from "~~/components/superhack/PageHOC";
 import { decodeTransactionData, getFunctionDetails, getTargetNetwork } from "~~/utils/scaffold-eth";
 
 const TransactionPage: NextPage = () => {
@@ -130,4 +131,4 @@ const TransactionPage: NextPage = () => {
   );
 };
 
-export default TransactionPage;
+export default PageHOC(TransactionPage);
diff --git a/packages/nextjs/pages/dashboard/index.tsx b/packages/nextjs/pages/dashboard/index.tsx
@@ -1,10 +1,11 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Blockies from "react-blockies";
 import { BiPlus } from "react-icons/bi";
 import { useAccount } from "wagmi";
+import { WalletIcon, XMarkIcon } from "@heroicons/react/20/solid";
 import { Balance } from "~~/components/scaffold-eth";
 import PageHOC from "~~/components/superhack/PageHOC";
-import ConfirmWalletModal from "~~/components/superhack/modals/ConfirmWalletModal";
+import BaseModal from "~~/components/superhack/modals/BaseModal";
 import { useAccountContext } from "~~/context/AccountContext";
 import { initWallet } from "~~/utils/account/createAccount";
 
@@ -13,8 +14,16 @@ const Dashboard = () => {
   const { address } = useAccount();
   const [activeTab, setActiveTab] = useState("my tokens");
   const [isOpen, setIsOpen] = useState(false);
-  const displayAddress = address?.slice(0, 5) + "..." + address?.slice(-4);
-
+  const [displayAddress, setDisplayAddress] = useState("0x0000...0000");
+  useEffect(() => {
+    setDisplayAddress(
+      accountAddress
+        ? accountAddress?.slice(0, 5) + "..." + accountAddress?.slice(-4)
+        : address
+        ? address?.slice(0, 5) + "..." + address?.slice(-4)
+        : "0x0000...0000",
+    );
+  }, [accountAddress, address]);
   async function createWallet() {
     const wallet = await initWallet();
     if (!wallet) return alert("Could not generate wallet");
@@ -47,11 +56,8 @@ const Dashboard = () => {
               </div>
               <div className="grid justify-between">
                 <p>Address</p>
-                {accountAddress ? (
-                  <p className="text-[2.2 rem]">{accountAddress}</p>
-                ) : (
-                  <p className="text-[2.2 rem]">{displayAddress}</p>
-                )}
+
+                <p className="text-[2.2 rem]">{displayAddress}</p>
               </div>
             </div>
             <div className="grid gap-2 items-center justify-between grid-flow-col">
@@ -121,11 +127,23 @@ const Dashboard = () => {
         </div>
       </div>
       {isOpen && (
-        <ConfirmWalletModal
-          onClose={handleWalletCreated}
-          message="Confirm adding"
-          details="You are about to add an nft to be a wallet"
-        />
+        <BaseModal onClose={() => setIsOpen(false)}>
+          <div className="relative text-center max-w-[500px] md:w-[500px] flex flex-col gap-5 items-center justify-center bg-super-dark rounded-xl p-8">
+            {/* Render an XMarkIcon with an onClick event that calls the onClose function */}
+            <XMarkIcon
+              onClick={() => setIsOpen(false)}
+              className="w-8 h-8 text-[#a2aab6] cursor-pointer absolute right-6 top-6"
+            />
+            <div className="p-2 w-fit rounded-xl bg-[#a2aab6]">
+              <WalletIcon className="w-8 h-8 " /> {/* Render a WalletIcon */}
+            </div>
+            <h3 className="text-lg font-bold mb-0">Create account</h3> {/* Render the main message */}
+            <p className="mt-0 text-[#a2aab6]"></p>
+            <button onClick={handleWalletCreated} className="hover:bg-black border-b-2 rounded-2xl p-3">
+              Confirm account creation
+            </button>
+          </div>
+        </BaseModal>
       )}
     </div>
   );