From 4a59c4c09c18b54b109d4f76ea4b3c15837e5260 Mon Sep 17 00:00:00 2001 From: Rojhat Toptamus Date: Wed, 26 Jun 2024 11:59:24 +0300 Subject: [PATCH] ui improvements and bug fixes --- .../app/dashboard/attestation/[uid]/page.tsx | 191 +++++++++--------- .../app/dashboard/attestations/page.tsx | 88 ++++---- packages/nextjs/app/dashboard/page.tsx | 34 +++- .../nextjs/app/dashboard/schemas/page.tsx | 23 ++- packages/nextjs/app/layout.tsx | 4 +- packages/nextjs/app/page.tsx | 2 +- packages/nextjs/components/Footer.tsx | 69 +------ packages/nextjs/components/Header.tsx | 38 ++-- .../forms/CreateAttestationForm.tsx | 11 +- packages/nextjs/public/solas.png | Bin 0 -> 1880 bytes 10 files changed, 211 insertions(+), 249 deletions(-) create mode 100644 packages/nextjs/public/solas.png diff --git a/packages/nextjs/app/dashboard/attestation/[uid]/page.tsx b/packages/nextjs/app/dashboard/attestation/[uid]/page.tsx index 092b2b1..6c5415e 100644 --- a/packages/nextjs/app/dashboard/attestation/[uid]/page.tsx +++ b/packages/nextjs/app/dashboard/attestation/[uid]/page.tsx @@ -52,100 +52,105 @@ export default function AttestationPage({ } }, [isSuccess, isError, fetchedAttestation]); - if (isLoading) { - return ( -
- -
- ); - } - if (!attestation) { - return
No attestation data found.
; - } - return ( -
-
- UID: - - {attestation.uid} - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Schema UID - - {attestation.schema_uid} -
- Is Revocable - - {!!attestation.revocable ? "True" : "False"} -
- Data - - {attestation.data.data} -
- From - - {attestation.attester} -
- To - - {attestation.recipient} -
- Created - - {attestation.time} -
- Expiration - - {attestation.revocation_time} -
+
+
+
+ {isLoading || !attestation ? ( +
+ {" "} + +

+ Loading the attestation details... +

+
+ ) : ( +
+
+ UID: + + {attestation.uid} + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Schema UID + + {attestation.schema_uid} +
+ Is Revocable + + {!!attestation.revocable ? "True" : "False"} +
+ Data + + {attestation.data.data} +
+ From + + {attestation.attester} +
+ To + + {attestation.recipient} +
+ Created + + {attestation.time} +
+ Expiration + + {attestation.revocation_time} +
+
+
+ )} +
); diff --git a/packages/nextjs/app/dashboard/attestations/page.tsx b/packages/nextjs/app/dashboard/attestations/page.tsx index 1e637af..3d5df74 100644 --- a/packages/nextjs/app/dashboard/attestations/page.tsx +++ b/packages/nextjs/app/dashboard/attestations/page.tsx @@ -46,7 +46,7 @@ const Attestations = () => { uid: event.args.uid, schema: event.args.schema_uid, timestamp: event.args.timestamp, - })), + })) ); } }, [eventData]); @@ -67,15 +67,15 @@ const Attestations = () => {
{totalAttestations}
-
Total Schemas
+
Total Attestations
); return (
-
-
+
+

@@ -101,7 +101,8 @@ const Attestations = () => {

{isLoading ? ( -
+
+ {" "} +

Loading all the attestations...

) : ( -
- - - - - - - - - - - - {attestations.map((schema, index) => ( - - - - - - +
+
+
UIDAttesterRecipientSchema UIDTimestamp
- - - {schema.attester} - - {schema.recipient} - - {schema.schema} - - {schema.timestamp} -
+ + + + + + + - ))} - -
UIDAttesterRecipientSchema UIDTimestamp
+ + + {attestations.map((schema, index) => ( + + + + + + {schema.attester} + + + {schema.recipient} + + + {schema.schema} + + + {schema.timestamp} + + + ))} + + +
+
)} -
diff --git a/packages/nextjs/app/dashboard/page.tsx b/packages/nextjs/app/dashboard/page.tsx index baa15a0..8b4a0d4 100644 --- a/packages/nextjs/app/dashboard/page.tsx +++ b/packages/nextjs/app/dashboard/page.tsx @@ -1,16 +1,36 @@ "use client"; import Link from "next/link"; import React, { useState, useEffect } from "react"; +import type { NextPage } from "next"; +import { Bars3Icon, BugAntIcon,CheckBadgeIcon,DocumentTextIcon,CodeBracketIcon } from "@heroicons/react/24/outline"; + const Dashboard = () => { return (
-
-

Welcome to Dashboard!

- Attestations -

-

- Schemas -
+
+
+
+ +

+ Tinker with your smart contract using the{" "} + + Make Attestations + {" "} + tab. +

+
+
+ +

+ Explore attestation and schemas via the{" "} + + Create Schemas + {" "} + tab. +

+
+
+
); }; diff --git a/packages/nextjs/app/dashboard/schemas/page.tsx b/packages/nextjs/app/dashboard/schemas/page.tsx index ab245e2..ead5b1f 100644 --- a/packages/nextjs/app/dashboard/schemas/page.tsx +++ b/packages/nextjs/app/dashboard/schemas/page.tsx @@ -54,8 +54,8 @@ const Schemas = () => { return (
-
-
+
+

@@ -81,7 +81,7 @@ const Schemas = () => {

{isLoading ? ( -
+
+

Loading all the schemas...

) : ( -
- +
+
+
@@ -124,13 +126,14 @@ const Schemas = () => { ))}
UID
+
+
)} -
diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx index c14ec57..7ae991e 100644 --- a/packages/nextjs/app/layout.tsx +++ b/packages/nextjs/app/layout.tsx @@ -4,9 +4,9 @@ import "~~/styles/globals.css"; import { ThemeProvider } from "~~/components/ThemeProvider"; export const metadata: Metadata = { - title: "Scaffold-Stark", + title: "Solas", description: "Fast track your starknet journey", - icons: "/logo.ico", + icons: "/solas.png", }; const ScaffoldStarkApp = ({ children }: { children: React.ReactNode }) => { diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index 06d7397..a1e8b30 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -15,7 +15,7 @@ const Home: NextPage = () => {

Welcome to - Scaffold-Stark 2 + Solas

Connected Address:

diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx index 321f72f..f55e550 100644 --- a/packages/nextjs/components/Footer.tsx +++ b/packages/nextjs/components/Footer.tsx @@ -25,88 +25,25 @@ export const Footer = () => { const isLocalNetwork = targetNetwork.id === devnet.id; return ( -
+
-
-
- {nativeCurrencyPrice > 0 && ( -
-
- - {nativeCurrencyPrice} -
-
- )} - {isLocalNetwork && ( - <> - - - - Block Explorer - - - )} -
-
    diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx index aac3b17..967094f 100644 --- a/packages/nextjs/components/Header.tsx +++ b/packages/nextjs/components/Header.tsx @@ -4,7 +4,7 @@ import React, { useCallback, useRef, useState } from "react"; import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; -import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline"; +import { Bars3Icon, BugAntIcon,CheckBadgeIcon,DocumentTextIcon,CodeBracketIcon } from "@heroicons/react/24/outline"; import { useOutsideClick } from "~~/hooks/scaffold-stark"; import { CustomConnectButton } from "~~/components/scaffold-stark/CustomConnectButton"; import { FaucetButton } from "~~/components/scaffold-stark/FaucetButton"; @@ -18,12 +18,22 @@ type HeaderMenuLink = { export const menuLinks: HeaderMenuLink[] = [ { label: "Home", - href: "/", + href: "/dashboard", }, { - label: "Debug Contracts", + label: "Attestations", + href: "/dashboard/attestations", + icon: , + }, + { + label: "Schemas", + href: "/dashboard/schemas", + icon: , + }, + { + label: "Contracts", href: "/debug", - icon: , + icon: , }, ]; @@ -65,7 +75,7 @@ export const Header = () => { ); return ( -
    +
)}
- -
- SE2 logo -
-
- Scaffold-Stark - Starknet dev stack -
-
diff --git a/packages/nextjs/components/forms/CreateAttestationForm.tsx b/packages/nextjs/components/forms/CreateAttestationForm.tsx index 8a37fbc..b0a3ea0 100644 --- a/packages/nextjs/components/forms/CreateAttestationForm.tsx +++ b/packages/nextjs/components/forms/CreateAttestationForm.tsx @@ -4,7 +4,7 @@ import { useRouter } from "next/navigation"; import { useScaffoldWriteContract } from "~~/hooks/scaffold-stark/useScaffoldWriteContract"; const CreateAttestationForm = () => { - const [schema, setSchema] = useState(0); + const [schema, setSchema] = useState(15); const [recipient, setRecipient] = useState(""); const [data, setData] = useState(""); @@ -15,20 +15,21 @@ const CreateAttestationForm = () => { useScaffoldWriteContract({ contractName: "AttestationRegistry", functionName: "attest", - args: [15, recipient, data, false], + args: [schema as number, recipient, data, false], }); const handleSubmit = async (formData: FormData) => { const revocableFetched = formData.get("revocable") as string; const recipient = formData.get("recipient") as string; const data = formData.get("data") as string; + const fetchedSchema = formData.get("schema") as string; + setSchema(parseInt(fetchedSchema)); + setRevocable(false); setRecipient(recipient); setData(data); - setSchema(15); - setRevocable(revocableFetched === "true"); try { await writeAsync({ - args: [15, recipient, data, false], + args: [schema, recipient, data, false], }); } catch (err) { console.error("Error submitting transaction:", err); diff --git a/packages/nextjs/public/solas.png b/packages/nextjs/public/solas.png new file mode 100644 index 0000000000000000000000000000000000000000..410457342a5c0878fe6ed4070b81e215a98d1e23 GIT binary patch literal 1880 zcmV-e2dDUnP)88#TRM~VJ*mW1PXbagCHqfL=5KjO+LEs5Oo&Y&H&A)ScAR9>AMVu#y zyYD$w-@sjzxQ(Uhy|M)+mTlQ{N0!O&oPezeBR+jIbLY+-Axwd)cTkyYe^zx+xmv*u z1f18PD+*MFzbEI>@n!^3lU@e=4(FdelGdLa}IQj8-N4IAg)M`Jtl@=%otKGCAxLip5me zX>sg01|uDI3Hq#21n=>5A?xTl)M1~1Sd4pBe}0hl67peWe^yF6*p1@z zLBm^6`iMs0MhhsDT1&rJ9;qV;=P^DOZT36s8r@oa1z)- zbXOjo!s-4bbGx_&L~55lXanRK8lUwEMiXjoiY{2dRH%=!CmhyKYHN$B|8wC2EV_%t zIy%LFHf=0kEPKzlDRKD_1nJH<>mMJ#5LS>_4?vi%t9FiSYpb?adQSWw_7QObI;%?} zpmtKVICGdKcLnr^tRDMo4afm*qDnjOq^59bE<1OaLg@}PPNU={787^W2#X*@n#*Fr z;?7fc;lemkH!1NAqAmbL&{bZq=snVLSO`@Rgqz_s#7cF^PlGvAw?RXpVo9934K zK$KN^U&3W7Jn!FC6ow)zKXhUKH2bYIq+F&{>8x2Q>Yzmg`+y%L>@N(bpO8Nb%yTQG!j-&;j7}r`g8#V%~XvD^=gr98VsvSCh9F zCf^#vJ&>VN(xt<3Hw~Czt3acV!B;odu92)?!>0fT zskL=)*eN4djgB9$ZA;|KW`KZ#RBzNtnU>jT)ZBziyuuytp34|uXA+D*h%2KdQb0u{ z!Z35ycjkrMPW?M9UN+Il2%BkpiUu*($~TKfcVp+Wh{j^k-{g<=GcW*Ha1UPNOMB3MFq5rms6_irv(BJQJfRHK~Pku9Ole^*Y#ecbs&I$SWMBa(haZmPFn zvJCEIzjq3pIWOXkVf=5z<6_PqFVg^}8wjdCtxc>`5o{1~IvUCs28*I?Df}N5GZfB8 S+be+p0000