Skip to content

Commit

Permalink
Added prompts SendTransaction, SignCis3Message, SignMessage
Browse files Browse the repository at this point in the history
Updated MainPage, TokenDetails
  • Loading branch information
Ivan-Mahda committed Dec 5, 2024
1 parent e20aeef commit 9e0069c
Show file tree
Hide file tree
Showing 48 changed files with 1,305 additions and 88 deletions.
3 changes: 3 additions & 0 deletions packages/browser-wallet/src/assets/svgX/clock.svg
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/assets/svgX/concordium-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/browser-wallet/src/assets/svgX/percent.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions packages/browser-wallet/src/popup/popupX/constants/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -304,6 +304,15 @@ export const relativeRoutes = {
endIdentityIssuance: {
path: 'end-identity-issuance',
},
signCIS3Message: {
path: 'signCIS3Message',
},
signMessage: {
path: 'signMessage',
},
sendTransaction: {
path: 'sendTransaction',
},
},
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,14 @@ import React, { useMemo } from 'react';
import { Outlet } from 'react-router-dom';
import Toast from '@popup/shared/Toast/Toast';
import clsx from 'clsx';
import { Connection, Fullscreen } from '@popup/popupX/page-layouts/MainLayout/Header/components';
import { Connection } from '@popup/popupX/page-layouts/MainLayout/Header/components';
import FullscreenPromptLayout from '@popup/popupX/page-layouts/FullscreenPromptLayout';

