, property: any) => {
- const isAsc = orderBy === property && order === 'asc';
- setOrder(isAsc ? 'desc' : 'asc');
- setOrderBy(property);
- };
-
- // Get sorted items
const sorted = useSortDelegations(items, order, orderBy);
- // Filter out empty placeholder rows
const filteredItems = React.useMemo(() => {
if (!sorted) return [];
return sorted.filter((item) => !shouldBeFiltered(item));
}, [sorted]);
- // Check if any delegations have pruning errors
+ const activeDelegations = React.useMemo(
+ () => filteredItems.filter((item): item is DelegationWithEverything => isDelegation(item)),
+ [filteredItems],
+ );
+
+ const pendingItems = React.useMemo(() => filteredItems.filter((item) => isPendingDelegation(item)), [filteredItems]);
+
+ const searchNeedle = identityFilter.trim().toLowerCase();
+
+ const displayedDelegations = React.useMemo(() => {
+ if (!searchNeedle) return activeDelegations;
+ return activeDelegations.filter((d) => d.node_identity.toLowerCase().includes(searchNeedle));
+ }, [activeDelegations, searchNeedle]);
+
+ const activeCount = activeDelegations.length;
+
const hasPruningErrors = React.useMemo(() => filteredItems?.some((item) => hasPruningError(item)), [filteredItems]);
- // Navigate to settings page
const navigateToSettings = () => {
navigate('/settings');
};
- // Format error message for display
const formatErrorMessage = (message: string) => {
if (message.includes('height') && message.includes('not available')) {
return 'Due to pruning strategies from validators, please navigate to the Settings tab and change your RPC node for your validator to retrieve your delegations.';
@@ -202,9 +151,22 @@ export const DelegationList: FCWithChildren<{
return message;
};
+ const pendingKey = (item: any, suffix: string) =>
+ `pending-${item.event?.mix_id}-${item.event?.address ?? ''}-${item.event?.kind ?? ''}-${
+ item.node_identity ?? ''
+ }-${suffix}`;
+
+ const nextEpochLine =
+ nextEpoch instanceof Error || !nextEpoch ? null : (
+
+ Next epoch starts at {nextEpoch}
+
+ );
+
+ const emptyTableMessage = searchNeedle ? 'No delegations match your search.' : 'No delegations to show.';
+
return (
<>
- {/* Display pruning error alert at the top if needed */}
{hasPruningErrors && (
)}
- {/* Add horizontal scrolling to the table container */}
-
- {isLoading && setDelegationItemErrors(undefined)}
- />
-
-
- {filteredItems?.length
- ? filteredItems.map((item: any, _index: number) => {
- if (isPendingDelegation(item)) {
- const pendingKey = `pending-${item.event.mix_id}-${
- item.event.address
- }-${Date.now()}-${Math.random()}`;
+
+
+
+
+ Delegations
+
+
+ {activeCount} active
+
+
- if (
- item.event &&
- item.event.kind === 'Delegate' &&
- (!item.node_identity || item.node_identity === '')
- ) {
- return (
-
+
+ setIdentityFilter(e.target.value)}
+ sx={{
+ minWidth: { xs: '100%', md: 220 },
+ flex: { md: '1 1 200px' },
+ '& .MuiOutlinedInput-root': { borderRadius: 2 },
+ }}
+ />
+
+ Sort by
+ setOrderBy(e.target.value as SortingKeys)}
+ >
+ {SORT_FIELD_OPTIONS.map((opt) => (
+
+ {opt.label}
+
+ ))}
+
+
+
+ Order
+ setOrder(e.target.value as Order)}
+ >
+ Ascending
+ Descending
+
+
+
+ {nextEpochLine ? {nextEpochLine} : null}
+
+
- return
+ `1px solid ${t.palette.divider}`,
+ bgcolor: (t) =>
+ t.palette.mode === 'dark' ? 'nym.nymWallet.nav.background' : 'nym.nymWallet.background.subtle',
+ p: 2.5,
+ }}
+ >
+
+
+ Total delegations
+
+
+
+ {delegationsSummaryLoading ?
+
+ `1px solid ${t.palette.divider}`,
+ bgcolor: (t) =>
+ t.palette.mode === 'dark' ? 'nym.nymWallet.nav.background' : 'nym.nymWallet.background.subtle',
+ p: 2.5,
+ }}
+ >
+
+
+ Original delegations
+
+
+
+ {delegationsSummaryLoading ?
+
+ `1px solid ${t.palette.divider}`,
+ bgcolor: (t) =>
+ t.palette.mode === 'dark' ? 'nym.nymWallet.nav.background' : 'nym.nymWallet.background.subtle',
+ p: 2.5,
+ }}
+ >
+
+
+ Total rewards
+
+
+
+ {delegationsSummaryLoading ?
+
+
+
+ {pendingItems.length > 0 && (
+
+
+ Pending
+
+
+ {pendingItems.map((item: any, index: number) => {
+ if (
+ item.event &&
+ item.event.kind === 'Delegate' &&
+ (!item.node_identity || item.node_identity === '')
+ ) {
+ return (
+
+
+ )}
+
+ `1px solid ${t.palette.divider}`,
+ bgcolor: (t) =>
+ t.palette.mode === 'dark' ? 'nym.nymWallet.nav.background' : 'nym.nymWallet.background.subtle',
+ }}
+ >
+ setDelegationItemErrors(undefined)}
+ />
+
+
+
+ Node
+
+ Amount
+
+
+ Saturation
+
+
+ Reward
+
+
+ Actions
+
+
+
+
+ {displayedDelegations.length === 0 ? (
+
+
+
+ {emptyTableMessage}
+
+
+
+ ) : (
+ displayedDelegations.map((item) => {
+ const rowKey = `${item.mix_id}-${item.node_identity}`;
+ const isOpen = expandedKey === rowKey;
+ const nodeIsUnbonded = Boolean(!item.node_identity);
+ const satNum = saturationNumeric(item);
+ let satColor: 'text.secondary' | 'error.main' | 'success.main' = 'text.secondary';
+ if (satNum !== undefined) {
+ satColor = satNum > 1 ? 'error.main' : 'success.main';
}
- if (isDelegation(item)) {
- if (!item.node_identity || item.node_identity === '-' || item.node_identity === '...') {
- return null;
- }
+ const operatingCost = item.cost_params?.interval_operating_cost;
+ const uptime = item.avg_uptime_percent;
+ const routingDisplay = uptime != null && String(uptime) !== '-' ? `${uptime}%` : '-';
+ const marginDisplay = item.cost_params?.profit_margin_percent
+ ? `${toPercentIntegerString(item.cost_params.profit_margin_percent)}%`
+ : '-';
+ const costDisplay = operatingCost ? `${operatingCost.amount} ${operatingCost.denom}` : '-';
+ const delegatedDisplay = item.delegated_on_iso_datetime
+ ? format(new Date(item.delegated_on_iso_datetime), 'dd/MM/yyyy')
+ : '-';
- return (
-
+ *': { borderBottom: 'unset' } }}>
+
+
+ setExpandedKey(isOpen ? null : rowKey)}
+ >
+ {isOpen ?
+
+ {item.errors && (
+
+
+ setDelegationItemErrors({ nodeId: item.node_identity, errors: item.errors! })
+ }
+ >
+
+
+ )}
+ {item.uses_vesting_contract_tokens && (
+
+
+ )}
+ {nodeIsUnbonded ? (
+
+ -
+
+ ) : (
+
+
+
+
+ {item.amount.amount} {item.amount.denom}
+
+
+ {getStakeSaturation(item)}
+
+
+ {getRewardValue(item)}
+
+
+ {!item.pending_events.length && !nodeIsUnbonded && (
+
+ onItemActionClick ? onItemActionClick(item, action) : undefined
+ }
+ disableRedeemingRewards={!item.unclaimed_rewards || item.unclaimed_rewards.amount === '0'}
+ disableDelegateMore={item.mixnode_is_unbonding}
+ />
+ )}
+ {!item.pending_events.length && nodeIsUnbonded && (
+ t.palette.nym.nymWallet.text.main }} size="small">
+ (onItemActionClick ? onItemActionClick(item, 'undelegate') : undefined)}
+ />
+
+ )}
+ {item.pending_events.length > 0 && (
+
+
+ Pending events
+
+
+ )}
+
+
+
+
+
+
+ `1px solid ${alpha(t.palette.divider, t.palette.mode === 'dark' ? 0.35 : 0.5)}`,
+ bgcolor: (t) =>
+ t.palette.mode === 'dark'
+ ? alpha(t.palette.common.white, 0.04)
+ : alpha(t.palette.common.black, 0.03),
+ }}
+ >
+
+
+
+
+ Routing
+
+
+ Margin
+
+
+ NYM cost
+
+
+ Delegated on
+
+
+
+
+
+
+
+ {routingDisplay}
+
+
+
+
+ {marginDisplay}
+
+
+
+
+ {costDisplay}
+
+
+
+
+ {delegatedDisplay}
+
+
+
+
+
+
+
+
+
+
+ );
})
- : null}
-
-
-
+ )}
+
+
+
+
);
};
diff --git a/nym-wallet/src/components/Delegation/DelegationModal.stories.tsx b/nym-wallet/src/components/Delegation/DelegationModal.stories.tsx
deleted file mode 100644
index bba93fca5a..0000000000
--- a/nym-wallet/src/components/Delegation/DelegationModal.stories.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import { Paper, Button } from '@mui/material';
-import { useTheme, Theme } from '@mui/material/styles';
-import { Delegations } from './Delegations';
-import { items } from './DelegationList.stories';
-import { DelegationModal } from './DelegationModal';
-import { backDropStyles, modalStyles } from '../../../.storybook/storiesStyles';
-
-const explorerUrl = 'https://sandbox-explorer.nymtech.net';
-
-const storybookStyles = (theme: Theme) => ({
- backdropProps: backDropStyles(theme),
- sx: modalStyles(theme),
-});
-
-export default {
- title: 'Delegation/Components/Delegation Modals',
- component: Delegations,
-} as ComponentMeta;
-
-const transaction = {
- url: 'https://sandbox-blocks.nymtech.net/transactions/11ED7B9E21534A9421834F52FED5103DC6E982949C06335F5E12EFC71DAF0CFB',
- hash: '11ED7B9E21534A9421834F52FED5103DC6E982949C06335F5E12EFC71DAF0CFB',
-};
-// Another transaction for Dark Theme to avoid duplicate key errors in rendering
-const transactionForDarkTheme = {
- url: 'https://sandbox-blocks.nymtech.net/transactions/11ED7B9E21534A9421834F52FED5103DC6E982949C06335F5E12EFC71DAF0CFO',
- hash: '11ED7B9E21534A9421834F52FED5103DC6E982949C06335F5E12EFC71DAF0CF0',
-};
-
-const Content: FCWithChildren<{ children: React.ReactElement; handleClick: () => void }> = ({
- children,
- handleClick,
-}) => (
- <>
-
- Your Delegations
-
- Show modal
-
-
- {children}
-
-);
-
-export const Loading = () => {
- const [open, setOpen] = React.useState(false);
- const handleClick = () => setOpen(true);
- const theme = useTheme();
- return (
-
- setOpen(false)}
- status="loading"
- action="delegate"
- {...storybookStyles(theme)}
- />
-
- );
-};
-
-export const DelegateSuccess = () => {
- const [open, setOpen] = React.useState(false);
- const handleClick = () => setOpen(true);
- const theme = useTheme();
- return (
-
- setOpen(false)}
- status="success"
- action="delegate"
- message="You delegated 5 NYM"
- transactions={theme.palette.mode === 'light' ? [transaction] : [transactionForDarkTheme]}
- {...storybookStyles(theme)}
- />
-
- );
-};
-
-export const UndelegateSuccess = () => {
- const [open, setOpen] = React.useState(false);
- const handleClick = () => setOpen(true);
- const theme = useTheme();
- return (
-
- setOpen(false)}
- status="success"
- action="undelegate"
- message="You undelegated 5 NYM"
- transactions={theme.palette.mode === 'light' ? [transaction] : [transactionForDarkTheme]}
- {...storybookStyles(theme)}
- />
-
- );
-};
-
-export const RedeemSuccess = () => {
- const [open, setOpen] = React.useState(false);
- const handleClick = () => setOpen(true);
- const theme = useTheme();
- return (
-
- setOpen(false)}
- status="success"
- action="redeem"
- message="42 NYM"
- transactions={
- theme.palette.mode === 'light'
- ? [transaction, transaction]
- : [transactionForDarkTheme, transactionForDarkTheme]
- }
- {...storybookStyles(theme)}
- />
-
- );
-};
-
-export const RedeemWithVestedSuccess = () => {
- const [open, setOpen] = React.useState(false);
- const handleClick = () => setOpen(true);
- const theme = useTheme();
- return (
-
- setOpen(false)}
- status="success"
- action="redeem"
- message="42 NYM"
- transactions={
- theme.palette.mode === 'light'
- ? [transaction, transaction]
- : [transactionForDarkTheme, transactionForDarkTheme]
- }
- {...storybookStyles(theme)}
- />
-
- );
-};
-
-export const RedeemAllSuccess = () => {
- const [open, setOpen] = React.useState(false);
- const handleClick = () => setOpen(true);
- const theme = useTheme();
- return (
-
- setOpen(false)}
- status="success"
- action="redeem-all"
- message="42 NYM"
- transactions={
- theme.palette.mode === 'light'
- ? [transaction, transaction]
- : [transactionForDarkTheme, transactionForDarkTheme]
- }
- {...storybookStyles(theme)}
- />
-
- );
-};
-
-export const Error = () => {
- const [open, setOpen] = React.useState(false);
- const handleClick = () => setOpen(true);
- const theme = useTheme();
- return (
-
- setOpen(false)}
- status="error"
- action="redeem-all"
- message="Minim esse veniam Lorem id velit Lorem eu eu est. Excepteur labore sunt do proident proident sint aliquip consequat Lorem sint non nulla ad excepteur."
- transactions={theme.palette.mode === 'light' ? [transaction] : [transactionForDarkTheme]}
- {...storybookStyles(theme)}
- />
-
- );
-};
diff --git a/nym-wallet/src/components/Delegation/Delegations.stories.tsx b/nym-wallet/src/components/Delegation/Delegations.stories.tsx
deleted file mode 100644
index 99a37271bb..0000000000
--- a/nym-wallet/src/components/Delegation/Delegations.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import { Paper } from '@mui/material';
-import { Delegations } from './Delegations';
-import { items } from './DelegationList.stories';
-
-const explorerUrl = 'https://sandbox-explorer.nymtech.net';
-
-export default {
- title: 'Delegation/Components/Delegations',
- component: Delegations,
-} as ComponentMeta;
-
-export const Default = () => (
-
- Your Delegations
-
-);
-
-export const Empty = () => (
-
- Your Delegations
-
-);
diff --git a/nym-wallet/src/components/Delegation/Delegations.tsx b/nym-wallet/src/components/Delegation/Delegations.tsx
index 2234dcbc6a..88916dcdfa 100644
--- a/nym-wallet/src/components/Delegation/Delegations.tsx
+++ b/nym-wallet/src/components/Delegation/Delegations.tsx
@@ -6,18 +6,12 @@ import { DelegationList } from './DelegationList';
import { DelegationListItemActions } from './DelegationActions';
export const Delegations: FCWithChildren<{
- isLoading?: boolean;
items: DelegationWithEverything[];
explorerUrl: string;
onDelegationItemActionClick?: (item: DelegationWithEverything, action: DelegationListItemActions) => void;
-}> = ({ isLoading, items, explorerUrl, onDelegationItemActionClick }) => (
+}> = ({ items, explorerUrl, onDelegationItemActionClick }) => (
<>
-
- Lorem ipsum
-
- Show modal
-
-
- Veniam dolor laborum labore sit reprehenderit enim mollit magna nulla adipisicing fugiat. Est ex irure quis sunt
- velit elit do minim mollit non duis reprehenderit. Eiusmod dolore adipisicing ex nostrud consectetur culpa
- exercitation do. Ad elit esse ipsum aliqua labore irure laborum qui culpa.
-
-
- Occaecat commodo excepteur anim ut officia dolor laboris dolore id occaecat enim qui eiusmod occaecat aliquip ad
- tempor. Labore amet laborum magna amet consequat dolor cupidatat in consequat sunt aliquip magna laboris tempor
- culpa est magna. Sit tempor cillum culpa sint ipsum nostrud ullamco voluptate exercitation dolore magna elit ut
- mollit.
-
-
- Labore voluptate elit amet ipsum qui officia duis in et occaecat culpa ex do non labore mollit. Cillum cupidatat
- duis ea dolore laboris laboris sunt duis anim consectetur cupidatat nulla ad minim sunt ea. Aliqua amet commodo
- est irure sint magna sunt. Pariatur dolore commodo labore quis incididunt proident duis voluptate exercitation
- in duis. Occaecat aliqua laboris reprehenderit nostrud est aute pariatur fugiat anim. Dolore sunt cillum ea
- aliquip consectetur laborum ipsum qui veniam Lorem consectetur adipisicing velit magna aute. Amet tempor quis
- excepteur minim culpa velit Lorem enim ad.
-
-
- Mollit laborum exercitation excepteur laboris adipisicing ipsum veniam cillum mollit voluptate do. Amet et anim
- Lorem mollit minim duis cupidatat non. Consectetur sit deserunt nisi nisi non excepteur dolor eiusmod aute aute
- irure anim dolore ipsum et veniam.
-
-
- );
-};
-
-export const Delegate = () => {
- const [open, setOpen] = React.useState(false);
- const theme = useTheme();
- return (
- <>
- setOpen(true)} />
- setOpen(false)}
- onOk={async () => setOpen(false)}
- denom="nym"
- estimatedReward={50.423}
- accountBalance="425.2345053"
- nodeUptimePercentage={99.28394}
- profitMarginPercentage="11.12334234"
- rewardInterval="monthlyish"
- hasVestingContract={false}
- {...storybookStyles(theme)}
- />
-
- );
-};
-
-export const DelegateBelowMinimum = () => {
- const [open, setOpen] = React.useState(false);
- const theme = useTheme();
- return (
- <>
- setOpen(true)} />
- setOpen(false)}
- onOk={async () => setOpen(false)}
- denom="nym"
- estimatedReward={425.2345053}
- nodeUptimePercentage={99.28394}
- profitMarginPercentage="11.12334234"
- rewardInterval="monthlyish"
- initialAmount="0.1"
- hasVestingContract={false}
- {...storybookStyles(theme)}
- />
-
- );
-};
-
-export const DelegateMore = () => {
- const [open, setOpen] = React.useState(false);
- const theme = useTheme();
- return (
- <>
- setOpen(true)} />
- setOpen(false)}
- onOk={async () => setOpen(false)}
- header="Delegate more"
- buttonText="Delegate more"
- denom="nym"
- estimatedReward={50.423}
- accountBalance="425.2345053"
- nodeUptimePercentage={99.28394}
- profitMarginPercentage="11.12334234"
- rewardInterval="monthlyish"
- hasVestingContract={false}
- {...storybookStyles(theme)}
- />
-
- );
-};
-
-export const Undelegate = () => {
- const [open, setOpen] = React.useState(false);
- const theme = useTheme();
- return (
- <>
- setOpen(true)} />
- setOpen(false)}
- onOk={async () => setOpen(false)}
- currency="nym"
- amount={150}
- mixId={1234}
- identityKey="AA6RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujyxx"
- usesVestingContractTokens={false}
- {...storybookStyles(theme)}
- />
-
- );
-};
diff --git a/nym-wallet/src/components/Delegation/PendingDelegationCard.tsx b/nym-wallet/src/components/Delegation/PendingDelegationCard.tsx
new file mode 100644
index 0000000000..6af5f797ec
--- /dev/null
+++ b/nym-wallet/src/components/Delegation/PendingDelegationCard.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Box, Chip, Paper, Stack, Tooltip, Typography } from '@mui/material';
+import { WrappedDelegationEvent } from '@nymproject/types';
+import { TauriLink as Link } from 'src/components/TauriLinkWrapper';
+
+export const PendingDelegationCard = ({ item, explorerUrl }: { item: WrappedDelegationEvent; explorerUrl: string }) => (
+ (t.palette.mode === 'dark' ? 'nym.nymWallet.nav.background' : 'nym.nymWallet.background.subtle'),
+ borderColor: 'divider',
+ }}
+ >
+
+
+ {item.event.amount?.amount} {item.event.amount?.denom?.toUpperCase() ?? 'NYM'}
+
+
+ Your delegation of {item.event.amount?.amount} {item.event.amount?.denom} will take effect when the new
+ epoch starts. There is a new epoch every hour.
+
+ }
+ arrow
+ PopperProps={{
+ sx: {
+ '& .MuiTooltip-tooltip': { textAlign: 'left' },
+ },
+ }}
+ >
+
-
-
- -
- -
- -
- -
- -
-
- {item.event.amount?.amount} NYM
-
- -
-
-
-
- Your delegation of {item.event.amount?.amount} {item.event.amount?.denom} will take effect when the new
- epoch starts. There is a new epoch every hour.
-
- }
- arrow
- PopperProps={{
- sx: {
- '& .MuiTooltip-tooltip': {
- textAlign: 'center',
- },
- },
- }}
- >
-
-
-
-
-);
diff --git a/nym-wallet/src/components/FeeWarning.stories.tsx b/nym-wallet/src/components/FeeWarning.stories.tsx
deleted file mode 100644
index 7a553aae79..0000000000
--- a/nym-wallet/src/components/FeeWarning.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Box } from '@mui/material';
-import { BalanceWarning } from './FeeWarning';
-
-export default {
- title: 'Wallet / Balance warning',
- component: BalanceWarning,
-} as ComponentMeta;
-
-const Template: ComponentStory = (args) => (
-
-
-);
-
-export const WithWarning = Template.bind({});
-WithWarning.args = {
- fee: '200',
-};
diff --git a/nym-wallet/src/components/LogViewer/index.tsx b/nym-wallet/src/components/LogViewer/index.tsx
index b796715324..424280f15d 100644
--- a/nym-wallet/src/components/LogViewer/index.tsx
+++ b/nym-wallet/src/components/LogViewer/index.tsx
@@ -1,6 +1,6 @@
import React, { FC, useEffect, useRef, useState } from 'react';
import type { UnlistenFn } from '@tauri-apps/api/event';
-import { listen } from '@tauri-apps/api/event';
+import { getCurrentWebview } from '@tauri-apps/api/webview';
import {
Box,
Paper,
@@ -90,32 +90,43 @@ interface RecordPayload {
export const LogViewer: FC = () => {
const theme = useTheme();
- const unlisten = useRef();
+ const unlisten = useRef(null);
const [messages, setMessages] = useState([]);
const [messageCount, setMessageCount] = useState(0);
const tableRef = useRef(null);
useEffect(() => {
- listen('log://log', (event) => {
- const payload = event.payload as RecordPayload;
- const payloadWithTimestamp = {
- ...payload,
- timestamp: Date.now(),
- };
+ let cancelled = false;
- setMessages((prev) => [payloadWithTimestamp, ...prev]);
- setMessageCount((prev) => prev + 1);
+ const setupListener = async () => {
+ const unlistenFn = await getCurrentWebview().listen('log://log', (event) => {
+ const { payload } = event;
+ const payloadWithTimestamp = {
+ ...payload,
+ timestamp: Date.now(),
+ };
- if (tableRef.current) {
- tableRef.current.scrollTop = 0;
+ setMessages((prev) => [payloadWithTimestamp, ...prev]);
+ setMessageCount((prev) => prev + 1);
+
+ if (tableRef.current) {
+ tableRef.current.scrollTop = 0;
+ }
+ });
+ if (cancelled) {
+ unlistenFn();
+ } else {
+ unlisten.current = unlistenFn;
}
- }).then((fn) => {
- unlisten.current = fn;
- });
+ };
+
+ setupListener();
return () => {
+ cancelled = true;
if (unlisten.current) {
unlisten.current();
+ unlisten.current = null;
}
};
}, []);
diff --git a/nym-wallet/src/components/Login/LoginPasswordFormWrapper.tsx b/nym-wallet/src/components/Login/LoginPasswordFormWrapper.tsx
index 0217b81974..4e4be03187 100644
--- a/nym-wallet/src/components/Login/LoginPasswordFormWrapper.tsx
+++ b/nym-wallet/src/components/Login/LoginPasswordFormWrapper.tsx
@@ -43,7 +43,12 @@ export const EnhancedPasswordInput: React.FC = ({
const input = inputRef.current.querySelector('input');
if (!input) return undefined;
+ input.setAttribute('autocomplete', 'new-password');
+ input.setAttribute('data-lpignore', 'true');
+ input.setAttribute('data-1p-ignore', 'true');
+
const handleKeyDown = async (e: KeyboardEvent) => {
+ if (e.defaultPrevented) return;
if (document.activeElement !== input) return;
if ((e.metaKey || e.ctrlKey) && e.key === 'a') {
@@ -101,7 +106,7 @@ export const EnhancedPasswordInput: React.FC = ({
};
return (
-
+
= ({
// Fix the event type issue by casting Event to KeyboardEvent
const handleKeyDown = async (e: Event) => {
const keyEvent = e as KeyboardEvent;
+ if (keyEvent.defaultPrevented) return;
if (document.activeElement !== input) return;
if ((keyEvent.metaKey || keyEvent.ctrlKey) && keyEvent.key === 'a') {
@@ -108,7 +109,7 @@ export const EnhancedMnemonicInput: React.FC = ({
};
return (
-
+
({
- backdropProps: backDropStyles(theme),
- sx: dialogStyles(theme),
-});
-
-export default {
- title: 'Modals/ConfirmationModal',
- component: ConfirmationModal,
-} as ComponentMeta;
-
-const Template: ComponentStory = (args) => {
- const [open, setOpen] = useState(true);
- const theme = useTheme();
- return (
- <>
- setOpen(true)}>
- Open confirmation dialog
-
- setOpen(false)}
- onConfirm={() => setOpen(false)}
- {...storybookStyles(theme)}
- >
- Dialog content.
-
-
- );
-};
-
-export const withError: ComponentStory = () => {
- const [open, setOpen] = useState(true);
- const theme = useTheme();
- return (
- <>
- setOpen(true)}>
- Open confirmation dialog
-
- setOpen(false)}
- onConfirm={() => setOpen(false)}
- {...storybookStyles(theme)}
- >
-
-
- );
-};
-
-export const Default = Template.bind({});
-Default.args = {
- title: 'Confirmation Modal',
- subTitle: '',
- fullWidth: true,
- confirmButton: 'Confirm',
- maxWidth: 'xs',
- disabled: false,
-};
diff --git a/nym-wallet/src/components/Modals/LoadingModal.tsx b/nym-wallet/src/components/Modals/LoadingModal.tsx
index a7fd83b13a..865d5f984c 100644
--- a/nym-wallet/src/components/Modals/LoadingModal.tsx
+++ b/nym-wallet/src/components/Modals/LoadingModal.tsx
@@ -1,32 +1,81 @@
import React from 'react';
-import { Box, CircularProgress, Modal, Stack, Typography, SxProps } from '@mui/material';
-
-const modalStyle: SxProps = {
- position: 'absolute',
- top: '50%',
- left: '50%',
- transform: 'translate(-50%, -50%)',
- width: 500,
- bgcolor: 'background.paper',
- boxShadow: 24,
- borderRadius: '16px',
- p: 4,
-};
+import { BackdropProps, Box, CircularProgress, Fade, Modal, Stack, Typography, SxProps } from '@mui/material';
+import { alpha, useTheme, type Theme } from '@mui/material/styles';
export const LoadingModal: FCWithChildren<{
text?: string;
sx?: SxProps;
- backdropProps?: object;
-}> = ({ sx, backdropProps, text = 'Please wait...' }) => (
-
- `1px solid ${t.palette.nym.nymWallet.modal.border}`, ...modalStyle, ...sx }}
- textAlign="center"
+ backdropProps?: Partial;
+}> = ({ sx, backdropProps, text = 'Just a moment' }) => {
+ const theme = useTheme();
+ const { sx: backdropSx, ...backdropRest } = backdropProps || {};
+
+ const extraBackdropSx: SxProps[] = [];
+ if (Array.isArray(backdropSx)) {
+ extraBackdropSx.push(...(backdropSx as readonly SxProps[]));
+ } else if (backdropSx) {
+ extraBackdropSx.push(backdropSx as SxProps);
+ }
+
+ // MUI merges `sx` arrays at runtime; a plain TS array is not inferred as SxProps.
+ const backdropSxMerged: SxProps = [
+ {
+ backdropFilter: 'blur(12px)',
+ backgroundColor: alpha(theme.palette.common.black, theme.palette.mode === 'dark' ? 0.5 : 0.34),
+ },
+ ...extraBackdropSx,
+ ] as SxProps;
+
+ return (
+
-
- {text}
-
-
-
-);
+
+ `1px solid ${alpha(t.palette.divider, theme.palette.mode === 'dark' ? 0.55 : 1)}`,
+ bgcolor: (t) =>
+ theme.palette.mode === 'dark' ? alpha(t.palette.background.paper, 0.96) : t.palette.background.paper,
+ boxShadow: (t) => t.palette.nym.nymWallet.shadows.strong,
+ px: { xs: 3, sm: 4 },
+ py: { xs: 3.5, sm: 4.25 },
+ outline: 'none',
+ ...sx,
+ }}
+ >
+
+
+ {text}
+
+
+
+
+
+ );
+};
diff --git a/nym-wallet/src/components/Modals/ModalListItem.tsx b/nym-wallet/src/components/Modals/ModalListItem.tsx
index 830c25705e..72f8f215e0 100644
--- a/nym-wallet/src/components/Modals/ModalListItem.tsx
+++ b/nym-wallet/src/components/Modals/ModalListItem.tsx
@@ -11,22 +11,45 @@ export const ModalListItem: FCWithChildren<{
light?: boolean;
value?: React.ReactNode;
sxValue?: SxProps;
-}> = ({ label, value, hidden, fontWeight, fontSize, divider, sxValue }) => (
+ /** row: label and value on one line; stack: label above value (better for long strings) */
+ layout?: 'row' | 'stack';
+}> = ({ label, value, hidden, fontWeight, fontSize, divider, sxValue, layout = 'row' }) => (
-
-
- {label}
-
- {value && (
+ {layout === 'stack' ? (
+
- {value}
+ {label}
- )}
-
+ {value ? (
+
+ {value}
+
+ ) : null}
+
+ ) : (
+
+
+ {label}
+
+ {value ? (
+
+ {value}
+
+ ) : null}
+
+ )}
{divider &&
);
diff --git a/nym-wallet/src/components/Modals/SimpleModal.stories.tsx b/nym-wallet/src/components/Modals/SimpleModal.stories.tsx
deleted file mode 100644
index 921e9a3c5a..0000000000
--- a/nym-wallet/src/components/Modals/SimpleModal.stories.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import React from 'react';
-import { ComponentMeta } from '@storybook/react';
-import { Button, Paper, Typography } from '@mui/material';
-import { useTheme, Theme } from '@mui/material/styles';
-import { SimpleModal } from './SimpleModal';
-import { ModalDivider } from './ModalDivider';
-import { backDropStyles, modalStyles } from '../../../.storybook/storiesStyles';
-
-const storybookStyles = (theme: Theme) => ({
- backdropProps: backDropStyles(theme),
- sx: modalStyles(theme),
-});
-
-export default {
- title: 'Modals/Simple Modal',
- component: SimpleModal,
-} as ComponentMeta;
-
-const BasePage: FCWithChildren<{ children: React.ReactElement; handleClick: () => void }> = ({
- children,
- handleClick,
-}) => (
- <>
-
- Lorem ipsum
-
- Show modal
-
-
- Veniam dolor laborum labore sit reprehenderit enim mollit magna nulla adipisicing fugiat. Est ex irure quis sunt
- velit elit do minim mollit non duis reprehenderit. Eiusmod dolore adipisicing ex nostrud consectetur culpa
- exercitation do. Ad elit esse ipsum aliqua labore irure laborum qui culpa.
-
-
- Occaecat commodo excepteur anim ut officia dolor laboris dolore id occaecat enim qui eiusmod occaecat aliquip ad
- tempor. Labore amet laborum magna amet consequat dolor cupidatat in consequat sunt aliquip magna laboris tempor
- culpa est magna. Sit tempor cillum culpa sint ipsum nostrud ullamco voluptate exercitation dolore magna elit ut
- mollit.
-
-
- Labore voluptate elit amet ipsum qui officia duis in et occaecat culpa ex do non labore mollit. Cillum cupidatat
- duis ea dolore laboris laboris sunt duis anim consectetur cupidatat nulla ad minim sunt ea. Aliqua amet commodo
- est irure sint magna sunt. Pariatur dolore commodo labore quis incididunt proident duis voluptate exercitation
- in duis. Occaecat aliqua laboris reprehenderit nostrud est aute pariatur fugiat anim. Dolore sunt cillum ea
- aliquip consectetur laborum ipsum qui veniam Lorem consectetur adipisicing velit magna aute. Amet tempor quis
- excepteur minim culpa velit Lorem enim ad.
-
-
- Mollit laborum exercitation excepteur laboris adipisicing ipsum veniam cillum mollit voluptate do. Amet et anim
- Lorem mollit minim duis cupidatat non. Consectetur sit deserunt nisi nisi non excepteur dolor eiusmod aute aute
- irure anim dolore ipsum et veniam.
-
-
- {children}
-
-);
-
-export const Default = () => {
- const [open, setOpen] = React.useState(false);
- const handleClick = () => setOpen(true);
-
- const theme = useTheme();
-
- return (
-
- setOpen(false)}
- onOk={async () => setOpen(false)}
- header="This is a modal"
- subHeader="This is a sub header"
- okLabel="Click to continue"
- {...storybookStyles(theme)}
- >
-
- Lorem mollit minim duis cupidatat non. Consectetur sit deserunt
-
-
- Veniam dolor laborum labore sit reprehenderit enim mollit magna nulla adipisicing fugiat. Est ex irure quis.
-
-
- Occaecat commodo excepteur anim ut officia dolor laboris dolore id occaecat enim qui eius
-
-
- Tempor culpa est magna. Sit tempor cillum culpa sint ipsum nostrud ullamco voluptate exercitation dolore magna
- elit ut mollit.
-
-
-
- );
-};
-
-export const NoSubheader = () => {
- const [open, setOpen] = React.useState(false);
- const handleClick = () => setOpen(true);
-
- const theme = useTheme();
-
- return (
-
- setOpen(false)}
- onOk={async () => setOpen(false)}
- header="This is a modal"
- okLabel="Kaplow!"
- {...storybookStyles(theme)}
- >
-
- Tempor culpa est magna. Sit tempor cillum culpa sint ipsum nostrud ullamco voluptate exercitation dolore magna
- elit ut mollit.
-
-
- Veniam dolor laborum labore sit reprehenderit enim mollit magna nulla adipisicing fugiat. Est ex irure quis.
-
-
-
- );
-};
-
-export const hideCloseIcon = () => {
- const [open, setOpen] = React.useState(false);
- const handleClick = () => setOpen(true);
-
- const theme = useTheme();
-
- return (
-
- setOpen(false)}
- onOk={async () => setOpen(false)}
- header="This is a modal"
- okLabel="Kaplow!"
- {...storybookStyles(theme)}
- >
-
- Tempor culpa est magna. Sit tempor cillum culpa sint ipsum nostrud ullamco voluptate exercitation dolore magna
- elit ut mollit.
-
-
- Veniam dolor laborum labore sit reprehenderit enim mollit magna nulla adipisicing fugiat. Est ex irure quis.
-
-
-
- );
-};
-
-export const hideCloseIconAndDisplayErrorIcon = () => {
- const [open, setOpen] = React.useState(false);
- const handleClick = () => setOpen(true);
-
- const theme = useTheme();
-
- return (
-
- setOpen(false)}
- onOk={async () => setOpen(false)}
- header="This modal announces an error !"
- okLabel="Kaplow!"
- backdropProps={backDropStyles(theme)}
- sx={{
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- justifyContent: 'center',
- ...modalStyles(theme),
- }}
- headerStyles={{
- width: '100%',
- mb: 3,
- textAlign: 'center',
- color: 'error.main',
- }}
- subHeaderStyles={{ textAlign: 'center', color: 'text.primary', fontSize: 14, fontWeight: 400 }}
- >
-
- Tempor culpa est magna. Sit tempor cillum culpa sint ipsum nostrud ullamco voluptate exercitation dolore magna
- elit ut mollit.
-
-
- Veniam dolor laborum labore sit reprehenderit enim mollit magna nulla adipisicing fugiat. Est ex irure quis.
-
-
-
- );
-};
-
-export const withBackButton = () => {
- const [open, setOpen] = React.useState(false);
- const handleClick = () => setOpen(true);
-
- const theme = useTheme();
-
- return (
-
- setOpen(false)}
- onOk={async () => setOpen(false)}
- header="This is a modal"
- okLabel="Primary action"
- onBack={() => setOpen(false)}
- {...storybookStyles(theme)}
- >
-
- Tempor culpa est magna. Sit tempor cillum culpa sint ipsum nostrud ullamco voluptate exercitation dolore magna
- elit ut mollit.
-
-
- Veniam dolor laborum labore sit reprehenderit enim mollit magna nulla adipisicing fugiat. Est ex irure quis.
-
-
-
- );
-};
-
-export const withBackButtonAndCustomLabel = () => {
- const [open, setOpen] = React.useState(false);
- const handleClick = () => setOpen(true);
-
- const theme = useTheme();
-
- return (
-
- setOpen(false)}
- onOk={async () => setOpen(false)}
- header="This is a modal"
- okLabel="Primary action"
- onBack={() => setOpen(false)}
- backLabel="Cancel"
- backButtonFullWidth
- {...storybookStyles(theme)}
- >
-
- Tempor culpa est magna. Sit tempor cillum culpa sint ipsum nostrud ullamco voluptate exercitation dolore magna
- elit ut mollit.
-
-
- Veniam dolor laborum labore sit reprehenderit enim mollit magna nulla adipisicing fugiat. Est ex irure quis.
-
-
-
- );
-};
diff --git a/nym-wallet/src/components/Modals/SimpleModal.tsx b/nym-wallet/src/components/Modals/SimpleModal.tsx
index 7fdeb328b2..485d8c068f 100644
--- a/nym-wallet/src/components/Modals/SimpleModal.tsx
+++ b/nym-wallet/src/components/Modals/SimpleModal.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import { Box, Button, Modal, Stack, SxProps, Typography } from '@mui/material';
+import { alpha } from '@mui/material/styles';
import CloseIcon from '@mui/icons-material/Close';
import ErrorOutline from '@mui/icons-material/ErrorOutline';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
@@ -11,9 +12,15 @@ export const SimpleModal: FCWithChildren<{
hideCloseIcon?: boolean;
displayErrorIcon?: boolean;
displayInfoIcon?: boolean;
+ /** Center the header title; close control stays top-right. */
+ headerCentered?: boolean;
headerStyles?: SxProps;
subHeaderStyles?: SxProps;
buttonFullWidth?: boolean;
+ /** Tighter padding and typography */
+ dense?: boolean;
+ /** Primary left accent bar */
+ accent?: 'none' | 'primary';
onClose?: () => void;
onOk?: () => Promise;
onBack?: () => void;
@@ -31,9 +38,12 @@ export const SimpleModal: FCWithChildren<{
hideCloseIcon,
displayErrorIcon,
displayInfoIcon,
+ headerCentered,
headerStyles,
subHeaderStyles,
buttonFullWidth,
+ dense,
+ accent = 'none',
onClose,
okDisabled,
onOk,
@@ -48,37 +58,103 @@ export const SimpleModal: FCWithChildren<{
backdropProps,
}) => (
- `1px solid ${t.palette.nym.nymWallet.modal.border}`, ...modalStyle, ...sx }}>
- {displayErrorIcon && `1px solid ${t.palette.nym.nymWallet.modal.border}`,
+ ...modalStyle,
+ ...(dense ? { p: 3, borderRadius: '12px' } : {}),
+ ...(accent === 'primary'
+ ? {
+ borderLeft: (t) => `4px solid ${t.palette.primary.main}`,
+ }
+ : {}),
+ ...sx,
+ }}
+ >
+ {displayErrorIcon && theme.palette.nym.nymWallet.text.blue }} />}
-
+
{typeof header === 'string' ? (
-
+
{header}
) : (
header
)}
- {!hideCloseIcon &&
- theme.palette.text.secondary}
- sx={{ color: (theme) => theme.palette.nym.nymWallet.text.muted, ...subHeaderStyles }}
- >
- {subHeader}
-
+ {subHeader ? (
+
+ {subHeader}
+
+ ) : null}
{children}
{(onOk || onBack) && (
-
+
{onBack &&
+ ({
+ color: theme.palette.primary.contrastText,
+ '&.Mui-disabled': {
+ color: alpha(theme.palette.primary.contrastText, 0.55),
+ },
+ })}
+ >
{okLabel}
)}
diff --git a/nym-wallet/src/components/Nav.tsx b/nym-wallet/src/components/Nav.tsx
index 3036f91682..ee8f6abfd1 100644
--- a/nym-wallet/src/components/Nav.tsx
+++ b/nym-wallet/src/components/Nav.tsx
@@ -1,88 +1,89 @@
-import React, { useState, useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
-import { List, ListItem, ListItemIcon, ListItemText } from '@mui/material';
-import {
- AccountBalanceWalletOutlined,
- ArrowBack,
- ArrowForward,
- Description,
- Settings,
- Toll,
-} from '@mui/icons-material';
+import { Divider, List, ListItemButton, ListItemIcon, ListItemText, Stack, Typography } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
+import { alpha } from '@mui/material/styles';
+import { AccountBalanceWalletOutlined, Description, Settings, VpnKeyOutlined } from '@mui/icons-material';
+import { safeOpenUrl } from 'src/utils/safeOpenUrl';
import { AppContext } from '../context/main';
import { Delegate, Bonding } from '../svg-icons';
+const activeNavPrimaryColor = (theme: Theme) =>
+ theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.grey[900];
+
export const Nav = () => {
const location = useLocation();
const navigate = useNavigate();
- const { isAdminAddress, handleShowSendModal, handleShowReceiveModal } = useContext(AppContext);
+ const { isAdminAddress } = useContext(AppContext);
- const [routesSchema] = useState([
- {
- label: 'Balance',
- route: '/balance',
- Icon: AccountBalanceWalletOutlined,
- onClick: () => navigate('/balance'),
- },
- {
- label: 'Send',
- Icon: ArrowForward,
- onClick: handleShowSendModal,
- },
- {
- label: 'Receive',
- Icon: ArrowBack,
- onClick: handleShowReceiveModal,
- },
- {
- label: 'Delegation',
- route: '/delegation',
- Icon: Delegate,
- onClick: () => navigate('/delegation'),
- },
- {
- label: 'Bonding',
- route: '/bonding',
- Icon: Bonding,
- onClick: () => navigate('/bonding'),
- },
- {
- label: 'Docs',
- route: '/admin',
- Icon: Description,
- mode: 'dev',
- onClick: () => navigate('/docs'),
- },
- {
- label: 'Admin',
- route: '/admin',
- Icon: Settings,
- mode: 'admin',
- onClick: () => navigate('/admin'),
- },
- {
- label: 'Buy',
- route: '/buy',
- Icon: Toll,
- onClick: () => navigate('/buy'),
- },
- ]);
+ const routesSchema = useMemo(
+ () => [
+ {
+ label: 'Balance',
+ description: 'Portfolio',
+ route: '/balance',
+ Icon: AccountBalanceWalletOutlined,
+ onClick: () => navigate('/balance'),
+ },
+ {
+ label: 'Delegation',
+ description: 'Stake and manage rewards',
+ route: '/delegation',
+ Icon: Delegate,
+ onClick: () => navigate('/delegation'),
+ },
+ {
+ label: 'Bonding',
+ description: 'Run operator workflows',
+ route: '/bonding',
+ Icon: Bonding,
+ onClick: () => navigate('/bonding'),
+ },
+ {
+ label: 'Docs',
+ description: 'Internal wallet notes',
+ route: '/docs',
+ Icon: Description,
+ mode: 'dev',
+ onClick: () => navigate('/docs'),
+ },
+ {
+ label: 'Admin',
+ description: 'Network management',
+ route: '/admin',
+ Icon: Settings,
+ mode: 'admin',
+ onClick: () => navigate('/admin'),
+ },
+ ],
+ [navigate],
+ );
+
+ const ecosystemLinks = useMemo(
+ () => [
+ {
+ label: 'NymVPN',
+ description: 'Plans and subscribe',
+ href: 'https://nym.com/pricing',
+ Icon: VpnKeyOutlined,
+ },
+ ],
+ [],
+ );
return (
-
+
+
+ Navigation
+
{routesSchema
@@ -99,47 +100,137 @@ export const Nav = () => {
return false;
}
})
- .map(({ Icon, onClick, label, route }) => (
- theme.palette.nym.nymWallet.hover.background },
- }}
- >
- {
+ const isActive = route ? location.pathname.startsWith(route) : false;
+
+ return (
+
-
- (theme.palette.mode === 'light' ? 600 : 500),
+ px: 2,
+ py: 2,
+ borderRadius: 3,
+ alignItems: 'flex-start',
+ border: (theme) => {
+ if (isActive) {
+ return `1px solid ${theme.palette.primary.main}`;
+ }
+ if (theme.palette.mode === 'dark') {
+ return '1px solid rgba(255,255,255,0.06)';
+ }
+ return `1px solid ${alpha(theme.palette.common.black, 0.08)}`;
+ },
+ backgroundColor: (theme) => {
+ if (isActive) {
+ return `${theme.palette.primary.main}12`;
+ }
+
+ return theme.palette.mode === 'dark'
+ ? 'rgba(255,255,255,0.02)'
+ : alpha(theme.palette.common.black, 0.02);
+ },
+ '&:hover': {
+ backgroundColor: (theme) =>
+ isActive ? `${theme.palette.primary.main}18` : theme.palette.nym.nymWallet.hover.background,
},
}}
- primary={label}
- />
-
- ))}
+ >
+
+
+ (isActive ? activeNavPrimaryColor(theme) : theme.palette.text.primary),
+ },
+ '& .MuiListItemText-secondary': {
+ mt: 0.5,
+ fontSize: 12,
+ lineHeight: 1.35,
+ color: 'text.secondary',
+ },
+ }}
+ primary={label}
+ secondary={description}
+ />
+
+ );
+ })}
+
+ Ecosystem
+
+ {ecosystemLinks.map(({ Icon, label, description, href }) => (
+ {
+ safeOpenUrl(href).catch(() => {
+ /* opener unavailable or user cancelled */
+ });
+ }}
+ sx={{
+ px: 2,
+ py: 2,
+ borderRadius: 3,
+ alignItems: 'flex-start',
+ border: (theme) =>
+ theme.palette.mode === 'dark'
+ ? '1px solid rgba(255,255,255,0.06)'
+ : `1px solid ${alpha(theme.palette.common.black, 0.08)}`,
+ backgroundColor: (theme) =>
+ theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.02)' : alpha(theme.palette.common.black, 0.02),
+ '&:hover': {
+ backgroundColor: (theme) => theme.palette.nym.nymWallet.hover.background,
+ },
+ }}
+ >
+
+
+
+ ))}
-
);
};
diff --git a/nym-wallet/src/components/NetworkSelector.stories.tsx b/nym-wallet/src/components/NetworkSelector.stories.tsx
deleted file mode 100644
index 52cd74c6cc..0000000000
--- a/nym-wallet/src/components/NetworkSelector.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Box } from '@mui/material';
-import { MockMainContextProvider } from '../context/mocks/main';
-import { NetworkSelector } from './NetworkSelector';
-
-export default {
- title: 'Wallet / Network Selector',
- component: NetworkSelector,
-} as ComponentMeta;
-
-const Template: ComponentStory = () => (
-
-
-
-
-);
-
-export const Default = Template.bind({});
diff --git a/nym-wallet/src/components/NetworkSelector.tsx b/nym-wallet/src/components/NetworkSelector.tsx
index 5df0d7ec74..efd7493caf 100644
--- a/nym-wallet/src/components/NetworkSelector.tsx
+++ b/nym-wallet/src/components/NetworkSelector.tsx
@@ -4,6 +4,7 @@ import { ArrowDropDown, Check } from '@mui/icons-material';
import { Network } from 'src/types';
import { AppContext } from '../context/main';
import { config } from '../config';
+import { headerControlPillSx } from './headerControlPillSx';
const networks: { networkName: Network; name: string }[] = [
{ networkName: 'MAINNET', name: 'Nym Mainnet' },
@@ -59,10 +60,10 @@ export const NetworkSelector = () => {
`1px solid ${theme.palette.text.primary}` }} />}
+ endIcon={
diff --git a/nym-wallet/src/components/NymCard.tsx b/nym-wallet/src/components/NymCard.tsx
index ae3d84fe23..b6da460be6 100644
--- a/nym-wallet/src/components/NymCard.tsx
+++ b/nym-wallet/src/components/NymCard.tsx
@@ -11,34 +11,53 @@ const CardContentNoPadding = styled(CardContent)(() => ({
}));
export const NymCard: FCWithChildren<{
- title: string | React.ReactElement;
- subheader?: string | React.ReactChild;
+ title?: string | React.ReactElement;
+ subheader?: React.ReactNode;
Action?: React.ReactNode;
Icon?: React.ReactNode;
noPadding?: boolean;
borderless?: boolean;
+ /** Omit the card header row (use for fully custom headers inside children). */
+ hideHeader?: boolean;
dataTestid?: string;
sx?: SxProps;
sxTitle?: SxProps;
children?: React.ReactNode;
-}> = ({ title, subheader, Action, Icon, noPadding, borderless, children, dataTestid, sx, sxTitle }) => (
-
- theme.palette.text.primary,
- '& .MuiCardHeader-title h5': { fontSize: '1.25rem' },
- }}
- title={
+ {!hideHeader && title !== undefined && (
+ theme.palette.text.primary,
+ '& .MuiCardHeader-title h5': { fontSize: '1.25rem' },
+ '& .MuiCardHeader-action': {
+ alignSelf: 'center',
+ m: 0,
+ },
+ }}
+ title={{children}
) : (
- {children}
+ {children}
)}
);
diff --git a/nym-wallet/src/components/Receive/ReceiveModal.tsx b/nym-wallet/src/components/Receive/ReceiveModal.tsx
index b7373cadc0..01836aeed0 100644
--- a/nym-wallet/src/components/Receive/ReceiveModal.tsx
+++ b/nym-wallet/src/components/Receive/ReceiveModal.tsx
@@ -1,54 +1,48 @@
import React, { useContext } from 'react';
import { AppContext } from 'src/context';
-import { Box, Stack, SxProps, Typography, alpha, useTheme } from '@mui/material';
-import QRCode from 'qrcode.react';
-import { ClientAddress } from '@nymproject/react/client-address/ClientAddress';
+import { Box, Stack, Typography, alpha, useTheme } from '@mui/material';
+import QrCode2Icon from '@mui/icons-material/QrCode2';
+import { CopyToClipboard } from '@nymproject/react/clipboard/CopyToClipboard';
+import { QrCodeReact } from 'src/utils/qrCodeReact';
import { SimpleModal } from '../Modals/SimpleModal';
-export const ReceiveModal = ({
- onClose,
- sx,
- backdropProps,
-}: {
- onClose: () => void;
- sx?: SxProps;
- backdropProps?: object;
-}) => {
+export const ReceiveModal = ({ onClose }: { onClose: () => void }) => {
const { clientDetails } = useContext(AppContext);
const theme = useTheme();
const isLightMode = theme.palette.mode === 'light';
const highlightColor = theme.palette.nym.highlight;
const darkBgColor = theme.palette.background.default;
+ const address = clientDetails?.client_address?.trim() ?? '';
return (
-
+
Your address
@@ -64,23 +59,43 @@ export const ReceiveModal = ({
- {clientDetails?.client_address && (
+ {address ? (
-
+ {address}
+
+
+ ) : (
+
+ No client address available. Sign in again if this persists.
+
)}
@@ -92,12 +107,22 @@ export const ReceiveModal = ({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
- bgcolor: isLightMode ? alpha(highlightColor, 0.06) : alpha(darkBgColor, 0.7),
+ bgcolor: isLightMode ? alpha(highlightColor, 0.06) : alpha(theme.palette.background.paper, 0.5),
borderRadius: '16px',
- py: 4,
+ py: 3,
px: 2,
+ border: `1px solid ${alpha(highlightColor, isLightMode ? 0.2 : 0.12)}`,
}}
>
+
+
+ QR code
+
+
+
+ Share this address only with people you trust.
+
+ QR unavailable without an address
+
)}
@@ -158,10 +182,11 @@ export const ReceiveModal = ({
Scan this QR code with a compatible wallet to receive NYM tokens
diff --git a/nym-wallet/src/components/Receive/index.tsx b/nym-wallet/src/components/Receive/index.tsx
index 7c32156c74..9f292d0554 100644
--- a/nym-wallet/src/components/Receive/index.tsx
+++ b/nym-wallet/src/components/Receive/index.tsx
@@ -2,10 +2,10 @@ import React, { useContext } from 'react';
import { AppContext } from 'src/context';
import { ReceiveModal } from './ReceiveModal';
-export const Receive = ({ hasStorybookStyles }: { hasStorybookStyles?: {} }) => {
- const { showReceiveModal, handleShowReceiveModal } = useContext(AppContext);
+export const Receive = () => {
+ const { showReceiveModal, handleCloseReceiveModal } = useContext(AppContext);
- if (showReceiveModal) return ;
-
-const Content: FCWithChildren<{
- setOpen: (value: boolean) => void;
-}> = ({ setOpen }) => (
-
- Lorem ipsum
- setOpen(true)}>
- Show modal
-
-
- Veniam dolor laborum labore sit reprehenderit enim mollit magna nulla adipisicing fugiat. Est ex irure quis sunt
- velit elit do minim mollit non duis reprehenderit. Eiusmod dolore adipisicing ex nostrud consectetur culpa
- exercitation do. Ad elit esse ipsum aliqua labore irure laborum qui culpa.
-
-
- Occaecat commodo excepteur anim ut officia dolor laboris dolore id occaecat enim qui eiusmod occaecat aliquip ad
- tempor. Labore amet laborum magna amet consequat dolor cupidatat in consequat sunt aliquip magna laboris tempor
- culpa est magna. Sit tempor cillum culpa sint ipsum nostrud ullamco voluptate exercitation dolore magna elit ut
- mollit.
-
-
- Labore voluptate elit amet ipsum qui officia duis in et occaecat culpa ex do non labore mollit. Cillum cupidatat
- duis ea dolore laboris laboris sunt duis anim consectetur cupidatat nulla ad minim sunt ea. Aliqua amet commodo
- est irure sint magna sunt. Pariatur dolore commodo labore quis incididunt proident duis voluptate exercitation in
- duis. Occaecat aliqua laboris reprehenderit nostrud est aute pariatur fugiat anim. Dolore sunt cillum ea aliquip
- consectetur laborum ipsum qui veniam Lorem consectetur adipisicing velit magna aute. Amet tempor quis excepteur
- minim culpa velit Lorem enim ad.
-
-
- Mollit laborum exercitation excepteur laboris adipisicing ipsum veniam cillum mollit voluptate do. Amet et anim
- Lorem mollit minim duis cupidatat non. Consectetur sit deserunt nisi nisi non excepteur dolor eiusmod aute aute
- irure anim dolore ipsum et veniam.
-
-
-);
-
-export const RedeemAllRewards = () => {
- const [open, setOpen] = React.useState(false);
- const theme = useTheme();
- return (
- <>
- setOpen(false)}
- onOk={async () => setOpen(false)}
- message="Redeem all rewards"
- denom="nym"
- mixId={1234}
- identityKey="D88RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujaaa"
- amount={425.65843}
- {...storybookStyles(theme)}
- usesVestingTokens={false}
- />
-
- );
-};
-
-export const RedeemRewardForMixnode = () => {
- const [open, setOpen] = React.useState(false);
- const theme = useTheme();
- return (
- <>
- setOpen(false)}
- onOk={async () => setOpen(false)}
- message="Claim rewards"
- denom="nym"
- mixId={1234}
- identityKey="D88RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujaaa"
- amount={425.65843}
- {...storybookStyles(theme)}
- usesVestingTokens={false}
- />
-
- );
-};
-
-export const FeeIsMoreThanAllRewards = () => {
- const [open, setOpen] = React.useState(false);
- const theme = useTheme();
- return (
- <>
- setOpen(false)}
- onOk={() => setOpen(false)}
- message="Redeem all rewards"
- denom="nym"
- mixId={1234}
- identityKey="D88RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujaaa"
- amount={0.001}
- {...storybookStyles(theme)}
- usesVestingTokens={false}
- />
-
- );
-};
-
-export const FeeIsMoreThanMixnodeReward = () => {
- const [open, setOpen] = React.useState(false);
- const theme = useTheme();
- return (
- <>
- setOpen(false)}
- onOk={async () => setOpen(false)}
- mixId={1234}
- identityKey="D88RfeY8DttMD3CQKoayV6mss5a5FC3RoH75Kmcujaaa"
- message="Claim rewards"
- denom="nym"
- amount={0.001}
- {...storybookStyles(theme)}
- usesVestingTokens={false}
- />
-
- );
-};
diff --git a/nym-wallet/src/components/Rewards/RewardsSummary.stories.tsx b/nym-wallet/src/components/Rewards/RewardsSummary.stories.tsx
deleted file mode 100644
index d824eb33d6..0000000000
--- a/nym-wallet/src/components/Rewards/RewardsSummary.stories.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { ComponentMeta } from '@storybook/react';
-
-import { Paper } from '@mui/material';
-import { RewardsSummary } from './RewardsSummary';
-
-export default {
- title: 'Rewards/Components/Rewards Summary',
- component: RewardsSummary,
-} as ComponentMeta;
-
-export const Default = () => (
-
-
-);
-
-export const Empty = () => (
-
-
-);
-
-export const Loading = () => (
-
-
-);
diff --git a/nym-wallet/src/components/Send/SendDetails.stories.tsx b/nym-wallet/src/components/Send/SendDetails.stories.tsx
deleted file mode 100644
index ced7ee44ce..0000000000
--- a/nym-wallet/src/components/Send/SendDetails.stories.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react';
-import { ComponentMeta } from '@storybook/react';
-import { useTheme, Theme } from '@mui/material/styles';
-import { MockMainContextProvider } from 'src/context/mocks/main';
-import { SendDetailsModal } from './SendDetailsModal';
-import { SendSuccessModal } from './SendSuccessModal';
-import { SendErrorModal } from './SendErrorModal';
-import { SendInputModal } from './SendInputModal';
-import { Send } from '.';
-import { backDropStyles, modalStyles, dialogStyles } from '../../../.storybook/storiesStyles';
-
-const storybookStylesModal = (theme: Theme) => ({
- backdropProps: backDropStyles(theme),
- sx: modalStyles(theme),
-});
-
-const storybookStylesDialog = (theme: Theme) => ({
- backdropProps: backDropStyles(theme),
- sx: dialogStyles(theme),
-});
-
-export default {
- title: 'Send/Components',
- component: SendDetailsModal,
-} as ComponentMeta;
-
-export const SendInput = () => {
- const theme = useTheme();
- return (
- {}}
- onClose={() => {}}
- onAddressChange={() => {}}
- onAmountChange={() => {}}
- onUserFeesChange={() => {}}
- onMemoChange={() => {}}
- setShowMore={() => {}}
- {...storybookStylesModal(theme)}
- />
- );
-};
-
-export const SendDetails = () => {
- const theme = useTheme();
- return (
- {}}
- onSend={() => {}}
- onClose={() => {}}
- {...storybookStylesModal(theme)}
- />
- );
-};
-
-export const SendSuccess = () => {
- const theme = useTheme();
- return (
- {}}
- {...storybookStylesDialog(theme)}
- />
- );
-};
-
-export const SendError = () => {
- const theme = useTheme();
- return {}} {...storybookStylesModal(theme)} />;
-};
-
-export const SendFlow = () => {
- const theme = useTheme();
- return (
-
-
- );
-};
diff --git a/nym-wallet/src/components/Send/SendInputModal.tsx b/nym-wallet/src/components/Send/SendInputModal.tsx
index f561675cae..dc619c4156 100644
--- a/nym-wallet/src/components/Send/SendInputModal.tsx
+++ b/nym-wallet/src/components/Send/SendInputModal.tsx
@@ -1,8 +1,21 @@
-import React, { useEffect, useState } from 'react';
-import { Stack, Typography, SxProps, FormControlLabel, Checkbox, Alert } from '@mui/material';
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+ Box,
+ Button,
+ Stack,
+ Typography,
+ SxProps,
+ FormControlLabel,
+ Checkbox,
+ Alert,
+ CircularProgress,
+} from '@mui/material';
+import { alpha, useTheme } from '@mui/material/styles';
import Big from 'big.js';
import { CurrencyDenom, DecCoin, isValidRawCoin } from '@nymproject/types';
+import { CopyToClipboard } from '@nymproject/react/clipboard/CopyToClipboard';
import { validateAmount } from 'src/utils';
+import { validateNymAddress } from 'src/utils/validateNymAddress';
import { SimpleModal } from '../Modals/SimpleModal';
import { ModalListItem } from '../Modals/ModalListItem';
import { TextFieldWithPaste } from '../Clipboard/ClipboardFormFields';
@@ -12,16 +25,18 @@ const maxUserFees = '10.0';
const minUserFees = '0.000001'; // aka 1 unym
const MIN_AMOUNT_TO_SEND = '0.000001'; // Adjust this as needed
-// NYM address validation function
-const validateNymAddress = (address: string): boolean => {
- if (!address) return false;
-
- if (!address.startsWith('n1')) return false;
-
- if (address.length !== 40) return false;
-
- const validCharsRegex = /^[a-z0-9]+$/;
- return validCharsRegex.test(address);
+const recipientHelperText = (
+ recipientTouched: boolean,
+ toAddress: string,
+ addressIsValid: boolean,
+): string | undefined => {
+ if (recipientTouched && !toAddress.trim()) {
+ return 'Recipient address is required';
+ }
+ if (toAddress !== '' && !addressIsValid) {
+ return 'Invalid NYM address. Must start with n1 and be exactly 40 characters long.';
+ }
+ return undefined;
};
export const SendInputModal = ({
@@ -43,6 +58,9 @@ export const SendInputModal = ({
onMemoChange,
showMore,
setShowMore,
+ amountFieldKey,
+ onMaxAmount,
+ maxAmountLoading,
}: {
fromAddress?: string;
toAddress: string;
@@ -62,6 +80,10 @@ export const SendInputModal = ({
memo?: string;
onUserFeesChange: (value: DecCoin) => void;
onMemoChange: (value: string) => void;
+ /** Bump to remount the amount field after programmatic Max (CurrencyFormField is defaultValue-based). */
+ amountFieldKey: number;
+ onMaxAmount: () => void | Promise;
+ maxAmountLoading: boolean;
}) => {
const [isValid, setIsValid] = useState(false);
const [memoIsValid, setMemoIsValid] = useState(true);
@@ -69,110 +91,132 @@ export const SendInputModal = ({
const [addressIsValid, setAddressIsValid] = useState(false);
const [errorAmount, setErrorAmount] = useState();
const [errorFee, setErrorFee] = useState();
+ const [recipientTouched, setRecipientTouched] = useState(false);
+ /** Avoid "Amount is required" on modal open; show empty errors only after user edits the field. */
+ const [amountTouched, setAmountTouched] = useState(false);
+ /** Focus trap can fire a spurious blur on open; delay recipient blur validation slightly. */
+ const [recipientBlurReady, setRecipientBlurReady] = useState(false);
+ const theme = useTheme();
// Calculate noAccount at the component root level instead of using useEffect
const noAccount = !balance || balance === '0' || parseFloat(balance) === 0;
- const validateSendAmount = async (value: DecCoin) => {
- let newValidatedValue = true;
- let errorAmountMessage;
+ const validateSendAmount = useCallback(
+ async (value: DecCoin, assumeAmountInteracted = false) => {
+ let newValidatedValue = true;
+ let errorAmountMessage;
+ const showEmptyFieldErrors = assumeAmountInteracted || amountTouched;
- if (noAccount) {
- newValidatedValue = false;
- errorAmountMessage = 'You need to acquire NYMs before sending. Try using the Buy section in the app.';
- setIsValid(newValidatedValue);
- setErrorAmount(errorAmountMessage);
- return newValidatedValue;
- }
-
- if (!value.amount) {
- newValidatedValue = false;
- } else {
- // Skip validation for partial decimal inputs during typing
- if (value.amount === '.' || value.amount.endsWith('.')) {
+ if (noAccount) {
newValidatedValue = false;
+ errorAmountMessage = 'You need to acquire NYMs before sending. Try using the Buy section in the app.';
setIsValid(newValidatedValue);
- setErrorAmount(undefined);
+ setErrorAmount(errorAmountMessage);
return newValidatedValue;
}
- if (!(await validateAmount(value.amount, '0'))) {
+ if (!value?.amount || String(value.amount).trim() === '') {
newValidatedValue = false;
- errorAmountMessage = 'Please enter a valid amount';
- } else if (Number(value.amount) < Number(MIN_AMOUNT_TO_SEND)) {
- newValidatedValue = false;
- errorAmountMessage = `Min. send amount: ${MIN_AMOUNT_TO_SEND} ${denom?.toUpperCase()}`;
- } else if (balance && value.amount) {
- try {
- const amountBig = new Big(value.amount);
- const balanceBig = new Big(balance);
+ errorAmountMessage = showEmptyFieldErrors ? 'Amount is required' : undefined;
+ } else {
+ // Skip validation for partial decimal inputs during typing
+ if (value.amount === '.' || value.amount.endsWith('.')) {
+ newValidatedValue = false;
+ setIsValid(newValidatedValue);
+ setErrorAmount(undefined);
+ return newValidatedValue;
+ }
- if (amountBig.gt(balanceBig)) {
- newValidatedValue = false;
- errorAmountMessage = `Make sure you have sufficient funds. Available: ${balance} ${denom?.toUpperCase()}`;
- }
- } catch (err) {
- if (!/^\d*\.?\d*$/.test(value.amount)) {
- newValidatedValue = false;
- errorAmountMessage = 'Invalid number format';
+ if (!(await validateAmount(value.amount, '0'))) {
+ newValidatedValue = false;
+ errorAmountMessage = 'Please enter a valid amount';
+ } else if (Number(value.amount) < Number(MIN_AMOUNT_TO_SEND)) {
+ newValidatedValue = false;
+ errorAmountMessage = `Min. send amount: ${MIN_AMOUNT_TO_SEND} ${denom?.toUpperCase()}`;
+ } else if (balance && value.amount) {
+ try {
+ const amountBig = new Big(value.amount);
+ const balanceBig = new Big(balance);
+
+ if (amountBig.gt(balanceBig)) {
+ newValidatedValue = false;
+ errorAmountMessage = `Amount exceeds your available balance. Available: ${balance} ${denom?.toUpperCase()}`;
+ }
+ } catch (err) {
+ if (!/^\d*\.?\d*$/.test(value.amount)) {
+ newValidatedValue = false;
+ errorAmountMessage = 'Invalid number format';
+ }
}
}
}
- }
- setIsValid(newValidatedValue);
- setErrorAmount(errorAmountMessage);
- return newValidatedValue;
- };
+ setIsValid(newValidatedValue);
+ setErrorAmount(errorAmountMessage);
+ return newValidatedValue;
+ },
+ [amountTouched, noAccount, balance, denom],
+ );
- const validateUserFees = (fees: DecCoin) => {
- let feeValid = true;
- let errorFeeMessage;
+ const validateUserFees = useCallback(
+ (fees: DecCoin) => {
+ let feeValid = true;
+ let errorFeeMessage;
+
+ if (noAccount) {
+ feeValid = false;
+ errorFeeMessage = 'You need to acquire NYMs before setting fees.';
+ setFeeAmountIsValid(feeValid);
+ setErrorFee(errorFeeMessage);
+ return feeValid;
+ }
+
+ // Skip validation for partial decimal inputs during typing
+ if (fees.amount === '.' || fees.amount.endsWith('.')) {
+ setFeeAmountIsValid(false);
+ setErrorFee(undefined);
+ return false;
+ }
+
+ if (!isValidRawCoin(fees.amount) || !Number(fees.amount)) {
+ feeValid = false;
+ errorFeeMessage = 'Please enter a valid fee amount';
+ } else {
+ try {
+ const f = Big(fees.amount);
+ if (f.gt(maxUserFees)) {
+ feeValid = false;
+ errorFeeMessage = `Max fee: ${maxUserFees} ${denom?.toUpperCase()}`;
+ } else if (f.lt(minUserFees)) {
+ feeValid = false;
+ errorFeeMessage = `Min. fee: ${minUserFees} ${denom?.toUpperCase()}`;
+ }
+ } catch (err) {
+ if (!/^\d*\.?\d*$/.test(fees.amount)) {
+ feeValid = false;
+ errorFeeMessage = 'Invalid fee format';
+ }
+ }
+ }
- if (noAccount) {
- feeValid = false;
- errorFeeMessage = 'You need to acquire NYMs before setting fees.';
setFeeAmountIsValid(feeValid);
setErrorFee(errorFeeMessage);
return feeValid;
- }
-
- // Skip validation for partial decimal inputs during typing
- if (fees.amount === '.' || fees.amount.endsWith('.')) {
- setFeeAmountIsValid(false);
- setErrorFee(undefined);
- return false;
- }
-
- if (!isValidRawCoin(fees.amount) || !Number(fees.amount)) {
- feeValid = false;
- errorFeeMessage = 'Please enter a valid fee amount';
- } else {
- try {
- const f = Big(fees.amount);
- if (f.gt(maxUserFees)) {
- feeValid = false;
- errorFeeMessage = `Max fee: ${maxUserFees} ${denom?.toUpperCase()}`;
- } else if (f.lt(minUserFees)) {
- feeValid = false;
- errorFeeMessage = `Min. fee: ${minUserFees} ${denom?.toUpperCase()}`;
- }
- } catch (err) {
- if (!/^\d*\.?\d*$/.test(fees.amount)) {
- feeValid = false;
- errorFeeMessage = 'Invalid fee format';
- }
- }
- }
-
- setFeeAmountIsValid(feeValid);
- setErrorFee(errorFeeMessage);
- return feeValid;
- };
+ },
+ [noAccount, denom],
+ );
useEffect(() => {
- if (amount) validateSendAmount(amount);
- }, [amount, balance, noAccount]);
+ const id = window.setTimeout(() => setRecipientBlurReady(true), 400);
+ return () => window.clearTimeout(id);
+ }, []);
+
+ useEffect(() => {
+ const empty: DecCoin = { amount: '', denom: denom ?? 'nym' };
+ validateSendAmount(amount ?? empty).catch(() => {
+ /* validateSendAmount only updates state */
+ });
+ }, [amount, denom, validateSendAmount]);
// Effect to validate address whenever it changes
useEffect(() => {
@@ -193,55 +237,153 @@ export const SendInputModal = ({
} else {
setFeeAmountIsValid(true);
}
- }, [userFees, noAccount]);
+ }, [userFees, validateUserFees]);
return (
onNext()}
okDisabled={!isValid || !memoIsValid || !feeAmountIsValid || !addressIsValid || noAccount}
- sx={sx}
+ subHeaderStyles={{ mb: 0, px: 3, pt: 0.5 }}
+ sx={{
+ maxWidth: '480px',
+ width: '100%',
+ borderRadius: '20px',
+ overflow: 'hidden',
+ boxShadow: theme.palette.nym.nymWallet.shadows.strong,
+ ...sx,
+ }}
backdropProps={backdropProps}
>
- {noAccount && (
-
- To start staking, sending or operating the on the NYM network, you first need to get native NYM tokens.
-
- )}
-
-
-
+ {noAccount && (
+
+ To start staking, sending or operating on the NYM network, you first need to get native NYM tokens.
+
+ )}
+
+
+ Your address
+
+
+ {fromAddress ? (
+
+
+ {fromAddress}
+
+
+ ) : (
+
+ -
+
+ )}
+
+
{/* Recipient address field with paste button */}
onAddressChange(e.target.value)}
+ onChange={(e) => {
+ setRecipientTouched(true);
+ onAddressChange(e.target.value);
+ }}
+ onBlur={() => {
+ if (recipientBlurReady) {
+ setRecipientTouched(true);
+ }
+ }}
value={toAddress}
- error={toAddress !== '' && !addressIsValid}
- helperText={
- toAddress !== '' && !addressIsValid
- ? 'Invalid NYM address. Must start with n1 and be exactly 40 characters long.'
- : undefined
- }
+ error={(recipientTouched && !toAddress.trim()) || (toAddress !== '' && !addressIsValid)}
+ helperText={recipientHelperText(recipientTouched, toAddress, addressIsValid)}
InputLabelProps={{ shrink: true }}
- onPasteValue={onAddressChange}
+ onPasteValue={(v) => {
+ setRecipientTouched(true);
+ onAddressChange(v);
+ }}
/>
- {/* Amount field with paste button */}
+ {/* Amount: Max in endAdornment; no paste chip (recipient/memo still have paste). */}
{
+ setAmountTouched(true);
onAmountChange(value);
- validateSendAmount(value);
+ validateSendAmount(value, true).catch(() => {
+ /* validateSendAmount only updates state */
+ });
}}
initialValue={amount?.amount}
denom={denom}
validationError={errorAmount}
+ endAdornment={
+ {
+ e.preventDefault();
+ e.stopPropagation();
+ await onMaxAmount();
+ }}
+ sx={{
+ minWidth: 52,
+ py: 0.25,
+ px: 0.75,
+ textTransform: 'none',
+ fontWeight: 600,
+ lineHeight: 1.2,
+ }}
+ aria-label="Fill maximum sendable amount after fees"
+ >
+ {maxAmountLoading ?
+ }
/>
{/* Memo field with paste button */}
@@ -263,36 +405,41 @@ export const SendInputModal = ({
{error}
-
-
-
- Est. fee for this transaction will be shown on the next page
-
-
-
- setShowMore(!showMore)} checked={showMore} />}
- label="More options"
- sx={{ mt: 2 }}
- />
-
- {showMore && (
-
- {
- onUserFeesChange(v);
- validateUserFees(v);
- }}
- initialValue={userFees?.amount}
- fullWidth
- denom={denom}
- validationError={errorFee}
+
+
+ Fees use the current network estimate (or your custom fee if set below). Max fills your balance minus that
+ fee and a small reserve. The next step shows the full breakdown before you confirm.
+
- )}
+
+ setShowMore(!showMore)} checked={showMore} />}
+ label="More options"
+ />
+
+ {showMore && (
+
+ {
+ onUserFeesChange(v);
+ validateUserFees(v);
+ }}
+ initialValue={userFees?.amount}
+ fullWidth
+ denom={denom}
+ validationError={errorFee}
+ />
+
+ )}
+
);
};
diff --git a/nym-wallet/src/components/Send/SendModal.tsx b/nym-wallet/src/components/Send/SendModal.tsx
index 77aeb7dd6b..f9c0269df4 100644
--- a/nym-wallet/src/components/Send/SendModal.tsx
+++ b/nym-wallet/src/components/Send/SendModal.tsx
@@ -1,10 +1,12 @@
import React, { useContext, useEffect, useState } from 'react';
+import Big from 'big.js';
import { DecCoin } from '@nymproject/types';
import { AppContext, urls } from 'src/context';
import { useGetFee } from 'src/hooks/useGetFee';
import { send } from 'src/requests';
import { Console } from 'src/utils/console';
import { simulateSend } from 'src/requests/simulate';
+import { validateNymAddress } from 'src/utils/validateNymAddress';
import { LoadingModal } from '../Modals/LoadingModal';
import { SendDetailsModal } from './SendDetailsModal';
import { SendErrorModal } from './SendErrorModal';
@@ -12,7 +14,11 @@ import { SendInputModal } from './SendInputModal';
import { SendSuccessModal } from './SendSuccessModal';
import { TTransactionDetails } from './types';
-export const SendModal = ({ onClose, hasStorybookStyles }: { onClose: () => void; hasStorybookStyles?: {} }) => {
+/** Extra NYM left in the account after Max to absorb minor gas / rounding drift. */
+const MAX_SEND_FEE_RESERVE = '0.01';
+const MIN_SEND_AMOUNT = '0.000001';
+
+export const SendModal = ({ onClose }: { onClose: () => void }) => {
const [toAddress, setToAddress] = useState('');
const [amount, setAmount] = useState();
const [modal, setModal] = useState<'send' | 'send details'>('send');
@@ -24,6 +30,8 @@ export const SendModal = ({ onClose, hasStorybookStyles }: { onClose: () => void
const [memo, setMemo] = useState('');
const [txDetails, setTxDetails] = useState();
const [showMoreOptions, setShowMoreOptions] = useState(false);
+ const [amountFieldKey, setAmountFieldKey] = useState(0);
+ const [maxAmountLoading, setMaxAmountLoading] = useState(false);
const { clientDetails, userBalance, network } = useContext(AppContext);
const { fee, getFee, feeError, setFeeManually } = useGetFee();
@@ -44,6 +52,88 @@ export const SendModal = ({ onClose, hasStorybookStyles }: { onClose: () => void
// removes any zero-width spaces and trailing white space
const sanitizeAddress = (address: string) => address.replace(/[\u200B-\u200D\uFEFF]/g, '').trim();
+ const handleMaxAmount = async () => {
+ setError(undefined);
+ if (!userBalance.balance?.amount) {
+ setError('Balance unavailable.');
+ return;
+ }
+ if (!validateNymAddress(toAddress)) {
+ setError('Enter a valid recipient address to estimate network fees for Max.');
+ return;
+ }
+
+ const balDec = userBalance.balance.amount;
+ setMaxAmountLoading(true);
+ try {
+ let feeDisplay: string;
+
+ if (showMoreOptions && userFees?.amount && String(userFees.amount).trim() !== '') {
+ if (!Number(userFees.amount)) {
+ setError('Set a valid custom fee or turn off More options.');
+ return;
+ }
+ feeDisplay = userFees.amount;
+ } else {
+ const probe = await simulateSend({
+ address: toAddress,
+ amount: balDec,
+ memo: memo || '',
+ });
+ if (!probe.amount?.amount) {
+ setError('Could not estimate network fee. Try again or set a custom fee under More options.');
+ return;
+ }
+ feeDisplay = probe.amount.amount;
+ }
+
+ const balanceBig = new Big(balDec.amount);
+ const feeBig = new Big(feeDisplay);
+ const reserveBig = new Big(MAX_SEND_FEE_RESERVE);
+ let maxBig = balanceBig.minus(feeBig).minus(reserveBig);
+
+ if (maxBig.lte(0)) {
+ setError(
+ 'Balance is too low to send after fees and reserve. Add funds, lower the custom fee, or try again later.',
+ );
+ return;
+ }
+
+ if (!(showMoreOptions && userFees?.amount && String(userFees.amount).trim() !== '')) {
+ const refined = await simulateSend({
+ address: toAddress,
+ amount: { amount: maxBig.toString(), denom: balDec.denom },
+ memo: memo || '',
+ });
+ if (refined.amount?.amount) {
+ maxBig = balanceBig.minus(new Big(refined.amount.amount)).minus(reserveBig);
+ }
+ }
+
+ if (maxBig.lte(0) || maxBig.lt(new Big(MIN_SEND_AMOUNT))) {
+ setError(
+ `Max sendable amount is below the minimum (${MIN_SEND_AMOUNT} ${(
+ clientDetails?.display_mix_denom || 'nym'
+ ).toUpperCase()}).`,
+ );
+ return;
+ }
+
+ const rounded = maxBig.round(6, 0);
+ let amountStr = rounded.toFixed(6).replace(/\.?0+$/, '');
+ if (amountStr === '' || amountStr === '.') {
+ amountStr = MIN_SEND_AMOUNT;
+ }
+
+ setAmount({ amount: amountStr, denom: balDec.denom });
+ setAmountFieldKey((k) => k + 1);
+ } catch (e) {
+ setError(String(e));
+ } finally {
+ setMaxAmountLoading(false);
+ }
+ };
+
const handleOnNext = async () => {
if (amount) {
setIsLoading(true);
@@ -108,7 +198,6 @@ export const SendModal = ({ onClose, hasStorybookStyles }: { onClose: () => void
onSend={handleSend}
denom={clientDetails?.display_mix_denom || 'nym'}
memo={memo}
- {...hasStorybookStyles}
/>
);
@@ -130,7 +219,9 @@ export const SendModal = ({ onClose, hasStorybookStyles }: { onClose: () => void
onUserFeesChange={(value) => setUserFees(value)}
onMemoChange={(value) => setMemo(value)}
setShowMore={setShowMoreOptions}
- {...hasStorybookStyles}
+ amountFieldKey={amountFieldKey}
+ onMaxAmount={handleMaxAmount}
+ maxAmountLoading={maxAmountLoading}
/>
);
};
diff --git a/nym-wallet/src/components/Send/index.tsx b/nym-wallet/src/components/Send/index.tsx
index adba37b7d9..8c4df33f5f 100644
--- a/nym-wallet/src/components/Send/index.tsx
+++ b/nym-wallet/src/components/Send/index.tsx
@@ -2,10 +2,10 @@ import React, { useContext } from 'react';
import { AppContext } from 'src/context';
import { SendModal } from './SendModal';
-export const Send = ({ hasStorybookStyles }: { hasStorybookStyles?: {} }) => {
- const { showSendModal, handleShowSendModal } = useContext(AppContext);
+export const Send = () => {
+ const { showSendModal, handleCloseSendModal } = useContext(AppContext);
- if (showSendModal) return
-
-
- Installed version
+
+
+
+ Installed
- {`Nym Wallet v${appVersion}`}
+ {`Nym Wallet v${appVersion}`}
+ updateCheck()}>
+ Check for updates
+
{updateAvailable && (
- updateHandler()}>
- Update available
+ updateHandler()}>
+ Download update
)}
diff --git a/nym-wallet/src/components/TauriLinkWrapper.tsx b/nym-wallet/src/components/TauriLinkWrapper.tsx
index edf2e20839..34dc6e9a10 100644
--- a/nym-wallet/src/components/TauriLinkWrapper.tsx
+++ b/nym-wallet/src/components/TauriLinkWrapper.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { Link, LinkProps } from '@nymproject/react/link/Link';
-import { openUrl } from '@tauri-apps/plugin-opener';
+import { safeOpenUrl } from 'src/utils/safeOpenUrl';
export const TauriLink: React.FC = (props) => {
const { href, onClick, ...restProps } = props;
@@ -12,7 +12,7 @@ export const TauriLink: React.FC = (props) => {
if (href && (href.startsWith('http://') || href.startsWith('https://'))) {
event.preventDefault();
- await openUrl(href);
+ await safeOpenUrl(href);
}
};
diff --git a/nym-wallet/src/components/TokenPoolSelector.stories.tsx b/nym-wallet/src/components/TokenPoolSelector.stories.tsx
deleted file mode 100644
index 1247f5b00d..0000000000
--- a/nym-wallet/src/components/TokenPoolSelector.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Box } from '@mui/material';
-import { TokenPoolSelector } from './TokenPoolSelector';
-import { MockMainContextProvider } from '../context/mocks/main';
-
-export default {
- title: 'Wallet / Token pool',
- component: TokenPoolSelector,
-} as ComponentMeta;
-
-const Template: ComponentStory = (args) => (
-
-
-
-
-);
-
-export const Default = Template.bind({});
-Default.args = {
- disabled: false,
- onSelect: () => {},
-};
diff --git a/nym-wallet/src/components/headerControlPillSx.ts b/nym-wallet/src/components/headerControlPillSx.ts
new file mode 100644
index 0000000000..848b29872d
--- /dev/null
+++ b/nym-wallet/src/components/headerControlPillSx.ts
@@ -0,0 +1,26 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+import { alpha } from '@mui/material/styles';
+
+/**
+ * Shared visual style for account and network controls in the AppBar pill.
+ */
+export const headerControlPillSx: SxProps = {
+ color: 'text.primary',
+ fontSize: 14,
+ textTransform: 'none',
+ borderRadius: 999,
+ px: 2.25,
+ py: 1.25,
+ minHeight: 44,
+ lineHeight: 1.2,
+ border: (theme: Theme) =>
+ theme.palette.mode === 'light'
+ ? `1px solid ${alpha(theme.palette.common.black, 0.08)}`
+ : `1px solid ${theme.palette.divider}`,
+ bgcolor: (theme: Theme) =>
+ theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : alpha(theme.palette.background.paper, 0.85),
+ '&:hover': {
+ bgcolor: (theme: Theme) =>
+ theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.1)' : alpha(theme.palette.common.black, 0.04),
+ },
+};
diff --git a/nym-wallet/src/components/index.ts b/nym-wallet/src/components/index.ts
index 904d1a3097..4e73d053f2 100644
--- a/nym-wallet/src/components/index.ts
+++ b/nym-wallet/src/components/index.ts
@@ -4,6 +4,7 @@ export * from './Clipboard';
export * from './ErrorFallback';
export * from './InfoToolTip';
export * from './LoadingPage';
+export * from './AppSessionLoadingOverlay';
export * from './Mnemonic';
export * from './Nav';
export * from './NetworkSelector';
diff --git a/nym-wallet/src/config.ts b/nym-wallet/src/config.ts
index 1b1f83ce1f..f12bd8f0f3 100644
--- a/nym-wallet/src/config.ts
+++ b/nym-wallet/src/config.ts
@@ -1,4 +1,9 @@
+/** Opt-in for production builds: set `NYM_WALLET_INTERNAL_DOCS=true` when running webpack (rare debugging). */
+const internalDocsEnvOverride = process.env.NYM_WALLET_INTERNAL_DOCS === 'true';
+
export const config = {
IS_DEV_MODE: process.env.NODE_ENV === 'development',
LOG_TAURI_OPERATIONS: process.env.NODE_ENV === 'development',
+ /** Arbitrary `invoke` playground; off in production unless `NYM_WALLET_INTERNAL_DOCS` is set at build time. */
+ INTERNAL_DOCS_ENABLED: process.env.NODE_ENV !== 'production' || internalDocsEnvOverride,
};
diff --git a/nym-wallet/src/context/auth.tsx b/nym-wallet/src/context/auth.tsx
index ddc7fd3302..597aa93ec2 100644
--- a/nym-wallet/src/context/auth.tsx
+++ b/nym-wallet/src/context/auth.tsx
@@ -28,8 +28,20 @@ export const AuthProvider: FCWithChildren = ({ children }) => {
const [error, setError] = useState();
const generateMnemonic = async () => {
- const mnemonicPhrase = await createMnemonic();
- setMnemonic(mnemonicPhrase);
+ setError(undefined);
+ try {
+ const mnemonicPhrase = await createMnemonic();
+ setMnemonic(mnemonicPhrase);
+ } catch (e) {
+ setMnemonic('');
+ let message = 'Could not generate a recovery phrase. Try again.';
+ if (typeof e === 'string') {
+ message = e;
+ } else if (e instanceof Error) {
+ message = e.message;
+ }
+ setError(message);
+ }
};
useEffect(() => {
diff --git a/nym-wallet/src/context/main.tsx b/nym-wallet/src/context/main.tsx
index 7ae2750478..89692ce133 100644
--- a/nym-wallet/src/context/main.tsx
+++ b/nym-wallet/src/context/main.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, useMemo, useState } from 'react';
+import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
import { forage } from '@tauri-apps/tauri-forage';
import { useNavigate } from 'react-router-dom';
import { useSnackbar } from 'notistack';
@@ -35,6 +35,9 @@ export const urls = (networkName?: Network) =>
type TLoginType = 'mnemonic' | 'password';
+/** `auth-splash`: full-screen auth-style loader (fallback). `app-overlay`: blurred in-app card (sign-in, account switch, sign-out). */
+export type AppLoadingPresentation = 'auth-splash' | 'app-overlay';
+
export type TAppContext = {
mode: 'light' | 'dark';
appEnv?: AppEnv;
@@ -47,6 +50,11 @@ export type TAppContext = {
showTerminal: boolean;
network?: Network;
isLoading: boolean;
+ /** While `isLoading` is true, selects {@link LoadingPage} vs {@link AppSessionLoadingOverlay}. */
+ loadingPresentation: AppLoadingPresentation;
+ /** Short line shown on the in-app loading overlay. */
+ loadingOverlayTitle: string;
+ loadingOverlaySubtitle?: string;
isAdminAddress: boolean;
error?: string;
loginType?: TLoginType;
@@ -56,6 +64,8 @@ export type TAppContext = {
handleSwitchMode: () => void;
handleShowSendModal: () => void;
handleShowReceiveModal: () => void;
+ handleCloseSendModal: () => void;
+ handleCloseReceiveModal: () => void;
setIsLoading: (isLoading: boolean) => void;
setError: (value?: string) => void;
switchNetwork: (network: Network) => void;
@@ -86,10 +96,24 @@ export const AppProvider: FCWithChildren = ({ children }) => {
const [appEnv, setAppEnv] = useState();
const [showAdmin, setShowAdmin] = useState(false);
const [showTerminal, setShowTerminal] = useState(false);
- const [mode, setMode] = useState<'light' | 'dark'>('light');
+ /** Default dark avoids a light flash before forage restores a saved preference. */
+ const [mode, setMode] = useState<'light' | 'dark'>('dark');
const [loginType, setLoginType] = useState<'mnemonic' | 'password'>();
- const [isLoading, setIsLoading] = useState(false);
+ const [isLoading, setIsLoadingInternal] = useState(false);
+ const [loadingPresentation, setLoadingPresentation] = useState('auth-splash');
+ const [loadingOverlayTitle, setLoadingOverlayTitle] = useState('');
+ const [loadingOverlaySubtitle, setLoadingOverlaySubtitle] = useState();
const [error, setError] = useState();
+
+ /** Context-exposed setter: turning loading off also resets overlay copy and presentation to defaults. */
+ const publishSetIsLoading = useCallback((loading: boolean) => {
+ setIsLoadingInternal(loading);
+ if (!loading) {
+ setLoadingPresentation('auth-splash');
+ setLoadingOverlayTitle('');
+ setLoadingOverlaySubtitle(undefined);
+ }
+ }, []);
const [appVersion, setAppVersion] = useState();
const [isAdminAddress, setIsAdminAddress] = useState(false);
const [showSendModal, setShowSendModal] = useState(false);
@@ -129,7 +153,7 @@ export const AppProvider: FCWithChildren = ({ children }) => {
setStoredAccounts(undefined);
setNetwork(undefined);
setError(undefined);
- setIsLoading(false);
+ publishSetIsLoading(false);
setMixnodeDetails(null);
};
@@ -234,9 +258,17 @@ export const AppProvider: FCWithChildren = ({ children }) => {
}
setIsAdminAddress(newValue);
- getContractParams().then((params) => {
- setMixnetContractParams(params);
- });
+ getContractParams()
+ .then((params) => {
+ setMixnetContractParams(params);
+ })
+ .catch((e) => {
+ setMixnetContractParams(undefined);
+ const msg = typeof e === 'string' ? e : String(e);
+ if (!msg.includes('temporarily disabled')) {
+ Console.error('get_contract_settings failed', e);
+ }
+ });
}, [appEnv, network, clientDetails?.client_address]);
const logIn = async ({ type, value }: { type: TLoginType; value: string }) => {
@@ -245,7 +277,14 @@ export const AppProvider: FCWithChildren = ({ children }) => {
return;
}
try {
- setIsLoading(true);
+ setLoadingPresentation('app-overlay');
+ setLoadingOverlayTitle('Signing in');
+ setLoadingOverlaySubtitle(
+ type === 'mnemonic'
+ ? 'Restoring your wallet from your recovery phrase.'
+ : 'Unlocking your wallet and connecting to the network.',
+ );
+ setIsLoadingInternal(true);
if (type === 'mnemonic') {
await signInWithMnemonic(value);
setLoginType('mnemonic');
@@ -258,12 +297,15 @@ export const AppProvider: FCWithChildren = ({ children }) => {
} catch (e) {
setError(e as string);
} finally {
- setIsLoading(false);
+ publishSetIsLoading(false);
}
};
const logOut = async () => {
- setIsLoading(true);
+ setLoadingPresentation('app-overlay');
+ setLoadingOverlayTitle('Signing out');
+ setLoadingOverlaySubtitle('Closing your session safely.');
+ setIsLoadingInternal(true);
try {
await signOut();
await setReactState(undefined);
@@ -271,13 +313,16 @@ export const AppProvider: FCWithChildren = ({ children }) => {
enqueueSnackbar('Successfully logged out', { variant: 'success' });
await createSignInWindow();
} finally {
- setIsLoading(false);
+ publishSetIsLoading(false);
}
};
const onAccountChange = async ({ accountId, password }: { accountId: string; password: string }) => {
if (network) {
- setIsLoading(true);
+ setLoadingPresentation('app-overlay');
+ setLoadingOverlayTitle('Switching account');
+ setLoadingOverlaySubtitle('Refreshing your wallet and balances.');
+ setIsLoadingInternal(true);
try {
await switchAccount({ accountId, password });
await loadAccount(network);
@@ -285,7 +330,7 @@ export const AppProvider: FCWithChildren = ({ children }) => {
} catch (e) {
throw new Error(`Error swtiching account: ${e}`);
} finally {
- setIsLoading(false);
+ publishSetIsLoading(false);
}
}
};
@@ -293,8 +338,10 @@ export const AppProvider: FCWithChildren = ({ children }) => {
const handleShowAdmin = () => setShowAdmin((show) => !show);
const handleShowTerminal = () => setShowTerminal((show) => !show);
const switchNetwork = (_network: Network) => setNetwork(_network);
- const handleShowSendModal = () => setShowSendModal((show) => !show);
- const handleShowReceiveModal = () => setShowReceiveModal((show) => !show);
+ const handleShowSendModal = () => setShowSendModal(true);
+ const handleShowReceiveModal = () => setShowReceiveModal(true);
+ const handleCloseSendModal = () => setShowSendModal(false);
+ const handleCloseReceiveModal = () => setShowReceiveModal(false);
const handleSwitchMode = () =>
setMode((currentMode) => {
const newMode = currentMode === 'light' ? 'dark' : 'light';
@@ -303,12 +350,15 @@ export const AppProvider: FCWithChildren = ({ children }) => {
});
const memoizedValue = useMemo(
- () => ({
+ (): TAppContext => ({
mode,
appEnv,
appVersion,
isAdminAddress,
isLoading,
+ loadingPresentation,
+ loadingOverlayTitle,
+ loadingOverlaySubtitle,
error,
clientDetails,
storedAccounts,
@@ -318,7 +368,7 @@ export const AppProvider: FCWithChildren = ({ children }) => {
showTerminal,
network,
loginType,
- setIsLoading,
+ setIsLoading: publishSetIsLoading,
setError,
signInWithPassword,
switchNetwork,
@@ -333,6 +383,8 @@ export const AppProvider: FCWithChildren = ({ children }) => {
showReceiveModal,
handleShowSendModal,
handleShowReceiveModal,
+ handleCloseSendModal,
+ handleCloseReceiveModal,
handleSwitchMode,
printBalance,
printVestedBalance,
@@ -345,6 +397,9 @@ export const AppProvider: FCWithChildren = ({ children }) => {
mode,
appEnv,
isLoading,
+ loadingPresentation,
+ loadingOverlayTitle,
+ loadingOverlaySubtitle,
error,
clientDetails,
mixnodeDetails,
@@ -356,6 +411,7 @@ export const AppProvider: FCWithChildren = ({ children }) => {
showSendModal,
showReceiveModal,
mixnetContractParams,
+ publishSetIsLoading,
],
);
diff --git a/nym-wallet/src/context/mocks/main.tsx b/nym-wallet/src/context/mocks/main.tsx
index cb68ead589..5e30270183 100644
--- a/nym-wallet/src/context/mocks/main.tsx
+++ b/nym-wallet/src/context/mocks/main.tsx
@@ -5,7 +5,7 @@ import { AppContext } from '../main';
export const MockMainContextProvider: FCWithChildren = ({ children }) => {
const memoizedValue = useMemo(
() => ({
- mode: 'light',
+ mode: 'dark',
handleSwitchMode: () => undefined,
appEnv: {
ADMIN_ADDRESS: null,
@@ -15,11 +15,16 @@ export const MockMainContextProvider: FCWithChildren = ({ children }) => {
appVersion: 'mock',
isAdminAddress: false,
isLoading: false,
+ loadingPresentation: 'auth-splash',
+ loadingOverlayTitle: '',
+ loadingOverlaySubtitle: undefined,
clientDetails: {
display_mix_denom: 'nymt',
base_mix_denom: 'unymt',
client_address: '',
},
+ storedAccounts: undefined,
+ mixnodeDetails: null,
userBalance: {
balance: {
amount: {
@@ -28,18 +33,21 @@ export const MockMainContextProvider: FCWithChildren = ({ children }) => {
},
printable_balance: '100 NYMT',
},
+ error: undefined,
+ tokenAllocation: undefined,
+ originalVesting: undefined,
+ currentVestingPeriod: undefined,
+ vestingAccountInfo: undefined,
clearAll: () => undefined,
isLoading: false,
clearBalance: () => undefined,
fetchBalance: async () => undefined,
fetchTokenAllocation: async () => undefined,
- refreshBalances: async () => {},
+ refreshBalances: async () => undefined,
},
- displayDenom: 'NYM',
showAdmin: false,
showTerminal: false,
- showSettings: false,
- showSendModal: true,
+ showSendModal: false,
showReceiveModal: false,
network: 'SANDBOX',
loginType: 'mnemonic',
@@ -53,11 +61,14 @@ export const MockMainContextProvider: FCWithChildren = ({ children }) => {
logIn: () => undefined,
logOut: () => undefined,
onAccountChange: () => undefined,
- handleShowSettings: () => undefined,
handleShowSendModal: () => undefined,
handleShowReceiveModal: () => undefined,
+ handleCloseSendModal: () => undefined,
+ handleCloseReceiveModal: () => undefined,
keepState: async () => undefined,
printBalance: '100.0000 NYMT',
+ printVestedBalance: undefined,
+ mixnetContractParams: undefined,
}),
[],
);
diff --git a/nym-wallet/src/hooks/useGetBalance.ts b/nym-wallet/src/hooks/useGetBalance.ts
index d43eeb1c04..e84cdd5cfb 100644
--- a/nym-wallet/src/hooks/useGetBalance.ts
+++ b/nym-wallet/src/hooks/useGetBalance.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
import { Account, Balance, DecCoin, OriginalVestingResponse, Period, VestingAccountInfo } from '@nymproject/types';
import {
getVestingCoins,
@@ -33,12 +33,21 @@ export type TUseuserBalance = {
vestingAccountInfo?: VestingAccountInfo;
isLoading: boolean;
fetchBalance: () => Promise;
- fetchTokenAllocation: () => Promise;
+ fetchTokenAllocation: (isBackgroundPoll?: boolean) => Promise;
clearBalance: () => void;
clearAll: () => void;
refreshBalances: () => Promise;
};
+/** `BackendError::VestingContractAccountNotFound`, or legacy vesting ABCI wording. */
+const isNoVestingAccountError = (e: unknown) => {
+ const s = String(e);
+ return (
+ s === 'Vesting contract has no account for this address' ||
+ (s.includes('VESTING') && s.includes('Account does not exist'))
+ );
+};
+
export const useGetBalance = (clientDetails?: Account): TUseuserBalance => {
const [balance, setBalance] = useState();
const [error, setError] = useState();
@@ -48,16 +57,82 @@ export const useGetBalance = (clientDetails?: Account): TUseuserBalance => {
const [vestingAccountInfo, setVestingAccountInfo] = useState();
const [isLoading, setIsLoading] = useState(false);
+ const vestingAccountStatusRef = useRef<'unknown' | 'absent' | 'present'>('unknown');
+
const clearBalance = () => setBalance(undefined);
const clearTokenAllocation = () => setTokenAllocation(undefined);
const clearOriginalVesting = () => setOriginalVesting(undefined);
- const fetchTokenAllocation = async () => {
+ const clearVestingUiState = () => {
+ clearTokenAllocation();
+ clearOriginalVesting();
+ setCurrentVestingPeriod(undefined);
+ setVestingAccountInfo(undefined);
+ };
+
+ useEffect(() => {
+ vestingAccountStatusRef.current = 'unknown';
+ }, [clientDetails?.client_address]);
+
+ const applyAllocationFromResponses = (
+ originalVestingValue: OriginalVestingResponse,
+ vestingCoins: Awaited>,
+ vestedCoins: Awaited>,
+ lockedCoins: Awaited>,
+ spendableCoins: Awaited>,
+ spendableVestedCoins: Awaited>,
+ spendableRewardCoins: Awaited>,
+ currentPeriod: Awaited>,
+ vestingAccountDetail: Awaited>,
+ ) => {
+ setOriginalVesting(originalVestingValue);
+ setCurrentVestingPeriod(currentPeriod);
+ setTokenAllocation({
+ vesting: vestingCoins.amount,
+ vested: vestedCoins.amount,
+ locked: lockedCoins.amount,
+ spendable: spendableCoins.amount,
+ spendableVestedCoins: spendableVestedCoins.amount,
+ spendableRewardCoins: spendableRewardCoins.amount,
+ });
+ setVestingAccountInfo(vestingAccountDetail);
+ };
+
+ const fetchTokenAllocation = async (isBackgroundPoll = false) => {
setIsLoading(true);
- if (clientDetails?.client_address) {
- try {
+ if (!clientDetails?.client_address) {
+ setIsLoading(false);
+ return;
+ }
+
+ if (vestingAccountStatusRef.current === 'absent') {
+ if (isBackgroundPoll) {
+ setIsLoading(false);
+ return;
+ }
+ vestingAccountStatusRef.current = 'unknown';
+ }
+
+ const address = clientDetails.client_address;
+
+ try {
+ if (vestingAccountStatusRef.current === 'unknown') {
+ let originalVestingValue: OriginalVestingResponse;
+ try {
+ originalVestingValue = await getOriginalVesting(address);
+ } catch (e) {
+ if (isNoVestingAccountError(e)) {
+ vestingAccountStatusRef.current = 'absent';
+ clearVestingUiState();
+ return;
+ }
+ clearVestingUiState();
+ Console.error(e as string);
+ return;
+ }
+
+ vestingAccountStatusRef.current = 'present';
const [
- originalVestingValue,
vestingCoins,
vestedCoins,
lockedCoins,
@@ -67,34 +142,70 @@ export const useGetBalance = (clientDetails?: Account): TUseuserBalance => {
currentPeriod,
vestingAccountDetail,
] = await Promise.all([
- getOriginalVesting(clientDetails?.client_address),
- getVestingCoins(clientDetails?.client_address),
- getVestedCoins(clientDetails?.client_address),
+ getVestingCoins(address),
+ getVestedCoins(address),
getLockedCoins(),
getSpendableCoins(),
getSpendableVestedCoins(),
getSpendableRewardCoins(),
- getCurrentVestingPeriod(clientDetails?.client_address),
- getVestingAccountInfo(clientDetails?.client_address),
+ getCurrentVestingPeriod(address),
+ getVestingAccountInfo(address),
]);
- setOriginalVesting(originalVestingValue);
- setCurrentVestingPeriod(currentPeriod);
- setTokenAllocation({
- vesting: vestingCoins.amount,
- vested: vestedCoins.amount,
- locked: lockedCoins.amount,
- spendable: spendableCoins.amount,
- spendableVestedCoins: spendableVestedCoins.amount,
- spendableRewardCoins: spendableRewardCoins.amount,
- });
- setVestingAccountInfo(vestingAccountDetail);
- } catch (e) {
- clearTokenAllocation();
- clearOriginalVesting();
- Console.error(e as string);
+ applyAllocationFromResponses(
+ originalVestingValue,
+ vestingCoins,
+ vestedCoins,
+ lockedCoins,
+ spendableCoins,
+ spendableVestedCoins,
+ spendableRewardCoins,
+ currentPeriod,
+ vestingAccountDetail,
+ );
+ return;
}
+
+ const [
+ originalVestingValue,
+ vestingCoins,
+ vestedCoins,
+ lockedCoins,
+ spendableCoins,
+ spendableVestedCoins,
+ spendableRewardCoins,
+ currentPeriod,
+ vestingAccountDetail,
+ ] = await Promise.all([
+ getOriginalVesting(address),
+ getVestingCoins(address),
+ getVestedCoins(address),
+ getLockedCoins(),
+ getSpendableCoins(),
+ getSpendableVestedCoins(),
+ getSpendableRewardCoins(),
+ getCurrentVestingPeriod(address),
+ getVestingAccountInfo(address),
+ ]);
+ applyAllocationFromResponses(
+ originalVestingValue,
+ vestingCoins,
+ vestedCoins,
+ lockedCoins,
+ spendableCoins,
+ spendableVestedCoins,
+ spendableRewardCoins,
+ currentPeriod,
+ vestingAccountDetail,
+ );
+ } catch (e) {
+ if (isNoVestingAccountError(e)) {
+ vestingAccountStatusRef.current = 'absent';
+ }
+ clearVestingUiState();
+ Console.error(e as string);
+ } finally {
+ setIsLoading(false);
}
- setIsLoading(false);
};
const fetchBalance = useCallback(async () => {
@@ -114,9 +225,13 @@ export const useGetBalance = (clientDetails?: Account): TUseuserBalance => {
clearBalance();
clearTokenAllocation();
clearOriginalVesting();
+ setCurrentVestingPeriod(undefined);
+ setVestingAccountInfo(undefined);
+ vestingAccountStatusRef.current = 'unknown';
};
const refreshBalances = async () => {
+ vestingAccountStatusRef.current = 'unknown';
if (clientDetails?.client_address) {
await fetchBalance();
await fetchTokenAllocation();
diff --git a/nym-wallet/src/hooks/useNymUsdPrice.ts b/nym-wallet/src/hooks/useNymUsdPrice.ts
new file mode 100644
index 0000000000..ee6cdd2e5a
--- /dev/null
+++ b/nym-wallet/src/hooks/useNymUsdPrice.ts
@@ -0,0 +1,59 @@
+import { useEffect, useMemo, useState } from 'react';
+import { fetchNymPriceDeduped, getNetworkOverviewEndpoints } from 'src/api/networkOverview';
+import type { Network } from 'src/types';
+
+export type UseNymUsdPrice = {
+ usdPerNym: number | undefined;
+ loading: boolean;
+ error: string | undefined;
+};
+
+export function useNymUsdPrice(network: Network | undefined): UseNymUsdPrice {
+ const [usdPerNym, setUsdPerNym] = useState();
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState();
+
+ const url = useMemo(() => {
+ if (network === undefined) {
+ return undefined;
+ }
+ return getNetworkOverviewEndpoints(network).nymPrice;
+ }, [network]);
+
+ useEffect(() => {
+ if (!url) {
+ setUsdPerNym(undefined);
+ setLoading(false);
+ setError(undefined);
+ return undefined;
+ }
+
+ let cancelled = false;
+ setLoading(true);
+ setError(undefined);
+
+ fetchNymPriceDeduped(url)
+ .then((data) => {
+ if (!cancelled) {
+ setUsdPerNym(data.quotes.USD.price);
+ }
+ })
+ .catch(() => {
+ if (!cancelled) {
+ setUsdPerNym(undefined);
+ setError('Could not load NYM price');
+ }
+ })
+ .finally(() => {
+ if (!cancelled) {
+ setLoading(false);
+ }
+ });
+
+ return (): void => {
+ cancelled = true;
+ };
+ }, [url]);
+
+ return { usdPerNym, loading, error };
+}
diff --git a/nym-wallet/src/hooks/useTauriTextEditingClipboard.ts b/nym-wallet/src/hooks/useTauriTextEditingClipboard.ts
new file mode 100644
index 0000000000..17b77676c4
--- /dev/null
+++ b/nym-wallet/src/hooks/useTauriTextEditingClipboard.ts
@@ -0,0 +1,91 @@
+import { useEffect } from 'react';
+import { readText, writeText } from '@tauri-apps/plugin-clipboard-manager';
+
+function isTextEditingElement(el: EventTarget | null): el is HTMLInputElement | HTMLTextAreaElement {
+ if (!el || !(el instanceof HTMLElement)) return false;
+ if (el.closest('[data-nym-currency-field]')) return false;
+ /** Mnemonic login uses replace-whole-value paste + trim (must not insert at caret). */
+ if (el.closest('[data-nym-auth-paste-field]')) return false;
+ /** Send/delegate/bond fields pass clipboard to React as a full replacement, not insertion. */
+ if (el.closest('[data-nym-paste-replace]')) return false;
+ if (el instanceof HTMLTextAreaElement) return !el.disabled && !el.readOnly;
+ if (el instanceof HTMLInputElement) {
+ if (el.disabled || el.readOnly) return false;
+ const blocked = ['button', 'checkbox', 'radio', 'submit', 'file', 'reset', 'image'];
+ return !blocked.includes(el.type);
+ }
+ return false;
+}
+
+/** Input types where copying the whole value on Cmd+C (no selection) matches typical desktop behavior. */
+function isSingleLineTextLikeInput(el: HTMLInputElement): boolean {
+ const t = el.type;
+ return t === 'text' || t === 'search' || t === 'tel' || t === 'url' || t === 'email' || t === 'password' || t === '';
+}
+
+function setNativeValue(el: HTMLInputElement | HTMLTextAreaElement, value: string) {
+ const proto = el instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+ const setter = Object.getOwnPropertyDescriptor(proto, 'value')?.set;
+ setter?.call(el, value);
+ el.dispatchEvent(new Event('input', { bubbles: true }));
+ el.dispatchEvent(new Event('change', { bubbles: true }));
+}
+
+/**
+ * WebKit/WebView in Tauri often breaks native copy/paste in text fields. Route clipboard through the
+ * Tauri clipboard plugin when the user triggers standard shortcuts while focused in an input.
+ */
+export function useTauriTextEditingClipboard() {
+ useEffect(() => {
+ const onKeyDown = async (e: KeyboardEvent) => {
+ if (!e.ctrlKey && !e.metaKey) return;
+ if (e.defaultPrevented) return;
+ if (!isTextEditingElement(e.target)) return;
+
+ const el = e.target;
+
+ if (e.key === 'v') {
+ e.preventDefault();
+ try {
+ const text = await readText();
+ if (text == null) return;
+ const start = el.selectionStart ?? 0;
+ const end = el.selectionEnd ?? 0;
+ const next = `${el.value.slice(0, start)}${text}${el.value.slice(end)}`;
+ setNativeValue(el, next);
+ const caret = start + text.length;
+ el.setSelectionRange(caret, caret);
+ } catch {
+ /* fall through - user can retry from context menu */
+ }
+ return;
+ }
+
+ if (e.key === 'c' || e.key === 'x') {
+ const start = el.selectionStart ?? 0;
+ const end = el.selectionEnd ?? 0;
+ let selected = el.value.slice(start, end);
+ if (!selected && e.key === 'c' && el instanceof HTMLInputElement && isSingleLineTextLikeInput(el)) {
+ selected = el.value;
+ }
+ if (!selected) return;
+ e.preventDefault();
+ try {
+ await writeText(selected);
+ } catch {
+ return;
+ }
+ if (e.key === 'x') {
+ if (start !== end) {
+ const next = `${el.value.slice(0, start)}${el.value.slice(end)}`;
+ setNativeValue(el, next);
+ el.setSelectionRange(start, start);
+ }
+ }
+ }
+ };
+
+ window.addEventListener('keydown', onKeyDown, true);
+ return () => window.removeEventListener('keydown', onKeyDown, true);
+ }, []);
+}
diff --git a/nym-wallet/src/layouts/AppLayout.tsx b/nym-wallet/src/layouts/AppLayout.tsx
index 64b186b445..86c24257c4 100644
--- a/nym-wallet/src/layouts/AppLayout.tsx
+++ b/nym-wallet/src/layouts/AppLayout.tsx
@@ -1,53 +1,110 @@
import React, { useContext } from 'react';
import { NymWordmark } from '@nymproject/react/logo/NymWordmark';
-import { Box, Container, Typography } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
+import { Box, Divider, Stack, Typography } from '@mui/material';
+import { alpha } from '@mui/material/styles';
import { AppContext } from 'src/context';
-import { AppBar, LoadingPage, Nav } from '../components';
+import { AppBar, AppSessionLoadingOverlay, LoadingPage, Nav } from '../components';
export const ApplicationLayout: FCWithChildren = ({ children }) => {
- const theme = useTheme();
- const { isLoading, appVersion } = useContext(AppContext);
+ const { isLoading, loadingPresentation, loadingOverlayTitle, loadingOverlaySubtitle, appVersion } =
+ useContext(AppContext);
return (
<>
- {isLoading &&
+ t.palette.mode === 'dark'
+ ? `linear-gradient(180deg, ${t.palette.nym.nymWallet.topNav.background} 0%, ${t.palette.background.default} 100%)`
+ : t.palette.background.default,
}}
>
t.palette.nym.nymWallet.nav.background,
- overflow: 'auto',
- py: 4,
+ display: { xs: 'none', lg: 'flex' },
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ height: '100%',
+ minHeight: 0,
+ overflowY: 'auto',
+ overflowX: 'hidden',
+ scrollbarGutter: 'stable',
+ px: 3,
+ py: 3,
}}
- display="flex"
- flexDirection="column"
- justifyContent="space-between"
>
-
-
-
+
+ t.palette.mode === 'light'
+ ? `1px solid ${alpha(t.palette.common.black, 0.08)}`
+ : `1px solid ${t.palette.divider}`,
+ boxShadow: (t) => t.palette.nym.nymWallet.shadows.medium,
+ }}
+ >
+
+
+
- {appVersion && (
- Version {appVersion}
- )}
+
+
+
+ Nym Wallet
+
+ {appVersion ? (
+ Version {appVersion}
+ ) : null}
+
-
+
`calc(100% - ${theme.spacing(10)})` }}>
+
{children}
-
+
);
diff --git a/nym-wallet/src/layouts/AuthLayout.tsx b/nym-wallet/src/layouts/AuthLayout.tsx
index 6e951b136e..010c303a94 100644
--- a/nym-wallet/src/layouts/AuthLayout.tsx
+++ b/nym-wallet/src/layouts/AuthLayout.tsx
@@ -1,41 +1,60 @@
import React, { useContext } from 'react';
import { NymWordmark } from '@nymproject/react/logo/NymWordmark';
import { Stack, Box } from '@mui/material';
+import { alpha, useTheme } from '@mui/material/styles';
import { AppContext } from 'src/context';
-import { LoadingPage } from 'src/components';
+import { AppSessionLoadingOverlay, LoadingPage } from 'src/components';
import { Step } from '../pages/auth/components/step';
export const AuthLayout: FCWithChildren = ({ children }) => {
- const { isLoading } = useContext(AppContext);
+ const { isLoading, loadingPresentation, loadingOverlayTitle, loadingOverlaySubtitle } = useContext(AppContext);
+ const theme = useTheme();
+ const isDark = theme.palette.mode === 'dark';
+ const wordmarkFill = isDark ? '#FFFFFF' : theme.palette.text.primary;
- return isLoading ? (
-
-
-
-
-
+
+
+
+ `1px solid ${t.palette.divider}`,
+ boxShadow: (t) => t.palette.nym.nymWallet.shadows.strong,
+ px: { xs: 3, sm: 4 },
+ py: { xs: 3, sm: 4 },
+ boxSizing: 'border-box',
+ }}
+ >
+
+ {children}
+
+
+
);
};
diff --git a/nym-wallet/src/layouts/PageLayout.tsx b/nym-wallet/src/layouts/PageLayout.tsx
index 3ab5d5f995..0e2d37f680 100644
--- a/nym-wallet/src/layouts/PageLayout.tsx
+++ b/nym-wallet/src/layouts/PageLayout.tsx
@@ -1,22 +1,23 @@
import React from 'react';
import { Box } from '@mui/material';
+import { ContentRailWidth, resolveContentRailMaxWidth } from './contentRail';
-export const PageLayout: FCWithChildren<{ position?: 'flex-start' | 'flex-end'; children: React.ReactNode }> = ({
- position,
- children,
-}) => (
+export const PageLayout: FCWithChildren<{
+ position?: 'flex-start' | 'flex-end';
+ maxWidth?: ContentRailWidth;
+ children: React.ReactNode;
+}> = ({ position, maxWidth, children }) => (
-
+
{children}
diff --git a/nym-wallet/src/layouts/contentRail.ts b/nym-wallet/src/layouts/contentRail.ts
new file mode 100644
index 0000000000..47d565ca79
--- /dev/null
+++ b/nym-wallet/src/layouts/contentRail.ts
@@ -0,0 +1,17 @@
+/** Max inner content width for wide pages (Balance, etc.). Must match historical PageLayout default. */
+export const CONTENT_RAIL_MAX_WIDTH_WIDE = 1280;
+
+/** Narrow variant (when PageLayout maxWidth="narrow"). */
+export const CONTENT_RAIL_MAX_WIDTH_NARROW = 1000;
+
+export type ContentRailWidth = number | 'narrow' | 'wide';
+
+export function resolveContentRailMaxWidth(maxWidth?: ContentRailWidth): number {
+ if (maxWidth === 'narrow') {
+ return CONTENT_RAIL_MAX_WIDTH_NARROW;
+ }
+ if (maxWidth === 'wide' || maxWidth === undefined) {
+ return CONTENT_RAIL_MAX_WIDTH_WIDE;
+ }
+ return maxWidth;
+}
diff --git a/nym-wallet/src/main.tsx b/nym-wallet/src/main.tsx
index 4b944bb889..4fc07efc8c 100644
--- a/nym-wallet/src/main.tsx
+++ b/nym-wallet/src/main.tsx
@@ -1,10 +1,25 @@
import React from 'react';
import { createRoot } from 'react-dom/client';
+import { HashRouter } from 'react-router-dom';
import { AppRoutes } from './routes/app';
import { AppCommon } from './common';
+/** Tauri may keep the document at `/` while still serving the main bundle; `BrowserRouter` + `/balance` then points at a non-existent path and the content pane stays blank until navigation. Hash history keeps the asset URL stable. */
+function seedMainWalletHashToBalance() {
+ if (typeof window === 'undefined') {
+ return;
+ }
+ const h = window.location.hash;
+ if (!h || h === '#' || h === '#/') {
+ const { pathname, search } = window.location;
+ window.history.replaceState(window.history.state, '', `${pathname}${search}#/balance`);
+ }
+}
+
+seedMainWalletHashToBalance();
+
const MainApp = () => (
-
+
);
diff --git a/nym-wallet/src/pages/Admin/index.tsx b/nym-wallet/src/pages/Admin/index.tsx
index 7a0876c5a3..a1ca3e2bad 100644
--- a/nym-wallet/src/pages/Admin/index.tsx
+++ b/nym-wallet/src/pages/Admin/index.tsx
@@ -74,9 +74,20 @@ export const Admin: FCWithChildren = () => {
useEffect(() => {
const requestContractParams = async () => {
setIsLoading(true);
- const prms = await getContractParams();
- setParams(prms);
- setIsLoading(false);
+ try {
+ const prms = await getContractParams();
+ setParams(prms);
+ } catch (e) {
+ setParams(undefined);
+ const msg = typeof e === 'string' ? e : String(e);
+ if (!msg.includes('temporarily disabled')) {
+ // Admin diagnostics only; contract fetch failures are otherwise silent in UI.
+ // eslint-disable-next-line no-console -- intentional dev/admin visibility
+ console.error('get_contract_settings failed', e);
+ }
+ } finally {
+ setIsLoading(false);
+ }
};
requestContractParams();
}, [network]);
@@ -100,6 +111,13 @@ export const Admin: FCWithChildren = () => {
)}
{!isLoading && params &&
+
+ Contract settings are not available in this build (the command is disabled in the app backend).
+
+
+ )}
);
diff --git a/nym-wallet/src/pages/auth/components/heading.tsx b/nym-wallet/src/pages/auth/components/heading.tsx
index 210379d222..5ebfec215b 100644
--- a/nym-wallet/src/pages/auth/components/heading.tsx
+++ b/nym-wallet/src/pages/auth/components/heading.tsx
@@ -1,23 +1,49 @@
import React from 'react';
import { Typography } from '@mui/material';
-export const Title = ({ title }: { title: string }) => (
- {title}
+export const Title = ({ title, align = 'left' }: { title: string; align?: 'left' | 'center' }) => (
+
+ {title}
+
);
-export const Subtitle = ({ subtitle }: { subtitle: string }) => (
- {subtitle}
+export const Subtitle = ({ subtitle, align = 'left' }: { subtitle: string; align?: 'left' | 'center' }) => (
+
+ {subtitle}
+
);
export const SubtitleSlick = ({ subtitle }: { subtitle: string }) => (
theme.palette.text.disabled,
+ color: 'text.secondary',
textTransform: 'uppercase',
- letterSpacing: 4,
- fontWeight: 400,
- fontSize: 14,
+ letterSpacing: 2,
+ fontWeight: 500,
+ fontSize: 12,
+ display: 'block',
+ width: '100%',
+ mb: 2,
+ textAlign: 'center',
}}
>
{subtitle}
diff --git a/nym-wallet/src/pages/auth/components/passwordStrength.stories.tsx b/nym-wallet/src/pages/auth/components/passwordStrength.stories.tsx
deleted file mode 100644
index 3746b2015a..0000000000
--- a/nym-wallet/src/pages/auth/components/passwordStrength.stories.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Stack, TextField } from '@mui/material';
-import { PasswordStrength } from './password-strength';
-
-export default {
- title: 'Wallet / Password Strength',
- component: PasswordStrength,
-} as ComponentMeta;
-
-const Template: ComponentStory = ({ password, withWarnings, handleIsSafePassword }) => {
- const [value, setValue] = React.useState(password);
- return (
-
- setValue(e.target.value)} sx={{ mb: 0.5 }} />
- {!!password.length && (
-
- );
-};
-
-export const VeryStrong = Template.bind({});
-VeryStrong.args = { password: 'fedgklnrf34£', withWarnings: true, handleIsSafePassword: () => undefined };
-
-export const Strong = Template.bind({});
-Strong.args = { password: '"56%abc123?@', withWarnings: true, handleIsSafePassword: () => undefined };
-
-export const Average = Template.bind({});
-Average.args = { password: '"abc123?', withWarnings: true, handleIsSafePassword: () => undefined };
-
-export const Weak = Template.bind({});
-Weak.args = { password: 'abc123?', withWarnings: true, handleIsSafePassword: () => undefined };
-
-export const VeryWeak = Template.bind({});
-VeryWeak.args = {
- password: 'abc123',
- withWarnings: true,
- handleIsSafePassword: () => undefined,
-};
-
-export const WithName = Template.bind({});
-WithName.args = {
- password: 'fred',
- withWarnings: true,
- handleIsSafePassword: () => undefined,
-};
-
-export const WithSequence = Template.bind({});
-WithSequence.args = {
- password: '121212',
- withWarnings: true,
- handleIsSafePassword: () => undefined,
-};
-
-export const Default = Template.bind({});
-Default.args = {
- password: 'abc123',
- withWarnings: true,
- handleIsSafePassword: () => undefined,
-};
diff --git a/nym-wallet/src/pages/auth/components/word-tiles.tsx b/nym-wallet/src/pages/auth/components/word-tiles.tsx
index 6c71f0fb08..6d336f86c1 100644
--- a/nym-wallet/src/pages/auth/components/word-tiles.tsx
+++ b/nym-wallet/src/pages/auth/components/word-tiles.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Box, Card, CardHeader, Grid, Typography, Stack, Fade } from '@mui/material';
+import { Box, Card, CardHeader, Typography, Stack } from '@mui/material';
import { THiddenMnemonicWord, THiddenMnemonicWords, TMnemonicWords } from '../types';
export const WordTile = ({
@@ -17,22 +17,52 @@ export const WordTile = ({
}) => (
({
background: button ? '#151A2C' : 'transparent',
- border: button ? '1px solid #3A4053' : 'none',
+ border: button ? `1px solid ${theme.palette.divider}` : 'none',
cursor: onClick ? 'pointer' : 'default',
- opacity: disabled ? 0.2 : 1,
- }}
+ opacity: disabled ? 0.35 : 1,
+ minWidth: button ? 88 : undefined,
+ width: '100%',
+ transition: 'border-color 0.15s ease, opacity 0.15s ease',
+ ...(button &&
+ onClick && {
+ '&:hover': {
+ transform: 'none',
+ borderColor: theme.palette.primary.main,
+ },
+ }),
+ ...(!button && {
+ boxShadow: 'none',
+ '&:hover': { transform: 'none', boxShadow: 'none' },
+ }),
+ })}
>
+ index ? (
+
{index}
- )
+ ) : undefined
}
/>
@@ -51,9 +81,24 @@ export const WordTiles = ({
}) => {
if (mnemonicWords) {
return (
-
+
{mnemonicWords.map(({ name, index, disabled }) => (
- onClick?.({ name, index })}>
+ onClick?.({ name, index })}
+ sx={{
+ flex: '1 1 auto',
+ minWidth: { xs: 'calc(50% - 8px)', sm: 120 },
+ maxWidth: { xs: '100%', sm: 200 },
+ }}
+ >
+
))}
-
+
);
}
@@ -71,28 +116,52 @@ export const WordTiles = ({
};
const HiddenWord = ({ mnemonicWord }: { mnemonicWord: THiddenMnemonicWord }) => (
-
-
-
-
-
-
+
+
+ {mnemonicWord.index}.
+
+ ({
+ width: '100%',
+ minHeight: 52,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderBottom: `2px solid ${theme.palette.divider}`,
+ px: 0.5,
+ pb: 0.75,
+ })}
+ >
+
+ {mnemonicWord.hidden ? (
+
+ ---
+
+ ) : (
+
+ {mnemonicWord.name}
+
+ )}
+
- {mnemonicWord.index}.
);
export const HiddenWords = ({ mnemonicWords }: { mnemonicWords?: THiddenMnemonicWords }) => {
if (mnemonicWords) {
return (
-
+
{mnemonicWords.map((mnemonicWord) => (
-
-
+
+
);
}
return null;
diff --git a/nym-wallet/src/pages/auth/pages/existing-account.tsx b/nym-wallet/src/pages/auth/pages/existing-account.tsx
index 20b5d90c36..1734614df2 100644
--- a/nym-wallet/src/pages/auth/pages/existing-account.tsx
+++ b/nym-wallet/src/pages/auth/pages/existing-account.tsx
@@ -2,23 +2,34 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Box, Button, Stack, Typography } from '@mui/material';
-import { SubtitleSlick, Title } from '../components';
+import { SubtitleSlick } from '../components';
export const ExistingAccount = () => {
const navigate = useNavigate();
return (
- <>
-
- navigate('/sign-in-mnemonic')} fullWidth>
+
+
+ navigate('/sign-in-mnemonic')}
+ fullWidth
+ sx={{ py: 1.25 }}
+ >
Sign in with mnemonic
- or
- navigate('/sign-in-password')}>
+ or
+ navigate('/sign-in-password')}
+ >
Sign in with password
-
+
navigate('/')}>
Back
@@ -27,6 +38,6 @@ export const ExistingAccount = () => {
-
+
);
};
diff --git a/nym-wallet/src/pages/auth/pages/forgot-password.tsx b/nym-wallet/src/pages/auth/pages/forgot-password.tsx
index 0bf535d391..fb8acc01e3 100644
--- a/nym-wallet/src/pages/auth/pages/forgot-password.tsx
+++ b/nym-wallet/src/pages/auth/pages/forgot-password.tsx
@@ -1,26 +1,41 @@
/* eslint-disable react/no-unused-prop-types */
import React from 'react';
import { useNavigate } from 'react-router-dom';
-import { Button, Stack, Typography } from '@mui/material';
-import { Subtitle } from '../components';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import { Subtitle, Title } from '../components';
export const ForgotPassword = () => {
const navigate = useNavigate();
return (
- <>
-
- navigate('/confirm-mnemonic')} fullWidth>
+
+
+ navigate('/confirm-mnemonic')}
+ fullWidth
+ sx={{ py: 1.25 }}
+ >
Create a new password
- or
- navigate('/sign-in-mnemonic')}>
+ or
+ navigate('/sign-in-mnemonic')}
+ >
Sign in with mnemonic
- navigate(-1)}>
- Back
-
+
+ navigate(-1)}>
+ Back
+
+
-
+
);
};
diff --git a/nym-wallet/src/pages/auth/pages/signin-mnemonic.tsx b/nym-wallet/src/pages/auth/pages/signin-mnemonic.tsx
index a5babd3a96..a4f71ebd93 100644
--- a/nym-wallet/src/pages/auth/pages/signin-mnemonic.tsx
+++ b/nym-wallet/src/pages/auth/pages/signin-mnemonic.tsx
@@ -28,7 +28,7 @@ export const SignInMnemonic = () => {
}, []);
return (
-
+
-
+
);
}
return null;
diff --git a/nym-wallet/src/pages/auth/pages/welcome.tsx b/nym-wallet/src/pages/auth/pages/welcome.tsx
index e5bb19a264..d2956c912f 100644
--- a/nym-wallet/src/pages/auth/pages/welcome.tsx
+++ b/nym-wallet/src/pages/auth/pages/welcome.tsx
@@ -2,20 +2,19 @@
import React from 'react';
import { Button, Stack } from '@mui/material';
import { useNavigate } from 'react-router-dom';
-import { SubtitleSlick, Title } from '../components';
+import { SubtitleSlick } from '../components';
export const WelcomeContent: FCWithChildren<{}> = () => {
const navigate = useNavigate();
return (
- <>
-
+
navigate('/existing-account')}
@@ -25,14 +24,14 @@ export const WelcomeContent: FCWithChildren<{}> = () => {
navigate('/create-mnemonic')}
>
Create account
-
+
);
};
diff --git a/nym-wallet/src/pages/balance/Balance.tsx b/nym-wallet/src/pages/balance/Balance.tsx
index 9ce2dcee80..62b0c60dee 100644
--- a/nym-wallet/src/pages/balance/Balance.tsx
+++ b/nym-wallet/src/pages/balance/Balance.tsx
@@ -1,11 +1,19 @@
import React from 'react';
-import { Alert, Grid, Typography, Skeleton } from '@mui/material';
+import { Alert, Box, Skeleton, Stack, Typography } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import { Balance, decimalToFloatApproximation } from '@nymproject/types';
import { TauriLink as Link } from 'src/components/TauriLinkWrapper';
import { ClientAddress } from '@nymproject/react/client-address/ClientAddress';
import { Network } from 'src/types';
-import { Balance } from '@nymproject/types';
import { NymCard } from '../../components';
import { urls } from '../../context/main';
+import { useNymUsdPrice } from '../../hooks/useNymUsdPrice';
+
+const usdFormatter = new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ maximumFractionDigits: 2,
+});
export const BalanceCard = ({
userBalance,
@@ -19,49 +27,134 @@ export const BalanceCard = ({
network?: Network;
clientAddress?: string;
isLoading?: boolean;
-}) => (
-
-
- {userBalanceError && (
-
- {userBalanceError}
-
- )}
- {isLoading ? (
- {
+ const { usdPerNym, loading: priceLoading } = useNymUsdPrice(network);
+
+ const nymFloat =
+ userBalance?.amount?.amount && userBalance.amount.amount.length > 0
+ ? decimalToFloatApproximation(userBalance.amount.amount)
+ : undefined;
+
+ const usdApproxLabel =
+ usdPerNym !== undefined && nymFloat !== undefined ? usdFormatter.format(nymFloat * usdPerNym) : undefined;
+
+ const showUsdRow = Boolean(userBalance?.amount?.amount && userBalance.amount.amount.length > 0);
+
+ let usdApproximationRow: React.ReactNode = null;
+ if (showUsdRow) {
+ if (priceLoading) {
+ usdApproximationRow =
+ {`≈ ${usdApproxLabel}`}
+
+ );
+ }
+ }
+
+ return (
+
+
+ {userBalanceError && (
+
+ {userBalanceError}
+
+ )}
+ {isLoading ? (
+
+
+ Available now
+
+
+ {userBalance?.printable_balance || '-'}
+
+ {usdApproximationRow}
+
+ )
+ )}
+
+ {network && clientAddress && (
+ alpha(t.palette.text.primary, t.palette.mode === 'dark' ? 0.04 : 0.06),
+ }}
+ >
+
+
+ Destination
+
+ Main account
+
+
- {userBalance?.printable_balance || '—'}
-
- )
+ />
+
+
+ Activity
+
+
+
+
+
)}
-
- {network && (
-
-
- )}
-
-
-);
+
+
+ );
+};
diff --git a/nym-wallet/src/pages/balance/NetworkOverviewSection.tsx b/nym-wallet/src/pages/balance/NetworkOverviewSection.tsx
new file mode 100644
index 0000000000..d997adf698
--- /dev/null
+++ b/nym-wallet/src/pages/balance/NetworkOverviewSection.tsx
@@ -0,0 +1,577 @@
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { format } from 'date-fns';
+import { ExpandMore } from '@mui/icons-material';
+import {
+ Accordion,
+ AccordionDetails,
+ AccordionSummary,
+ Box,
+ Collapse,
+ IconButton,
+ LinearProgress,
+ Stack,
+ Typography,
+} from '@mui/material';
+import { alpha, useTheme } from '@mui/material/styles';
+import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { AppContext } from 'src/context/main';
+import {
+ CurrentEpochWithEnd,
+ EpochRewardsData,
+ fetchCurrentEpoch,
+ fetchEpochRewards,
+ fetchNymPriceDeduped,
+ fetchPacketsAndStaking,
+ fetchTotalDelegationsCount,
+ formatCompactNumber,
+ getNetworkOverviewEndpoints,
+ NymTokenomics,
+ PacketsAndStakingPoint,
+} from 'src/api/networkOverview';
+
+const TRAFFIC_CHART_EXPANDED_KEY = 'nymWallet.networkOverview.trafficChartExpanded';
+const SECTION_EXPANDED_KEY = 'nymWallet.networkOverview.sectionExpanded';
+
+function readSectionExpanded(): boolean {
+ try {
+ const v = localStorage.getItem(SECTION_EXPANDED_KEY);
+ if (v === null) {
+ return true;
+ }
+ return v === 'true';
+ } catch {
+ return true;
+ }
+}
+
+function readTrafficChartExpanded(): boolean {
+ try {
+ const v = localStorage.getItem(TRAFFIC_CHART_EXPANDED_KEY);
+ if (v === null) {
+ return true;
+ }
+ return v === 'true';
+ } catch {
+ return true;
+ }
+}
+
+function epochProgressPercent(epoch: CurrentEpochWithEnd): number {
+ const start = new Date(epoch.current_epoch_start).getTime();
+ const end = new Date(epoch.current_epoch_end).getTime();
+ const now = Date.now();
+ if (end <= start) {
+ return 0;
+ }
+ const p = ((now - start) / (end - start)) * 100;
+ return Math.min(100, Math.max(0, p));
+}
+
+function mixnetTrafficHeadline(data: PacketsAndStakingPoint[]): {
+ packets: number;
+ volumeLabel: string;
+ pctChange: number | null;
+} | null {
+ if (data.length < 3) {
+ return null;
+ }
+ const todaysData = data[data.length - 2];
+ const yesterdaysData = data[data.length - 3];
+ const noiseLast24H = todaysData.total_packets_sent + todaysData.total_packets_received;
+ const noisePrevious24H = yesterdaysData.total_packets_sent + yesterdaysData.total_packets_received;
+ const BYTES_PER_PACKET = (2413 + 386) / 2;
+ const totalBytes = noiseLast24H * BYTES_PER_PACKET;
+ const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+ let size = totalBytes;
+ let unitIndex = 0;
+ for (; size >= 1024 && unitIndex < units.length - 1; unitIndex += 1) {
+ size /= 1024;
+ }
+ const volumeLabel = `${size.toFixed(2)} ${units[unitIndex]}`;
+ let pctChange: number | null = null;
+ if (noisePrevious24H > 0) {
+ pctChange = Number.parseFloat((((noiseLast24H - noisePrevious24H) / noisePrevious24H) * 100).toFixed(2));
+ }
+ return { packets: noiseLast24H, volumeLabel, pctChange };
+}
+
+export const NetworkOverviewSection: React.FC = () => {
+ const theme = useTheme();
+ const { network } = useContext(AppContext);
+ const endpoints = useMemo(() => getNetworkOverviewEndpoints(network), [network]);
+
+ const [sectionExpanded, setSectionExpanded] = useState(readSectionExpanded);
+ const [trafficChartExpanded, setTrafficChartExpanded] = useState(readTrafficChartExpanded);
+
+ const [packets, setPackets] = useState();
+ const [packetsErr, setPacketsErr] = useState();
+
+ const [epoch, setEpoch] = useState();
+ const [epochErr, setEpochErr] = useState();
+
+ const [rewards, setRewards] = useState();
+ const [rewardsErr, setRewardsErr] = useState();
+
+ const [price, setPrice] = useState();
+ const [priceErr, setPriceErr] = useState();
+
+ const [delegationsCount, setDelegationsCount] = useState();
+ const [delegationsErr, setDelegationsErr] = useState();
+
+ const [epochProgress, setEpochProgress] = useState(0);
+
+ const persistSectionExpanded = useCallback((v: boolean) => {
+ setSectionExpanded(v);
+ try {
+ localStorage.setItem(SECTION_EXPANDED_KEY, String(v));
+ } catch {
+ /* ignore quota / private mode */
+ }
+ }, []);
+
+ const persistTrafficChartExpanded = useCallback((v: boolean) => {
+ setTrafficChartExpanded(v);
+ try {
+ localStorage.setItem(TRAFFIC_CHART_EXPANDED_KEY, String(v));
+ } catch {
+ /* ignore quota / private mode */
+ }
+ }, []);
+
+ useEffect(() => {
+ let cancelled = false;
+
+ const load = async () => {
+ setPacketsErr(undefined);
+ setEpochErr(undefined);
+ setRewardsErr(undefined);
+ setPriceErr(undefined);
+ setDelegationsErr(undefined);
+
+ const pStats = fetchPacketsAndStaking(endpoints.mixnodeStats)
+ .then((d) => {
+ if (!cancelled) {
+ setPackets(d);
+ }
+ })
+ .catch(() => {
+ if (!cancelled) {
+ setPacketsErr('Could not load mixnet stats');
+ }
+ });
+
+ const pEpoch = fetchCurrentEpoch(endpoints.epochCurrent)
+ .then((d) => {
+ if (!cancelled) {
+ setEpoch(d);
+ }
+ })
+ .catch(() => {
+ if (!cancelled) {
+ setEpochErr('Could not load epoch');
+ }
+ });
+
+ const pRewards = fetchEpochRewards(endpoints.epochRewards)
+ .then((d) => {
+ if (!cancelled) {
+ setRewards(d);
+ }
+ })
+ .catch(() => {
+ if (!cancelled) {
+ setRewardsErr('Could not load reward params');
+ }
+ });
+
+ const pPrice = fetchNymPriceDeduped(endpoints.nymPrice)
+ .then((d) => {
+ if (!cancelled) {
+ setPrice(d);
+ }
+ })
+ .catch(() => {
+ if (!cancelled) {
+ setPriceErr('Could not load price');
+ }
+ });
+
+ const pDeleg = fetchTotalDelegationsCount(endpoints.observatoryNodesBase)
+ .then((n) => {
+ if (!cancelled) {
+ setDelegationsCount(n);
+ }
+ })
+ .catch(() => {
+ if (!cancelled) {
+ setDelegationsErr('Could not load delegations count');
+ }
+ });
+
+ await Promise.all([pStats, pEpoch, pRewards, pPrice, pDeleg]);
+ };
+
+ load().catch(() => {
+ /* errors handled per-request */
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [endpoints]);
+
+ useEffect(() => {
+ if (!epoch) {
+ setEpochProgress(0);
+ return undefined;
+ }
+ const tick = () => {
+ setEpochProgress(epochProgressPercent(epoch));
+ };
+ tick();
+ const id = window.setInterval(tick, 30_000);
+ return () => window.clearInterval(id);
+ }, [epoch]);
+
+ const trafficHeadline = useMemo(() => (packets ? mixnetTrafficHeadline(packets) : null), [packets]);
+
+ const trafficChartData = useMemo(() => {
+ if (!packets?.length) {
+ return [];
+ }
+ return packets
+ .slice(0, -1)
+ .map((item) => ({
+ label: item.date_utc,
+ y: item.total_packets_sent + item.total_packets_received,
+ }))
+ .filter((row) => row.y >= 2_500_000_000);
+ }, [packets]);
+
+ const tvlUsd = useMemo(() => {
+ if (!rewards || !price || !packets?.length) {
+ return undefined;
+ }
+ const lastTotalStake = packets[packets.length - 1]?.total_stake ?? 0;
+ const poolNym = Number.parseFloat(rewards.interval.reward_pool) / 1_000_000;
+ const stakeNym = lastTotalStake / 1_000_000;
+ return (poolNym + stakeNym) * price.quotes.USD.price;
+ }, [rewards, price, packets]);
+
+ const epochTimes = useMemo(() => {
+ if (!epoch) {
+ return { start: '', end: '' };
+ }
+ return {
+ start: format(new Date(epoch.current_epoch_start), 'HH:mm:ss'),
+ end: format(new Date(epoch.current_epoch_end), 'HH:mm:ss'),
+ };
+ }, [epoch]);
+
+ const cardShell = (children: React.ReactNode) => (
+ `1px solid ${t.palette.divider}`,
+ bgcolor: (t) =>
+ t.palette.mode === 'dark' ? 'nym.nymWallet.nav.background' : 'nym.nymWallet.background.subtle',
+ p: 2,
+ }}
+ >
+ {children}
+
+ );
+
+ const subtle = theme.palette.text.secondary;
+ const trafficColor = '#8482FD';
+
+ const mixnetTrafficBody = () => {
+ if (packetsErr) {
+ return (
+
+ {packetsErr}
+
+ );
+ }
+ if (!trafficHeadline) {
+ return (
+
+ Loading…
+
+ );
+ }
+ return (
+ <>
+
+
+ {formatCompactNumber(trafficHeadline.packets)}
+
+
+ ({trafficHeadline.volumeLabel})
+
+
+ {trafficHeadline.pctChange !== null ? (
+ = 0 ? 'success.main' : 'error.main',
+ fontWeight: 600,
+ }}
+ >
+ {trafficHeadline.pctChange >= 0 ? '\u2191 ' : '\u2193 '}
+ {Math.abs(trafficHeadline.pctChange)}% (24h)
+
+ ) : null}
+
+ );
+ };
+
+ const epochBody = () => {
+ if (epochErr) {
+ return (
+
+ {epochErr}
+
+ );
+ }
+ if (!epoch) {
+ return (
+
+ Loading…
+
+ );
+ }
+ return (
+ <>
+
+ {epoch.current_epoch_id}
+
+
+
+ Start {epochTimes.start}
+
+
+ End {epochTimes.end}
+
+
+
+ );
+ };
+
+ const tokenomicsBody = () => {
+ if (priceErr || rewardsErr) {
+ return (
+
+ {priceErr ?? rewardsErr}
+
+ );
+ }
+ if (!price) {
+ return (
+
+ Loading…
+
+ );
+ }
+ return (
+
+
+ NYM
+
+ ${price.quotes.USD.price.toFixed(4)}
+
+
+ `1px solid ${t.palette.divider}`, pt: 1 }}>
+
+
+ Market cap
+
+
+ ${formatCompactNumber(price.quotes.USD.market_cap)}
+
+
+
+
+
+ 24h vol
+
+
+ ${formatCompactNumber(price.quotes.USD.volume_24h)}
+
+
+
+
+ TVL
+
+
+ {tvlUsd !== undefined ? `$${formatCompactNumber(tvlUsd)}` : '…'}
+
+
+
+ );
+ };
+
+ const showTrafficChartToggle = trafficChartData.length > 0;
+
+ return (
+ persistSectionExpanded(expanded)}
+ elevation={0}
+ disableGutters
+ sx={{
+ width: '100%',
+ minWidth: 0,
+ borderRadius: 2,
+ border: (t) => `1px solid ${t.palette.divider}`,
+ bgcolor: 'background.paper',
+ '&:before': {
+ display: 'none',
+ },
+ }}
+ >
+
+ Network overview
+
+
+
+
+ {cardShell(
+ <>
+
+
+ Mixnet traffic
+
+ {showTrafficChartToggle ? (
+ persistTrafficChartExpanded(!trafficChartExpanded)}
+ sx={{
+ mt: -0.5,
+ mr: -0.5,
+ color: 'text.secondary',
+ '&:hover': { color: 'primary.main' },
+ }}
+ >
+
+ ) : null}
+
+ {mixnetTrafficBody()}
+
+
+
+
+ format(new Date(v), 'MMM d')}
+ />
+ formatCompactNumber(Number(v))}
+ />
+ [formatCompactNumber(value), 'Packets']}
+ labelFormatter={(v) => format(new Date(v), 'PP')}
+ />
+
+
+
+
+ ,
+ )}
+
+ {cardShell(
+ <>
+
+ Delegations and epoch
+
+
+
+
+ Number of delegations
+
+ {delegationsErr ? (
+
+ {delegationsErr}
+
+ ) : (
+
+ {delegationsCount !== undefined ? formatCompactNumber(delegationsCount) : '…'}
+
+ )}
+
+
+
+ Current epoch
+
+ {epochBody()}
+
+
+ ,
+ )}
+
+ {cardShell(
+ <>
+
+ Tokenomics
+
+ {tokenomicsBody()}
+ ,
+ )}
+
+
+
+ );
+};
diff --git a/nym-wallet/src/pages/balance/OverviewQuickActions.tsx b/nym-wallet/src/pages/balance/OverviewQuickActions.tsx
new file mode 100644
index 0000000000..e1eda59fc0
--- /dev/null
+++ b/nym-wallet/src/pages/balance/OverviewQuickActions.tsx
@@ -0,0 +1,96 @@
+import React, { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import QrCode2Icon from '@mui/icons-material/QrCode2';
+import SendIcon from '@mui/icons-material/Send';
+import TollIcon from '@mui/icons-material/Toll';
+import { alpha, useTheme, type Theme } from '@mui/material/styles';
+import { AppContext } from '../../context/main';
+
+const iconWrapSx = (theme: Theme) => ({
+ width: 40,
+ height: 40,
+ borderRadius: 2,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ bgcolor: alpha(theme.palette.primary.main, 0.12),
+ color: 'primary.main',
+ flexShrink: 0,
+});
+
+export const OverviewQuickActions = () => {
+ const theme = useTheme();
+ const navigate = useNavigate();
+ const { handleShowReceiveModal, handleShowSendModal } = useContext(AppContext);
+
+ const panelSx = {
+ p: 2.5,
+ borderRadius: 3,
+ border: '1px solid',
+ borderColor: 'divider',
+ bgcolor: 'background.paper',
+ transition: 'border-color 0.2s, box-shadow 0.2s',
+ flex: 1,
+ minWidth: 0,
+ display: 'flex',
+ flexDirection: 'column',
+ '&:hover': {
+ borderColor: alpha(theme.palette.primary.main, 0.45),
+ boxShadow: theme.palette.nym.nymWallet.shadows.light,
+ },
+ } as const;
+
+ const pill = (icon: React.ReactNode, title: string, blurb: string, cta: React.ReactNode) => (
+
+
+
+ {icon}
+
+
+ {title}
+
+
+ {blurb}
+
+
+
+ {cta}
+
+
+ );
+
+ return (
+
+
+ Quick actions
+
+
+ {pill(
+
+ Show QR and address
+ ,
+ )}
+ {pill(
+
+ Send tokens
+ ,
+ )}
+ {pill(
+ navigate('/buy')} sx={{ py: 1.25 }}>
+ Browse exchanges
+ ,
+ )}
+
+
+ );
+};
diff --git a/nym-wallet/src/pages/balance/Vesting.tsx b/nym-wallet/src/pages/balance/Vesting.tsx
index a27b70ca16..acb61dd5bc 100644
--- a/nym-wallet/src/pages/balance/Vesting.tsx
+++ b/nym-wallet/src/pages/balance/Vesting.tsx
@@ -21,7 +21,7 @@ export const VestingCard = ({
unlockedRewards?: string;
unlockedTransferable?: string;
originalVesting?: OriginalVestingResponse;
- fetchTokenAllocation: () => Promise;
+ fetchTokenAllocation: (isBackgroundPoll?: boolean) => Promise;
fetchBalance: () => Promise;
onTransfer: () => Promise;
isLoading?: boolean;
@@ -50,6 +50,9 @@ export const VestingCard = ({
}
borderless
data-testid="check-unvested-tokens"
+ sx={{
+ backgroundColor: 'background.paper',
+ }}
Action={
{
diff --git a/nym-wallet/src/pages/balance/index.tsx b/nym-wallet/src/pages/balance/index.tsx
index 795cd2d0aa..2444f5aa34 100644
--- a/nym-wallet/src/pages/balance/index.tsx
+++ b/nym-wallet/src/pages/balance/index.tsx
@@ -1,11 +1,13 @@
import React, { useContext, useEffect, useState } from 'react';
-import { Box } from '@mui/material';
+import { Stack } from '@mui/material';
import { AppContext } from '../../context/main';
import { BalanceCard } from './Balance';
import { VestingCard } from './Vesting';
import { PageLayout } from '../../layouts';
import { TransferModal } from '../../components/Balance/modals/TransferModal';
+import { OverviewQuickActions } from './OverviewQuickActions';
+import { NetworkOverviewSection } from './NetworkOverviewSection';
export const Balance = () => {
const [showTransferModal, setShowTransferModal] = useState(false);
@@ -15,7 +17,7 @@ export const Balance = () => {
useEffect(() => {
const interval = setInterval(() => {
userBalance.fetchBalance();
- userBalance.fetchTokenAllocation();
+ userBalance.fetchTokenAllocation(true);
}, 10000);
return () => clearInterval(interval);
@@ -30,13 +32,17 @@ export const Balance = () => {
return (
-
-
+
+
{
fetchTokenAllocation={userBalance.fetchTokenAllocation}
/>
{showTransferModal && setShowTransferModal(false)} />}
-
+
);
};
diff --git a/nym-wallet/src/pages/bonding/Bonding.tsx b/nym-wallet/src/pages/bonding/Bonding.tsx
index a5b2d9f5c5..2235ae500e 100644
--- a/nym-wallet/src/pages/bonding/Bonding.tsx
+++ b/nym-wallet/src/pages/bonding/Bonding.tsx
@@ -20,6 +20,7 @@ import { BondedNymNode } from 'src/components/Bonding/BondedNymNode';
import { UpdateBondAmountNymNode } from 'src/components/Bonding/modals/UpdateBondAmountNymNode';
import { BondNymNode } from 'src/components/Bonding/modals/BondNymNodeModal';
import { BondingContextProvider, useBondingContext } from '../../context';
+import { PageLayout } from '../../layouts';
export const Bonding = () => {
const [showModal, setShowModal] = useState<
@@ -200,7 +201,7 @@ export const Bonding = () => {
return (
refresh()}
/>
@@ -208,125 +209,129 @@ export const Bonding = () => {
}
return (
-
- {bondedNode && !isNymNode(bondedNode) && bondedNode?.proxy && (
-
- Your bonded node is using tokens from the vesting contract!
-
- In order to claim your rewards, you will need to migrate it out of the vesting contract.{' '}
-
-
- Never fear , if you do not migrate them, you will continue to get rewards .
- However, please migrate your bonded node as soon as possible.
-
- setShowMigrationModal(true)}>
- Migrate now
-
-
- )}
+
+
+ {bondedNode && !isNymNode(bondedNode) && bondedNode?.proxy && (
+
+
+ Your bonded node is using tokens from the vesting contract!
+
+
+ In order to claim your rewards, you will need to migrate it out of the vesting contract.{' '}
+
+
+ Never fear , if you do not migrate them, you will continue to get rewards
+ . However, please migrate your bonded node as soon as possible.
+
+ setShowMigrationModal(true)}>
+ Migrate now
+
+
+ )}
- {
- setShowMigrationModal(false);
- }}
- handleMigrate={async () => {
- await handleMigrateVestedMixnode();
- }}
- />
-
- setShowMigrateLegacyNodeModal(false)}
- handleMigrate={handleMigrateLegacyNode}
- />
-
- {!bondedNode && setShowModal('bond-nymnode')} />}
-
- {bondedNode && isNymNode(bondedNode) && (
- handleBondedNymNodeAction(action)}
- />
- )}
-
- {bondedNode && isMixnode(bondedNode) && (
- setShowMigrateLegacyNodeModal(true)}
- onActionSelect={(action) => handleBondedMixnodeAction(action)}
- />
- )}
-
- {bondedNode && isGateway(bondedNode) && (
- setShowMigrateLegacyNodeModal(true)}
- onActionSelect={handleBondedMixnodeAction}
- />
- )}
-
- setShowModal(undefined)}
- onContinue={() => setShowModal('update-bond')}
- saturationPercentage={uncappedSaturation.toString()}
- />
- )}
-
- {showModal === 'update-bond' && bondedNode && isMixnode(bondedNode) && (
- setShowModal(undefined)}
- onError={handleError}
- />
- )}
-
- {showModal === 'update-bond-nymnode' && bondedNode && isNymNode(bondedNode) && (
- setShowModal(undefined)}
- onError={handleError}
- />
- )}
-
- {showModal === 'redeem' && bondedNode && isNymNode(bondedNode) && (
- setShowModal(undefined)}
- onConfirm={handleRedeemReward}
- onError={handleError}
- />
- )}
-
- {confirmationDetails && confirmationDetails.status === 'success' && (
- {
- setConfirmationDetails(undefined);
- handleCloseModal();
+ {
+ setShowMigrationModal(false);
+ }}
+ handleMigrate={async () => {
+ await handleMigrateVestedMixnode();
}}
/>
- )}
- {confirmationDetails && confirmationDetails.status === 'error' && (
- setConfirmationDetails(undefined)} />
- )}
+ setShowMigrateLegacyNodeModal(false)}
+ handleMigrate={handleMigrateLegacyNode}
+ />
- {isLoading &&
+ {!bondedNode && setShowModal('bond-nymnode')} />}
+
+ {bondedNode && isNymNode(bondedNode) && (
+ handleBondedNymNodeAction(action)}
+ />
+ )}
+
+ {bondedNode && isMixnode(bondedNode) && (
+ setShowMigrateLegacyNodeModal(true)}
+ onActionSelect={(action) => handleBondedMixnodeAction(action)}
+ />
+ )}
+
+ {bondedNode && isGateway(bondedNode) && (
+ setShowMigrateLegacyNodeModal(true)}
+ onActionSelect={handleBondedMixnodeAction}
+ />
+ )}
+
+ setShowModal(undefined)}
+ onContinue={() => setShowModal('update-bond')}
+ saturationPercentage={uncappedSaturation.toString()}
+ />
+ )}
+
+ {showModal === 'update-bond' && bondedNode && isMixnode(bondedNode) && (
+ setShowModal(undefined)}
+ onError={handleError}
+ />
+ )}
+
+ {showModal === 'update-bond-nymnode' && bondedNode && isNymNode(bondedNode) && (
+ setShowModal(undefined)}
+ onError={handleError}
+ />
+ )}
+
+ {showModal === 'redeem' && bondedNode && isNymNode(bondedNode) && (
+ setShowModal(undefined)}
+ onConfirm={handleRedeemReward}
+ onError={handleError}
+ />
+ )}
+
+ {confirmationDetails && confirmationDetails.status === 'success' && (
+ {
+ setConfirmationDetails(undefined);
+ handleCloseModal();
+ }}
+ />
+ )}
+
+ {confirmationDetails && confirmationDetails.status === 'error' && (
+ setConfirmationDetails(undefined)} />
+ )}
+
+ {isLoading &&
+
);
};
diff --git a/nym-wallet/src/pages/bonding/BondingPage.stories.tsx b/nym-wallet/src/pages/bonding/BondingPage.stories.tsx
deleted file mode 100644
index 1a2caa1f2e..0000000000
--- a/nym-wallet/src/pages/bonding/BondingPage.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { BondingPage } from './Bonding';
-import { MockBondingContextProvider } from '../../context/mocks/bonding';
-
-export default {
- title: 'Bonding/Flows/Mock',
-};
-
-export const Default = () => (
-
-
-);
diff --git a/nym-wallet/src/pages/bonding/node-settings/node-test/index.tsx b/nym-wallet/src/pages/bonding/node-settings/node-test/index.tsx
index b9eeaf38d7..75203bc09e 100644
--- a/nym-wallet/src/pages/bonding/node-settings/node-test/index.tsx
+++ b/nym-wallet/src/pages/bonding/node-settings/node-test/index.tsx
@@ -21,13 +21,15 @@ export const NodeTestPage = () => {
const [testDate, setTestDate] = useState();
const testStateRef = useRef('Stopped');
- const timerRef = useRef();
+ const timerRef = useRef(null);
const { network } = useContext(AppContext);
const { bondedNode } = useBondingContext();
const handleTestTimeout = () => {
- clearTimeout(timerRef.current);
+ if (timerRef.current) {
+ clearTimeout(timerRef.current);
+ }
timerRef.current = setTimeout(() => {
if (testStateRef.current === 'Running') {
setIsLoading(false);
@@ -78,7 +80,9 @@ export const NodeTestPage = () => {
loadNodeTestClient();
return () => {
- clearTimeout(timerRef.current);
+ if (timerRef.current) {
+ clearTimeout(timerRef.current);
+ }
if (nodeTestClient) {
nodeTestClient.tester.disconnectFromGateway();
nodeTestClient.terminate();
diff --git a/nym-wallet/src/pages/buy/index.stories.tsx b/nym-wallet/src/pages/buy/index.stories.tsx
deleted file mode 100644
index d7ab6c7127..0000000000
--- a/nym-wallet/src/pages/buy/index.stories.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-
-import { Tutorial } from '../../components/Buy/Tutorial';
-
-export default {
- title: 'Buy/Page',
- component: Tutorial,
-};
-
-export const BuyPage = () =>
+
+
+
+);
diff --git a/nym-wallet/src/pages/delegation/DelegationPage.stories.tsx b/nym-wallet/src/pages/delegation/DelegationPage.stories.tsx
deleted file mode 100644
index b243a59464..0000000000
--- a/nym-wallet/src/pages/delegation/DelegationPage.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { DelegationPage } from './index';
-import { MockDelegationContextProvider } from '../../context/mocks/delegations';
-import { MockRewardsContextProvider } from '../../context/mocks/rewards';
-import { MockMainContextProvider } from '../../context/mocks/main';
-
-export default {
- title: 'Delegation/Flows/Mock',
-};
-
-export const Default = () => (
-
-
-
-
-
-
-);
diff --git a/nym-wallet/src/pages/delegation/index.tsx b/nym-wallet/src/pages/delegation/index.tsx
index 67af5247da..7b3abbfc54 100644
--- a/nym-wallet/src/pages/delegation/index.tsx
+++ b/nym-wallet/src/pages/delegation/index.tsx
@@ -1,6 +1,7 @@
import React, { FC, useContext, useEffect, useState } from 'react';
-import { Alert, AlertTitle, Box, Button, Paper, Stack, Typography } from '@mui/material';
-import { Theme, useTheme } from '@mui/material/styles';
+import { OpenInNew } from '@mui/icons-material';
+import { Alert, AlertTitle, Box, Button, CircularProgress, LinearProgress, Stack, Typography } from '@mui/material';
+import { alpha, useTheme } from '@mui/material/styles';
import { DecCoin, decimalToFloatApproximation, DelegationWithEverything, FeeDetails } from '@nymproject/types';
import { TauriLink as Link } from 'src/components/TauriLinkWrapper';
import { AppContext, urls } from 'src/context/main';
@@ -11,7 +12,6 @@ import { OverSaturatedBlockerModal } from 'src/components/Delegation/DelegateBlo
import { getSpendableCoins, migrateVestedDelegations, userBalance } from 'src/requests';
import { LoadingModal } from 'src/components/Modals/LoadingModal';
import { getIntervalAsDate, toPercentIntegerString } from 'src/utils';
-import { RewardsSummary } from '../../components/Rewards/RewardsSummary';
import { DelegationContextProvider, isDelegation, TDelegations, useDelegationContext } from '../../context/delegations';
import { RewardsContextProvider, useRewardsContext } from '../../context/rewards';
import { DelegateModal } from '../../components/Delegation/DelegateModal';
@@ -19,18 +19,10 @@ import { UndelegateModal } from '../../components/Delegation/UndelegateModal';
import { DelegationListItemActions } from '../../components/Delegation/DelegationActions';
import { RedeemModal } from '../../components/Rewards/RedeemModal';
import { DelegationModal, DelegationModalProps } from '../../components/Delegation/DelegationModal';
-import { backDropStyles, modalStyles } from '../../../.storybook/storiesStyles';
import { VestingWarningModal } from '../../components/VestingWarningModal';
+import { PageLayout } from '../../layouts';
-const storybookStyles = (theme: Theme, isStorybook?: boolean, backdropProps?: object) =>
- isStorybook
- ? {
- backdropProps: { ...backDropStyles(theme), ...backdropProps },
- sx: modalStyles(theme),
- }
- : {};
-
-export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
+export const Delegation: FC = () => {
const [showNewDelegationModal, setShowNewDelegationModal] = useState(false);
const [showDelegateMoreModal, setShowDelegateMoreModal] = useState(false);
const [showUndelegateModal, setShowUndelegateModal] = useState(false);
@@ -51,8 +43,6 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
const {
delegations,
- totalDelegations,
- totalRewards,
isLoading,
addDelegation,
undelegate,
@@ -319,7 +309,15 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
};
const delegationsComponent = (delegationItems: TDelegations | undefined) => {
- if (delegationItems && Boolean(delegationItems?.length)) {
+ if (delegationItems === undefined) {
+ return (
+
+
+ );
+ }
+
+ if (delegationItems.length > 0) {
return (
<>
{delegationsUseVestingTokens && (
@@ -356,9 +354,9 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
)}
+
-
- {' '}
-
-
- Delegations
-
+ `1px solid ${t.palette.divider}`,
+ boxShadow: (t) => t.palette.nym.nymWallet.shadows.light,
+ }}
+ >
+
{!!delegations?.length && (
-
- Select nodes to delegate to using the
-
+ `1px solid ${t.palette.divider}`,
+ bgcolor: (t) =>
+ t.palette.mode === 'dark'
+ ? alpha(t.palette.common.white, 0.04)
+ : alpha(t.palette.common.black, 0.04),
+ }}
+ >
+
+ Select nodes using the{' '}
+
+
+ setShowNewDelegationModal(true)}
+ sx={{
+ py: 1.5,
+ px: 4,
+ color: 'primary.contrastText',
+ flexShrink: 0,
+ alignSelf: { xs: 'stretch', sm: 'center' },
+ }}
+ >
+ New delegation
+
)}
-
- {!!delegations?.length && (
- setShowNewDelegationModal(true)}
- sx={{ py: 1.5, px: 5, color: 'primary.contrastText', height: 'fit-content' }}
- >
- Delegate
-
- )}
-
- {!!delegations?.length && (
-
-
- Next epoch starts at {nextEpoch}
-
+ {isLoading && delegations !== undefined && !isActionModalOpen && (
+
- )}
- {/* Add a container to ensure delegations are constrained */}
- {delegationsComponent(delegations)}
+ {delegationsComponent(delegations)}
+
+
-
+
{showNewDelegationModal && (
= ({ isStorybook }) => {
accountBalance={balance?.printable_balance}
rewardInterval="weekly"
hasVestingContract={Boolean(originalVesting)}
- {...storybookStyles(theme, isStorybook)}
/>
)}
@@ -548,10 +573,10 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
);
};
-export const DelegationPage: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => (
+export const DelegationPage: FC = () => (
-
);
diff --git a/nym-wallet/src/pages/internal-docs/index.tsx b/nym-wallet/src/pages/internal-docs/index.tsx
index 892c920335..4d384f33d8 100644
--- a/nym-wallet/src/pages/internal-docs/index.tsx
+++ b/nym-wallet/src/pages/internal-docs/index.tsx
@@ -2,12 +2,13 @@ import React, { useContext } from 'react';
import { NymCard } from '../../components';
import { ApiList } from './ApiList';
+import { config } from '../../config';
import { AppContext } from '../../context/main';
export const InternalDocs = () => {
const { isAdminAddress } = useContext(AppContext);
- if (!isAdminAddress) {
+ if (!config.INTERNAL_DOCS_ENABLED || !isAdminAddress) {
return null;
}
diff --git a/nym-wallet/src/pages/settings/AdvancedSettings.tsx b/nym-wallet/src/pages/settings/AdvancedSettings.tsx
index 76ec15c967..e9684d43e4 100644
--- a/nym-wallet/src/pages/settings/AdvancedSettings.tsx
+++ b/nym-wallet/src/pages/settings/AdvancedSettings.tsx
@@ -15,7 +15,7 @@ const AdvancedSettings = () => {
Terminal
-
+
Open the terminal (dev mode)
@@ -31,7 +31,7 @@ const AdvancedSettings = () => {
Logs
-
+
Open logs to monitor all actions in the wallet
diff --git a/nym-wallet/src/pages/settings/GeneralSettings.tsx b/nym-wallet/src/pages/settings/GeneralSettings.tsx
index 5cc88915a6..e0d08be691 100644
--- a/nym-wallet/src/pages/settings/GeneralSettings.tsx
+++ b/nym-wallet/src/pages/settings/GeneralSettings.tsx
@@ -4,14 +4,20 @@ import { AppVersion, ThemeSwitcher } from '../../components/Settings';
const GeneralSettings = () => (
-
-
+
+
Version
-
- Current version of wallet and updates
+
+ Installed build and update checks
-
+
@@ -19,7 +25,7 @@ const GeneralSettings = () => (
Theme
-
+
Select the theme
diff --git a/nym-wallet/src/pages/settings/SecuritySettings.tsx b/nym-wallet/src/pages/settings/SecuritySettings.tsx
index 190fa04204..d773ab13f5 100644
--- a/nym-wallet/src/pages/settings/SecuritySettings.tsx
+++ b/nym-wallet/src/pages/settings/SecuritySettings.tsx
@@ -44,12 +44,12 @@ const SecuritySettings = () => {
)}
{passwordExists ? (
-
+
Change your existing password. A strong password should have at least 8 characters, one capital letter,
a number and a special character
) : (
-
+
Create a strong password for your wallet. A strong password should have at least 8 characters, one
capital letter, a number and a special character
diff --git a/nym-wallet/src/pages/settings/Settings.tsx b/nym-wallet/src/pages/settings/Settings.tsx
index 42c53da887..0d47a7195a 100644
--- a/nym-wallet/src/pages/settings/Settings.tsx
+++ b/nym-wallet/src/pages/settings/Settings.tsx
@@ -21,9 +21,21 @@ const Settings = () => {
return (
+
+
+ Preferences
+
+
+ Wallet settings
+
+
{
borderBottom: 'none',
borderTop: 'none',
'& button': {
- p: 0,
- mr: 4,
+ px: 2,
+ py: 1,
+ mr: 1.5,
minWidth: 'none',
- fontSize: 16,
+ fontSize: 15,
+ borderRadius: '999px',
},
'& button:hover': {
color: theme.palette.nym.highlight,
opacity: 1,
},
}}
- tabIndicatorStyles={{ height: 4, bottom: '6px', borderRadius: '2px' }}
+ tabIndicatorStyles={{
+ height: 3,
+ borderRadius: 3,
+ backgroundColor: theme.palette.primary.main,
+ }}
/>
diff --git a/nym-wallet/src/pages/terminal/index.tsx b/nym-wallet/src/pages/terminal/index.tsx
index d027e782b9..c994c89ac2 100644
--- a/nym-wallet/src/pages/terminal/index.tsx
+++ b/nym-wallet/src/pages/terminal/index.tsx
@@ -1,39 +1,85 @@
import React, { useContext, useState } from 'react';
-import { Alert, Box, Paper, Dialog, Typography } from '@mui/material';
+import { Alert, Box, Dialog, IconButton, Paper, Stack, Typography, alpha, useTheme } from '@mui/material';
import TerminalIcon from '@mui/icons-material/Terminal';
import RefreshIcon from '@mui/icons-material/Refresh';
import CloseIcon from '@mui/icons-material/Close';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
-import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
+import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
+import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
import { Console } from 'src/utils/console';
import { AppContext } from '../../context/main';
import { NymCard } from '../../components';
import { getCurrentInterval, getAllPendingDelegations, getMixNodeDelegationsForCurrentAccount } from '../../requests';
const TerminalSection: FCWithChildren<{
- heading: React.ReactNode;
+ heading: string;
children: React.ReactNode;
}> = ({ heading, children }) => {
const [isCollapsed, setIsCollapsed] = useState(true);
- const toggleCollapse = () => {
- setIsCollapsed((prev) => !prev);
- };
-
return (
-
-
- {isCollapsed ?
+ `1px solid ${t.palette.divider}`,
+ overflow: 'hidden',
+ }}
+ >
+ setIsCollapsed((prev) => !prev)}
+ sx={{
+ px: 2,
+ py: 1.25,
+ cursor: 'pointer',
+ bgcolor: (t) => alpha(t.palette.primary.main, t.palette.mode === 'dark' ? 0.08 : 0.06),
+ '&:hover': {
+ bgcolor: (t) => alpha(t.palette.primary.main, t.palette.mode === 'dark' ? 0.12 : 0.09),
+ },
+ }}
+ >
+
+ {isCollapsed ?
+
{heading}
-
- {!isCollapsed && {children} }
+
+ {!isCollapsed && (
+ `1px solid ${t.palette.divider}`,
+ }}
+ >
+
+ {children}
+
+
+ )}
);
};
const TerminalInner: FCWithChildren = () => {
+ const theme = useTheme();
const { network, userBalance, clientDetails, handleShowTerminal, appEnv } = useContext(AppContext);
const [mixnodeDelegations, setMixnodeDelegations] = useState();
const [pendingEvents, setPendingEvents] = useState();
@@ -83,6 +129,9 @@ const TerminalInner: FCWithChildren = () => {
refresh();
}, [network]);
+ const successBg = alpha(theme.palette.success.main, theme.palette.mode === 'dark' ? 0.22 : 0.12);
+ const successColor = theme.palette.mode === 'dark' ? theme.palette.success.light : theme.palette.success.dark;
+
return (
{
maxWidth="md"
fullWidth
PaperComponent={Paper}
- PaperProps={{ elevation: 0 }}
+ PaperProps={{ elevation: 0, sx: { borderRadius: 3, overflow: 'hidden' } }}
>
-
- Terminal
- {!isBusy &&
-
+
+
+ Terminal
+
+ {!isBusy && (
+
+
+ )}
+
+
+
}
dataTestid="terminal-page"
+ noPadding
>
- State Viewer
+
+
+ State viewer
+
- {error && {error} }
+ {error && (
+
+ {String(error)}
+
+ )}
- {status ? (
- {status}
-
- ) : (
-
- Data loading complete
-
- )}
+ {status ? (
+
+ {status}
+
+
+ ) : (
+
+
+ Data loading complete
+
+
+ )}
-
- {JSON.stringify(appEnv, null, 2)}
-
+ {JSON.stringify(appEnv, null, 2)}
-
- {JSON.stringify(clientDetails, null, 2)}
-
+ {JSON.stringify(clientDetails, null, 2)}
-
- {JSON.stringify(userBalance, null, 2)}
-
+ {JSON.stringify(userBalance, null, 2)}
-
- useGetBalance Balance
-
- }
- >
- {JSON.stringify(userBalance.balance, null, 2)}
-
+
+ {JSON.stringify(userBalance.balance, null, 2)}
+
-
- useGetBalance Vesting Account Info
-
- }
- >
- {JSON.stringify(userBalance.vestingAccountInfo, null, 2)}
-
+
+ {JSON.stringify(userBalance.vestingAccountInfo, null, 2)}
+
-
- useGetBalance Current Vest Period
-
- }
- >
- {JSON.stringify(userBalance.currentVestingPeriod, null, 2)}
-
+
+ {JSON.stringify(userBalance.currentVestingPeriod, null, 2)}
+
-
- {JSON.stringify(userBalance.originalVesting, null, 2)}
-
+
+ {JSON.stringify(userBalance.originalVesting, null, 2)}
+
-
- {JSON.stringify(mixnodeDelegations, null, 2)}
-
+ {JSON.stringify(mixnodeDelegations, null, 2)}
-
- {JSON.stringify(pendingEvents, null, 2)}
-
+
+ {JSON.stringify(pendingEvents, null, 2)}
+
-
- {JSON.stringify(pendingVestingEvents, null, 2)}
-
+
+ {JSON.stringify(pendingVestingEvents, null, 2)}
+
-
- {JSON.stringify(epoch, null, 2)}
-
+ {JSON.stringify(epoch, null, 2)}
+
);
@@ -188,7 +240,6 @@ const TerminalInner: FCWithChildren = () => {
export const Terminal: FCWithChildren = () => {
const { showTerminal } = useContext(AppContext);
- // this is a guard component, that only mounts the terminal component when shown
if (!showTerminal) {
return null;
}
diff --git a/nym-wallet/src/routes/app.tsx b/nym-wallet/src/routes/app.tsx
index 896a5edb6e..59bb2281fb 100644
--- a/nym-wallet/src/routes/app.tsx
+++ b/nym-wallet/src/routes/app.tsx
@@ -4,6 +4,7 @@ import { ApplicationLayout } from '../layouts';
import { Terminal } from '../pages/terminal';
import { Send } from '../components/Send';
import { Receive } from '../components/Receive';
+import { config } from '../config';
import {
Balance,
InternalDocs,
@@ -27,7 +28,7 @@ export const AppRoutes = () => (
;
-
-export const AllControls = () =>
-
+
+
+
+
);
};
diff --git a/nym-wallet/src/theme/emotionCache.ts b/nym-wallet/src/theme/emotionCache.ts
new file mode 100644
index 0000000000..be053b48f7
--- /dev/null
+++ b/nym-wallet/src/theme/emotionCache.ts
@@ -0,0 +1,12 @@
+import createCache from '@emotion/cache';
+
+/**
+ * WKWebView (Tauri) can silently fail Emotion's production `insertRule` path (`speedy: true`),
+ * which shows up as React/MUI rendering with almost no CSS while scripts run.
+ * `speedy: false` uses `