Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

navbar wallet layout

Browse Source
This commit is contained in:
Martti Malmi
2024-01-09 10:32:14 +02:00
parent 53754a5a69
commit a68cdeeb20
2 changed files with 52 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
packages/app/src/Pages/Layout/NavSidebar.tsx
View File

@ -1,23 +1,21 @@
import { useUserProfile } from "@snort/system-react"; import {useUserProfile} from "@snort/system-react";
import classNames from "classnames"; import classNames from "classnames";
import { useEffect, useMemo, useState } from "react"; import {FormattedMessage, useIntl} from "react-intl";
import { FormattedMessage, FormattedNumber, useIntl } from "react-intl"; import {useNavigate} from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";
import NavLink from "@/Components/Button/NavLink"; import NavLink from "@/Components/Button/NavLink";
import { NoteCreatorButton } from "@/Components/Event/Create/NoteCreatorButton"; import {NoteCreatorButton} from "@/Components/Event/Create/NoteCreatorButton";
import Icon from "@/Components/Icons/Icon"; import Icon from "@/Components/Icons/Icon";
import Avatar from "@/Components/User/Avatar"; import Avatar from "@/Components/User/Avatar";
import { ProfileLink } from "@/Components/User/ProfileLink"; import {ProfileLink} from "@/Components/User/ProfileLink";
import useEventPublisher from "@/Hooks/useEventPublisher"; import useEventPublisher from "@/Hooks/useEventPublisher";
import { useRates } from "@/Hooks/useRates"; import {HasNotificationsMarker} from "@/Pages/Layout/HasNotificationsMarker";
import { HasNotificationsMarker } from "@/Pages/Layout/HasNotificationsMarker"; import {subscribeToNotifications} from "@/Utils/Notifications";
import { subscribeToNotifications } from "@/Utils/Notifications"; import {getCurrentSubscription} from "@/Utils/Subscription";
import { getCurrentSubscription } from "@/Utils/Subscription";
import { Sats, useWallet } from "@/Wallet";
import useLogin from "../../Hooks/useLogin"; import useLogin from "../../Hooks/useLogin";
import { LogoHeader } from "./LogoHeader"; import {LogoHeader} from "./LogoHeader";
import {WalletBalance} from "@/Pages/Layout/WalletBalance";
const MENU_ITEMS = [ const MENU_ITEMS = [
{ {
@ -77,42 +75,6 @@ const getNavLinkClass = (isActive: boolean, narrow: boolean) => {
}); });
}; };
const WalletBalance = () => {
const [balance, setBalance] = useState<Sats>();
const wallet = useWallet();
const rates = useRates("BTCUSD");
useEffect(() => {
setBalance(undefined);
if (wallet.wallet && wallet.wallet.canGetBalance()) {
wallet.wallet.getBalance().then(setBalance);
}
}, [wallet]);
const msgValues = useMemo(() => {
return {
amount: <FormattedNumber style="currency" currency="USD" value={(rates?.ask ?? 0) * (balance ?? 0) * 1e-8} />,
};
}, [balance, rates]);
return (
<div className="w-max flex flex-col max-xl:hidden">
<div className="grow flex items-center justify-between">
<div className="flex gap-1 items-center">
<Icon name="sats" size={24} />
<FormattedNumber value={balance ?? 0} />
</div>
<Link to="/wallet">
<Icon name="dots" className="text-secondary" />
</Link>
</div>
<div className="text-secondary text-sm">
<FormattedMessage defaultMessage="~{amount}" id="3QwfJR" values={msgValues} />
</div>
</div>
);
};
export default function NavSidebar({ narrow = false }: { narrow: boolean }) { export default function NavSidebar({ narrow = false }: { narrow: boolean }) {
const { publicKey, subscriptions, readonly } = useLogin(s => ({ const { publicKey, subscriptions, readonly } = useLogin(s => ({
publicKey: s.publicKey, publicKey: s.publicKey,
@ -141,7 +103,7 @@ export default function NavSidebar({ narrow = false }: { narrow: boolean }) {
return ( return (
<div className={className}> <div className={className}>
<LogoHeader showText={!narrow} /> <LogoHeader showText={!narrow} />
<div className="mt-1 flex-grow flex flex-col justify-between"> <div className="mt-1 flex-grow flex flex-col justify-between w-full">
<div <div
className={classNames( className={classNames(
{ "xl:items-start": !narrow, "xl:gap-2": !narrow }, { "xl:items-start": !narrow, "xl:gap-2": !narrow },

41
packages/app/src/Pages/Layout/WalletBalance.tsx Normal file
View File

@ -0,0 +1,41 @@
import {useEffect, useMemo, useState} from "react";
import {Sats, useWallet} from "@/Wallet";
import {useRates} from "@/Hooks/useRates";
import {FormattedMessage, FormattedNumber} from "react-intl";
import Icon from "@/Components/Icons/Icon";
import {useNavigate} from "react-router-dom";
export const WalletBalance = () => {
const [balance, setBalance] = useState<Sats | null>(null);
const wallet = useWallet();
const rates = useRates("BTCUSD");
const navigate = useNavigate();
useEffect(() => {
setBalance(null);
if (wallet.wallet && wallet.wallet.canGetBalance()) {
wallet.wallet.getBalance().then(setBalance);
}
}, [wallet]);
const msgValues = useMemo(() => {
return {
amount: <FormattedNumber style="currency" currency="USD" value={(rates?.ask ?? 0) * (balance ?? 0) * 1e-8}/>,
};
}, [balance, rates]);
return (
<div className="w-full flex flex-col max-xl:hidden pl-3 py-2 cursor-pointer" onClick={() => navigate('/wallet')}>
<div className="grow flex items-center justify-between">
<div className="flex gap-1 items-center text-xl">
<Icon name="sats" size={28}/>
<FormattedNumber value={balance ?? 0}/>
</div>
<Icon name="dots" className="text-secondary"/>
</div>
<div className="text-secondary text-sm">
<FormattedMessage defaultMessage="~{amount}" id="3QwfJR" values={msgValues}/>
</div>
</div>
);
};