function Header({ isScrolling }: { isScrolling: boolean }) {
return (
<div className={clsx('main-header', isScrolling && 'scroll-border')}>
<div className="main-header__top">
<Fullscreen />
<Connection hideConnection={false} />
<Connection />
</div>
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@

&__fullscreen {
display: flex;
width: 100%;
width: 0;
flex: 1 1 0px;

&_button {
display: flex;
Expand All @@ -61,9 +62,10 @@

&__connection {
display: flex;
flex: 1 1 0px;
align-items: center;
white-space: nowrap;
width: 100%;
width: 0;
height: rem(24px);
padding: rem(1px);
box-sizing: border-box;
Expand Down Expand Up @@ -93,6 +95,27 @@
display: flex;
align-items: center;

&.waiting {
circle {
fill: $color-orange-info;
}
}

&.connected {
max-width: 90%;

circle {
fill: $color-green-success;
}

.capture__main_small {
color: $color-white;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}

.capture__main_small {
padding: 0 rem(10px) rem(2px) rem(6px);
}
Expand Down Expand Up @@ -143,6 +166,12 @@
&.wide {
width: rem(160px);
}

svg {
path {
fill: $color-white;
}
}
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,19 +1,61 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import Info from '@assets/svgX/info.svg';
import Dot from '@assets/svgX/dot.svg';
import { useAtomValue } from 'jotai';
import { storedAllowlistAtom } from '@popup/store/account';
import { useCurrentOpenTabUrl } from '@popup/shared/utils/tabs';
import { useSelectedCredential } from '@popup/shared/utils/account-helpers';
import { useTranslation } from 'react-i18next';
import clsx from 'clsx';
import { Location, useLocation } from 'react-router-dom';
import { relativeRoutes } from '@popup/popupX/constants/routes';
import Text from '@popup/popupX/shared/Text';

type Props = {
hideConnection: boolean;
hideConnection?: boolean;
};

interface ConnectionLocation extends Location {
state: {
payload: {
url: string;
};
};
}

export default function Connection({ hideConnection }: Props) {
const { t } = useTranslation('x', { keyPrefix: 'header.connection' });
const [isAccountConnectedToSite, setAccountConnectedToSite] = useState<boolean>();
const allowlist = useAtomValue(storedAllowlistAtom);
const { pathname, state } = useLocation() as ConnectionLocation;
const currentOpenTabUrl = useCurrentOpenTabUrl();
const url = state?.payload?.url ? new URL(state.payload.url).origin : currentOpenTabUrl;
const selectedCred = useSelectedCredential();
const accountAddress = selectedCred?.address;
const hostname = url ? new URL(url).hostname : '';
const waitingForConnection = pathname.includes(relativeRoutes.prompt.connectionRequest.path);
const connectionText =
(waitingForConnection && t('waiting')) || (isAccountConnectedToSite && hostname) || t('siteNotConnected');

useEffect(() => {
if (accountAddress && !allowlist.loading && url) {
const allowlistForUrl = allowlist.value[url];
setAccountConnectedToSite(allowlistForUrl?.includes(accountAddress) ?? false);
}
}, [accountAddress, allowlist, url]);

if (hideConnection) return null;
return (
<div className="main-header__connection">
<div className="main-header__connection_info">
<span className="connection_status">
<span
className={clsx('connection_status', {
connected: isAccountConnectedToSite,
waiting: waitingForConnection,
})}
>
<Dot />
<span className="capture__main_small">No website connected</span>
<Text.Capture>{connectionText}</Text.Capture>
</span>
<Info />
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Browsers from '@assets/svgX/browsers.svg';
import TextColumns from '@assets/svgX/text-columns.svg';
import Password from '@assets/svgX/password.svg';
import WebId from '@assets/svgX/web-id.svg';
import Plant from '@assets/svgX/plant.svg';
import Percent from '@assets/svgX/percent.svg';
import LinkSimple from '@assets/svgX/link-simple-horizontal.svg';
import Info from '@assets/svgX/info2.svg';
import Restore from '@assets/svgX/arrow-counter-clock.svg';
Expand Down Expand Up @@ -69,7 +69,7 @@ export default function MenuTiles({ menuOpen, setMenuOpen }: MenuTilesProps) {
</Link>
<Link to={absoluteRoutes.settings.earn.path}>
<IconButton className="main-header__menu-tiles_tile">
<Plant />
<Percent />
<Text.Capture>{t('earn')}</Text.Capture>
</IconButton>
</Link>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ const t = {
sortDesc: 'Sort Z-A',
searchBy: 'Search by name or address',
},
connection: {
siteNotConnected: 'No website connected',
waiting: 'Waiting',
},
};

export default t;
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
&__balance {
display: flex;
flex-direction: column;
align-items: flex-start;
}

&__action-buttons {
Expand Down Expand Up @@ -71,6 +72,9 @@
&__amount,
&__exchange-rate {
display: flex;
width: 100%;
justify-content: flex-end;
align-items: center;
}

.capture__main_small {
Expand All @@ -81,14 +85,15 @@
color: $color-white;
}

.label__main:last-child,
.capture__main_small:last-child {
.balance-rate {
display: flex;
flex-direction: column;
gap: rem(8px);
margin-left: auto;
}

svg {
margin-left: rem(8px);
margin-top: rem(-2px);
opacity: 0.5;
width: rem(16px);
height: rem(16px);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ import Text from '@popup/popupX/shared/Text';
import Button from '@popup/popupX/shared/Button';
import { withSelectedCredential } from '@popup/popupX/shared/utils/hoc';
import Arrow from '@assets/svgX/arrow-right.svg';
import FileText from '@assets/svgX/file-text.svg';
import Clock from '@assets/svgX/clock.svg';
import ConcordiumLogo from '@assets/svgX/concordium-logo.svg';
import Plant from '@assets/svgX/plant.svg';
import Percent from '@assets/svgX/percent.svg';
import Gear from '@assets/svgX/gear.svg';
import { formatTokenAmount } from '@popup/popupX/shared/utils/helpers';

Expand Down Expand Up @@ -59,22 +59,24 @@ function displayCcdAsEur(microCcdPerEur: Ratio, microCcd: bigint, decimals: numb
}

function Balance({ credential }: { credential: WalletCredential }) {
const chainParameters = useBlockChainParameters();
const microCcdPerEur = chainParameters?.microGTUPerEuro;
const { t } = useTranslation('x', { keyPrefix: 'mainPage' });
const accountInfo = useAccountInfo(credential);

if (!accountInfo) {
return null;
}

const ccdBalance = displayAsCcd(accountInfo.accountAmount.microCcdAmount, false, true);
const eurBalance =
microCcdPerEur && displayCcdAsEur(microCcdPerEur, accountInfo.accountAmount.microCcdAmount, 2, true);
const ccdAvailableBalance = displayAsCcd(accountInfo.accountAvailableBalance.microCcdAmount, false, true);

return (
<div className="main-page-x__balance">
<Text.HeadingLarge>{microCcdPerEur ? eurBalance : ccdBalance}</Text.HeadingLarge>
<Text.Capture>{microCcdPerEur ? ccdBalance : ''}</Text.Capture>
<Text.DynamicSize baseFontSize={55} baseTextLength={10} className="heading_large">
{ccdBalance}
</Text.DynamicSize>
<Text.Capture>
{ccdAvailableBalance} {t('atDisposal')}
</Text.Capture>
</div>
);
}
Expand All @@ -98,15 +100,16 @@ function TokenItem({ thumbnail, symbol, balance, balanceBase, staked, microCcdPe
<div className="token-balance">
<div className="token-balance__amount">
<Text.Label>{symbol}</Text.Label>
{staked && <Plant />}
<Text.Label>{balance}</Text.Label>
{staked && <Percent />}
<span className="balance-rate">
<Text.Label>{balance}</Text.Label>
{isNoExchange ? null : (
<div className="token-balance__exchange-rate">
<Text.Capture>{displayCcdAsEur(microCcdPerEur, balanceBase, 2)}</Text.Capture>
</div>
)}
</span>
</div>
{isNoExchange ? null : (
<div className="token-balance__exchange-rate">
<Text.Capture>{displayCcdAsEur(microCcdPerEur, 1000000n, 6)}</Text.Capture>
<Text.Capture>{displayCcdAsEur(microCcdPerEur, balanceBase, 2)}</Text.Capture>
</div>
)}
</div>
</Button.Base>
);
Expand All @@ -120,6 +123,7 @@ function MainPageConfirmedAccount({ credential }: MainPageConfirmedAccountProps)
const nav = useNavigate();
const navToSend = () => nav(generatePath(absoluteRoutes.home.sendFunds.path, { account: credential.address }));
const navToReceive = () => nav(relativeRoutes.home.receive.path);
const navToEarn = () => nav(absoluteRoutes.settings.earn.path);
const navToTransactionLog = () =>
nav(relativeRoutes.home.transactionLog.path.replace(':account', credential.address));
const navToTokenDetails = (contractIndex: string) =>
Expand All @@ -144,7 +148,8 @@ function MainPageConfirmedAccount({ credential }: MainPageConfirmedAccountProps)
<div className="main-page-x__action-buttons">
<Button.IconTile icon={<Arrow />} label={t('receive')} onClick={navToReceive} className="receive" />
<Button.IconTile icon={<Arrow />} label={t('send')} onClick={navToSend} className="send" />
<Button.IconTile icon={<FileText />} label={t('transactions')} onClick={navToTransactionLog} />
<Button.IconTile icon={<Percent />} label={t('earn')} onClick={navToEarn} />
<Button.IconTile icon={<Clock />} label={t('activity')} onClick={navToTransactionLog} />
</div>
<div className="main-page-x__tokens">
<div className="main-page-x__tokens-list">
Expand Down Expand Up @@ -192,7 +197,8 @@ function MainPagePendingAccount() {
<div className="main-page-x__action-buttons">
<Button.IconTile icon={<Arrow />} label={t('receive')} disabled className="receive" />
<Button.IconTile icon={<Arrow />} label={t('send')} disabled className="send" />
<Button.IconTile icon={<FileText />} label={t('transactions')} disabled />
<Button.IconTile icon={<Percent />} label={t('earn')} disabled />
<Button.IconTile icon={<Clock />} label={t('activity')} disabled />
</div>
<div className="main-page-x__tokens">
<div className="main-page-x__tokens-list">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
const t = {
receive: 'Receive',
send: 'Send',
transactions: 'Transactions',
earn: 'Earn',
activity: 'Activity',
manageTokenList: 'Manage token list',
pendingAccount: 'Creating account',
pendingSubText: 'Ready within a few minutes',
atDisposal: 'at disposal',
};

export default t;
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
.token-details-x {
&__stake {
display: flex;
justify-content: space-between;
flex-direction: column;
margin-top: rem(12px);
margin-bottom: rem(16px);
padding-top: rem(12px);
border-top: 1px solid rgba($color-white, 0.1);

&_group {
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: space-between;

.capture__additional_small {
color: $color-white;
Expand All @@ -33,6 +33,19 @@
}
}

&__token {
display: flex;
align-items: center;
margin-bottom: rem(8px);

.token-icon,
svg {
width: rem(20px);
height: rem(20px);
margin-right: rem(8px);
}
}

.card-x {
margin-top: rem(16px);
}
Expand Down
Loading

0 comments on commit 9e0069c

Please sign in to comment.