Skip to content

Commit

Permalink
Updates for MainPage, TokenDetails and RestorePage
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ivan-Mahda
Ivan-Mahda committed Oct 16, 2024
1 parent 6107b70 commit 488439c
Show file tree
Hide file tree
Showing 34 changed files with 733 additions and 538 deletions.
3 changes: 3 additions & 0 deletions packages/browser-wallet/src/assets/svgX/gear.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions packages/browser-wallet/src/popup/pages/Account/AccountDetails/AccountDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,15 @@ type Props = {
className?: string;
};

const zeroBalance: Omit<PublicAccountAmounts, 'scheduled'> = {
const zeroBalance: Omit<PublicAccountAmounts, 'scheduled' | 'cooldown'> = {
total: 0n,
staked: 0n,
atDisposal: 0n,
};

export default function AccountDetails({ expanded, account, className }: Props) {
const { t } = useTranslation('account', { keyPrefix: 'details' });
const [balances, setBalances] = useState<Omit<PublicAccountAmounts, 'scheduled'>>(zeroBalance);
const [balances, setBalances] = useState<Omit<PublicAccountAmounts, 'scheduled' | 'cooldown'>>(zeroBalance);
const identityName = useIdentityName(account);
const accountInfo = useAccountInfo(account);

Expand Down
9 changes: 9 additions & 0 deletions packages/browser-wallet/src/popup/popupX/constants/routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,15 @@ export const relativeRoutes = {
},
},
},
restore: {
path: 'restore',
result: {
path: 'result',
config: {
backTitle: 'Restore wallet',
},
},
},
earn: {
path: 'earn',
baker: {
Expand Down
14 changes: 7 additions & 7 deletions ...s/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/components/MenuTiles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Restore from '@assets/svgX/arrow-counter-clock.svg';
import IconButton from '@popup/shared/IconButton';
import Text from '@popup/popupX/shared/Text';
import { Link } from 'react-router-dom';
import { absoluteRoutes, relativeRoutes } from '@popup/popupX/constants/routes';
import { absoluteRoutes } from '@popup/popupX/constants/routes';
import { useTranslation } from 'react-i18next';

type MenuTilesProps = {
Expand All @@ -31,19 +31,19 @@ export default function MenuTiles({ menuOpen, setMenuOpen }: MenuTilesProps) {
className="main-header__menu-tiles_container"
onClick={() => setMenuOpen(false)}
>
<Link to={relativeRoutes.settings.idCards.path}>
<Link to={absoluteRoutes.settings.idCards.path}>
<IconButton className="main-header__menu-tiles_tile wide">
<Identification />
<Text.Capture>{t('identities')}</Text.Capture>
</IconButton>
</Link>
<Link to={relativeRoutes.settings.accounts.path}>
<Link to={absoluteRoutes.settings.accounts.path}>
<IconButton className="main-header__menu-tiles_tile wide">
<Browsers />
<Text.Capture>{t('accounts')}</Text.Capture>
</IconButton>
</Link>
<Link to="/">
<Link to={absoluteRoutes.settings.seedPhrase.path}>
<IconButton className="main-header__menu-tiles_tile">
<TextColumns />
<Text.Capture>{t('seedPhrase')}</Text.Capture>
Expand All @@ -67,19 +67,19 @@ export default function MenuTiles({ menuOpen, setMenuOpen }: MenuTilesProps) {
<Text.Capture>{t('earn')}</Text.Capture>
</IconButton>
</Link>
<Link to={relativeRoutes.settings.network.path}>
<Link to={absoluteRoutes.settings.network.path}>
<IconButton className="main-header__menu-tiles_tile">
<LinkSimple />
<Text.Capture>{t('network')}</Text.Capture>
</IconButton>
</Link>
<Link to={relativeRoutes.settings.about.path}>
<Link to={absoluteRoutes.settings.about.path}>
<IconButton className="main-header__menu-tiles_tile">
<Info />
<Text.Capture>{t('about')}</Text.Capture>
</IconButton>
</Link>
<Link to="/">
<Link to={absoluteRoutes.settings.restore.path}>
<IconButton className="main-header__menu-tiles_tile">
<Restore />
<Text.Capture>{t('restore')}</Text.Capture>
Expand Down
8 changes: 8 additions & 0 deletions packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
.accounts-x {
.page__top {
.button__icon {
svg path {
fill: $color-white;
}
}
}

.page__main {
display: flex;
flex-direction: column;
Expand Down
25 changes: 22 additions & 3 deletions packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ import Button from '@popup/popupX/shared/Button';
import { useTranslation } from 'react-i18next';
import Card from '@popup/popupX/shared/Card';
import Text from '@popup/popupX/shared/Text';
import { useNavigate } from 'react-router-dom';
import { absoluteRoutes } from '@popup/popupX/constants/routes';
import { copyToClipboard } from '@popup/popupX/shared/utils/helpers';

const ACCOUNT_LIST = [
{
Expand All @@ -34,6 +37,10 @@ const ACCOUNT_LIST = [

export default function Accounts() {
const { t } = useTranslation('x', { keyPrefix: 'accounts' });
const nav = useNavigate();
const navToPrivateKey = () => nav(absoluteRoutes.settings.accounts.privateKey.path);
const navToConnectedSites = () => nav(absoluteRoutes.settings.accounts.connectedSites.path);
const navToIdCards = () => nav(absoluteRoutes.settings.idCards.path);
return (
<Page className="accounts-x">
<Page.Top heading={t('accounts')}>
Expand All @@ -43,14 +50,18 @@ export default function Accounts() {
</Page.Top>
<Page.Main>
{ACCOUNT_LIST.map(({ account, address, balance, attached }) => (
<Card>
<Card key={account}>
<Card.Row>
<Text.Main>{account}</Text.Main>
<Button.Icon className="transparent" icon={<Pencil />} />
</Card.Row>
<Card.Row>
<Text.Capture>{address}</Text.Capture>
<Button.Icon className="transparent" icon={<Copy />} />
<Button.Icon
className="transparent"
onClick={() => copyToClipboard(address)}
icon={<Copy />}
/>
</Card.Row>
<Card.Row>
<Text.MainRegular>{t('totalBalance')}</Text.MainRegular>
Expand All @@ -60,6 +71,7 @@ export default function Accounts() {
<Text.MainRegular>{t('connectedSites')}</Text.MainRegular>
<Button.IconText
className="transparent"
onClick={navToConnectedSites}
label={t('seeList')}
icon={<ArrowRight />}
leftLabel
Expand All @@ -69,14 +81,21 @@ export default function Accounts() {
<Text.MainRegular>{t('privateKey')}</Text.MainRegular>
<Button.IconText
className="transparent"
onClick={navToPrivateKey}
label={t('export')}
icon={<ArrowRight />}
leftLabel
/>
</Card.Row>
<Card.Row>
<Text.MainRegular>{t('attachedTo')}</Text.MainRegular>
<Button.IconText className="transparent" label={attached} icon={<ArrowRight />} leftLabel />
<Button.IconText
className="transparent"
onClick={navToIdCards}
label={attached}
icon={<ArrowRight />}
leftLabel
/>
</Card.Row>
</Card>
))}
Expand Down
174 changes: 82 additions & 92 deletions packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.scss
View file
Original file line number Diff line number Diff line change
@@ -1,119 +1,109 @@
.main-page-container {
display: flex;
flex-direction: column;
height: 100%;

.main-page {
&__balance {
display: flex;
flex-direction: column;

.heading_large {
background-image: $gradient-balance-bg;
color: transparent;
background-clip: text;
}
}
.main-page-x {
&.page-container {
height: 100%;
padding-bottom: unset;
}

&__action-buttons {
display: flex;
margin-top: rem(32px);
align-items: stretch;
gap: rem(4px);
&__balance {
display: flex;
flex-direction: column;
}

.icon-button {
flex: 1;
gap: rem(6px);
background: $gradient-card-bg;
border-radius: rem(12px);
padding: rem(12px) 0;
&__action-buttons {
display: flex;
align-items: stretch;
width: 100%;
gap: rem(6px);
margin-top: rem(16px);

.capture__additional_small {
color: $color-black;
}
}
.send svg {
transform: rotate(-90deg);
}

svg path {
fill: $color-mineral-1;
}
.receive svg {
transform: rotate(90deg);
}
}

.send svg {
transform: rotate(-90deg);
}
&__tokens {
margin-top: rem(24px);
overflow: auto;

.receive svg {
transform: rotate(90deg);
}
&::-webkit-scrollbar {
display: none;
}

&__tokens {
margin-top: rem(24px);
overflow: auto;

&::-webkit-scrollbar {
display: none;
}
&-list {
display: flex;
flex-direction: column;
gap: rem(4px);
padding-bottom: rem(32px);

&-list {
&_item {
display: flex;
flex-direction: column;
gap: rem(4px);
padding: rem(16px) 0;
align-items: center;
padding: rem(12px) rem(14px) rem(12px) rem(12px);
border: unset;
border-radius: rem(12px);
background: $color-transaction-bg;
cursor: pointer;

&_item {
.token-icon {
display: flex;
align-items: center;
padding: rem(12px) rem(14px) rem(12px) rem(12px);
border-radius: rem(12px);
background: $color-transaction-bg;

.token-icon {
display: flex;
padding: rem(10px);
margin-right: rem(10px);
border-radius: rem(8px);
background: $color-main-bg;

svg,
img {
width: rem(20px);
height: rem(20px);
}
padding: rem(10px);
margin-right: rem(10px);
border-radius: rem(8px);
background: $color-main-bg;

svg,
img {
width: rem(20px);
height: rem(20px);
}
}

.token-balance {
display: flex;
flex-direction: column;
gap: rem(8px);
width: 100%;

.token-balance {
&__amount,
&__exchange-rate {
display: flex;
flex-direction: column;
gap: rem(8px);
width: 100%;
}

&__amount,
&__exchange-rate {
display: flex;
}
.capture__main_small {
opacity: 0.5;
}

.capture__main_small {
opacity: 0.5;
}
.label__main {
color: $color-white;
}

.label__main:last-child,
.capture__main_small:last-child {
margin-left: auto;
}
.label__main:last-child,
.capture__main_small:last-child {
margin-left: auto;
}

svg {
margin-left: rem(8px);
opacity: 0.5;
width: rem(16px);
height: rem(16px);
svg {
margin-left: rem(8px);
margin-top: rem(-2px);
opacity: 0.5;
width: rem(16px);
height: rem(16px);

path {
fill: $color-mineral-3;
}
path {
fill: $color-mineral-3;
}
}
}
}

.button__icon {
align-self: flex-start;
margin-top: rem(24px);
}
}
}
}
Loading

0 comments on commit 488439c

Please sign in to comment.