From 3e835958c4c826295b46e096c75f900545752cf0 Mon Sep 17 00:00:00 2001 From: AurelienFT Date: Mon, 13 May 2024 14:54:14 +0200 Subject: [PATCH] add page structure --- frontend/public/pu_logo.svg | 13 ++++++ frontend/src/App.tsx | 51 ++++++++++++----------- frontend/src/components/FAQ.tsx | 26 ++++++++++++ frontend/src/components/MNSClaim.tsx | 7 ++++ frontend/src/components/MNSList.tsx | 7 ++++ frontend/src/components/MNSManagement.tsx | 26 ++++++++++++ 6 files changed, 105 insertions(+), 25 deletions(-) create mode 100644 frontend/public/pu_logo.svg create mode 100644 frontend/src/components/FAQ.tsx create mode 100644 frontend/src/components/MNSClaim.tsx create mode 100644 frontend/src/components/MNSList.tsx create mode 100644 frontend/src/components/MNSManagement.tsx diff --git a/frontend/public/pu_logo.svg b/frontend/public/pu_logo.svg new file mode 100644 index 0000000..f15de45 --- /dev/null +++ b/frontend/public/pu_logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 64632e8..660c5e7 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,20 +1,22 @@ -import { useState } from 'react' import { ConnectMassaWallet } from './lib/connectMassaWallets/components/ConnectMassaWallet'; import './App.css' -import SwitchWalletButton from './lib/connectMassaWallets/components/SwitchWalletButton'; -import { useAccountStore } from './lib/connectMassaWallets/store'; import { Card } from './components/Card'; +import { FAQ, FAQData } from './components/FAQ'; +import { Button } from '@massalabs/react-ui-kit'; +import { MNSManagement } from './components/MNSManagement'; -function App() { - - const { - connectedAccount, - massaClient: client, - currentProvider, - } = useAccountStore(); - - const connected = !!connectedAccount && !!currentProvider; +const faqData: FAQData[] = [ + { + question: 'What is Massa Name Service ?', + answer: 'Massa Name Service is a decentralized naming protocol that allows users to register a human-readable name for their Massa address. This name can be used to send and receive Massa, and to interact with smart contracts and dApps.' + }, + { + question: 'How do I register a name ?', + answer: 'To register a name, you must connect your wallet and search for an available name. If the name is available, you can register it for a fee.' + } +]; +function App() { return (
@@ -23,29 +25,28 @@ function App() { alt="Massa logo" style={{ height: '64px' }} /> +
-

DNS Manager

+

MNS Manager

-
- {!connected ? ( - -

- Connect a wallet to view your vesting sessions -

- - ) : ( - -

No active vesting sessions

- - )} +
+ + +
+
); diff --git a/frontend/src/components/FAQ.tsx b/frontend/src/components/FAQ.tsx new file mode 100644 index 0000000..0fa58e0 --- /dev/null +++ b/frontend/src/components/FAQ.tsx @@ -0,0 +1,26 @@ +import { Accordion } from "@massalabs/react-ui-kit"; + +export interface FAQData { + question: string; + answer: string; +} + +export function FAQ({ data }: { data: FAQData[] }) { + if (!data) return null + return ( + <> +
+

FAQ

+
+ {data.map((item) => ( + +
+

+ {item.answer} +

+
+ + ))} + + ) +} \ No newline at end of file diff --git a/frontend/src/components/MNSClaim.tsx b/frontend/src/components/MNSClaim.tsx new file mode 100644 index 0000000..d42cf0d --- /dev/null +++ b/frontend/src/components/MNSClaim.tsx @@ -0,0 +1,7 @@ +export function MNSClaim() { + return ( +
+ test +
+ ) +} \ No newline at end of file diff --git a/frontend/src/components/MNSList.tsx b/frontend/src/components/MNSList.tsx new file mode 100644 index 0000000..e5c9752 --- /dev/null +++ b/frontend/src/components/MNSList.tsx @@ -0,0 +1,7 @@ +export function MNSList() { + return ( +
+ test +
+ ) +} \ No newline at end of file diff --git a/frontend/src/components/MNSManagement.tsx b/frontend/src/components/MNSManagement.tsx new file mode 100644 index 0000000..61fd579 --- /dev/null +++ b/frontend/src/components/MNSManagement.tsx @@ -0,0 +1,26 @@ +import { useAccountStore } from "../lib/connectMassaWallets/store"; +import { MNSClaim } from "./MNSClaim"; +import { MNSList } from "./MNSList"; + +export function MNSManagement() { + const { + connectedAccount, + currentProvider, + } = useAccountStore(); + + const connected = !!connectedAccount && !!currentProvider; + return ( + <> + {!connected ? ( +

+ Please connect your wallet above +

+ ) : ( +
+ + +
+ )} + + ) +} \ No newline at end of file