doot/TAO
1
0
Fork 0
mirror of https://github.com/smolgrrr/TAO.git synced 2024-09-20 01:11:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

init wallet UI

Browse Source
This commit is contained in:
smolgrrr 2024-08-30 14:13:36 +10:00
parent e8f603b4bc
commit facdd171df
7 changed files with 104 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/public/index.html
View File

@ -61,6 +61,7 @@
<link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="%PUBLIC_URL%/splash_screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_portrait.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="%PUBLIC_URL%/splash_screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_portrait.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="%PUBLIC_URL%/splash_screens/8.3__iPad_Mini_portrait.png"> <link rel="apple-touch-startup-image" media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="%PUBLIC_URL%/splash_screens/8.3__iPad_Mini_portrait.png">
<title>The Wired</title> <title>The Wired</title>
<script src="https://kit.fontawesome.com/090ca49637.js" crossorigin="anonymous"></script>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

67
client/src/components/modals/Header.tsx
View File

@ -4,6 +4,7 @@ import {
HashtagIcon HashtagIcon
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import HeaderBalance from "./Wallet/HeaderBalance";
export default function Header() { export default function Header() {
const location = useLocation(); const location = useLocation();
@ -15,38 +16,46 @@ export default function Header() {
<header className="mx-auto px-4 sm:px-6 lg:px-8 py-2"> <header className="mx-auto px-4 sm:px-6 lg:px-8 py-2">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<a href="/"> <a href="/">
<div className="flex items-center gap-2 max-w-60 w-full sm:max-w-none sm:w-auto"> <div className="flex items-center gap-2 max-w-60 w-full sm:max-w-none sm:w-auto">
<img src="/icon.png" className="h-12" alt="logo" /> <img src="/icon.png" className="h-12" alt="logo" />
<span className="font-semibold text-white truncate"> <span className="font-semibold text-white truncate">
{`~/WIRED${lastPathPart}>`} {`~/WIRED${lastPathPart}>`}
</span> </span>
</div> </div>
</a> </a>
<div> <div className="flex items-center">
<a <a
href="/hashtags" href="/hashtags"
className="text-neutral-300 inline-flex gap-4 items-center pl-4" className="text-neutral-300 inline-flex gap-4 items-center pl-4"
> >
<button> <button>
<HashtagIcon className="h-5 w-5" /> <HashtagIcon className="h-5 w-5" />
</button> </button>
</a> </a>
<a <a
href="/notifications" href="/notifications"
className="text-neutral-300 inline-flex gap-4 items-center pl-4" className="max-h-5 text-neutral-300 inline-flex gap-4 items-center pl-4"
> >
<button> <button className="h-5 flex items-center">
<BellIcon className="h-5 w-5" /> <HeaderBalance />
</button> </button>
</a> </a>
<a <a
href="/settings" href="/notifications"
className="text-neutral-300 inline-flex gap-4 items-center pl-4" className="text-neutral-300 inline-flex gap-4 items-center pl-4"
> >
<button> <button>
<Cog6ToothIcon className="h-5 w-5" /> <BellIcon className="h-5 w-5" />
</button> </button>
</a> </a>
<a
href="/settings"
className="text-neutral-300 inline-flex gap-4 items-center pl-4"
>
<button>
<Cog6ToothIcon className="h-5 w-5" />
</button>
</a>
</div> </div>
</div> </div>
</header> </header>

7
client/src/components/modals/Wallet/HeaderBalance.tsx Normal file
View File

@ -0,0 +1,7 @@
export default function HeaderBalance() {
return (
<>
<span className="">0<i className="fak fa-regular"></i></span>
</>
);
}

12
client/src/components/modals/Wallet/Wallet.tsx Normal file
View File

@ -0,0 +1,12 @@
export default function Wallet() {
return (
<div className="flex flex-col items-center text-2xl mx-auto mb-5">
<div>Wallet</div>
<div><span className="">0<i className="fak fa-regular"></i></span></div>
<div className="flex gap-4 mt-4">
<button className="px-4 py-2 border border-neutral-500 text-white rounded">Withdraw</button>
<button className="px-4 py-2 border border-neutral-500 text-white rounded">Deposit</button>
</div>
</div>
);
}

42
client/src/components/modals/Wallet/WalletSettings.tsx Normal file
View File

@ -0,0 +1,42 @@
export default function WalletSettings() {
return (
<div className="settings-page pt-10">
<h1 className="text-lg font-semibold mb-4">Wallet Settings</h1>
<form onSubmit={(e) => {e.preventDefault();}}>
<div className="flex flex-wrap -mx-2 mb-4">
<div className="w-full md:w-1/2 px-2 mb-4">
<label className="block text-xs mb-2" htmlFor="mintUrls">
<span style={{ display: 'inline-flex', alignItems: 'center' }}>
Mint URLs:
</span>
</label>
<textarea
id="mintUrls"
className="w-full px-3 py-2 border rounded-md bg-black"
placeholder="Enter mint URLs, one per line"
rows={3}
/>
</div>
<div className="w-full md:w-1/2 px-2 mb-4">
<label className="block text-xs mb-2" htmlFor="relayUrls">
<span style={{ display: 'inline-flex', alignItems: 'center' }}>
Relay URLs:
</span>
</label>
<textarea
id="relayUrls"
className="w-full px-3 py-2 border rounded-md bg-black"
placeholder="Enter relay URLs, one per line"
rows={3}
/>
</div>
</div>
<button
type="submit"
className="bg-black border text-white font-bold py-2 px-4 rounded">
Save
</button>
</form>
</div>
);
}

2
client/src/components/routes/Notifications.tsx
View File

@ -2,6 +2,7 @@ import { useState, useCallback } from "react";
import PostCard from "../modals/PostCard"; import PostCard from "../modals/PostCard";
import { Event } from "nostr-tools"; import { Event } from "nostr-tools";
import { useFetchEvents } from "../../hooks/useFetchEvents"; import { useFetchEvents } from "../../hooks/useFetchEvents";
import Wallet from "../modals/Wallet/Wallet";
const Notifications = () => { const Notifications = () => {
const [notifsView, setNotifsView] = useState(false); const [notifsView, setNotifsView] = useState(false);
@ -42,6 +43,7 @@ const Notifications = () => {
// Render the component // Render the component
return ( return (
<main className="text-white mb-20"> <main className="text-white mb-20">
<Wallet />
<div className="block sm:hidden"> <div className="block sm:hidden">
<label htmlFor="toggleC" className="p-4 flex items-center cursor-pointer"> <label htmlFor="toggleC" className="p-4 flex items-center cursor-pointer">
<div className="relative"> <div className="relative">

2
client/src/components/routes/Settings.tsx
View File

@ -1,6 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { CpuChipIcon } from '@heroicons/react/24/outline'; import { CpuChipIcon } from '@heroicons/react/24/outline';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import WalletSettings from '../modals/Wallet/WalletSettings';
type TestResponse = { type TestResponse = {
timeTaken: string; timeTaken: string;
@ -183,6 +184,7 @@ const Settings = () => {
</button> </button>
</form> </form>
</div> </div>
<WalletSettings />
<div className="settings-page py-10"> <div className="settings-page py-10">
<h1 className="text-lg font-semibold mb-4">About <a className="hover:underline"href="https://git.getwired.app/doot/TAO">(source code)</a></h1> <h1 className="text-lg font-semibold mb-4">About <a className="hover:underline"href="https://git.getwired.app/doot/TAO">(source code)</a></h1>
<div className="flex flex-col"> <div className="flex flex-col">