14 |
17 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/src/ui/components/NetworkMenu.css:
--------------------------------------------------------------------------------
1 | .menu-button.networks {
2 | -webkit-app-region: no-drag;
3 | }
4 |
5 | .rc-menu {
6 | min-width: 6rem;
7 | }
8 |
9 | .rc-menu__submenu {
10 | font-size: 12px !important;
11 | font-weight: 400 !important;
12 | }
13 |
14 | .rc-menu__submenu > .rc-menu__item::after {
15 | content: '';
16 | }
17 |
18 | .networks-menu .rc-menu__submenu > .rc-menu__item {
19 | padding: 0;
20 | }
21 |
--------------------------------------------------------------------------------
/src/ui/components/PasscodeView.css:
--------------------------------------------------------------------------------
1 | div.passcode-view {
2 | display: grid;
3 | grid-template-rows: auto 1fr;
4 | height: auto;
5 | width: 100%;
6 | text-align: center;
7 | vertical-align: middle;
8 | padding-right: 3px;
9 | }
10 |
11 | div.passcode-view > div {
12 | margin-right: 2px;
13 | }
14 |
15 | div.passcode-view > p {
16 | font-size: 15px;
17 | margin: 0;
18 | margin-bottom: 16px;
19 | display: flex;
20 | align-items: center;
21 | justify-content: center;
22 | color: var(--font-color-title);
23 | }
24 |
--------------------------------------------------------------------------------
/src/ui/components/TokenLabel.css:
--------------------------------------------------------------------------------
1 | .token-label {
2 | display: flex;
3 | align-items: center;
4 | text-transform: uppercase;
5 | font-size: 12px;
6 | line-height: 12px;
7 | padding-top: 1px;
8 | }
9 |
10 | .token-label > img {
11 | width: 12px;
12 | height: 12px;
13 | margin-right: 4px;
14 | }
15 |
16 | .token-label.expand > img {
17 | margin-right: 8px;
18 | }
19 |
--------------------------------------------------------------------------------
/src/ui/components/TokenLabel.tsx:
--------------------------------------------------------------------------------
1 | import './TokenLabel.css';
2 |
3 | import { CryptoIcons } from '../misc/Icons';
4 | import React from 'react';
5 |
6 | export default ({ symbol, name, expand, label }: { symbol: string; name: string; expand?: boolean; label?: string }) => {
7 | return (
8 | {props.title}
18 |
9 | })
10 | {name}
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/src/ui/components/TouchIDView.css:
--------------------------------------------------------------------------------
1 | div.touchid-view {
2 | display: grid;
3 | grid-template-rows: auto 1fr;
4 | outline: none;
5 | margin-top: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | div.touchid-view > p {
10 | font-size: 15px;
11 | margin: 0;
12 | margin-bottom: 16px;
13 | color: var(--font-color-title);
14 | text-align: center;
15 | }
16 |
17 | div.touchid-view img {
18 | width: 81px;
19 | display: inline-block;
20 | cursor: pointer;
21 | }
22 |
23 | div.touchid-view > div {
24 | transition: all 0.3s;
25 | height: 100%;
26 | display: flex;
27 | justify-content: center;
28 | align-items: flex-start;
29 | }
30 |
31 | div.touchid-view > div:hover {
32 | opacity: 0.5;
33 | }
34 |
--------------------------------------------------------------------------------
/src/ui/components/TouchIDView.tsx:
--------------------------------------------------------------------------------
1 | import './TouchIDView.css';
2 |
3 | import React, { KeyboardEventHandler, useEffect } from 'react';
4 |
5 | import TouchID from '../../assets/icons/app/touchid.svg';
6 | import { observer } from 'mobx-react-lite';
7 | import { useTranslation } from 'react-i18next';
8 |
9 | export default observer(({ onAuth }: { onAuth: () => void }) => {
10 | const { t } = useTranslation();
11 |
12 | return (
13 |
14 |
19 | );
20 | });
21 |
--------------------------------------------------------------------------------
/src/ui/components/index.ts:
--------------------------------------------------------------------------------
1 | import Copy from './Copy';
2 | import Image from './Image';
3 | import Logo from './Logo';
4 | import NavBar from './NavBar';
5 | import NetworkMenu from './NetworkMenu';
6 | import PasscodeView from './PasscodeView';
7 | import PopupTitle from './PopupTitle';
8 | import TitleBar from './TitleBar';
9 | import TouchIDView from './TouchIDView';
10 | import Validation from './Validation';
11 |
12 | export { Logo, NavBar, PopupTitle, Image, Validation, PasscodeView, TouchIDView, NetworkMenu, TitleBar, Copy };
13 |
--------------------------------------------------------------------------------
/src/ui/misc/Anime.ts:
--------------------------------------------------------------------------------
1 | import anime from 'animejs';
2 |
3 | export function vibrate(targets: string, completion?: () => void) {
4 | anime({
5 | targets,
6 | translateX: [0, '-9px', 0, '9px', 0],
7 | duration: 200,
8 | direction: 'alternate',
9 | loop: 2,
10 | easing: 'easeOutQuad',
11 | complete: completion,
12 | });
13 | }
14 |
--------------------------------------------------------------------------------
/src/ui/misc/Formatter.ts:
--------------------------------------------------------------------------------
1 | import numeral from 'numeral';
2 |
3 | export function formatNum(value: number, symbol = '$') {
4 | const formatted = numeral(value || 0).format('0,0.00');
5 | return `${symbol} ${formatted === 'NaN' ? '0.00' : formatted}`.trim();
6 | }
7 |
8 | export function formatAddress(value: string, headLength = 10, tailLength = 8) {
9 | return value?.length > headLength + tailLength
10 | ? `${value.substring(0, headLength)}......${value.substring(value.length - tailLength)}`
11 | : value;
12 | }
13 |
14 | export function formatValue(value: string | number) {
15 | return `${value}`.substring(0, `${value}`.indexOf('.') + 8);
16 | }
17 |
--------------------------------------------------------------------------------
/src/ui/pages/app/Transaction.css:
--------------------------------------------------------------------------------
1 | .page.pending-tx {
2 | display: grid;
3 | grid-template-rows: auto 1fr auto;
4 | }
5 |
6 | .page.pending-tx > .actions {
7 | display: grid;
8 | grid-template-columns: 1fr 1fr;
9 | column-gap: 8px;
10 | }
11 |
12 | .page.pending-tx > .actions button {
13 | display: flex;
14 | align-items: center;
15 | justify-content: center;
16 | }
17 |
18 | .page.pending-tx > .actions button > span {
19 | display: inline-block;
20 | margin: 0 4px;
21 | }
22 |
--------------------------------------------------------------------------------
/src/ui/pages/app/components/ConnectedAppsIndicator.css:
--------------------------------------------------------------------------------
1 | .connectedapps-indicator {
2 | display: flex;
3 | align-items: center;
4 | font-size: 12px;
5 | }
6 |
7 | .connectedapps-indicator > span.count {
8 | font-weight: 500;
9 | margin-right: 5px;
10 | }
11 |
12 | .connectedapps-indicator > svg {
13 | margin: 0;
14 | margin-right: 1px;
15 | }
16 |
17 | #root.win32 .connectedapps-indicator > svg {
18 | margin-top: 1px;
19 | }
--------------------------------------------------------------------------------
/src/ui/pages/app/components/ConnectedAppsIndicator.tsx:
--------------------------------------------------------------------------------
1 | import './ConnectedAppsIndicator.css';
2 |
3 | import Feather from 'feather-icons-react';
4 | import React from 'react';
5 | import { observer } from 'mobx-react-lite';
6 |
7 | export default observer(({ count }: { count: number }) => {
8 | return (
9 | {t('Authenticate with Touch ID')}
15 |
16 | 
onAuth()} />
17 |
18 |
10 | {count}
11 |
13 | );
14 | });
15 |
--------------------------------------------------------------------------------
/src/ui/pages/app/components/DisplayCurrency.css:
--------------------------------------------------------------------------------
1 | .display-currency {
2 | /* display: grid; */
3 | position: relative;
4 | display: flex;
5 | grid-template-columns: auto 1fr;
6 | align-items: center;
7 | font-size: 14px;
8 | column-gap: 6px;
9 | line-height: 1rem;
10 | }
11 |
12 | .display-currency > span {
13 | margin-bottom: -2px;
14 | }
15 |
16 | .display-currency.mini {
17 | font-size: 12px;
18 | line-height: 12px;
19 | }
20 |
21 | .display-currency.mini > span {
22 | margin-bottom: 0px;
23 | }
24 |
25 | .display-currency > img {
26 | width: 14px;
27 | height: 14px;
28 | }
29 |
30 | .display-currency.mini > img {
31 | width: 12px;
32 | height: 12px;
33 | }
34 |
--------------------------------------------------------------------------------
/src/ui/pages/app/components/DisplayCurrency.tsx:
--------------------------------------------------------------------------------
1 | import './DisplayCurrency.css';
2 |
3 | import { FlagIcons } from '../../../misc/Icons';
4 | import React from 'react';
5 |
6 | export default ({ flag, label, mini }: { flag?: string; label?: string; mini?: boolean }) => {
7 | return (
8 |
9 | })
10 | {label ?? flag?.toUpperCase()}
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/src/ui/pages/app/components/PendingTxIndicator.css:
--------------------------------------------------------------------------------
1 | .pendingtx-indicator {
2 | display: flex;
3 | align-items: center;
4 | font-size: 12px;
5 | line-height: 12px;
6 | }
7 |
8 | .pendingtx-indicator > span.count {
9 | font-weight: 500;
10 | margin-right: 5px;
11 | }
12 |
13 | .pendingtx-indicator > svg {
14 | margin: 0;
15 | margin-top: -1px;
16 | margin-right: 1px;
17 | }
18 |
19 | #root.win32 .pendingtx-indicator > svg {
20 | margin-top: 1px;
21 | }
--------------------------------------------------------------------------------
/src/ui/pages/app/components/WalletConnectIndicator.css:
--------------------------------------------------------------------------------
1 | .walletconnect-indicator {
2 | display: flex;
3 | align-items: center;
4 | }
5 |
6 | .walletconnect-indicator.connecting {
7 | animation: connecting;
8 | animation-iteration-count: infinite;
9 | animation-duration: 1s;
10 | animation-timing-function: ease-in-out;
11 | }
12 |
13 | #root.win32 .walletconnect-indicator > svg {
14 | margin-top: 1px;
15 | }
16 |
17 | @keyframes connecting {
18 | 0% {
19 | opacity: 0;
20 | }
21 | 50% {
22 | opacity: 1;
23 | }
24 | 100% {
25 | opacity: 0;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/ui/pages/app/components/WalletConnectIndicator.tsx:
--------------------------------------------------------------------------------
1 | import './WalletConnectIndicator.css';
2 |
3 | import Feather from 'feather-icons-react';
4 | import React from 'react';
5 | import { observer } from 'mobx-react-lite';
6 |
7 | export default observer(({ connecting }: { connecting?: boolean }) => {
8 | return (
9 |
10 |
12 | );
13 | });
14 |
--------------------------------------------------------------------------------
/src/ui/pages/login/Blank.css:
--------------------------------------------------------------------------------
1 | .page.blank {
2 | display: flex;
3 | flex-direction: column;
4 | justify-content: center;
5 | align-items: center;
6 | }
7 |
8 | .page.blank > img.logo {
9 | width: 96px;
10 | }
11 |
12 | .page.blank > .slogan {
13 | font-size: 10px;
14 | margin-top: -16px;
15 | opacity: 0.5;
16 | }
17 |
--------------------------------------------------------------------------------
/src/ui/pages/login/Blank.tsx:
--------------------------------------------------------------------------------
1 | import './Blank.css';
2 |
3 | import Logo from '../../components/Logo';
4 | import React from 'react';
5 |
6 | export default () => {
7 | return (
8 |
9 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/src/ui/pages/login/SetupPasscode.css:
--------------------------------------------------------------------------------
1 | .page.setupPw {
2 | display: grid;
3 | grid-template-rows: auto 1fr auto;
4 | }
5 |
6 | .page.setupPw > div.password {
7 | display: flex;
8 | flex-direction: column;
9 | padding-top: 25vh;
10 | align-items: center;
11 | }
12 |
13 | .page.setupPw > div.password > p {
14 | font-size: 15px;
15 | color: var(--font-color-title);
16 | }
17 |
18 | .page.setupPw > div.password > p:last-child {
19 | font-size: 12px;
20 | }
21 |
22 | .page.setupPw > div.password > div {
23 | margin-right: 2px;
24 | }
25 |
--------------------------------------------------------------------------------
/src/ui/pages/login/index.ts:
--------------------------------------------------------------------------------
1 | import About from './About';
2 | import Authentication from './Authentication';
3 | import Blank from './Blank';
4 | import Generate from './GenerateMnemonic';
5 | import Import from './ImportMnemonic';
6 | import SetupPasscode from './SetupPasscode';
7 | import Welcome from './Welcome';
8 |
9 | export { Welcome, Generate, Import, Blank, SetupPasscode, Authentication, About };
10 |
--------------------------------------------------------------------------------
/src/ui/pages/popup/Auth.css:
--------------------------------------------------------------------------------
1 | .page.auth {
2 | display: grid;
3 | grid-template-rows: auto 1fr;
4 | }
5 |
--------------------------------------------------------------------------------
/src/ui/pages/popup/ConnectingDApp.tsx:
--------------------------------------------------------------------------------
1 | import './ConnectingDApp.css';
2 |
3 | import Feather from 'feather-icons-react';
4 | import React from 'react';
5 | import appicon from '../../../assets/icons/app/AppIcon.svg';
6 | import wc from '../../../assets/icons/app/walletconnect-logo.svg';
7 |
8 | export default () => {
9 | return (
10 |
11 | A Secure Wallet for Web3 Era
12 |
13 |
11 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/src/ui/pages/popup/MessageBox.css:
--------------------------------------------------------------------------------
1 | .page.messagebox {
2 | display: grid;
3 | grid-template-rows: auto 1fr auto;
4 | }
5 |
6 | .page.messagebox > .content {
7 | padding: 10px 0;
8 | box-sizing: border-box;
9 | font-size: 13.5px;
10 | line-height: 19px;
11 | font-family: -apple-system, BlinkMacSystemFont, 'Microsoft Yahei', 'Segoe UI', Arial, sans-serif;
12 | color: var(--font-color-title);
13 | }
14 |
15 | .page.messagebox > .actions {
16 | display: grid;
17 | grid-template-columns: 1fr 1fr;
18 | column-gap: 8px;
19 | z-index: 2;
20 | }
21 |
--------------------------------------------------------------------------------
/src/ui/pages/popup/Unsupported.css:
--------------------------------------------------------------------------------
1 | .page.unsupported {
2 | display: grid;
3 | grid-template-rows: auto 1fr auto;
4 | }
5 |
6 | .page.unsupported .content {
7 | display: flex;
8 | flex-direction: column;
9 | justify-content: center;
10 | align-items: center;
11 | gap: 12px;
12 | color: var(--font-color-title);
13 | }
14 |
15 | .page.unsupported .content img {
16 | width: 64px;
17 | }
18 |
--------------------------------------------------------------------------------
/src/ui/pages/popup/confirms/AuthView.css:
--------------------------------------------------------------------------------
1 | .auth {
2 | width: 100%;
3 | height: 100%;
4 | display: grid;
5 | grid-template-rows: 1fr auto;
6 | }
7 |
8 | .auth > .panel {
9 | display: flex;
10 | align-items: center;
11 | justify-content: center;
12 | }
13 |
--------------------------------------------------------------------------------
/src/ui/pages/popup/confirms/SignView.css:
--------------------------------------------------------------------------------
1 | .sign-msg {
2 | overflow: hidden;
3 | overflow-y: auto;
4 | margin-bottom: 8px;
5 | margin-top: -12px;
6 | padding-top: 8px;
7 | }
8 |
9 | .sign-msg.json {
10 | margin-top: -10px;
11 | padding-top: 2px;
12 | overflow-x: auto;
13 | }
14 |
15 | /* .sign-msg.json::-webkit-scrollbar {
16 | background-color: transparent;
17 | width: 0;
18 | height: 0;
19 | position: absolute;
20 | } */
21 |
22 | .sign-msg > pre {
23 | word-wrap: break-word;
24 | text-overflow: ellipsis;
25 | white-space: pre-line;
26 | font-size: 12.5px;
27 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
28 | user-select: text;
29 | margin: 0 -12px;
30 | padding: 0 12px;
31 | -webkit-app-region: no-drag;
32 | }
33 |
--------------------------------------------------------------------------------
/src/ui/pages/popup/index.ts:
--------------------------------------------------------------------------------
1 | import Auth from './Auth';
2 | import ConfirmTx from './ConfirmTx';
3 | import ConnectDapp from './ConnectDapp';
4 | import ConnectingDApp from './ConnectingDApp';
5 | import MessageBox from './MessageBox';
6 | import QRScanner from './QRScanner';
7 | import Unsupported from './Unsupported';
8 |
9 | export { ConfirmTx, QRScanner, ConnectDapp, Auth, MessageBox, ConnectingDApp, Unsupported };
10 |
--------------------------------------------------------------------------------
/src/ui/pages/security/Reset.css:
--------------------------------------------------------------------------------
1 | .page.reset {
2 | display: grid;
3 | grid-template-rows: auto 1fr auto;
4 | }
5 |
6 | .page.reset > .content {
7 | display: flex;
8 | justify-content: center;
9 | flex-direction: column;
10 | align-items: center;
11 | color: var(--font-color-title);
12 | text-align: center;
13 | font-size: 14px;
14 | line-height: 24px;
15 | }
16 |
17 | .page.reset > button {
18 | border-color: red;
19 | background-color: red;
20 | color: white;
21 | }
22 |
23 | .page.reset > button:hover {
24 | background-color: firebrick;
25 | border-color: firebrick;
26 | }
27 |
--------------------------------------------------------------------------------
/src/ui/pages/security/index.ts:
--------------------------------------------------------------------------------
1 | import BackupMnemonic from './BackupMnemonic';
2 | import Reset from './Reset';
3 |
4 | export { BackupMnemonic, Reset };
5 |
--------------------------------------------------------------------------------
/src/ui/viewmodels/models/NFT.ts:
--------------------------------------------------------------------------------
1 | import { BigNumber } from '@ethersproject/bignumber';
2 |
3 | export class NFT {
4 | name: string;
5 | symbol?: string;
6 | tokenURI?: string;
7 | tokenId: BigNumber;
8 | description?: string;
9 | image_url?: string;
10 |
11 | contract: string;
12 | contractType: 'standard' | 'Rarible';
13 | }
14 |
--------------------------------------------------------------------------------
/src/ui/viewmodels/popups/MessageBoxVM.ts:
--------------------------------------------------------------------------------
1 | import Messages from '../../../common/Messages';
2 | import ipc from '../../bridges/IPC';
3 |
4 | export class MessageBoxVM {
5 | icon?: string;
6 | title?: string;
7 | message?: string;
8 | reqid: string;
9 |
10 | constructor(payload: { icon: string; title: string; message: string; reqid: string }) {
11 | this.icon = payload.icon;
12 | this.title = payload.title;
13 | this.message = payload.message;
14 | this.reqid = payload.reqid;
15 | }
16 |
17 | approve() {
18 | ipc.invokeSecure(Messages.returnMsgBoxResult(this.reqid), { approved: true });
19 | }
20 |
21 | reject() {
22 | ipc.invokeSecure(Messages.returnMsgBoxResult(this.reqid), { approved: false });
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/ui/viewmodels/wallet/HistoryTxsVM.ts:
--------------------------------------------------------------------------------
1 | import { makeAutoObservable, runInAction } from 'mobx';
2 |
3 | import { ITransaction } from '../../../backend/models/Transaction';
4 | import Messages from '../../../common/Messages';
5 | import ipc from '../../bridges/IPC';
6 |
7 | export class HistoryTxsVM {
8 | txs: ITransaction[] = [];
9 | selectedTx: ITransaction = undefined;
10 |
11 | constructor() {
12 | makeAutoObservable(this);
13 | }
14 |
15 | async fetchTxs() {
16 | const txs = await ipc.invoke
12 | 
13 | 
17 |
18 |
14 |
16 |