+
+ );
+}
+
+export default memo(withGlobal((global) => {
+ return {
+ isGuest: !selectHasSession(global),
+ };
+})(App));
diff --git a/src/components/auth/Auth.module.scss b/src/components/auth/Auth.module.scss
new file mode 100644
index 00000000..ab130db3
--- /dev/null
+++ b/src/components/auth/Auth.module.scss
@@ -0,0 +1,296 @@
+@import '../../styles/variables';
+
+.transitionContainer {
+ overflow: hidden;
+
+ max-width: 25rem;
+ margin: 0 auto;
+}
+
+.container {
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ max-width: 25rem;
+ height: 100%;
+ max-height: 100%;
+ margin: 0 auto;
+ padding: 0 1rem 1rem;
+
+ &_scrollable {
+ justify-content: unset;
+ }
+
+ @supports (padding-bottom: env(safe-area-inset-bottom)) {
+ padding-bottom: calc(1rem + env(safe-area-inset-bottom));
+ }
+}
+
+.logo {
+ display: block !important;
+
+ width: 12.5rem;
+ height: 12.5rem;
+ margin: 4rem 0 0 0;
+
+ transition: opacity 1s ease, transform 0.35s ease-out !important;
+
+ &:global(:not(.open)) {
+ transform: translateY(-0.75rem);
+ }
+}
+
+.appName {
+ margin: 2rem 0 1.875rem;
+}
+
+.title {
+ margin: 1.375rem 0 1.875rem;
+
+ &_afterSmallSticker {
+ margin: 2rem 0 1.25rem;
+ }
+}
+
+.title, .appName {
+ font-size: 1.6875rem;
+ font-weight: 800;
+ line-height: 1;
+ color: var(--color-black);
+}
+
+.info {
+ width: 100%;
+
+ color: var(--color-gray-1);
+ text-align: center;
+
+ &_push {
+ margin-top: 3rem;
+ }
+
+ &_pull {
+ margin-bottom: 1.5rem;
+ }
+
+ &__space {
+ margin-bottom: 1.25rem;
+ }
+}
+
+.counter {
+ position: relative;
+ z-index: 2;
+
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ width: 14.5rem;
+ height: 6.5rem;
+ margin-top: 3rem;
+
+ color: var(--color-blue);
+
+ background: linear-gradient(to top, var(--color-background-first), var(--color-background-first)),
+ linear-gradient(to top, #0088cc99, #0088cc1a 50%, #0088cc00 70%) no-repeat 50% 50%;
+ background-clip: content-box, border-box;
+ background-origin: border-box;
+ border: 0.1875rem solid transparent;
+ border-radius: var(--border-radius-default);
+
+ @media (prefers-color-scheme: dark) {
+ background: linear-gradient(to top, var(--color-background-first), var(--color-background-first)),
+ linear-gradient(to top, #469cec, #469cec3d 50%, #469cec00 90%) no-repeat 50% 50%;
+ background-clip: content-box, border-box;
+ background-origin: border-box;
+ }
+}
+
+.counterTitle {
+ margin: 1rem 0 0;
+
+ font-size: 1.0625rem;
+ font-weight: 600;
+}
+
+.counterDigit {
+ position: absolute;
+ top: 3rem;
+
+ font-size: 2.25rem;
+ font-weight: 800;
+ line-height: 2.75rem;
+ color: var(--color-blue);
+
+ opacity: 0.8 !important;
+
+ transition: opacity 0.5s ease-out, transform 0.5s ease-out !important;
+
+ &:global(.open) {
+ transform: scale(2.3);
+
+ opacity: 0 !important;
+ }
+
+ @media (prefers-color-scheme: dark) {
+ color: var(--color-white);
+ }
+}
+
+.small {
+ max-width: 20rem;
+ margin: 0 auto 1.25rem;
+
+ font-size: 0.9375rem;
+ font-weight: 400;
+}
+
+.sticker {
+ margin-top: 3.375rem;
+}
+
+.modalSticker {
+ margin: -0.375rem auto 1.25rem;
+}
+
+.form {
+ width: 100%;
+ margin-top: 1.75rem;
+}
+
+.checkMnemonicInput {
+ margin-bottom: 1rem;
+}
+
+.errors {
+ width: 100%;
+ padding: 0 0.5rem;
+
+ font-size: 0.9375rem;
+ font-weight: 600;
+ color: var(--color-gray-1);
+}
+
+.passwordRules {
+ width: 100%;
+ padding: 0 0.5rem;
+
+ font-size: 0.9375rem;
+ color: var(--color-gray-1);
+}
+
+.passwordRule {
+ font-weight: 600;
+ color: var(--color-blue);
+
+ transition: color 150ms;
+}
+
+.valid {
+ color: var(--color-green);
+}
+
+.invalid {
+ color: var(--color-red);
+}
+
+.error {
+ margin-top: 0.5rem;
+
+ font-size: 0.9375rem;
+ font-weight: 600;
+ color: var(--color-red);
+ text-align: center;
+}
+
+.buttons {
+ width: 100%;
+ margin-top: auto;
+ padding-top: 1rem;
+
+ &__inner {
+ display: flex;
+ gap: 1rem;
+ }
+}
+
+.btn {
+ max-width: 66%;
+ margin: 0 auto;
+
+ &_push {
+ margin-top: 0.5rem;
+ }
+
+ &_text {
+ margin: 1.25rem auto 0.75rem;
+
+ font-weight: 600;
+ white-space: nowrap;
+ }
+}
+
+.modalDialog {
+ height: 35rem;
+
+ font-weight: 400;
+}
+
+.words {
+ counter-reset: li;
+
+ column-count: 2;
+ column-gap: 3rem;
+
+ min-width: 15rem;
+ margin: 0 auto;
+ padding: 0;
+
+ font-size: 1.0625rem;
+ list-style: none;
+}
+
+.word {
+ counter-increment: li;
+
+ margin-bottom: 0.25rem;
+
+ font-weight: 600;
+ color: var(--color-blue);
+
+ &::before {
+ content: counter(li) '.';
+
+ display: inline-block;
+
+ margin-right: 0.25rem;
+
+ font-weight: 400;
+ color: var(--color-gray-2);
+ }
+
+ &:nth-child(12) {
+ break-after: column;
+ }
+}
+
+.importingContent {
+ display: grid;
+ grid-auto-flow: column;
+ grid-template: repeat(12, 1fr) / repeat(2, 1fr);
+ gap: 1rem;
+}
+
+.footerError {
+ margin: 0.125rem 0 1rem;
+
+ font-size: 0.9375rem;
+ font-weight: 600;
+ color: var(--color-red);
+ text-align: center;
+}
diff --git a/src/components/auth/Auth.tsx b/src/components/auth/Auth.tsx
new file mode 100644
index 00000000..7988f101
--- /dev/null
+++ b/src/components/auth/Auth.tsx
@@ -0,0 +1,72 @@
+import React, { memo, useCallback, useState } from '../../lib/teact/teact';
+import { AuthState, GlobalState } from '../../global/types';
+
+import { withGlobal } from '../../global';
+import { pick } from '../../util/iteratees';
+import useCurrentOrPrev from '../../hooks/useCurrentOrPrev';
+
+import Transition from '../ui/Transition';
+import AuthStart from './AuthStart';
+import AuthCreatingWallet from './AuthCreatingWallet';
+import AuthCreatePassword from './AuthCreatePassword';
+import AuthImportMnemonic from './AuthImportMnemonic';
+import AuthCreateBackup from './AuthCreateBackup';
+
+import styles from './Auth.module.scss';
+
+type StateProps = Pick
+
+ {(isActive: boolean, isFrom: boolean, currentKey: number) => (
+ currentKey === 0 ?
+
+
+
+
+
+ Create Backup
+
+
+
+ This is a secure wallet
+
and is only controlled by you.
+
+ And with great power comes great responsibility. +
++ You need to manually back up secret keys in case you forget + your password or lose access to this device. +
+
+
+
+
+
+ Passwords must be equal.
+
+ );
+ }
+
+ const {
+ invalidLength,
+ noUpperCase,
+ noLowerCase,
+ noNumber,
+ noSpecialChar,
+ } = validation;
+
+ return (
+
+ Password must contain
+ at least 8 characters,
+ one small letter,
+ one capital letter,
+ one digit,
+ and one special character.
+
+ );
+ }
+
+ return (
+
+ );
+};
+
+function getValidationRuleClass(shouldRenderError: boolean, ruleHasError: boolean) {
+ return buildClassName(
+ styles.passwordRule,
+ !ruleHasError ? styles.valid : shouldRenderError ? styles.invalid : undefined,
+ );
+}
+
+export default memo(AuthCreatePassword);
diff --git a/src/components/auth/AuthCreatingWallet.tsx b/src/components/auth/AuthCreatingWallet.tsx
new file mode 100644
index 00000000..c27671a3
--- /dev/null
+++ b/src/components/auth/AuthCreatingWallet.tsx
@@ -0,0 +1,53 @@
+import React, { memo } from '../../lib/teact/teact';
+
+import { ANIMATED_STICKERS_PATHS } from '../ui/helpers/animatedAssets';
+import buildClassName from '../../util/buildClassName';
+import useFlag from '../../hooks/useFlag';
+import useTimeout from '../../hooks/useTimeout';
+import useMediaTransition from '../../hooks/useMediaTransition';
+
+import AnimatedIcon from '../ui/AnimatedIcon';
+
+import styles from './Auth.module.scss';
+
+interface OwnProps {
+ isActive?: boolean;
+}
+
+const START_DELAY = 700;
+const INTERVAL = 1000;
+
+const AuthCreatingWallet = ({ isActive }: OwnProps) => {
+ const [one, markOne] = useFlag();
+ const [two, markTwo] = useFlag();
+ const [three, markThree] = useFlag();
+
+ useTimeout(markOne, isActive ? START_DELAY : undefined);
+ useTimeout(markTwo, isActive ? START_DELAY + INTERVAL : undefined);
+ useTimeout(markThree, isActive ? START_DELAY + INTERVAL * 2 : undefined);
+
+ const oneClassNames = useMediaTransition(one);
+ const twoClassNames = useMediaTransition(two);
+ const threeClassNames = useMediaTransition(three);
+
+ return (
+
+
+ );
+};
+
+export default memo(AuthCreatingWallet);
diff --git a/src/components/auth/AuthImportMnemonic.tsx b/src/components/auth/AuthImportMnemonic.tsx
new file mode 100644
index 00000000..843d4451
--- /dev/null
+++ b/src/components/auth/AuthImportMnemonic.tsx
@@ -0,0 +1,113 @@
+import React, {
+ memo, useCallback, useMemo, useState,
+} from '../../lib/teact/teact';
+
+import { getActions, withGlobal } from '../../global';
+
+import { ANIMATED_STICKER_SMALL_SIZE_PX, MNEMONIC_COUNT } from '../../config';
+import { ANIMATED_STICKERS_PATHS } from '../ui/helpers/animatedAssets';
+import buildClassName from '../../util/buildClassName';
+
+import AnimatedIcon from '../ui/AnimatedIcon';
+import InputMnemonic from '../ui/InputMnemonic';
+import Button from '../ui/Button';
+
+import styles from './Auth.module.scss';
+
+interface OwnProps {
+ isActive?: boolean;
+}
+
+type StateProps = {
+ error?: string;
+};
+
+const MNEMONIC_INPUTS = [...Array(MNEMONIC_COUNT)].map((_, index) => ({
+ id: index,
+ label: `${index + 1}`,
+}));
+
+const AuthImportMnemonic = ({ isActive, error }: OwnProps & StateProps) => {
+ const { afterImportMnemonic, restartAuth } = getActions();
+ const [mnemonic, setMnemonic] = useStateCreating Wallet...
+
+
+
+ On the count of three...
+ 1 + 2 + 3 +
+
+ );
+};
+
+export default memo(withGlobal{MNEMONIC_COUNT} Secret Words
+
+ You can restore access to your wallet by entering the {MNEMONIC_COUNT} secret words
+ that you wrote down when creating the wallet.
+
+
+
+
+
+ {error &&
+ {error}
}
+
+
+
+
+
+ 
+
+ );
+};
+
+export default memo(AuthStart);
diff --git a/src/components/auth/MnemonicCheck.tsx b/src/components/auth/MnemonicCheck.tsx
new file mode 100644
index 00000000..d94effe7
--- /dev/null
+++ b/src/components/auth/MnemonicCheck.tsx
@@ -0,0 +1,103 @@
+import { FormEvent } from 'react';
+import React, {
+ memo, useCallback, useEffect, useState,
+} from '../../lib/teact/teact';
+
+import { MNEMONIC_CHECK_COUNT } from '../../config';
+import buildClassName from '../../util/buildClassName';
+import { areSortedArraysEqual } from '../../util/iteratees';
+
+import ModalHeader from '../ui/ModalHeader';
+import Button from '../ui/Button';
+import InputMnemonic from '../ui/InputMnemonic';
+
+import styles from './Auth.module.scss';
+import modalStyles from '../ui/Modal.module.scss';
+
+type OwnProps = {
+ isActive?: boolean;
+ isInModal?: boolean;
+ mnemonic?: string[];
+ checkIndexes?: number[];
+ buttonLabel: string;
+ onSubmit: NoneToVoidFunction;
+ onCancel: NoneToVoidFunction;
+ onClose: NoneToVoidFunction;
+};
+
+function MnemonicCheck({
+ isActive, isInModal, mnemonic, checkIndexes, buttonLabel, onCancel, onSubmit, onClose,
+}: OwnProps) {
+ const [words, setWords] = useState{APP_NAME}
+
+ Securely store crypto
+
and make blockchain payments +
at the speed of light. +
+ and make blockchain payments +
at the speed of light. +
+
+
+
+
+
+ );
+}
+
+export default memo(MnemonicCheck);
diff --git a/src/components/auth/MnemonicList.tsx b/src/components/auth/MnemonicList.tsx
new file mode 100644
index 00000000..f19c31f7
--- /dev/null
+++ b/src/components/auth/MnemonicList.tsx
@@ -0,0 +1,44 @@
+import React, { memo } from '../../lib/teact/teact';
+
+import { MNEMONIC_COUNT } from '../../config';
+import buildClassName from '../../util/buildClassName';
+
+import ModalHeader from '../ui/ModalHeader';
+import Button from '../ui/Button';
+
+import styles from './Auth.module.scss';
+import modalStyles from '../ui/Modal.module.scss';
+
+type OwnProps = {
+ mnemonic?: string[];
+ onClose: NoneToVoidFunction;
+ onNext: NoneToVoidFunction;
+};
+
+function MnemonicList({
+ mnemonic, onNext, onClose,
+}: OwnProps) {
+ return (
+
+
+ + Let’s make sure your secrets words are recorded correctly. +
+ ++ Please enter the words {checkIndexes?.map((n) => n + 1)?.join(', ')} below. +
+ + + + {hasMnemonicError && ( +
+ The secret words you have entered do not
+ match the ones in the list. Please try again.
+
+ )}
+
+
+
+
+
+
+
+ );
+}
+
+export default memo(MnemonicList);
diff --git a/src/components/auth/SafetyRules.tsx b/src/components/auth/SafetyRules.tsx
new file mode 100644
index 00000000..9299f656
--- /dev/null
+++ b/src/components/auth/SafetyRules.tsx
@@ -0,0 +1,77 @@
+import React, { memo, useCallback, useState } from '../../lib/teact/teact';
+
+import { ANIMATED_STICKER_SMALL_SIZE_PX } from '../../config';
+import { ANIMATED_STICKERS_PATHS } from '../ui/helpers/animatedAssets';
+import buildClassName from '../../util/buildClassName';
+
+import ModalHeader from '../ui/ModalHeader';
+import Checkbox from '../ui/Checkbox';
+import Button from '../ui/Button';
+import AnimatedIcon from '../ui/AnimatedIcon';
+
+import modalStyles from '../ui/Modal.module.scss';
+import styles from './Auth.module.scss';
+
+type OwnProps = {
+ isActive?: boolean;
+ onSubmit: NoneToVoidFunction;
+ onClose: NoneToVoidFunction;
+};
+
+function SafetyRules({ isActive, onSubmit, onClose }: OwnProps) {
+ const [writedownAccepted, setWritedownAccepted] = useState(false);
+ const [openWalletAccepted, setOpenWalletAccepted] = useState(false);
+ const [canBeStolenAccepted, setCanBeStolenAccepted] = useState(false);
+ const canSubmit = writedownAccepted && openWalletAccepted && canBeStolenAccepted;
+
+ const handleSubmit = useCallback(() => {
+ if (!canSubmit) {
+ return;
+ }
+
+ onSubmit();
+ }, [canSubmit, onSubmit]);
+
+ return (
+
+
+
+ Write down these words
+
in the correct order and store them
+
in a secret place.
+
-
+ {mnemonic?.map((word) => (
+
- {word} + ))} +
+
+
+
+
+ );
+}
+
+export default memo(SafetyRules);
diff --git a/src/components/main/Activity.module.scss b/src/components/main/Activity.module.scss
new file mode 100644
index 00000000..76807182
--- /dev/null
+++ b/src/components/main/Activity.module.scss
@@ -0,0 +1,50 @@
+.emptyList {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ height: 100%;
+ padding-top: 2rem;
+}
+
+.emptyListText {
+ margin-top: 1rem;
+
+ font-size: 1.0625rem;
+ font-weight: 700;
+}
+
+.emptyListLoading {
+ padding-top: 8rem;
+}
+
+.itemLoading {
+ display: flex;
+ justify-content: center;
+
+ padding: 0.75rem 1rem;
+}
+
+.group {
+ padding-bottom: 0.25rem;
+
+ text-align: center;
+
+ &:first-of-type {
+ padding-top: 0.75rem;
+ }
+}
+
+.date {
+ width: max-content;
+ margin: 0 auto 0.25rem;
+ padding: 0.25rem 0.75rem;
+
+ font-size: 0.75rem;
+ font-weight: 700;
+ line-height: 0.75rem;
+ color: var(--color-activity-gray-text);
+
+ background-color: var(--color-activity-gray-10);
+ border-radius: var(--border-radius-small);
+}
diff --git a/src/components/main/Activity.tsx b/src/components/main/Activity.tsx
new file mode 100644
index 00000000..f27d2d73
--- /dev/null
+++ b/src/components/main/Activity.tsx
@@ -0,0 +1,153 @@
+import React, {
+ memo, useCallback, useEffect, useMemo,
+} from '../../lib/teact/teact';
+import { withGlobal, getActions } from '../../global';
+
+import { ApiToken, ApiTransaction } from '../../api/types';
+
+import { ANIMATED_STICKERS_PATHS } from '../ui/helpers/animatedAssets';
+import buildClassName from '../../util/buildClassName';
+import { formatHumanDay, getDayStartAt } from '../../util/dateFormat';
+import useInfinityLoader from '../../hooks/useInfinityLoader';
+
+import Transaction from './Transaction';
+import Loading from '../ui/Loading';
+import AnimatedIcon from '../ui/AnimatedIcon';
+
+import styles from './Activity.module.scss';
+
+interface OwnProps {
+ isActive?: boolean;
+}
+
+type StateProps = {
+ slug?: string;
+ isLoading?: boolean;
+ byTxId?: Record
+
+ On the next screen you will see the secret words.
+ Write them down in the correct order and store in a secure place.
+
+
+
+ They allow to open your wallet if you lose your password or access to this device.
+
+
+
+ If anybody else sees these words your funds may be stolen. Look around!
+
+
+
+
+
+
+
+
+ ));
+ }
+
+ if (!transactions) {
+ return (
+
+ {formatHumanDay(group.datetime)}
+
+ {group.transactions.map((transaction, transactionIdx) => {
+ const isLastTransaction = transactionGroups.length === groupIdx + 1
+ && group.transactions.length === transactionIdx + 1;
+
+ return (
+
+
+ );
+ }
+
+ return renderTransactionGroups(transactions);
+}
+
+export default memo(withGlobalNo activity
+
+ {!tokens &&
+ );
+}
+
+export default memo(withGlobal
+
+ );
+}
diff --git a/src/components/main/BackupModal.module.scss b/src/components/main/BackupModal.module.scss
new file mode 100644
index 00000000..ed1797f0
--- /dev/null
+++ b/src/components/main/BackupModal.module.scss
@@ -0,0 +1,7 @@
+.modalDialog {
+ height: 33rem;
+
+ @supports (height: env(safe-area-inset-bottom)) {
+ height: calc(33rem + env(safe-area-inset-bottom));
+ }
+}
diff --git a/src/components/main/BackupModal.tsx b/src/components/main/BackupModal.tsx
new file mode 100644
index 00000000..4d4fb7bb
--- /dev/null
+++ b/src/components/main/BackupModal.tsx
@@ -0,0 +1,164 @@
+import React, {
+ memo, useCallback, useEffect, useState,
+} from '../../lib/teact/teact';
+import { getActions, withGlobal } from '../../global';
+
+import buildClassName from '../../util/buildClassName';
+import { selectMnemonicForCheck } from '../../global/actions/api/auth';
+
+import Modal from '../ui/Modal';
+import ModalHeader from '../ui/ModalHeader';
+import PasswordForm from '../ui/PasswordForm';
+import SafetyRules from '../auth/SafetyRules';
+import MnemonicList from '../auth/MnemonicList';
+import MnemonicCheck from '../auth/MnemonicCheck';
+import Transition from '../ui/Transition';
+
+import styles from './BackupModal.module.scss';
+import modalStyles from '../ui/Modal.module.scss';
+
+type OwnProps = {
+ isOpen: boolean;
+ onClose: () => void;
+};
+
+type StateProps = {
+ isLoading?: boolean;
+ mnemonic?: string[];
+ error?: string;
+};
+
+enum SLIDES {
+ confirm,
+ password,
+ mnemonic,
+ check,
+}
+
+function BackupModal({
+ isOpen, onClose, isLoading, mnemonic, error,
+}: OwnProps & StateProps) {
+ const { startBackupWallet, cleanBackupWalletError, closeBackupWallet } = getActions();
+ const [currentSlide, setCurrentSlide] = useState
+
+ You have just created a new wallet
++ You can now transfer your tokens from another wallet or exchange. +
+
+ Wallet is not backed up!
+
+ Back up now
+
+
+ );
+}
+
+export default memo(withGlobal
+
+ );
+ }
+
+ const { secondaryValue, primaryWholePart, primaryFractionPart } = values;
+
+ return (
+
+
+
+
+ );
+}
+
+function buildValues(tokens: UserToken[]) {
+ const primaryValue = tokens.reduce((acc, token) => acc + token.amount * token.price, 0);
+ const [primaryWholePart, primaryFractionPart] = formatInteger(primaryValue).split('.');
+ const secondaryFactor = tokens.find((token) => token.symbol === CARD_SECONDARY_VALUE_SYMBOL)!.price;
+ const secondaryValue = primaryValue / secondaryFactor;
+
+ return {
+ secondaryValue, primaryWholePart, primaryFractionPart,
+ };
+}
+
+export default memo(withGlobal((global): StateProps => {
+ return {
+ address: global.addresses?.byAccountId['0']!,
+ tokens: selectAllTokens(global),
+ };
+})(Card));
diff --git a/src/components/main/Dialogs.module.scss b/src/components/main/Dialogs.module.scss
new file mode 100644
index 00000000..bb913a0e
--- /dev/null
+++ b/src/components/main/Dialogs.module.scss
@@ -0,0 +1,13 @@
+.dialogs {
+ position: fixed;
+ z-index: var(--z-modal);
+ top: 0;
+ left: 0;
+
+ width: 100vw;
+ height: 100vh;
+}
+
+.content {
+ margin-bottom: 2rem;
+}
diff --git a/src/components/main/Dialogs.tsx b/src/components/main/Dialogs.tsx
new file mode 100644
index 00000000..b0cdd86f
--- /dev/null
+++ b/src/components/main/Dialogs.tsx
@@ -0,0 +1,58 @@
+import React, { FC, memo, useEffect } from '../../lib/teact/teact';
+import { getActions, withGlobal } from '../../global';
+
+import { pick } from '../../util/iteratees';
+import useFlag from '../../hooks/useFlag';
+
+import Modal from '../ui/Modal';
+import Button from '../ui/Button';
+
+import styles from './Dialogs.module.scss';
+import modalStyles from '../ui/Modal.module.scss';
+
+type StateProps = {
+ dialogs: string[];
+};
+
+const Dialogs: FC
+
+
+ {formatCurrencyExtended(secondaryValue, CARD_SECONDARY_VALUE_SYMBOL, true)}
+
+
+ {DEFAULT_PRICE_CURRENCY}
+ {primaryWholePart}
+ {primaryFractionPart && .{primaryFractionPart}}
+
+
+
+
+
+
+
+
+ {message}
+
+
+
+
+
+ {Boolean(dialogs.length) && renderDialog(dialogs[dialogs.length - 1])}
+
+ );
+};
+
+export default memo(withGlobal(
+ (global): StateProps => pick(global, ['dialogs']),
+)(Dialogs));
diff --git a/src/components/main/Header.module.scss b/src/components/main/Header.module.scss
new file mode 100644
index 00000000..fa9b4e29
--- /dev/null
+++ b/src/components/main/Header.module.scss
@@ -0,0 +1,85 @@
+.wrapper {
+ position: relative;
+
+ display: flex;
+
+ width: 100%;
+ margin: 0.5rem 0 1rem;
+
+ background-color: var(--color-background-first);
+ border-radius: var(--border-radius-default);
+ box-shadow: none;
+
+ transition: box-shadow 0.15s ease-in-out;
+}
+
+.icon {
+ align-self: center;
+
+ margin: 0 0.25rem 0 0.5rem;
+
+ font-size: 1.5rem;
+ color: var(--color-gray-4);
+}
+
+.button {
+ width: 1.75rem !important;
+ height: 1.75rem !important;
+ margin: 0.375rem;
+ padding: 0;
+
+ font-size: 1.5rem !important;
+ color: var(--color-gray-4) !important;
+
+ border-radius: var(--border-radius-small) !important;
+
+ &:hover,
+ &:focus {
+ color: var(--color-blue) !important;
+
+ background-color: transparent !important;
+ }
+}
+
+.search {
+ flex: 1 1 auto;
+
+ margin-right: 0.5rem;
+
+ // TODO Remove when implemented
+ opacity: 0.8 !important;
+}
+
+.menu {
+ margin-right: 0.5rem;
+}
+
+.menuSwitcher {
+ margin-left: auto !important;
+}
+
+.modalTitle {
+ font-weight: 700;
+ text-align: center;
+}
+
+.modalTitleLink {
+ display: block;
+
+ font-size: small;
+ font-weight: normal;
+}
+
+.modalText {
+ font-size: 0.9375rem;
+
+ &:last-of-type {
+ margin-bottom: 1.5rem;
+ }
+}
+
+.aboutLogo {
+ width: 10rem;
+ height: 10rem;
+ margin: 0.5rem auto 1.5rem;
+}
diff --git a/src/components/main/Header.tsx b/src/components/main/Header.tsx
new file mode 100644
index 00000000..be980525
--- /dev/null
+++ b/src/components/main/Header.tsx
@@ -0,0 +1,186 @@
+import type { FocusEvent } from 'react';
+import React, { memo, useCallback } from '../../lib/teact/teact';
+import { withGlobal, getActions } from '../../global';
+
+import {
+ APP_NAME, APP_VERSION, MNEMONIC_COUNT, PROXY, TELEGRAM_WEB_URL,
+} from '../../config';
+import { IS_EXTENSION } from '../../util/environment';
+import buildClassName from '../../util/buildClassName';
+import useFlag from '../../hooks/useFlag';
+
+import Button from '../ui/Button';
+import SearchBar from '../ui/SearchBar';
+import Menu from '../ui/Menu';
+import MenuItem from '../ui/MenuItem';
+import Modal from '../ui/Modal';
+import Switcher from '../ui/Switcher';
+
+import styles from './Header.module.scss';
+import modalStyles from '../ui/Modal.module.scss';
+import logoSrc from '../../assets/logo.svg';
+import useShowTransition from '../../hooks/useShowTransition';
+
+type OwnProps = {
+ onOpenBackupWallet: () => void;
+};
+
+type StateProps = {
+ isTonProxyEnabled?: boolean;
+ isTonMagicEnabled?: boolean;
+};
+
+function Header({
+ onOpenBackupWallet,
+ isTonProxyEnabled,
+ isTonMagicEnabled,
+}: OwnProps & StateProps) {
+ const {
+ toggleTonProxy,
+ toggleTonMagic,
+ signOut,
+ } = getActions();
+ const [isMenuOpened, openMenu, closeMenu] = useFlag(false);
+ const [isAboutOpened, openAbout, closeAbout] = useFlag(false);
+ const [isExitConfirmOpened, openExitConfirm, closeExitConfirm] = useFlag(false);
+ const {
+ transitionClassNames: telegramLinkClassNames,
+ shouldRender: isTelegramLinkRendered,
+ } = useShowTransition(IS_EXTENSION && isTonMagicEnabled);
+
+ // Remove when implemented
+ const handleFocus = useCallback((e: FocusEvent
+
+
+
+ {IS_EXTENSION && (
+
+ 
+
+ )}
+
+ );
+}
+
+export default memo(withGlobal+ This will disconnect the wallet from this app. You will be able to restore your + wallet using {MNEMONIC_COUNT} secret words - or import another wallet. +
++ Wallets are located in the decentralized TON Blockchain. If you want the wallet to + be deleted simply transfer all the TON from it and leave it empty. +
+
+
+
+
+ + {APP_NAME} {APP_VERSION} + + https://mytonwallet.org/ + +
++ Securely store crypto and make blockchain payments at the speed of light. +
+What is TON Magic?
++ TON Magic provides native Telegram integration by patching the official Telegram Web app. +
++ Turn it on to send and receive Toncoins from any Telegram user.{' '} + + More info and demo. + +
+
+
+
+
+
+ {renderCurrentTab}
+
+
+ );
+}
+
+export default memo(Main);
diff --git a/src/components/main/Nft.module.scss b/src/components/main/Nft.module.scss
new file mode 100644
index 00000000..045876d4
--- /dev/null
+++ b/src/components/main/Nft.module.scss
@@ -0,0 +1,121 @@
+.emptyList {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ height: 100%;
+ padding-top: 2rem;
+
+ color: var(--color-gray-1);
+}
+
+.emptyListText {
+ margin-top: 1rem;
+
+ font-size: 1.0625rem;
+ font-weight: 700;
+}
+
+.emptyListLoading {
+ padding-top: 8rem;
+}
+
+.list {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 0.5rem;
+
+ padding: 0.5rem;
+}
+
+.item {
+ padding-bottom: 0.125rem;
+
+ font-size: 0.9375rem;
+ font-weight: 600;
+ text-decoration: none;
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+
+ .image {
+ transform: scale(1.05);
+ }
+ }
+
+ &_onSale {
+ position: relative;
+
+ &::before {
+ content: '';
+
+ position: absolute;
+ z-index: 1;
+ top: -0.375rem;
+ right: 0.25rem;
+
+ width: 2.75rem;
+ height: 2.9375rem;
+
+ background: url("../../assets/sale.png") no-repeat;
+ background-size: contain;
+ }
+ }
+}
+
+.imageWrapper {
+ position: relative;
+
+ overflow: hidden;
+ display: block !important;
+
+ aspect-ratio: 1;
+ width: 100%;
+ max-width: 100%;
+ margin-bottom: 0.4375rem;
+
+ border-radius: 0.4375rem;
+
+ @supports not (aspect-ratio: 1) {
+ height: auto;
+ max-height: 100%;
+ }
+}
+
+.image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform-origin: center;
+
+ width: 100%;
+ height: 100%;
+
+ object-fit: cover;
+
+ transition: transform 300ms;
+}
+
+.infoWrapper {
+ padding: 0 0.25rem;
+
+ line-height: 1.0625rem;
+}
+
+.title {
+ font-weight: 700;
+ color: var(--color-black);
+ word-break: break-word;
+}
+
+.collection {
+ overflow: hidden;
+
+ padding: 0.125rem 0.25rem 0;
+
+ font-size: 0.75rem;
+ line-height: 1;
+ color: var(--color-gray-1);
+ text-overflow: ellipsis;
+}
diff --git a/src/components/main/Nfts.tsx b/src/components/main/Nfts.tsx
new file mode 100644
index 00000000..8cffe8e0
--- /dev/null
+++ b/src/components/main/Nfts.tsx
@@ -0,0 +1,84 @@
+import React, { memo, useEffect, useMemo } from '../../lib/teact/teact';
+import { getActions, withGlobal } from '../../global';
+
+import type { ApiNft } from '../../api/types';
+
+import { ANIMATED_STICKERS_PATHS } from '../ui/helpers/animatedAssets';
+import { shortenAddress } from '../../util/shortenAddress';
+import buildClassName from '../../util/buildClassName';
+
+import Loading from '../ui/Loading';
+import Image from '../ui/Image';
+import AnimatedIcon from '../ui/AnimatedIcon';
+
+import styles from './Nft.module.scss';
+
+interface OwnProps {
+ isActive?: boolean;
+}
+
+interface StateProps {
+ orderedAddresses?: string[];
+ byAddress?: Record
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ No NFTs
+
+ {nfts.map((nft) => (
+
+
+ );
+}
+export default memo(withGlobal
+ {nft.name || shortenAddress(nft.address, 4)}
+
+ {nft.collectionName}
+
+ ))}
+
+ {notifications.map(({ message, icon }) => (
+
+ );
+}
+
+export default memo(withGlobal(
+ (global): StateProps => pick(global, ['notifications']),
+)(Notifications));
diff --git a/src/components/main/Receive.module.scss b/src/components/main/Receive.module.scss
new file mode 100644
index 00000000..40c38038
--- /dev/null
+++ b/src/components/main/Receive.module.scss
@@ -0,0 +1,152 @@
+.modalDialog {
+ height: 43.5rem;
+
+ @supports (height: env(safe-area-inset-bottom)) {
+ height: calc(43.5rem + env(safe-area-inset-bottom));
+ }
+
+}
+
+.content {
+ padding: 0 1rem 1rem;
+
+ @supports (padding-bottom: env(safe-area-inset-bottom)) {
+ padding-bottom: max(env(safe-area-inset-bottom), 1rem);
+ }
+}
+
+.contentInvoice {
+ padding: 0.5rem 1rem 1rem;
+
+ @supports (padding-bottom: env(safe-area-inset-bottom)) {
+ padding-bottom: max(env(safe-area-inset-bottom), 1rem);
+ }
+}
+
+.contentQr {
+ margin-top: -0.1875rem;
+}
+
+.info {
+ font-size: 0.9375rem;
+ font-weight: 600;
+ color: var(--color-gray-1);
+ text-align: center;
+
+ &_push {
+ margin-bottom: 1.25rem;
+ }
+
+ &_small {
+ margin-top: 0.5625rem;
+ margin-bottom: 0.4375rem;
+
+ font-size: 0.875rem;
+ }
+}
+
+.qrCode {
+ position: relative;
+
+ overflow: hidden;
+
+ aspect-ratio: 1;
+ width: 100%;
+ max-width: 20.5rem;
+ max-height: 20.5rem;
+ margin: 0.5rem auto 0;
+
+ background-color: var(--color-white);
+ border-radius: var(--border-radius-default);
+
+ canvas {
+ position: absolute;
+ top: 0.5rem;
+ left: 0.5rem;
+
+ display: block;
+
+ width: calc(100% - 1rem);
+ height: calc(100% - 1rem);
+ }
+}
+
+.description {
+ margin: 1.5rem 0 0.25rem 0.5rem;
+
+ font-size: 0.8125rem;
+ font-weight: 700;
+ color: var(--color-gray-2);
+
+ &_forInvoice {
+ margin-top: 0.3125rem;
+ }
+}
+
+.copyButtonWrapper {
+ padding: 1rem 0.75rem;
+
+ font-size: 1rem;
+ font-weight: 600;
+ line-height: 1;
+ color: var(--color-black);
+ text-align: left;
+ word-break: break-all;
+
+ background: var(--color-background-first);
+ border-radius: var(--border-radius-default);
+}
+
+.copyButton {
+ cursor: pointer;
+
+ line-height: 1.25rem;
+ text-decoration: none !important;
+
+ &:active {
+ .iconCopy {
+ color: var(--color-gray-1) !important;
+ }
+ }
+
+ @media (hover: hover) {
+ &:focus,
+ &:hover {
+ .iconCopy {
+ color: var(--color-blue);
+ }
+ }
+ }
+}
+
+.iconCopy {
+ font-size: 1rem;
+ line-height: 1rem;
+ color: var(--color-gray-4);
+ vertical-align: -0.1875rem;
+
+ transition: color 150ms ease-in;
+
+ &:global(.icon-copy) {
+ margin-inline-start: 0.0625rem;
+ }
+}
+
+.buttons {
+ display: flex;
+ gap: 0.5rem;
+ justify-content: center;
+
+ margin-top: 1.5rem;
+}
+
+.qrButton {
+ width: auto !important;
+ min-width: 3rem !important;
+
+ font-size: 1.875rem !important;
+}
+
+.qrIcon {
+ margin-inline-end: -0.125rem;
+}
diff --git a/src/components/main/Receive.tsx b/src/components/main/Receive.tsx
new file mode 100644
index 00000000..b2d3bc37
--- /dev/null
+++ b/src/components/main/Receive.tsx
@@ -0,0 +1,262 @@
+import QrCodeStyling from 'qr-code-styling';
+import TonWeb from 'tonweb';
+import React, {
+ memo, useCallback, useEffect, useRef, useState,
+} from '../../lib/teact/teact';
+import { withGlobal } from '../../lib/teact/teactn';
+import { getActions } from '../../global';
+
+import { humanToBigStr } from '../../global/helpers';
+import { copyTextToClipboard } from '../../util/clipboard';
+import buildClassName from '../../util/buildClassName';
+import useFlag from '../../hooks/useFlag';
+import { shortenAddress } from '../../util/shortenAddress';
+
+import Modal from '../ui/Modal';
+import Button from '../ui/Button';
+import Input from '../ui/Input';
+import InputNumberRich from '../ui/InputNumberRich';
+
+import styles from './Receive.module.scss';
+import modalStyles from '../ui/Modal.module.scss';
+
+interface StateProps {
+ address?: string;
+}
+
+type OwnProps = {
+ isOpen: boolean;
+ onClose: () => void;
+};
+
+const QR_SIZE = 600;
+const QR_CODE = new QrCodeStyling({
+ width: QR_SIZE,
+ height: QR_SIZE,
+ image: './logo.svg',
+ margin: 0,
+ type: 'canvas',
+ dotsOptions: {
+ type: 'rounded',
+ },
+ cornersSquareOptions: {
+ type: 'extra-rounded',
+ },
+ imageOptions: {
+ imageSize: 0.4,
+ margin: 8,
+ crossOrigin: 'anonymous',
+ },
+ qrOptions: {
+ errorCorrectionLevel: 'M',
+ },
+});
+
+function Receive({
+ isOpen,
+ address,
+ onClose,
+}: StateProps & OwnProps) {
+ const { showNotification } = getActions();
+ // eslint-disable-next-line no-null/no-null
+ const qrCodeRef = useRef
+
+
+ You can share this address, show QR-code
+ or create invoice to receive TON +
+
+ + or create invoice to receive TON +
Your address
+
+
+ {address}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {address && shortenAddress(address)}
+ +
+
+
+
+
+
+ You can specify the amount and purpose of
+ the payment to save the sender some time +
+ + the payment to save the sender some time +
+ Share this URL to receive TON +
+
+
+ {invoiceUrl}
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ function renderPasswordForm(isActive: boolean) {
+ return (
+ <>
+ Data to sign
+
+ {dataHex}
+
+
+
+ Signing custom data is very dangerous.
+ Use only if you know what you are doing. +
+ + Use only if you know what you are doing. +
+
+
+
+
+
+
+ );
+ }
+ // eslint-disable-next-line consistent-return
+ function renderContent(isActive: boolean, isFrom: boolean, currentKey: number) {
+ switch (currentKey) {
+ case SLIDES.confirm:
+ return renderConfirm();
+
+ case SLIDES.password:
+ return renderPasswordForm(isActive);
+
+ case SLIDES.complete:
+ return renderComplete(isActive);
+ }
+ }
+
+ return (
+
+ Signing was confirmed!
+
+
+
+
+
+
+ {comment}
+
+ );
+ }
+
+ const iconFullClass = buildClassName(
+ styles.icon,
+ isIncoming && styles.icon_operationPositive,
+ isIncoming ? 'icon-receive-alt' : 'icon-send-alt',
+ );
+
+ return (
+
+ );
+}
+
+export default memo(Transaction);
diff --git a/src/components/main/TransactionModal.module.scss b/src/components/main/TransactionModal.module.scss
new file mode 100644
index 00000000..87f656c1
--- /dev/null
+++ b/src/components/main/TransactionModal.module.scss
@@ -0,0 +1,66 @@
+.sticker {
+ margin: -0.5rem auto 1.25rem;
+}
+
+.footer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ margin-top: 3rem;
+}
+
+.copyButtonWrapper {
+ margin-bottom: 1rem;
+}
+
+.button {
+ width: auto;
+ max-width: 70% !important;
+ padding: 0.5rem 1.5rem;
+
+ white-space: nowrap;
+}
+
+.amount {
+ &_operationPositive {
+ color: var(--color-green);
+ }
+
+ &_operationNegative {
+ color: var(--color-red);
+ }
+}
+
+.tonscan {
+ position: absolute;
+ top: 1rem;
+ left: 1rem;
+
+ width: 1.875rem !important;
+ height: 1.875rem !important;
+ padding: 0;
+
+ font-size: 1.5rem;
+ line-height: 1.875rem;
+ color: var(--color-gray-4);
+ text-align: center;
+ text-decoration: none;
+
+ border-radius: 50%;
+
+ transition: color 150ms;
+
+ &:active {
+ color: var(--color-gray-1) !important;
+ text-decoration: none;
+ }
+
+ @media (hover: hover) {
+ &:hover,
+ &:focus {
+ color: var(--color-blue);
+ text-decoration: none;
+ }
+ }
+}
diff --git a/src/components/main/TransactionModal.tsx b/src/components/main/TransactionModal.tsx
new file mode 100644
index 00000000..c4e58dd0
--- /dev/null
+++ b/src/components/main/TransactionModal.tsx
@@ -0,0 +1,200 @@
+import React, {
+ memo, useCallback, useLayoutEffect, useState,
+} from '../../lib/teact/teact';
+import { getActions, withGlobal } from '../../global';
+
+import { ApiToken, ApiTransaction } from '../../api/types';
+
+import { ANIMATED_STICKER_SMALL_SIZE_PX, CARD_SECONDARY_VALUE_SYMBOL } from '../../config';
+import { ANIMATED_STICKERS_PATHS } from '../ui/helpers/animatedAssets';
+import { bigStrToHuman } from '../../global/helpers';
+import { formatCurrencyExtended } from '../../util/formatNumber';
+import buildClassName from '../../util/buildClassName';
+import { copyTextToClipboard } from '../../util/clipboard';
+
+import Modal from '../ui/Modal';
+import Button from '../ui/Button';
+import AnimatedIcon from '../ui/AnimatedIcon';
+
+import styles from './TransactionModal.module.scss';
+import transferStyles from '../transfer/Transfer.module.scss';
+import receiveStyles from './Receive.module.scss';
+import modalStyles from '../ui/Modal.module.scss';
+import useCurrentOrPrev from '../../hooks/useCurrentOrPrev';
+
+type StateProps = {
+ transaction?: ApiTransaction;
+ token?: ApiToken;
+};
+
+const EMPTY_HASH_VALUE = 'NOHASH';
+
+function TransactionModal({ transaction, token }: StateProps) {
+ const { startTransfer, showNotification, closeTransactionInfo } = getActions();
+
+ const renderedTransaction = useCurrentOrPrev(transaction, true);
+
+ const {
+ fromAddress, toAddress, amount, comment, fee, txId, isIncoming,
+ } = renderedTransaction || {};
+ const [, transactionHash] = (txId || '').split(':');
+
+ const [isModalOpen, setIsModalOpen] = useStateComment
+
+
+ {comment}
+
+
+
+
+ );
+ }
+
+ return (
+
+ {tonscanTransactionUrl && (
+
+
+
+ )}
+
+ {isIncoming ? 'Sender' : 'Recipient'}
+
+
+ {address}
+
+
+
+
+
+
+
+ Amount
+
+
+ {formatCurrencyExtended(amountHuman, '')}
+ {' '}
+ {token?.symbol || CARD_SECONDARY_VALUE_SYMBOL}
+
+ {!isIncoming && fee && (
+ <>
+
+
+ {renderComment()}
+
+ Fee
+
+ {formatCurrencyExtended(bigStrToHuman(fee), token?.symbol || CARD_SECONDARY_VALUE_SYMBOL, true)}
+
+
+ )}
+
+
+
+
+
+ );
+ }
+
+ return (
+
+ );
+}
+
+export default memo(withGlobal((global): StateProps => {
+ const {
+ toAddress: initialAddress,
+ amount: initialAmount,
+ comment: initialComment,
+ fee,
+ } = global.currentTransfer;
+
+ return {
+ initialAddress,
+ initialAmount,
+ initialComment,
+ fee,
+ tokens: selectAllTokens(global),
+ isLoading: global.currentTransfer.isLoading,
+ };
+})(TransferInitial));
+
+function getBalanceFromTokens(tokens: UserToken[]) {
+ const primaryValue = tokens.reduce((acc, token) => acc + token.amount * token.price, 0);
+ const secondaryFactor = tokens.find((token) => token.symbol === CARD_SECONDARY_VALUE_SYMBOL)!.price;
+
+ return primaryValue / secondaryFactor;
+}
+
+function trimStringByMaxBytes(str: string, maxBytes: number) {
+ const decoder = new TextDecoder('utf-8');
+ const encoded = new TextEncoder().encode(str);
+
+ return decoder.decode(encoded.slice(0, maxBytes));
+}
diff --git a/src/components/transfer/TransferModal.tsx b/src/components/transfer/TransferModal.tsx
new file mode 100644
index 00000000..0c0e5975
--- /dev/null
+++ b/src/components/transfer/TransferModal.tsx
@@ -0,0 +1,277 @@
+import React, {
+ memo, useCallback, useEffect, useState,
+} from '../../lib/teact/teact';
+import { getActions, withGlobal } from '../../global';
+
+import { TransferState } from '../../global/types';
+
+import { ANIMATED_STICKER_SMALL_SIZE_PX, CARD_SECONDARY_VALUE_SYMBOL } from '../../config';
+import { ANIMATED_STICKERS_PATHS } from '../ui/helpers/animatedAssets';
+import { bigStrToHuman } from '../../global/helpers';
+import buildClassName from '../../util/buildClassName';
+import useCurrentOrPrev from '../../hooks/useCurrentOrPrev';
+import { formatCurrencyExtended } from '../../util/formatNumber';
+import captureKeyboardListeners from '../../util/captureKeyboardListeners';
+
+import Modal from '../ui/Modal';
+import ModalHeader from '../ui/ModalHeader';
+import Transition from '../ui/Transition';
+import TransferInitial from './TransferInitial';
+import PasswordForm from '../ui/PasswordForm';
+import Button from '../ui/Button';
+import AnimatedIcon from '../ui/AnimatedIcon';
+
+import styles from './Transfer.module.scss';
+import modalStyles from '../ui/Modal.module.scss';
+
+interface StateProps {
+ state: TransferState;
+ toAddress?: string;
+ amount?: number;
+ fee?: string;
+ comment?: string;
+ promiseId?: string;
+ error?: string;
+ isLoading?: boolean;
+ txId?: string;
+}
+
+function TransferModal({
+ state, amount, toAddress, fee, comment, promiseId, error, isLoading, txId,
+}: StateProps) {
+ const {
+ submitTransferConfirm, submitTransferPassword, setTransferScreen, cleanTransferError, cancelTransfer,
+ showTransactionInfo,
+ } = getActions();
+
+ const isOpen = state !== TransferState.None;
+ const renderingState = useCurrentOrPrev(isOpen ? state : undefined, true) ?? -1;
+ const [nextKey, setNextKey] = useState(renderingState + 1);
+ const updateNextKey = useCallback(() => {
+ setNextKey(renderingState + 1);
+ }, [renderingState]);
+
+ useEffect(() => {
+ if (isOpen) {
+ updateNextKey();
+ }
+ }, [isOpen, updateNextKey]);
+
+ useEffect(() => (
+ state === TransferState.Confirm
+ ? captureKeyboardListeners({
+ onEnter: () => {
+ submitTransferConfirm();
+ },
+ })
+ : undefined
+ ), [state, submitTransferConfirm]);
+
+ const handleTransferSubmit = useCallback((password: string) => {
+ submitTransferPassword({ password });
+ }, [submitTransferPassword]);
+
+ const handleModalClose = useCallback(() => {
+ setNextKey(TransferState.None);
+ }, []);
+
+ const handleBackClick = useCallback(() => {
+ if (state === TransferState.Confirm) {
+ setTransferScreen({ state: TransferState.Initial });
+ }
+ if (state === TransferState.Password) {
+ setTransferScreen({ state: TransferState.Confirm });
+ }
+ setNextKey(nextKey - 1);
+ }, [nextKey, setTransferScreen, state]);
+
+ const handleTransactionInfoClick = useCallback(() => {
+ cancelTransfer();
+ if (txId) {
+ showTransactionInfo({ txId });
+ }
+ }, [cancelTransfer, showTransactionInfo, txId]);
+
+ function renderComment() {
+ if (!comment) {
+ return undefined;
+ }
+
+ return (
+ <>
+ Fee
+
+ {formatCurrencyExtended(bigStrToHuman(fee!), CARD_SECONDARY_VALUE_SYMBOL)}
+
+ Comment
+ {comment}
+
+ );
+ }
+
+ function renderConfirm(isActive: boolean) {
+ return (
+ <>
+
+
+
+ );
+ }
+
+ function renderPassword(isActive: boolean) {
+ return (
+ <>
+ Receiving address
+
+ {toAddress}
+
+
+ Amount
+
+ {formatCurrencyExtended(amount || 0, '', true)}
+ {CARD_SECONDARY_VALUE_SYMBOL}
+ {fee && (
+ <>
+
+
+ {renderComment()}
+
+ Fee
+
+ {formatCurrencyExtended(bigStrToHuman(fee), CARD_SECONDARY_VALUE_SYMBOL)}
+
+
+ )}
+
+ {promiseId ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ );
+ }
+
+ function renderComplete(isActive: boolean) {
+ return (
+ <>
+
+ Please wait a few seconds for your
transaction to be processed... +
+ transaction to be processed... +
+
+
+ );
+ }
+
+ // eslint-disable-next-line consistent-return
+ function renderContent(isActive: boolean, isFrom: boolean, currentKey: number) {
+ switch (currentKey) {
+ case TransferState.Initial:
+ return (
+ <>
+
+ {formatCurrencyExtended(amount || 0, CARD_SECONDARY_VALUE_SYMBOL, true)} have been sent.
+
+
+
+
+
+
+ 
+
+ );
+}
+
+export default memo(Image);
diff --git a/src/components/ui/Input.module.scss b/src/components/ui/Input.module.scss
new file mode 100644
index 00000000..70647ba8
--- /dev/null
+++ b/src/components/ui/Input.module.scss
@@ -0,0 +1,279 @@
+.wrapper {
+ position: relative;
+
+ margin-bottom: 1rem;
+}
+
+.input {
+ display: block;
+
+ width: 100%;
+ height: 3rem;
+ padding: 0.5rem 0.75rem;
+
+ font-size: 1rem;
+ font-weight: 600;
+ line-height: 1.25;
+ color: var(--color-black);
+ word-break: break-word;
+
+ background-color: var(--color-background-first);
+ border: none;
+ border-radius: var(--border-radius-default);
+ outline: none;
+
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+ -webkit-appearance: none;
+
+ &::placeholder {
+ color: var(--color-gray-3);
+
+ transition: color 150ms ease-in;
+ }
+
+ // Hide hint for Safari password strength meter
+ // noinspection CssInvalidPseudoSelector
+ &::-webkit-strong-password-auto-fill-button {
+ position: absolute;
+
+ overflow: hidden !important;
+
+ width: 0 !important;
+ min-width: 0 !important;
+ max-width: 0 !important;
+
+ opacity: 0;
+ clip: rect(0, 0, 0, 0);
+ }
+
+ :global(html:not(.is-ios)) &:not(&_rich) {
+ font-size: 0.9375rem;
+ }
+
+ &.error,
+ &.error:focus {
+ box-shadow: inset 0 0 0 0.125rem var(--color-red);
+
+ // noinspection CssInvalidPseudoSelector
+ &:autofill,
+ &:-webkit-autofill-strong-password,
+ &:-webkit-autofill-strong-password-viewable,
+ &:-webkit-autofill-and-obscured {
+ box-shadow: inset 0 0 0 0.125rem var(--color-red),
+ inset 0 0 0 10rem var(--color-background-first);
+ }
+ }
+
+ &:focus {
+ box-shadow: inset 0 0 0 0.125rem var(--color-blue);
+
+ // noinspection CssInvalidPseudoSelector
+ &:autofill,
+ &:-webkit-autofill-strong-password,
+ &:-webkit-autofill-strong-password-viewable,
+ &:-webkit-autofill-and-obscured {
+ box-shadow: inset 0 0 0 0.125rem var(--color-blue),
+ inset 0 0 0 10rem var(--color-background-first);
+ }
+ }
+
+ &:hover,
+ &:focus {
+ &::placeholder {
+ color: var(--color-interactive-input-text-hover-active);
+ }
+ }
+
+ &:focus + .shadow {
+ display: none;
+ }
+
+ // Disable yellow highlight on autofill
+ // noinspection CssInvalidPseudoSelector
+ &:autofill,
+ &:-webkit-autofill-strong-password,
+ &:-webkit-autofill-strong-password-viewable,
+ &:-webkit-autofill-and-obscured {
+ box-shadow: inset 0 0 0 10rem var(--color-background-first);
+
+ transition: none !important;
+
+ -webkit-text-fill-color: var(--color-black);
+ }
+
+ &_password {
+ padding-right: 2.5rem;
+ }
+
+ &_rich {
+ overflow: hidden;
+ flex: 1 1 auto;
+
+ height: 3.75rem;
+ margin-right: 0.5rem;
+ padding: 0.375rem 0 0.375rem 0.625rem;
+
+ font-size: 3rem;
+ font-weight: 600;
+ line-height: 1;
+ white-space: nowrap;
+
+ &::after {
+ content: attr(data-suffix);
+
+ margin-left: 0.25rem;
+
+ font-size: 1rem;
+ font-weight: 700;
+ color: var(--color-gray-4);
+ }
+
+ /* Fix for ContentEditable multiline "issues" */
+ br {
+ display:none;
+ }
+
+ * {
+ display:inline;
+
+ white-space:nowrap;
+ }
+
+ &.isEmpty::before {
+ content: '0';
+
+ font-size: 3rem;
+ color: var(--color-gray-4);
+
+ transition: color 150ms ease-in;
+ }
+
+ &:focus {
+ box-shadow: none;
+ }
+
+ &:hover,
+ &:focus {
+ &.isEmpty::before {
+ color: var(--color-interactive-input-text-hover-active);
+ }
+ }
+ }
+}
+
+.input__wrapper {
+ display: flex;
+
+ max-width: 100%;
+ padding: 0.125rem;
+
+ background-color: var(--color-background-first);
+ border-radius: var(--border-radius-default);
+ outline: none;
+
+ transition: box-shadow 0.15s ease;
+
+ &.error,
+ &_hasFocus.error, {
+ box-shadow: inset 0 0 0 0.125rem var(--color-red);
+ }
+
+ &_hasFocus {
+ box-shadow: inset 0 0 0 0.125rem var(--color-blue);
+ }
+}
+
+.visibilityToggler {
+ cursor: pointer;
+
+ position: absolute;
+ top: 0.75rem;
+ right: 0.75rem;
+
+ padding: 0;
+
+ font-size: 1.5rem;
+ line-height: 1;
+ color: var(--color-black);
+
+ opacity: 0.5;
+ background: none;
+ border: none;
+ outline: none;
+
+ transition: opacity 150ms ease-in;
+
+ &:focus {
+ opacity: 1;
+ }
+
+ &_push {
+ top: auto;
+ bottom: 0.5rem;
+ }
+}
+
+.fractional {
+ font-size: 1rem;
+ font-weight: 700;
+}
+
+.label {
+ cursor: text;
+
+ display: block;
+
+ margin-bottom: 0.25rem;
+ padding: 0 0.5rem;
+
+ font-size: 0.8125rem;
+ font-weight: 700;
+ color: var(--color-blue);
+ white-space: nowrap;
+
+ &.error {
+ color: var(--color-red);
+ }
+
+ &_error {
+ float: right;
+ }
+
+ &_forPassword {
+ position: absolute;
+ right: 0;
+ bottom: 100%;
+ }
+
+ &_errorBottom {
+ margin-top: 1.5rem;
+
+ font-size: 0.9375rem;
+ font-weight: 600;
+ text-align: center;
+ }
+}
+
+.shadow {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+
+ width: 3rem;
+ height: 3rem;
+
+ background: var(--color-linear-effect-1);
+ border-radius: 0 var(--border-radius-default) var(--border-radius-default) 0;
+
+ .error + & {
+ right: 0.125rem;
+ bottom: 0.125rem;
+
+ height: 2.75rem;
+ }
+
+ @media (prefers-color-scheme: dark) {
+ display: none;
+ }
+}
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
new file mode 100644
index 00000000..6fdf2a3e
--- /dev/null
+++ b/src/components/ui/Input.tsx
@@ -0,0 +1,114 @@
+import { RefObject } from 'react';
+import React, { memo, useState, VirtualElement } from '../../lib/teact/teact';
+
+import buildClassName from '../../util/buildClassName';
+
+import styles from './Input.module.scss';
+
+type OwnProps = {
+ ref?: RefObject
+ {error && labelText && (
+
+ )}
+ {labelText && (
+
+ )}
+
+ {type !== 'password' && }
+ {type === 'password' && (
+
+ )}
+ {error && !labelText && (
+
+ )}
+ {children}
+
+ );
+}
+
+export default memo(Input);
diff --git a/src/components/ui/InputMnemonic.module.scss b/src/components/ui/InputMnemonic.module.scss
new file mode 100644
index 00000000..78ad1619
--- /dev/null
+++ b/src/components/ui/InputMnemonic.module.scss
@@ -0,0 +1,71 @@
+.wrapper {
+ position: relative;
+
+ display: flex;
+ align-items: center;
+
+ background-color: var(--color-background-first);
+ border-radius: var(--border-radius-default);
+
+ transition: box-shadow 0.15s ease;
+
+ &_focus {
+ box-shadow: inset 0 0 0 2px var(--color-blue);
+ }
+
+ &_error {
+ box-shadow: inset 0 0 0 2px var(--color-red);
+
+ .input {
+ color: var(--color-red);
+ }
+ }
+}
+
+.input {
+ display: block;
+
+ width: 100%;
+ height: 3rem;
+ padding: 0.5rem 0.75rem;
+
+ font-size: 1rem;
+ line-height: 1.25;
+ color: var(--color-black);
+
+ background: transparent !important;
+ border: none;
+ outline: none;
+
+ appearance: none;
+
+ &::placeholder {
+ color: var(--color-gray-3);
+ }
+
+ :global(html:not(.is-ios)) & {
+ font-size: 0.9375rem;
+ }
+
+ &:hover,
+ &:focus {
+ &::placeholder {
+ color: var(--color-interactive-input-text-hover-active);
+ }
+ }
+}
+
+.label {
+ cursor: text;
+
+ display: block;
+
+ min-width: 2em;
+ margin: 0;
+ padding: 0 0 0 0.75rem;
+
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--color-gray-4);
+ text-align: right;
+}
diff --git a/src/components/ui/InputMnemonic.tsx b/src/components/ui/InputMnemonic.tsx
new file mode 100644
index 00000000..6baaff22
--- /dev/null
+++ b/src/components/ui/InputMnemonic.tsx
@@ -0,0 +1,163 @@
+import { wordlists } from 'tonweb-mnemonic';
+
+import React, {
+ memo, useCallback, useEffect, useState,
+} from '../../lib/teact/teact';
+import buildClassName from '../../util/buildClassName';
+import useFlag from '../../hooks/useFlag';
+
+import SuggestionsList from './SuggestionsList';
+
+import styles from './InputMnemonic.module.scss';
+
+type OwnProps = {
+ id?: string;
+ nextId?: string;
+ labelText?: string;
+ className?: string;
+ value?: string;
+ isInModal?: boolean;
+ suggestionsPosition?: 'top' | 'bottom';
+ inputArg?: any;
+ onInput: (value: string, inputArg?: any) => void;
+};
+
+const { default: mnemonicSuggestions } = wordlists;
+const SUGGESTION_WORDS_COUNT = 7;
+
+function InputMnemonic({
+ id, nextId, labelText, className, value = '', isInModal, suggestionsPosition, inputArg, onInput,
+}: OwnProps) {
+ const [hasFocus, markFocus, unmarkFocus] = useFlag();
+ const [hasError, setHasError] = useState
+ {shouldRenderSuggestions && (
+
+ );
+}
+
+function isCorrectMnemonic(mnemonic: string) {
+ return mnemonicSuggestions.includes(mnemonic);
+}
+
+export default memo(InputMnemonic);
diff --git a/src/components/ui/InputNumber.tsx b/src/components/ui/InputNumber.tsx
new file mode 100644
index 00000000..7aeba1ec
--- /dev/null
+++ b/src/components/ui/InputNumber.tsx
@@ -0,0 +1,56 @@
+import React, { memo } from '../../lib/teact/teact';
+
+import buildClassName from '../../util/buildClassName';
+
+import styles from './Input.module.scss';
+
+type OwnProps = {
+ id?: string;
+ labelText?: string;
+ value?: string | number;
+ minValue?: number;
+ isRequired?: boolean;
+ hasError?: boolean;
+ onInput: (value: number) => void;
+ onKeyDown?: (e: React.KeyboardEvent
+
+ {labelText && (
+
+ )}
+
+ );
+}
+
+export default memo(InputNumber);
diff --git a/src/components/ui/InputNumberRich.tsx b/src/components/ui/InputNumberRich.tsx
new file mode 100644
index 00000000..d9bdea68
--- /dev/null
+++ b/src/components/ui/InputNumberRich.tsx
@@ -0,0 +1,156 @@
+import React, {
+ memo, useCallback, useLayoutEffect, useRef, useState, VirtualElement,
+} from '../../lib/teact/teact';
+
+import { CARD_SECONDARY_VALUE_SYMBOL, FRACTION_DIGITS } from '../../config';
+import { saveCaretPosition } from '../../util/saveCaretPosition';
+import buildClassName from '../../util/buildClassName';
+import useFlag from '../../hooks/useFlag';
+
+import styles from './Input.module.scss';
+
+type OwnProps = {
+ id?: string;
+ labelText?: string;
+ value?: number;
+ hasError?: boolean;
+ error?: string;
+ children?: VirtualElement;
+ onInput: (value?: number) => void;
+ onChange?: (e: React.FormEvent
+ {error && (
+
+ )}
+ {labelText && (
+
+ )}
+
+ );
+}
+
+export default memo(InputNumberRich);
diff --git a/src/components/ui/Loading.module.scss b/src/components/ui/Loading.module.scss
new file mode 100644
index 00000000..e787b2b1
--- /dev/null
+++ b/src/components/ui/Loading.module.scss
@@ -0,0 +1,80 @@
+.spinner {
+ --spinner-size: 2rem;
+
+ position: relative;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: var(--spinner-size);
+ height: var(--spinner-size);
+}
+
+.inner {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ background-repeat: no-repeat;
+ background-size: 100%;
+
+ animation-name: spin;
+ animation-duration: 1s;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
+}
+
+.withBackground {
+ &::before {
+ content: '';
+
+ position: absolute;
+ top: -0.125rem;
+ right: -0.125rem;
+ bottom: -0.125rem;
+ left: -0.125rem;
+
+ border-radius: 50%;
+ }
+
+ &.dark::before {
+ background: rgba(0, 0, 0, 0.25);
+ }
+
+ &.light::before {
+ background: rgba(255, 255, 255, 0.4);
+ }
+}
+
+.white {
+ .inner {
+ background-image: var(--spinner-white-data);
+ }
+
+ &.withBackground {
+ .inner {
+ background-image: var(--spinner-white-thin-data);
+ }
+ }
+}
+
+.blue {
+ .inner {
+ background-image: var(--spinner-blue-data);
+ }
+}
+
+
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(360deg);
+ }
+}
+
diff --git a/src/components/ui/Loading.tsx b/src/components/ui/Loading.tsx
new file mode 100644
index 00000000..1ea18577
--- /dev/null
+++ b/src/components/ui/Loading.tsx
@@ -0,0 +1,27 @@
+import React, { memo } from '../../lib/teact/teact';
+
+import buildClassName from '../../util/buildClassName';
+
+import styles from './Loading.module.scss';
+
+type OwnProps = {
+ color?: 'blue' | 'white';
+ backgroundColor?: 'light' | 'dark';
+};
+
+function Loading({ color = 'blue', backgroundColor }: OwnProps) {
+ const fullClassName = buildClassName(
+ styles.spinner,
+ styles[color],
+ backgroundColor && styles.withBackground,
+ backgroundColor && styles[backgroundColor],
+ );
+
+ return (
+
+ {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+
+ {children}
+
+
+
+
+ );
+}
+
+export default memo(Loading);
diff --git a/src/components/ui/Menu.module.scss b/src/components/ui/Menu.module.scss
new file mode 100644
index 00000000..c9504a03
--- /dev/null
+++ b/src/components/ui/Menu.module.scss
@@ -0,0 +1,64 @@
+.wrapper {
+ user-select: none;
+
+ position: relative;
+}
+
+.bubble {
+
+ --offset-y: calc(100% + 0.5rem);
+ --offset-x: 0;
+
+ position: absolute;
+ z-index: var(--z-menu-bubble);
+ transform: scale(0.5);
+
+ overflow: hidden;
+ overscroll-behavior: contain;
+ display: block;
+
+ min-width: 13.5rem;
+ margin: 0;
+ padding: 0.5rem;
+
+ list-style: none;
+
+ background-color: var(--color-background-window);
+ border-radius: var(--border-radius-default);
+ box-shadow: var(--default-shadow);
+
+ transition: opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1), transform 0.2s cubic-bezier(0.2, 0, 0.2, 1) !important;
+
+ &:global(.open) {
+ transform: scale(1);
+ }
+
+ &:global(.closing) {
+ transition: opacity 0.2s ease-in, transform 0.2s ease-in !important;
+ }
+
+ &.top {
+ top: var(--offset-y);
+ }
+
+ &.bottom {
+ bottom: var(--offset-y);
+ }
+
+ &.left {
+ left: var(--offset-x);
+ }
+
+ &.right {
+ right: var(--offset-x);
+ }
+}
+
+.backdrop {
+ position: fixed;
+ z-index: var(--z-menu-backdrop);
+ top: -100vh;
+ right: -100vw;
+ bottom: -100vh;
+ left: -100vw;
+}
diff --git a/src/components/ui/Menu.tsx b/src/components/ui/Menu.tsx
new file mode 100644
index 00000000..c8a02547
--- /dev/null
+++ b/src/components/ui/Menu.tsx
@@ -0,0 +1,105 @@
+import React, { FC, useEffect, useRef } from '../../lib/teact/teact';
+
+import useShowTransition from '../../hooks/useShowTransition';
+import useVirtualBackdrop from '../../hooks/useVirtualBackdrop';
+import useEffectWithPrevDeps from '../../hooks/useEffectWithPrevDeps';
+import captureEscKeyListener from '../../util/captureEscKeyListener';
+import buildClassName from '../../util/buildClassName';
+import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck';
+
+import styles from './Menu.module.scss';
+
+type OwnProps = {
+ children: React.ReactNode;
+ isOpen: boolean;
+ id?: string;
+ className?: string;
+ bubbleClassName?: string;
+ positionX?: 'left' | 'right';
+ positionY?: 'top' | 'bottom';
+ autoClose?: boolean;
+ shouldSkipTransition?: boolean;
+ noCloseOnBackdrop?: boolean;
+ onCloseAnimationEnd?: () => void;
+ onClose?: () => void;
+ onMouseEnter?: (e: React.MouseEvent
+ {isOpen && (
+ // This only prevents click events triggering on underlying elements
+
+ )}
+
+ );
+};
+
+export default Menu;
diff --git a/src/components/ui/MenuItem.module.scss b/src/components/ui/MenuItem.module.scss
new file mode 100644
index 00000000..31f817c3
--- /dev/null
+++ b/src/components/ui/MenuItem.module.scss
@@ -0,0 +1,60 @@
+.menuItem {
+ --border-radius-default: 0.75rem;
+
+ cursor: pointer;
+
+ position: relative;
+
+ overflow: hidden;
+ display: flex;
+
+ width: 100%;
+ padding: 0.75rem 0.5rem;
+
+ font-size: 0.9375rem;
+ font-weight: 600;
+ line-height: 1;
+ color: var(--color-blue);
+ text-decoration: none;
+ white-space: nowrap;
+
+ background: none;
+ border: none !important;
+ border-radius: var(--border-radius-default);
+ outline: none !important;
+ box-shadow: none !important;
+
+ transition: color 150ms ease-in, background-color 150ms ease-in;
+
+ @media (hover: hover) {
+ &:hover,
+ &:focus {
+ text-decoration: none;
+
+ background-color: var(--color-interactive-popup-menu-hover);
+ }
+
+ &:active {
+ color: var(--color-gray-1) !important;
+
+ background-color: var(--color-interactive-popup-menu-active);
+ }
+ }
+
+ @media (max-width: 600px) {
+ &:focus,
+ &:hover {
+ color: var(--color-blue);
+ }
+
+ &:active {
+ color: var(--color-gray-1) !important;
+
+ background-color: var(--color-interactive-popup-menu-active);
+ }
+ }
+}
+
+.destructive {
+ color: var(--color-red) !important;
+}
diff --git a/src/components/ui/MenuItem.tsx b/src/components/ui/MenuItem.tsx
new file mode 100644
index 00000000..9bee8acb
--- /dev/null
+++ b/src/components/ui/MenuItem.tsx
@@ -0,0 +1,79 @@
+import React, { FC, useCallback } from '../../lib/teact/teact';
+
+import buildClassName from '../../util/buildClassName';
+
+import styles from './MenuItem.module.scss';
+
+type OnClickHandler = (e: React.SyntheticEvent
+ {children}
+
+
+ {children}
+
+ );
+};
+
+export default MenuItem;
diff --git a/src/components/ui/Modal.module.scss b/src/components/ui/Modal.module.scss
new file mode 100644
index 00000000..f5b72c6c
--- /dev/null
+++ b/src/components/ui/Modal.module.scss
@@ -0,0 +1,249 @@
+.modal {
+ --transition: 350ms cubic-bezier(0.2, 0.9, 0.42, 1);
+
+ position: relative;
+ z-index: var(--z-modal);
+
+ &.error {
+ .dialog {
+ max-width: 23rem;
+ }
+ }
+
+ &:global(.open) .backdrop,
+ &:global(.open) .dialog {
+ opacity: 1;
+ }
+
+ &:not(.slideUp):global(.open) .dialog {
+ transform: translate3d(0, 0, 0);
+ }
+
+ &:not(.slideUp):global(.closing) .dialog {
+ transform: translate3d(0, 1rem, 0);
+ }
+
+ &.slideUp:global(.shown) {
+ .container {
+ overflow: hidden;
+ }
+
+ .dialog {
+ transform: translateY(100%);
+ }
+
+ &:global(.shown.open) {
+ .dialog {
+ transform: translateY(0);
+ }
+ }
+ }
+}
+
+.container {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ padding: 0 1rem;
+
+ .slideUp & {
+ align-items: flex-end;
+
+ padding: 0;
+ }
+}
+
+.backdrop {
+ position: fixed;
+ z-index: -1;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+
+ opacity: 0;
+ background-color: var(--color-tint);
+
+ transition: opacity var(--transition);
+}
+
+.noBackdrop {
+ background-color: transparent !important;
+}
+
+.dialog {
+ position: relative;
+ transform: translate3d(0, -1rem, 0);
+
+ display: inline-flex;
+ flex-direction: column;
+
+ width: 100%;
+ min-width: 17.5rem;
+ max-width: 28rem;
+ max-height: calc(var(--vh, 1vh) * 100);
+ margin: 2rem auto;
+
+ opacity: 0;
+ background-color: var(--color-background-window);
+ border-radius: var(--border-radius-small);
+ box-shadow: var(--default-shadow);
+
+ transition: transform var(--transition), opacity var(--transition);
+
+ .slideUp & {
+ transform: none;
+
+ max-height: calc(95 * var(--vh, 1vh));
+ margin: 0;
+
+ opacity: 1;
+ background: var(--color-background-second);
+ border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
+
+ transition: transform var(--transition);
+ }
+}
+
+.header {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+
+ padding: 1rem 1rem 0.75rem;
+
+ color: var(--color-black);
+
+ &_transition {
+ margin: -1rem 0 0.8125rem 0;
+ padding: 1rem 1rem 0;
+ }
+
+ .slideUp & {
+ padding-bottom: 0;
+ }
+}
+
+.closeButton {
+ width: 1.875rem !important;
+ height: 1.875rem !important;
+ padding: 0 !important;
+
+ color: var(--color-close-button-text) !important;
+
+ background-color: var(--color-close-button-background) !important;
+ border-radius: 50% !important;
+
+ transition: background-color 150ms ease-in;
+
+ &:hover,
+ &:focus {
+ color: var(--color-close-button-text-hover) !important;
+
+ background-color: var(--color-close-button-background-hover) !important;
+ }
+
+ &:active {
+ color: var(--color-close-button-text-active) !important;
+
+ background-color: var(--color-close-button-background-active) !important;
+ }
+}
+
+.closeIcon {
+ font-size: 1.875rem;
+ line-height: 1;
+
+ transition: color 150ms ease-in;
+}
+
+.title {
+ overflow: hidden;
+ flex: 1 1 auto;
+
+ font-size: 1.0625rem;
+ font-weight: 700;
+ text-align: center;
+ text-overflow: ellipsis;
+
+ &:not(:only-child) {
+ margin: 0 0.5rem 0 2.5rem;
+ }
+}
+
+.content {
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+
+ width: 100%;
+ padding-top: 0.5rem;
+
+ b, strong {
+ word-break: break-word;
+ }
+}
+
+.content:not(.contentSlideUp) {
+ padding: 0.5rem 1rem 1rem;
+
+ @supports (padding-bottom: env(safe-area-inset-bottom)) {
+ padding-bottom: max(env(safe-area-inset-bottom), 1rem);
+ }
+}
+
+.buttons {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+
+ margin-top: auto;
+}
+
+.transition {
+ overflow-x: hidden;
+ flex: 1 1 auto;
+}
+
+.transitionSlide {
+ display: flex;
+ flex-direction: column;
+
+ min-width: 0;
+ max-width: 100%;
+ padding-top: 0.5rem;
+
+ background: transparent !important;
+}
+
+.transitionContentWrapper {
+ display: flex;
+ flex-direction: column;
+
+ height: 100%;
+}
+
+.transitionContent {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+
+ min-width: 0;
+ padding: 0 1rem 1rem;
+
+ &_simple {
+ padding-top: 5.5rem;
+ }
+
+ @supports (padding-bottom: env(safe-area-inset-bottom)) {
+ padding-bottom: max(env(safe-area-inset-bottom), 1rem);
+ }
+}
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
new file mode 100644
index 00000000..89824f86
--- /dev/null
+++ b/src/components/ui/Modal.tsx
@@ -0,0 +1,147 @@
+import { RefObject } from 'react';
+import React, { useCallback, useEffect, useRef } from '../../lib/teact/teact';
+
+import { IS_EXTENSION } from '../../util/environment';
+import captureKeyboardListeners from '../../util/captureKeyboardListeners';
+import trapFocus from '../../util/trapFocus';
+import buildClassName from '../../util/buildClassName';
+import useShowTransition from '../../hooks/useShowTransition';
+import useEffectWithPrevDeps from '../../hooks/useEffectWithPrevDeps';
+import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck';
+
+import Button from './Button';
+import Portal from './Portal';
+
+import styles from './Modal.module.scss';
+
+type OwnProps = {
+ title?: string;
+ className?: string;
+ dialogClassName?: string;
+ isOpen?: boolean;
+ isSlideUp?: boolean;
+ noBackdrop?: boolean;
+ header?: any;
+ hasCloseButton?: boolean;
+ children: React.ReactNode;
+ onClose: () => void;
+ onCloseAnimationEnd?: () => void;
+ onEnter?: () => void;
+ dialogRef?: RefObject
+
+ );
+ }
+
+ const fullClassName = buildClassName(
+ styles.modal,
+ className,
+ transitionClassNames,
+ isSlideUp && styles.slideUp,
+ );
+
+ const backdropFullClass = buildClassName(
+ styles.backdrop,
+ noBackdrop && styles.noBackdrop,
+ );
+
+ return (
+ {title}
+ {hasCloseButton && (
+
+ )}
+
+
+
+
+
+
+ {renderHeader()}
+
+
+ {children}
+
+
+
+ );
+}
+
+export default memo(ModalHeader);
diff --git a/src/components/ui/Notification.module.scss b/src/components/ui/Notification.module.scss
new file mode 100644
index 00000000..b6471c2a
--- /dev/null
+++ b/src/components/ui/Notification.module.scss
@@ -0,0 +1,43 @@
+.container {
+ position: fixed;
+ z-index: var(--z-notification);
+ top: 1rem;
+ left: calc(50% - 11.5rem);
+
+ width: 23rem;
+ max-width: 100vw;
+ margin: 0.25rem auto;
+
+ @media (min-width: 1276px) {
+ transition: transform var(--layer-transition);
+ }
+}
+
+.notification {
+ max-width: 23rem;
+ margin: 0 1.5rem;
+ padding: 1rem ;
+
+ color: var(--color-black);
+
+ background: var(--color-background-window);
+ backdrop-filter: blur(30px);
+ border-radius: var(--border-radius-big);
+ box-shadow: 0 0 1.25rem 0.625rem rgba(0, 0, 0, 0.15);
+}
+
+.content {
+ font-size: 0.9375rem;
+ font-weight: 600;
+ line-height: 1rem;
+ text-align: center;
+ word-break: break-word;
+}
+
+.icon {
+ margin-right: 0.25rem;
+
+ font-size: 1.25rem;
+ line-height: 1rem;
+ vertical-align: -0.3125rem;
+}
diff --git a/src/components/ui/Notification.tsx b/src/components/ui/Notification.tsx
new file mode 100644
index 00000000..800dd24f
--- /dev/null
+++ b/src/components/ui/Notification.tsx
@@ -0,0 +1,78 @@
+import React, {
+ FC, useCallback, useEffect, useRef, useState,
+} from '../../lib/teact/teact';
+
+import useShowTransition from '../../hooks/useShowTransition';
+import buildClassName from '../../util/buildClassName';
+import captureEscKeyListener from '../../util/captureEscKeyListener';
+
+import Portal from './Portal';
+
+import styles from './Notification.module.scss';
+
+type OwnProps = {
+ containerId?: string;
+ message: string;
+ icon?: string;
+ onDismiss: () => void;
+};
+
+const DURATION_MS = 5000;
+const ANIMATION_DURATION = 250;
+
+const Notification: FC{title}
+
+
+
+
+ {icon && }
+ {message}
+
+
+
+ );
+}
+
+export default memo(PasswordForm);
diff --git a/src/components/ui/Portal.ts b/src/components/ui/Portal.ts
new file mode 100644
index 00000000..746716b3
--- /dev/null
+++ b/src/components/ui/Portal.ts
@@ -0,0 +1,38 @@
+import { useRef, useLayoutEffect, VirtualElement } from '../../lib/teact/teact';
+import TeactDOM from '../../lib/teact/teact-dom';
+
+type OwnProps = {
+ containerId?: string;
+ className?: string;
+ children: VirtualElement;
+};
+
+function Portal({ containerId, className, children }: OwnProps) {
+ const elementRef = useRef
+ {onCancel && (
+
+ )}
+
+
+
+
+
+ );
+}
+
+export default memo(SearchBar);
diff --git a/src/components/ui/SuggestionsList.module.scss b/src/components/ui/SuggestionsList.module.scss
new file mode 100644
index 00000000..0681a86b
--- /dev/null
+++ b/src/components/ui/SuggestionsList.module.scss
@@ -0,0 +1,60 @@
+.suggestions {
+ position: absolute;
+ z-index: 2;
+ left: 0;
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ width: auto;
+ min-width: 10rem;
+ margin: 0;
+ padding: 0.25rem;
+
+ color: var(--color-black);
+ list-style: none;
+
+ background: var(--color-background-window);
+ border-radius: var(--border-radius-default);
+ box-shadow: var(--default-shadow);
+
+ &.bottom {
+ top: calc(100% + 0.5rem);
+ }
+
+ &.top {
+ bottom: calc(100% + 0.5rem);
+ }
+}
+
+.suggestion {
+ cursor: pointer;
+
+ display: inline-block;
+
+ width: 100%;
+ padding: 0 0.75rem;
+
+ font-size: 1rem;
+ font-weight: 600;
+ line-height: 1.75rem;
+
+ border-radius: var(--border-radius-default);
+
+ transition: background-color 150ms ease;
+
+ & + & {
+ margin-top: 0.5rem;
+ }
+
+ @media (pointer: fine) {
+ width: auto;
+
+ &:hover,
+ &.active {
+ background-color: var(--color-background-second);
+ }
+ }
+}
+
diff --git a/src/components/ui/SuggestionsList.tsx b/src/components/ui/SuggestionsList.tsx
new file mode 100644
index 00000000..f87f3644
--- /dev/null
+++ b/src/components/ui/SuggestionsList.tsx
@@ -0,0 +1,50 @@
+import React, { memo } from '../../lib/teact/teact';
+
+import buildClassName from '../../util/buildClassName';
+
+import styles from './SuggestionsList.module.scss';
+
+type OwnProps = {
+ position?: 'top' | 'bottom';
+ suggestions: string[];
+ activeIndex?: number;
+ isInModal?: boolean;
+ onSelect: (suggest: string) => void;
+};
+
+function SuggestionsList({
+ position = 'bottom',
+ suggestions,
+ activeIndex,
+ isInModal,
+ onSelect,
+}: OwnProps) {
+ const handleClick = (e: React.MouseEvent) => {
+ const suggest = (e.target as HTMLLIElement).innerText.trim();
+ onSelect(suggest);
+ };
+
+ return suggestions.length ? (
+ -
+ {suggestions.map((suggestion, index) => {
+ return (
+
- + {suggestion} + + ); + })} +
+ No suggestions, you're on your own!
+
+ );
+}
+
+export default memo(SuggestionsList);
diff --git a/src/components/ui/Switcher.module.scss b/src/components/ui/Switcher.module.scss
new file mode 100644
index 00000000..5341e6e0
--- /dev/null
+++ b/src/components/ui/Switcher.module.scss
@@ -0,0 +1,64 @@
+.container {
+ position: relative;
+
+ display: inline-flex;
+ align-items: center;
+
+ margin: 0;
+}
+
+.input {
+ position: absolute;
+ z-index: var(--z-below);
+
+ width: 0;
+ height: 0;
+
+ visibility: hidden;
+ opacity: 0;
+}
+
+.widget {
+ cursor: pointer;
+
+ position: relative;
+
+ display: inline-block;
+
+ width: 2.125rem;
+ height: 0.875rem;
+
+ text-indent: -999px;
+
+ background-color: var(--color-gray-4);
+ border-radius: 0.5rem;
+
+ transition: background-color 150ms ease-in;
+
+ &::after {
+ content: "";
+
+ position: absolute;
+ top: -0.125rem;
+ left: 0;
+
+ width: 1.125rem;
+ height: 1.125rem;
+
+ background-color: var(--color-background-first);
+ border: 0.125rem solid var(--color-gray-4);
+ border-radius: 0.75rem;
+
+ transition: border-color 0.2s ease-out, transform 150ms ease-in;
+ }
+}
+
+.input:checked + .widget {
+ background: var(--color-blue);
+}
+
+.input:checked + .widget:after {
+ transform: translateX(100%);
+
+ border-color: var(--color-blue);
+}
diff --git a/src/components/ui/Switcher.tsx b/src/components/ui/Switcher.tsx
new file mode 100644
index 00000000..6bcdf090
--- /dev/null
+++ b/src/components/ui/Switcher.tsx
@@ -0,0 +1,54 @@
+import type { ChangeEvent } from 'react';
+import React, { memo, useCallback } from '../../lib/teact/teact';
+
+import styles from './Switcher.module.scss';
+import buildClassName from '../../util/buildClassName';
+
+type OwnProps = {
+ id?: string;
+ name?: string;
+ value?: string;
+ label: string;
+ checked?: boolean;
+ className?: string;
+ onChange?: (e: ChangeEvent onClick(clickArg)}
+ ref={tabRef}
+ >
+
+ {title}
+
+
+
+ );
+}
+
+export default memo(Tab);
diff --git a/src/components/ui/TabList.module.scss b/src/components/ui/TabList.module.scss
new file mode 100644
index 00000000..bbf4c289
--- /dev/null
+++ b/src/components/ui/TabList.module.scss
@@ -0,0 +1,38 @@
+.container {
+ user-select: none;
+
+ z-index: 1;
+
+ overflow-x: auto;
+ overflow-y: hidden;
+ display: flex;
+ flex-shrink: 0;
+ flex-wrap: nowrap;
+ align-items: flex-end;
+ justify-content: space-between;
+
+ padding: 0 1rem;
+
+ font-size: 0.9375rem;
+ font-weight: 500;
+
+ background-color: var(--color-background-first);
+
+ scrollbar-color: rgba(0, 0, 0, 0);
+
+ scrollbar-width: none;
+
+ &::-webkit-scrollbar {
+ height: 0;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0);
+ // `box-shadow` prevents repaint on macOS when hovering out of scrollable container
+ box-shadow: 0 0 1px rgba(255, 255, 255, 0.01);
+ }
+}
+
+.big {
+ font-size: 1rem;
+}
diff --git a/src/components/ui/TabList.tsx b/src/components/ui/TabList.tsx
new file mode 100644
index 00000000..b07f217c
--- /dev/null
+++ b/src/components/ui/TabList.tsx
@@ -0,0 +1,85 @@
+import React, { memo, useRef, useEffect } from '../../lib/teact/teact';
+
+import { IS_ANDROID, IS_IOS } from '../../util/environment';
+import buildClassName from '../../util/buildClassName';
+import fastSmoothScrollHorizontal from '../../util/fastSmoothScrollHorizontal';
+import usePrevious from '../../hooks/usePrevious';
+import useHorizontalScroll from '../../hooks/useHorizontalScroll';
+
+import Tab from './Tab';
+
+import styles from './TabList.module.scss';
+
+export type TabWithProperties = {
+ title: string;
+ className?: string;
+};
+
+type OwnProps = {
+ tabs: readonly TabWithProperties[];
+ activeTab: number;
+ big?: boolean;
+ className?: string;
+ onSwitchTab: (index: number) => void;
+};
+
+const TAB_SCROLL_THRESHOLD_PX = 16;
+// Should match duration from `--slide-transition` CSS variable
+const SCROLL_DURATION = IS_IOS ? 450 : IS_ANDROID ? 400 : 300;
+
+function TabList({
+ tabs, activeTab, big, className, onSwitchTab,
+}: OwnProps) {
+ // eslint-disable-next-line no-null/no-null
+ const containerRef = useRef
+ {tabs.map((tab, i) => (
+
+ );
+}
+
+export default memo(TabList);
diff --git a/src/components/ui/Transition.scss b/src/components/ui/Transition.scss
new file mode 100644
index 00000000..b2553a0f
--- /dev/null
+++ b/src/components/ui/Transition.scss
@@ -0,0 +1,721 @@
+.Transition {
+ position: relative;
+
+ height: 100%;
+
+ > * {
+ width: 100%;
+ height: 100%;
+
+ transition: background-color 0.2s;
+ animation-fill-mode: forwards !important;
+
+ &.from,
+ &.to {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ &:not(.Transition__slide--active):not(.from):not(.to) {
+ display: none !important; // Best performance when animating container
+ //transform: scale(0); // Shortest initial delay
+ }
+ }
+
+ &.skip-slide-transition {
+ transition: none !important;
+ }
+
+ /*
+ * slide
+ */
+ &.slide-optimized,
+ &.slide-optimized-rtl {
+ contain: strict;
+ body.is-safari & {
+ // Create a new composite layer to reduce the page repaint area when switching a tab (as `contain` is not supported in Safari)
+ transform: translate3d(0, 0, 0);
+ }
+
+ #root & > div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform: scale(0);
+
+ display: block !important;
+
+ transition: transform var(--slide-transition);
+ }
+ }
+
+ &.slide {
+ > .to {
+ transform: translateX(100%);
+ }
+
+ &.animating {
+ > .from {
+ animation: slide-out var(--slide-transition);
+ }
+
+ > .to {
+ animation: slide-in var(--slide-transition);
+ }
+ }
+ }
+
+ &.slide.backwards {
+ > .to {
+ transform: translateX(-100%);
+ }
+
+ &.animating {
+ > .from {
+ animation: slide-in-backwards var(--slide-transition);
+ }
+
+ > .to {
+ animation: slide-out-backwards var(--slide-transition);
+ }
+ }
+ }
+
+ &.slide-rtl {
+ > .to {
+ transform: translateX(-100%);
+ }
+
+ &.animating {
+ > .from {
+ animation: slide-out var(--slide-transition);
+ }
+
+ > .to {
+ animation: slide-in var(--slide-transition);
+ }
+ }
+
+ &.backwards {
+ > .to {
+ transform: translateX(100%);
+ }
+
+ &.animating {
+ > .from {
+ animation: slide-in-backwards var(--slide-transition);
+ }
+
+ > .to {
+ animation: slide-out-backwards var(--slide-transition);
+ }
+ }
+ }
+ }
+
+ /*
+ * mv-slide
+ */
+
+ &.mv-slide {
+ > * > div {
+ animation-fill-mode: forwards !important;
+ }
+
+ > .to > div {
+ transform: translateX(100vw);
+ }
+
+ &.animating {
+ > .from > div {
+ animation: mv-slide-out 0.4s ease;
+ }
+
+ > .to > div {
+ animation: mv-slide-in 0.4s ease;
+ }
+ }
+ }
+
+ &.mv-slide.backwards {
+ > .to > div {
+ transform: translateX(-100vw);
+ }
+
+ &.animating {
+ > .from > div {
+ animation: mv-slide-in-backwards 0.4s ease;
+ }
+
+ > .to > div {
+ animation: mv-slide-out-backwards 0.4s ease;
+ }
+ }
+ }
+
+ /*
+ * slide-fade
+ */
+ &.slide-fade {
+ > .from {
+ transform: translateX(0);
+ transform-origin: left;
+
+ opacity: 1;
+ }
+
+ > .to {
+ transform: translateX(1.5rem);
+ transform-origin: left;
+
+ opacity: 0;
+ }
+
+ &.animating {
+ > .from {
+ animation: fade-out-opacity var(--slide-transition), slide-fade-out-move var(--slide-transition);
+ }
+
+ > .to {
+ animation: fade-in-opacity var(--slide-transition), slide-fade-in-move var(--slide-transition);
+ }
+ }
+ }
+
+ &.slide-fade.backwards {
+ > .from {
+ transform: translateX(0);
+
+ opacity: 1;
+ }
+
+ > .to {
+ transform: translateX(-1.5rem);
+
+ opacity: 0;
+ }
+
+ &.animating {
+ > .from {
+ animation: fade-in-backwards-opacity var(--slide-transition),
+ slide-fade-in-backwards-move var(--slide-transition);
+ }
+
+ > .to {
+ animation: fade-out-backwards-opacity var(--slide-transition),
+ slide-fade-out-backwards-move var(--slide-transition);
+ }
+ }
+ }
+
+ /*
+ * zoom-fade
+ */
+ &.zoom-fade {
+ > .from {
+ transform: scale(1);
+ transform-origin: center;
+
+ opacity: 1;
+ }
+
+ > .to {
+ transform-origin: center;
+
+ opacity: 0;
+ // We can omit `transform: scale(1.1);` here because `opacity` is 0.
+ // We need to for proper position calculation in `InfiniteScroll`.
+ }
+
+ &.animating {
+ > .from {
+ animation: fade-out-opacity 0.15s ease;
+ }
+
+ > .to {
+ animation: fade-in-opacity 0.15s ease, zoom-fade-in-move 0.15s ease;
+ }
+ }
+ }
+
+ &.zoom-fade.backwards {
+ > .from {
+ transform: scale(1);
+ }
+
+ > .to {
+ transform: scale(0.95);
+ }
+
+ &.animating {
+ > .from {
+ animation: fade-in-backwards-opacity 0.1s ease, zoom-fade-in-backwards-move 0.15s ease;
+ }
+
+ > .to {
+ animation: fade-out-backwards-opacity 0.15s ease, zoom-fade-out-backwards-move 0.15s ease;
+ }
+ }
+ }
+
+ /*
+ * fade
+ */
+ &.fade {
+ > .from {
+ opacity: 1;
+ }
+
+ > .to {
+ opacity: 0;
+ }
+
+ &.animating {
+ > .from {
+ animation: fade-out-opacity 300ms ease;
+ }
+
+ > .to {
+ animation: fade-in-opacity 300ms ease;
+ }
+ }
+ }
+
+ /*
+ * slide-layers
+ */
+
+ &.slide-layers {
+ --background-color: var(--color-background);
+
+ background: black;
+
+ > div {
+ background: var(--background-color);
+ }
+
+ > .to {
+ transform: translateX(100%);
+ }
+
+ &.animating {
+ > .from {
+ animation: slide-layers-out var(--layer-transition);
+ }
+
+ > .to {
+ animation: slide-in var(--layer-transition);
+ }
+ }
+ }
+
+ &.slide-layers.backwards {
+ > .to {
+ transform: translateX(-20%);
+
+ opacity: 0.75;
+ }
+
+ &.animating {
+ > .from {
+ animation: slide-in-backwards var(--layer-transition);
+ }
+
+ > .to {
+ animation: slide-layers-out-backwards var(--layer-transition);
+ }
+ }
+ }
+
+ /*
+ * push-slide
+ */
+
+ &.push-slide {
+ > div {
+ background: var(--color-body-background);
+ }
+
+ > .from {
+ transform: scale(1);
+ transform-origin: center;
+
+ opacity: 1;
+
+ .custom-scroll {
+ scrollbar-color: transparent !important;
+
+ &::-webkit-scrollbar-thumb {
+ background-color: transparent !important;
+ }
+ }
+ }
+
+ > .to {
+ transform: translateX(100%);
+ }
+
+ &.animating {
+ > .from {
+ animation: push-out 0.25s ease-in-out;
+ }
+
+ > .to {
+ animation: slide-in-200 0.25s ease-in-out;
+ }
+ }
+ }
+
+ &.push-slide.backwards {
+ > .to {
+ transform: scale(0.7);
+
+ opacity: 0;
+ }
+
+ &.animating {
+ > .from {
+ animation: slide-in-200-backwards 0.25s ease-in-out;
+ }
+
+ > .to {
+ animation: push-out-backwards 0.25s ease-in-out;
+ }
+ }
+ }
+
+ /*
+ * slide-fade
+ */
+ &.reveal {
+ > .to {
+ clip-path: inset(0 100% 0 0);
+ }
+
+ &.animating {
+ > .to {
+ animation: reveal-in 350ms ease-in;
+ }
+ }
+ }
+
+ &.reveal.backwards {
+ > .from {
+ clip-path: inset(0 0 0 0);
+ }
+
+ > .to {
+ clip-path: none;
+ }
+
+ &.animating {
+ > .from {
+ animation: reveal-in-backwards 350ms ease-out;
+ }
+
+ > .to {
+ animation: none;
+ }
+ }
+ }
+}
+
+/*
+ * common
+ */
+
+@keyframes fade-in-opacity {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fade-out-opacity {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-in-backwards-opacity {
+ 0% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+
+@keyframes fade-out-backwards-opacity {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+/*
+ * slide
+ */
+
+@keyframes slide-in {
+ 0% {
+ transform: translateX(100%);
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-out {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-100%);
+ }
+}
+
+@keyframes slide-in-backwards {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(100%);
+ }
+}
+
+@keyframes slide-out-backwards {
+ 0% {
+ transform: translateX(-100%);
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+
+/*
+ * mv-slide
+ */
+
+@keyframes mv-slide-in {
+ 0% {
+ transform: translateX(100vw);
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+
+@keyframes mv-slide-out {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-100vw);
+ }
+}
+
+@keyframes mv-slide-in-backwards {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(100vw);
+ }
+}
+
+@keyframes mv-slide-out-backwards {
+ 0% {
+ transform: translateX(-100vw);
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+
+/*
+ * slide-fade
+ */
+
+@keyframes slide-fade-in-move {
+ 0% {
+ transform: translateX(1.5rem);
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-fade-out-move {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-1.5rem);
+ }
+}
+
+@keyframes slide-fade-in-backwards-move {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(1.5rem);
+ }
+}
+
+@keyframes slide-fade-out-backwards-move {
+ 0% {
+ transform: translateX(-1.5rem);
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+
+/*
+ * zoom-fade
+ */
+
+@keyframes zoom-fade-in-move {
+ 0% {
+ transform: scale(1.1);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+@keyframes zoom-fade-in-backwards-move {
+ 0% {
+ transform: scale(1);
+ }
+ 100% {
+ transform: scale(1.1);
+ }
+}
+
+@keyframes zoom-fade-out-backwards-move {
+ 0% {
+ transform: scale(0.95);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+/*
+ * slide-layers
+ */
+
+@keyframes slide-layers-out {
+ 0% {
+ transform: translateX(0);
+
+ opacity: 1;
+ }
+ 100% {
+ transform: translateX(-20%);
+
+ opacity: calc(1 - var(--layer-blackout-opacity));
+ }
+}
+
+@keyframes slide-layers-out-backwards {
+ 0% {
+ transform: translateX(-20%);
+
+ opacity: calc(1 - var(--layer-blackout-opacity));
+ }
+ 100% {
+ transform: translateX(0);
+
+ opacity: 1;
+ }
+}
+
+/*
+ * push-slide
+ */
+
+@keyframes push-out {
+ 0% {
+ transform: scale(1);
+
+ opacity: 1;
+ }
+ 100% {
+ transform: scale(0.7);
+
+ opacity: 0;
+ }
+}
+
+@keyframes push-out-backwards {
+ 0% {
+ transform: scale(0.7);
+
+ opacity: 0;
+ }
+ 100% {
+ transform: scale(1);
+
+ opacity: 1;
+ }
+}
+
+/*
+ * slide
+ */
+
+@keyframes slide-in-200 {
+ 0% {
+ transform: translateX(200%);
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slide-in-200-backwards {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(200%);
+ }
+}
+
+/*
+ * slide
+ */
+
+@keyframes reveal-in {
+ 0% {
+ clip-path: inset(0 100% 0 0);
+ }
+ 100% {
+ clip-path: inset(0 0 0 0);
+ }
+}
+
+/*
+ * slide
+ */
+
+@keyframes reveal-in-backwards {
+ 0% {
+ clip-path: inset(0 0 0 0);
+ }
+ 100% {
+ clip-path: inset(0 100% 0 0);
+ }
+}
diff --git a/src/components/ui/Transition.tsx b/src/components/ui/Transition.tsx
new file mode 100644
index 00000000..acec3e75
--- /dev/null
+++ b/src/components/ui/Transition.tsx
@@ -0,0 +1,365 @@
+import { RefObject } from 'react';
+import React, { useLayoutEffect, useRef } from '../../lib/teact/teact';
+import { GlobalState } from '../../global/types';
+
+import { getGlobal } from '../../lib/teact/teactn';
+import { ANIMATION_LEVEL_MIN } from '../../config';
+import buildClassName from '../../util/buildClassName';
+import forceReflow from '../../util/forceReflow';
+import { waitForAnimationEnd, waitForTransitionEnd } from '../../util/cssAnimationEndListeners';
+import useForceUpdate from '../../hooks/useForceUpdate';
+import usePrevious from '../../hooks/usePrevious';
+import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck';
+
+import './Transition.scss';
+
+export type ChildrenFn = (isActive: boolean, isFrom: boolean, currentKey: number) => React.ReactNode;
+export type TransitionProps = {
+ ref?: RefObject{
+ typeof render === 'function'
+ ? render(key === activeKey, key === prevActiveKey, key)
+ : render
+ }
+
+ );
+ });
+
+ return (
+
+ {contents}
+
+ );
+}
+
+export default Transition;
+
+function performSlideOptimized(
+ animationLevel: GlobalState['settings']['animationLevel'],
+ name: 'slide-optimized' | 'slide-optimized-rtl',
+ isBackwards: boolean,
+ cleanup: NoneToVoidFunction,
+ activeKey: number,
+ currentKeyRef: { current: number | undefined },
+ container: HTMLElement,
+ shouldRestoreHeight?: boolean,
+ onStart?: NoneToVoidFunction,
+ onStop?: NoneToVoidFunction,
+ toSlide?: HTMLElement,
+ fromSlide?: HTMLElement,
+) {
+ if (!fromSlide || !toSlide) {
+ return;
+ }
+
+ if (animationLevel === ANIMATION_LEVEL_MIN) {
+ fromSlide.style.transition = 'none';
+ fromSlide.style.transform = '';
+ fromSlide.classList.remove(classNames.active);
+
+ toSlide.style.transition = 'none';
+ toSlide.style.transform = 'translate3d(0, 0, 0)';
+ toSlide.classList.add(classNames.active);
+
+ cleanup();
+
+ return;
+ }
+
+ if (name === 'slide-optimized-rtl') {
+ isBackwards = !isBackwards;
+ }
+
+ const dispatchHeavyAnimationStop = dispatchHeavyAnimationEvent();
+
+ requestAnimationFrame(() => {
+ onStart?.();
+
+ fromSlide.style.transition = 'none';
+ fromSlide.style.transform = 'translate3d(0, 0, 0)';
+
+ toSlide.style.transition = 'none';
+ toSlide.style.transform = `translate3d(${isBackwards ? '-' : ''}100%, 0, 0)`;
+
+ forceReflow(toSlide);
+
+ fromSlide.style.transition = '';
+ fromSlide.style.transform = `translate3d(${isBackwards ? '' : '-'}100%, 0, 0)`;
+
+ toSlide.style.transition = '';
+ toSlide.style.transform = 'translate3d(0, 0, 0)';
+
+ fromSlide.classList.remove(classNames.active);
+ toSlide.classList.add(classNames.active);
+
+ waitForTransitionEnd(fromSlide, () => {
+ if (activeKey !== currentKeyRef.current) {
+ return;
+ }
+
+ fromSlide.style.transition = 'none';
+ fromSlide.style.transform = '';
+
+ if (shouldRestoreHeight) {
+ toSlide.style.height = 'auto';
+ container.style.height = `${toSlide.clientHeight}px`;
+ }
+
+ onStop?.();
+ dispatchHeavyAnimationStop();
+ cleanup();
+ });
+ });
+}
diff --git a/src/components/ui/helpers/animatedAssets.ts b/src/components/ui/helpers/animatedAssets.ts
new file mode 100644
index 00000000..bf48b769
--- /dev/null
+++ b/src/components/ui/helpers/animatedAssets.ts
@@ -0,0 +1,21 @@
+import hello from '../../../assets/lottie/duck_hello.tgs';
+import guard from '../../../assets/lottie/duck_guard.tgs';
+import snitch from '../../../assets/lottie/duck_snitch.tgs';
+import bill from '../../../assets/lottie/duck_bill.tgs';
+import stonks from '../../../assets/lottie/duck_stonks.tgs';
+import thumbUp from '../../../assets/lottie/duck_thumb.tgs';
+import holdTon from '../../../assets/lottie/duck_ton.tgs';
+import happy from '../../../assets/lottie/duck_happy.tgs';
+import noData from '../../../assets/lottie/duck_no-data.tgs';
+
+export const ANIMATED_STICKERS_PATHS = {
+ hello,
+ snitch,
+ guard,
+ bill,
+ stonks,
+ thumbUp,
+ holdTon,
+ happy,
+ noData,
+};
diff --git a/src/components/ui/helpers/assetLogos.ts b/src/components/ui/helpers/assetLogos.ts
new file mode 100644
index 00000000..da802a31
--- /dev/null
+++ b/src/components/ui/helpers/assetLogos.ts
@@ -0,0 +1,7 @@
+import ton from '../../../assets/coins/ton.png';
+import btc from '../../../assets/coins/btc.png';
+
+export const ASSET_LOGO_PATHS = {
+ ton,
+ btc,
+};
diff --git a/src/config.ts b/src/config.ts
new file mode 100644
index 00000000..e6fc8382
--- /dev/null
+++ b/src/config.ts
@@ -0,0 +1,64 @@
+export const APP_NAME = process.env.APP_NAME || 'MyTonWallet';
+export const APP_VERSION = process.env.APP_VERSION!;
+
+export const DEBUG = (
+ process.env.APP_ENV !== 'production' && process.env.APP_ENV !== 'perf' && process.env.APP_ENV !== 'test'
+);
+export const DEBUG_MORE = false;
+
+export const IS_MOCKED_CLIENT = process.env.APP_MOCKED_CLIENT === '1';
+export const IS_TEST = process.env.APP_ENV === 'test';
+export const IS_PERF = process.env.APP_ENV === 'perf';
+
+export const DEBUG_ALERT_MSG = 'Shoot!\nSomething went wrong, please see the error details in Dev Tools Console.';
+
+export const MNEMONIC_COUNT = 24;
+export const MNEMONIC_CHECK_COUNT = 3;
+
+export const MOBILE_SCREEN_MAX_WIDTH = 600; // px
+export const MOBILE_SCREEN_LANDSCAPE_MAX_WIDTH = 950; // px
+export const MOBILE_SCREEN_LANDSCAPE_MAX_HEIGHT = 450; // px
+
+export const ANIMATED_STICKER_SMALL_SIZE_PX = 110;
+
+export const DEFAULT_PRICE_CURRENCY = '$';
+export const CARD_SECONDARY_VALUE_SYMBOL = 'TON';
+
+export const TOKEN_INFO = {
+ toncoin: {
+ name: 'Toncoin',
+ symbol: 'TON',
+ slug: 'toncoin',
+ quote: {
+ price: 1.95,
+ percentChange1h: 0,
+ percentChange24h: 0,
+ percentChange7d: 0,
+ percentChange30d: 0,
+ },
+ },
+};
+
+export const GLOBAL_STATE_CACHE_DISABLED = false;
+export const GLOBAL_STATE_CACHE_KEY = 'mytonwallet-global-state';
+
+export const IS_TESTNET = false;
+
+export const ANIMATION_LEVEL_MIN = 0;
+export const ANIMATION_LEVEL_MED = 1;
+export const ANIMATION_LEVEL_MAX = 2;
+export const ANIMATION_LEVEL_DEFAULT = ANIMATION_LEVEL_MAX;
+
+export const MAIN_ACCOUNT_ID = '0';
+
+export const BRILLIANT_API_BASE_URL = process.env.BRILLIANT_API_BASE_URL || 'https://mytonwallet-api.herokuapp.com';
+
+export const FRACTION_DIGITS = 9;
+
+export const TELEGRAM_WEB_URL = 'https://web.telegram.org/z/';
+
+export const TON_TOKEN_SLUG = 'toncoin';
+
+export const TRANSACTIONS_SLICE = 100;
+
+export const PROXY = process.env.PROXY;
diff --git a/src/extension/config.ts b/src/extension/config.ts
new file mode 100644
index 00000000..566e9123
--- /dev/null
+++ b/src/extension/config.ts
@@ -0,0 +1,3 @@
+export const POPUP_PORT = 'MyTonWallet_popup';
+export const CONTENT_SCRIPT_PORT = 'MyTonWallet_contentScript';
+export const PROVIDER_CHANNEL = 'MyTonWallet_provider';
diff --git a/src/extension/contentScript.ts b/src/extension/contentScript.ts
new file mode 100644
index 00000000..e2326227
--- /dev/null
+++ b/src/extension/contentScript.ts
@@ -0,0 +1,53 @@
+import { CONTENT_SCRIPT_PORT, PROVIDER_CHANNEL } from './config';
+
+(function injectScript() {
+ const scriptTag = document.createElement('script');
+ scriptTag.async = true;
+ scriptTag.src = chrome.runtime.getURL('/extensionProvider.js');
+
+ const container = document.head || document.documentElement;
+ container.appendChild(scriptTag);
+
+ scriptTag.remove();
+}());
+
+const PAGE_ORIGIN = window.location.href;
+
+let port: chrome.runtime.Port;
+
+window.addEventListener('message', handlePageMessage);
+
+connectPort();
+
+function handlePageMessage(e: MessageEvent) {
+ if (e.data?.channel === PROVIDER_CHANNEL) {
+ sendToPort(e.data);
+ }
+}
+
+function connectPort() {
+ port = chrome.runtime.connect({ name: CONTENT_SCRIPT_PORT });
+ port.onMessage.addListener(sendToPage);
+}
+
+function sendToPage(payload: any) {
+ window.postMessage(payload, PAGE_ORIGIN);
+}
+
+function sendToPort(payload: any, isRepeated = false) {
+ try {
+ port.postMessage(payload);
+ } catch (err: any) {
+ const isInvalidated = err.message.toString().includes('Extension context invalidated');
+ if (isInvalidated) {
+ window.removeEventListener('message', handlePageMessage);
+ return;
+ }
+
+ const isDisconnected = err.message.toString().includes('disconnected port');
+ if (isDisconnected && !isRepeated) {
+ connectPort();
+ sendToPort(payload, true);
+ }
+ }
+}
diff --git a/src/extension/manifest.json b/src/extension/manifest.json
new file mode 100644
index 00000000..e6a76a70
--- /dev/null
+++ b/src/extension/manifest.json
@@ -0,0 +1,51 @@
+{
+ "manifest_version": 3,
+ "name": "MyTonWallet",
+ "description": "Securely store crypto and make blockchain payments at the speed of light.",
+ "version": "%%VERSION%%",
+ "icons": {
+ "192": "icon-192x192.png",
+ "384": "icon-384x384.png",
+ "512": "icon-512x512.png"
+ },
+ "action": {
+ "default_title": "MyTonWallet"
+ },
+ "permissions": [
+ "webRequest",
+ "system.display",
+ "proxy"
+ ],
+ "background": {
+ "service_worker": "/extensionServiceWorker.js"
+ },
+ "content_scripts": [
+ {
+ "matches": [
+ "file://*/*",
+ "http://*/*",
+ "https://*/*"
+ ],
+ "js": [
+ "/extensionContentScript.js"
+ ],
+ "run_at": "document_start",
+ "all_frames": true
+ }
+ ],
+ "web_accessible_resources": [
+ {
+ "resources": [
+ "/extensionProvider.js"
+ ],
+ "matches": [
+ "file://*/*",
+ "http://*/*",
+ "https://*/*"
+ ]
+ }
+ ],
+ "content_security_policy": {
+ "extension_pages": "default-src 'none'; script-src 'self' 'wasm-unsafe-eval'; font-src https://fonts.gstatic.com/; style-src 'self' https://fonts.googleapis.com/; img-src 'self' data: https:; connect-src https://tw.mytonwallet.org https://mytonwallet-api.herokuapp.com"
+ }
+}
diff --git a/src/extension/provider.ts b/src/extension/provider.ts
new file mode 100644
index 00000000..21784021
--- /dev/null
+++ b/src/extension/provider.ts
@@ -0,0 +1,79 @@
+import { EventEmitter } from '../util/callbacks';
+import { Connector, createConnector } from '../util/PostMessageConnector';
+import { PROVIDER_CHANNEL } from './config';
+import { ApiDappUpdate } from '../api/types/dappUpdates';
+import { doTonMagic } from './provider/tonMagic';
+
+declare global {
+ interface Window {
+ tonProtocolVersion: 1;
+ ton: Provider;
+ }
+}
+
+type Methods =
+ 'ton_getBalance'
+ | 'ton_requestAccounts'
+ | 'ton_requestWallets'
+ | 'ton_sendTransaction'
+ | 'ton_rawSign'
+ | 'flushMemoryCache';
+
+class Provider extends EventEmitter {
+ public isTonWallet = true; // Native extension legacy requirement
+
+ private connector: Connector;
+
+ constructor() {
+ super();
+
+ this.connector = createConnector(window, this.onUpdate, PROVIDER_CHANNEL, window.location.href);
+ }
+
+ destroy() {
+ this.connector.destroy();
+ }
+
+ // Prefixes is the native extension legacy requirement
+ send(prefixedName: Methods, args = []) {
+ const name = prefixedName.replace('ton_', '');
+ return this.connector.request({ name, args });
+ }
+
+ private onUpdate = (update: ApiDappUpdate) => {
+ const { type, ...args } = update;
+
+ if (type === 'updateAccounts') {
+ const { accounts } = update;
+ this.emit('accountsChanged', accounts);
+
+ return;
+ }
+
+ if (type === 'updateTonMagic') {
+ const { isEnabled } = update;
+ const cb = async () => {
+ await this.send('flushMemoryCache');
+ window.location.reload();
+ };
+
+ void doTonMagic(isEnabled, cb);
+ return;
+ }
+
+ this.emit(type, args);
+
+ // TODO Implement:
+ // this.emit('notification', result);
+ // this.emit('connect');
+ // this.emit('close', code, reason);
+ };
+}
+
+if (window.ton) {
+ window.ton.destroy();
+}
+
+window.tonProtocolVersion = 1;
+window.ton = new Provider();
+window.dispatchEvent(new Event('tonready'));
diff --git a/src/extension/provider/tonMagic.ts b/src/extension/provider/tonMagic.ts
new file mode 100644
index 00000000..03afe53a
--- /dev/null
+++ b/src/extension/provider/tonMagic.ts
@@ -0,0 +1,122 @@
+import { TELEGRAM_WEB_URL } from '../../config';
+
+export async function doTonMagic(isEnabled: boolean, cb: NoneToVoidFunction) {
+ if (!window.location.href.startsWith(TELEGRAM_WEB_URL)) {
+ if (window.location.href.startsWith('https://web.telegram.org/k/')) {
+ toggleMagicBadge(isEnabled);
+ }
+
+ return;
+ }
+
+ if (isEnabled) {
+ const scriptEl = document.querySelector('script[src^="main."]')!;
+ const localRevision = scriptEl.getAttribute('src')!;
+
+ const filesToInjectResponse = await fetch(`https://ton.org/app/magic-sources.json?${Date.now()}`);
+ const filesToInject = await filesToInjectResponse.json();
+ const magicRevision = filesToInject.find((f: string) => f.startsWith('main.') && f.endsWith('.js'));
+
+ const assetCache = await window.caches.open('tt-assets');
+ const cachedResponse = await assetCache.match(localRevision);
+ if (cachedResponse) {
+ const cachedText = await cachedResponse.text();
+ // we leverage the fact that the file has its name as part of the sourcemaps appendix
+ const isMagicInjected = cachedText?.endsWith(`${magicRevision}.map`);
+ if (isMagicInjected) {
+ return;
+ }
+ }
+
+ addBadge('Loading TON magic...');
+
+ const responses = await Promise.all(filesToInject.map(async (fileName: string) => {
+ const res = await fetch(`https://ton.org/app/${fileName}`);
+
+ if (res.status !== 200) {
+ throw new Error(`[TON Wallet] Failed to load magic: ${res.statusText}. File: ${fileName}`);
+ }
+
+ return [
+ fileName,
+ new Response(await res.blob(), {
+ headers: res.headers,
+ status: res.status,
+ statusText: res.statusText,
+ }),
+ ];
+ }));
+
+ await Promise.all(responses.map(async ([fileName, response]) => {
+ if (fileName.startsWith('main.')) {
+ if (fileName.endsWith('.js')) {
+ await assetCache.put(`${TELEGRAM_WEB_URL}${localRevision}`, response.clone());
+ } else if (fileName.endsWith('.css')) {
+ const linkEl = document.querySelector('link[rel=stylesheet]')!;
+ const currentCssRevision = linkEl.getAttribute('href');
+ await assetCache.put(`${TELEGRAM_WEB_URL}${currentCssRevision}`, response.clone());
+ }
+ } else {
+ await assetCache.put(`${TELEGRAM_WEB_URL}${fileName}`, response.clone());
+ }
+ }));
+
+ localStorage.setItem('ton:magicRevision', magicRevision);
+ } else {
+ const prevMagicRevision = localStorage.getItem('ton:magicRevision');
+ if (!prevMagicRevision) {
+ return;
+ }
+
+ localStorage.removeItem('ton:magicRevision');
+ await window.caches.delete('tt-assets');
+ }
+
+ cb();
+}
+
+function toggleMagicBadge(isTurnedOn?: boolean) {
+ const columnLeft = document.getElementById('column-left');
+ const columnCenter = document.getElementById('column-center');
+
+ if (isTurnedOn) {
+ addBadge('Switch to Z version in the menu to take advantage of TON magic.');
+
+ // handle shallow screen layout
+ if (columnLeft) {
+ columnLeft.style.top = '28px';
+ }
+ if (columnCenter) {
+ columnCenter.style.top = '28px';
+ }
+ } else {
+ const badge = document.getElementById('ton-magic-badge');
+ if (badge) {
+ badge.remove();
+ if (columnLeft) {
+ columnLeft.style.top = '';
+ }
+ if (columnCenter) {
+ columnCenter.style.top = '';
+ }
+ }
+ }
+}
+
+function addBadge(html: string) {
+ const badge = document.createElement('div');
+ badge.id = 'ton-magic-badge';
+ badge.style.position = 'fixed';
+ badge.style.zIndex = '999';
+ badge.style.top = '0';
+ badge.style.background = '#3390ec';
+ badge.style.width = '100%';
+ badge.style.height = '28px';
+ badge.style.lineHeight = '28px';
+ badge.style.textAlign = 'center';
+ badge.style.fontSize = '14px';
+ badge.style.fontFamily = 'system-ui, -apple-system, "system-ui", "Helvetica Neue", sans-serif';
+ badge.style.color = 'white';
+ badge.innerHTML = html;
+ document.body.prepend(badge);
+}
diff --git a/src/extension/serviceWorker.ts b/src/extension/serviceWorker.ts
new file mode 100644
index 00000000..c8041820
--- /dev/null
+++ b/src/extension/serviceWorker.ts
@@ -0,0 +1,2 @@
+import '../api/providers/extension/extensionForPopup';
+import '../api/providers/extension/extensionForContentScript';
diff --git a/src/global/actions/api/auth.ts b/src/global/actions/api/auth.ts
new file mode 100644
index 00000000..14a78ffe
--- /dev/null
+++ b/src/global/actions/api/auth.ts
@@ -0,0 +1,102 @@
+import { AuthState } from '../../types';
+import { callApi } from '../../../api';
+import { addActionHandler, getGlobal, setGlobal } from '../..';
+import { pause } from '../../../util/schedulers';
+import { MAIN_ACCOUNT_ID, MNEMONIC_CHECK_COUNT, MNEMONIC_COUNT } from '../../../config';
+import { updateAddress, updateAuth } from '../../reducers';
+
+const CREATING_DURATION = 3300;
+
+addActionHandler('restartAuth', (global) => {
+ setGlobal(updateAuth(global, { state: AuthState.none }));
+});
+
+addActionHandler('startCreatingWallet', async (global) => {
+ setGlobal(updateAuth(global, { state: AuthState.creatingWallet, error: undefined }));
+
+ const [mnemonic] = await Promise.all([
+ callApi('generateMnemonic'),
+ pause(CREATING_DURATION),
+ ]);
+
+ setGlobal(updateAuth(getGlobal(), {
+ state: AuthState.createPassword,
+ mnemonic,
+ mnemonicCheckIndexes: selectMnemonicForCheck(),
+ }));
+});
+
+addActionHandler('afterCreatePassword', async (global, actions, { password, isImporting }) => {
+ setGlobal(updateAuth(global, { isLoading: true }));
+
+ const address = await callApi(isImporting ? 'importMnemonic' : 'createWallet', global.auth.mnemonic!, password);
+ if (!address) {
+ setGlobal(updateAuth(global, { isLoading: undefined }));
+ return;
+ }
+
+ global = getGlobal();
+ global = updateAuth(global, {
+ isLoading: undefined,
+ state: isImporting ? AuthState.ready : AuthState.createBackup,
+ address: isImporting ? undefined : address,
+ });
+
+ if (isImporting) {
+ global = updateAddress(global, MAIN_ACCOUNT_ID, address);
+ }
+
+ setGlobal(global);
+
+ actions.afterSignIn();
+});
+
+addActionHandler('afterCheckMnemonic', (global) => {
+ setGlobal(updateAddress(global, MAIN_ACCOUNT_ID, global.auth.address!));
+});
+
+addActionHandler('restartCheckMnemonicIndexes', (global) => {
+ setGlobal(updateAuth(global, {
+ mnemonicCheckIndexes: selectMnemonicForCheck(),
+ }));
+});
+
+addActionHandler('skipCheckMnemonic', (global) => {
+ global = {
+ ...global,
+ isBackupRequired: true,
+ };
+ global = updateAddress(global, MAIN_ACCOUNT_ID, global.auth.address!);
+ setGlobal(global);
+});
+
+addActionHandler('startImportingWallet', (global) => {
+ setGlobal(updateAuth(global, { state: AuthState.importWallet, error: undefined }));
+});
+
+addActionHandler('afterImportMnemonic', async (global, actions, { mnemonic }) => {
+ const isValid = await callApi('validateMnemonic', mnemonic);
+ if (!isValid) {
+ setGlobal(updateAuth(getGlobal(), {
+ error: 'Your mnemonic words are invalid.',
+ }));
+
+ return;
+ }
+
+ setGlobal(updateAuth(getGlobal(), {
+ state: AuthState.importWalletCreatePassword,
+ error: undefined,
+ mnemonic,
+ }));
+});
+
+export function selectMnemonicForCheck() {
+ return Array(MNEMONIC_COUNT)
+ .fill(0)
+ .map((_, i) => ({ i, rnd: Math.random() }))
+ .sort((a, b) => a.rnd - b.rnd)
+ .map((i) => i.i)
+ .slice(0, MNEMONIC_CHECK_COUNT)
+ .sort((a, b) => a - b);
+}
diff --git a/src/global/actions/api/initial.ts b/src/global/actions/api/initial.ts
new file mode 100644
index 00000000..5c7128a9
--- /dev/null
+++ b/src/global/actions/api/initial.ts
@@ -0,0 +1,6 @@
+import { addActionHandler } from '../../index';
+import { initApi } from '../../../api';
+
+addActionHandler('initApi', (global, actions) => {
+ void initApi(actions.apiUpdate);
+});
diff --git a/src/global/actions/api/wallet.ts b/src/global/actions/api/wallet.ts
new file mode 100644
index 00000000..af3693b4
--- /dev/null
+++ b/src/global/actions/api/wallet.ts
@@ -0,0 +1,248 @@
+import { addActionHandler, getGlobal, setGlobal } from '../../index';
+
+import { TransferState } from '../../types';
+
+import { callApi } from '../../../api';
+import {
+ updateBackupWalletModal, updateCurrentTransfer, updateSendingLoading,
+ updateCurrentSignature, clearCurrentTransfer, updateTransactionsIsLoading,
+} from '../../reducers';
+import { humanToBigStr } from '../../helpers';
+import { buildCollectionByKey } from '../../../util/iteratees';
+import { ApiTransactionDraftError } from '../../../api/types';
+import { TRANSACTIONS_SLICE } from '../../../config';
+
+addActionHandler('startTransfer', (global, actions, payload) => {
+ const { toAddress, amount, comment } = payload || {};
+
+ setGlobal(updateCurrentTransfer(global, {
+ state: TransferState.Initial,
+ error: undefined,
+ toAddress,
+ amount,
+ comment,
+ }));
+});
+
+addActionHandler('setTransferScreen', (global, actions, payload) => {
+ const { state } = payload;
+
+ setGlobal(updateCurrentTransfer(global, { state }));
+});
+
+addActionHandler('submitTransferInitial', async (global, actions, payload) => {
+ const { toAddress, amount, comment } = payload;
+
+ setGlobal(updateSendingLoading(global, true));
+
+ const result = await callApi('checkTransactionDraft', toAddress, humanToBigStr(amount), comment);
+
+ global = getGlobal();
+ global = updateSendingLoading(global, false);
+
+ if (!result || result.error) {
+ if (result?.fee) {
+ global = updateCurrentTransfer(global, { fee: result.fee });
+ }
+
+ setGlobal(global);
+
+ if (result?.error === ApiTransactionDraftError.InsufficientBalance) {
+ actions.showDialog({ message: 'The network fee has slightly changed, try sending again.' });
+ } else {
+ actions.showTxDraftError({ error: result?.error });
+ }
+
+ return;
+ }
+
+ setGlobal(updateCurrentTransfer(global, {
+ state: TransferState.Confirm,
+ error: undefined,
+ toAddress,
+ amount,
+ comment,
+ fee: result.fee,
+ }));
+});
+
+addActionHandler('fetchFee', async (global, actions, payload) => {
+ const {
+ toAddress, amount, comment,
+ } = payload;
+
+ const result = await callApi('checkTransactionDraft', toAddress, humanToBigStr(amount), comment);
+
+ if (result?.fee) {
+ setGlobal(updateCurrentTransfer(getGlobal(), { fee: result.fee }));
+ }
+});
+
+addActionHandler('submitTransferConfirm', (global) => {
+ setGlobal(updateCurrentTransfer(global, { state: TransferState.Password }));
+});
+
+addActionHandler('submitTransferPassword', async (global, actions, payload) => {
+ const { password } = payload;
+ const {
+ toAddress,
+ comment,
+ amount,
+ promiseId,
+ } = global.currentTransfer;
+
+ if (!(await callApi('verifyPassword', password))) {
+ setGlobal(updateCurrentTransfer(getGlobal(), { error: 'Wrong password, please try again' }));
+
+ return;
+ }
+
+ setGlobal(updateCurrentTransfer(getGlobal(), {
+ state: TransferState.InProgress,
+ error: undefined,
+ }));
+
+ if (promiseId) {
+ void callApi('confirmDappRequest', promiseId, password);
+
+ return;
+ }
+
+ const result = await callApi('submitTransfer', password, toAddress!, humanToBigStr(amount!), comment);
+ if (!result) {
+ actions.showDialog({
+ message: 'Transfer was unsuccessful. Try again later',
+ });
+ }
+});
+
+addActionHandler('cleanTransferError', (global) => {
+ setGlobal(updateCurrentTransfer(global, { error: undefined }));
+});
+
+addActionHandler('cancelTransfer', (global) => {
+ const { promiseId } = global.currentTransfer;
+
+ if (promiseId) {
+ void callApi('cancelDappRequest', promiseId, 'Canceled by the user');
+ }
+
+ setGlobal(clearCurrentTransfer(global));
+});
+
+addActionHandler('fetchTransactions', async (global, actions, payload) => {
+ const { offsetId, limit = TRANSACTIONS_SLICE } = payload || {};
+ global = updateTransactionsIsLoading(global, true);
+ setGlobal(global);
+
+ const result = await callApi('fetchTransactionSlice', offsetId, limit);
+ global = getGlobal();
+ global = updateTransactionsIsLoading(global, false);
+
+ if (!result) {
+ setGlobal(global);
+ return;
+ }
+
+ const transactions = buildCollectionByKey(result, 'txId');
+ const orderedTxIds = Object.keys(transactions);
+
+ setGlobal({
+ ...global,
+ transactions: {
+ ...global.transactions,
+ byTxId: { ...(global.transactions?.byTxId || {}), ...transactions },
+ orderedTxIds: (global.transactions?.orderedTxIds || []).concat(orderedTxIds),
+ nextOffsetTxId: orderedTxIds.length && orderedTxIds.length >= TRANSACTIONS_SLICE
+ ? orderedTxIds[orderedTxIds.length - 1]
+ : undefined,
+ },
+ });
+});
+
+addActionHandler('fetchNfts', async () => {
+ // TODO limit, offset
+ const result = await callApi('fetchNfts');
+ if (!result) {
+ return;
+ }
+
+ const nfts = buildCollectionByKey(result, 'address');
+
+ setGlobal({
+ ...getGlobal(),
+ nfts: {
+ byAddress: nfts,
+ orderedAddresses: Object.keys(nfts),
+ },
+ });
+});
+
+addActionHandler('startBackupWallet', async (global, actions, payload) => {
+ const { password } = payload;
+
+ setGlobal(updateBackupWalletModal(global, {
+ isLoading: true,
+ error: undefined,
+ }));
+
+ const mnemonic = await callApi('getMnemonic', password);
+
+ global = getGlobal();
+ setGlobal(updateBackupWalletModal(global, {
+ isLoading: false,
+ error: !mnemonic ? 'Wrong password, please try again.' : undefined,
+ mnemonic,
+ }));
+});
+
+addActionHandler('cleanBackupWalletError', (global) => {
+ setGlobal(updateBackupWalletModal(global, { error: undefined }));
+});
+
+addActionHandler('closeBackupWallet', (global, actions, payload) => {
+ const { isMnemonicChecked } = payload || {};
+
+ if (isMnemonicChecked) {
+ global = {
+ ...global, isBackupRequired: undefined,
+ };
+ }
+
+ setGlobal({
+ ...global,
+ backupWallet: {},
+ });
+});
+
+addActionHandler('submitSignature', async (global, actions, payload) => {
+ const { password } = payload;
+ const { promiseId } = global.currentSignature!;
+
+ if (!(await callApi('verifyPassword', password))) {
+ setGlobal(updateCurrentSignature(getGlobal(), { error: 'Wrong password, please try again' }));
+
+ return;
+ }
+
+ await callApi('confirmDappRequest', promiseId, password!);
+
+ setGlobal(updateCurrentSignature(getGlobal(), { isSigned: true }));
+});
+
+addActionHandler('cleanSignatureError', (global) => {
+ setGlobal(updateCurrentSignature(global, { error: undefined }));
+});
+
+addActionHandler('cancelSignature', (global) => {
+ const { promiseId } = global.currentSignature || {};
+
+ if (promiseId) {
+ void callApi('cancelDappRequest', promiseId, 'Canceled by the user');
+ }
+
+ setGlobal({
+ ...global,
+ currentSignature: undefined,
+ });
+});
diff --git a/src/global/actions/apiUpdates/dapp.ts b/src/global/actions/apiUpdates/dapp.ts
new file mode 100644
index 00000000..861a36c0
--- /dev/null
+++ b/src/global/actions/apiUpdates/dapp.ts
@@ -0,0 +1,84 @@
+import { TransferState } from '../../types';
+
+import { addActionHandler, setGlobal } from '../../index';
+
+import { bigStrToHuman } from '../../helpers';
+import {
+ clearCurrentSignature,
+ clearCurrentTransfer,
+ updateCurrentSignature,
+ updateCurrentTransfer,
+} from '../../reducers';
+
+addActionHandler('apiUpdate', (global, actions, update) => {
+ switch (update.type) {
+ case 'createTransaction': {
+ const {
+ promiseId,
+ amount,
+ toAddress,
+ fee,
+ comment,
+ } = update;
+
+ global = clearCurrentTransfer(global);
+ global = updateCurrentTransfer(global, {
+ state: TransferState.Confirm,
+ toAddress,
+ amount: bigStrToHuman(amount), // TODO Unsafe?
+ fee,
+ comment,
+ promiseId,
+ });
+ setGlobal(global);
+
+ break;
+ }
+
+ case 'createSignature': {
+ const { promiseId, dataHex } = update;
+
+ global = clearCurrentSignature(global);
+ global = updateCurrentSignature(global, {
+ promiseId,
+ dataHex,
+ });
+ setGlobal(global);
+
+ break;
+ }
+
+ case 'showTxDraftError': {
+ const { error } = update;
+ actions.showTxDraftError({ error });
+
+ break;
+ }
+
+ case 'updateTonProxyState': {
+ const { isEnabled } = update;
+
+ setGlobal({
+ ...global,
+ settings: {
+ ...global.settings,
+ isTonProxyEnabled: isEnabled,
+ },
+ });
+
+ break;
+ }
+
+ case 'updateTonMagicState': {
+ const { isEnabled } = update;
+
+ setGlobal({
+ ...global,
+ settings: {
+ ...global.settings,
+ isTonMagicEnabled: isEnabled,
+ },
+ });
+ }
+ }
+});
diff --git a/src/global/actions/apiUpdates/initial.ts b/src/global/actions/apiUpdates/initial.ts
new file mode 100644
index 00000000..1aebe3e1
--- /dev/null
+++ b/src/global/actions/apiUpdates/initial.ts
@@ -0,0 +1,29 @@
+import { GlobalState } from '../../types';
+
+import { addActionHandler, setGlobal } from '../../index';
+
+import { updateBalance, updateTokens, updateTransaction } from '../../reducers';
+
+addActionHandler('apiUpdate', (global, actions, update) => {
+ let newGlobal: GlobalState | undefined;
+ switch (update.type) {
+ case 'updateBalance':
+ newGlobal = updateBalance(global, update.accountId, update.slug, update.balance);
+ if (newGlobal) {
+ setGlobal(newGlobal);
+ }
+
+ break;
+
+ case 'newTransaction':
+ newGlobal = updateTransaction(global, update.transaction);
+ setGlobal(newGlobal);
+ break;
+
+ case 'updateTokens':
+ newGlobal = updateTokens(global, update.tokens);
+ setGlobal(newGlobal);
+
+ break;
+ }
+});
diff --git a/src/global/actions/apiUpdates/transactions.ts b/src/global/actions/apiUpdates/transactions.ts
new file mode 100644
index 00000000..2669cda8
--- /dev/null
+++ b/src/global/actions/apiUpdates/transactions.ts
@@ -0,0 +1,21 @@
+import { TransferState } from '../../types';
+
+import { addActionHandler, setGlobal } from '../../index';
+
+import { updateCurrentTransfer } from '../../reducers';
+import { bigStrToHuman } from '../../helpers';
+
+addActionHandler('apiUpdate', (global, actions, update) => {
+ switch (update.type) {
+ case 'updateTxComplete': {
+ const { amount, toAddress, txId } = update;
+ if (bigStrToHuman(amount) !== global.currentTransfer.amount || toAddress !== global.currentTransfer.toAddress) {
+ return;
+ }
+
+ setGlobal(updateCurrentTransfer(global, { state: TransferState.Complete, txId }));
+
+ break;
+ }
+ }
+});
diff --git a/src/global/actions/index.ts b/src/global/actions/index.ts
new file mode 100644
index 00000000..80fa7d43
--- /dev/null
+++ b/src/global/actions/index.ts
@@ -0,0 +1,9 @@
+import './ui/initial';
+
+import './api/initial';
+import './api/auth';
+import './api/wallet';
+
+import './apiUpdates/initial';
+import './apiUpdates/transactions';
+import './apiUpdates/dapp';
diff --git a/src/global/actions/ui/initial.ts b/src/global/actions/ui/initial.ts
new file mode 100644
index 00000000..c5e5c27a
--- /dev/null
+++ b/src/global/actions/ui/initial.ts
@@ -0,0 +1,162 @@
+import { getActions } from '../../../lib/teact/teactn';
+import { addActionHandler } from '../../index';
+
+import type { NotificationType } from '../../types';
+
+import {
+ IS_IOS, IS_ANDROID, IS_MAC_OS, IS_SAFARI, IS_EXTENSION,
+} from '../../../util/environment';
+import { callApi } from '../../../api';
+import { onTickEnd } from '../../../util/schedulers';
+import { ApiTransactionDraftError } from '../../../api/types';
+
+addActionHandler('init', () => {
+ const { documentElement } = document;
+
+ if (IS_IOS) {
+ documentElement.classList.add('is-ios');
+ } else if (IS_ANDROID) {
+ documentElement.classList.add('is-android');
+ } else if (IS_MAC_OS) {
+ documentElement.classList.add('is-macos');
+ }
+ if (IS_SAFARI) {
+ documentElement.classList.add('is-safari');
+ }
+ if (IS_EXTENSION) {
+ documentElement.classList.add('is-extension');
+ }
+});
+
+addActionHandler('showDialog', (global, actions, payload) => {
+ const { message } = payload;
+
+ const newDialogs = [...global.dialogs];
+ const existingMessageIndex = newDialogs.findIndex((value) => value === message);
+ if (existingMessageIndex !== -1) {
+ newDialogs.splice(existingMessageIndex, 1);
+ }
+
+ newDialogs.push(message);
+
+ return {
+ ...global,
+ dialogs: newDialogs,
+ };
+});
+
+addActionHandler('dismissDialog', (global) => {
+ const newDialogs = [...global.dialogs];
+
+ newDialogs.pop();
+
+ return {
+ ...global,
+ dialogs: newDialogs,
+ };
+});
+
+addActionHandler('selectToken', (global, actions, { slug }) => {
+ return {
+ ...global,
+ currentTokenSlug: slug,
+ };
+});
+
+addActionHandler('showTxDraftError', (global, actions, { error }) => {
+ switch (error) {
+ case ApiTransactionDraftError.InvalidAmount:
+ actions.showDialog({ message: 'Invalid amount' });
+ break;
+
+ case ApiTransactionDraftError.InvalidToAddress:
+ actions.showDialog({ message: 'Invalid address' });
+ break;
+
+ case ApiTransactionDraftError.InsufficientBalance:
+ actions.showDialog({ message: 'Insufficient balance' });
+ break;
+
+ case ApiTransactionDraftError.DomainNotResolved:
+ actions.showDialog({ message: 'Domain is not connected to a wallet' });
+ break;
+
+ default:
+ actions.showDialog({ message: 'Unexpected error' });
+ break;
+ }
+});
+
+addActionHandler('showNotification', (global, actions, payload) => {
+ const { message, icon } = payload;
+
+ const newNotifications: NotificationType[] = [...global.notifications];
+ const existingNotificationIndex = newNotifications.findIndex((n) => n.message === message);
+ if (existingNotificationIndex !== -1) {
+ newNotifications.splice(existingNotificationIndex, 1);
+ }
+
+ newNotifications.push({ message, icon });
+
+ return {
+ ...global,
+ notifications: newNotifications,
+ };
+});
+
+addActionHandler('dismissNotification', (global) => {
+ const newNotifications = [...global.notifications];
+
+ newNotifications.pop();
+
+ return {
+ ...global,
+ notifications: newNotifications,
+ };
+});
+
+addActionHandler('toggleTonProxy', (global, actions, { isEnabled }) => {
+ void callApi('doProxy', isEnabled);
+
+ return {
+ ...global,
+ settings: {
+ ...global.settings,
+ isTonProxyEnabled: isEnabled,
+ },
+ };
+});
+
+addActionHandler('toggleTonMagic', (global, actions, { isEnabled }) => {
+ void callApi('doMagic', isEnabled);
+
+ return {
+ ...global,
+ settings: {
+ ...global.settings,
+ isTonMagicEnabled: isEnabled,
+ },
+ };
+});
+
+addActionHandler('showTransactionInfo', (global, actions, { txId }) => {
+ return {
+ ...global,
+ currentTransactionId: txId,
+ };
+});
+
+addActionHandler('closeTransactionInfo', (global) => {
+ return {
+ ...global,
+ currentTransactionId: undefined,
+ };
+});
+
+addActionHandler('signOut', async () => {
+ await callApi('resetAccount');
+
+ onTickEnd(() => {
+ getActions().init();
+ });
+});
diff --git a/src/global/cache.ts b/src/global/cache.ts
new file mode 100644
index 00000000..05a20404
--- /dev/null
+++ b/src/global/cache.ts
@@ -0,0 +1,129 @@
+import { addCallback, removeCallback } from '../lib/teact/teactn';
+
+import { GlobalState } from './types';
+
+import { onBeforeUnload, onIdle, throttle } from '../util/schedulers';
+import {
+ DEBUG, GLOBAL_STATE_CACHE_DISABLED, GLOBAL_STATE_CACHE_KEY, MAIN_ACCOUNT_ID,
+} from '../config';
+import { isHeavyAnimating } from '../hooks/useHeavyAnimationCheck';
+import { pick } from '../util/iteratees';
+
+import { INITIAL_STATE } from './initialState';
+import { addActionHandler, getGlobal } from './index';
+
+const UPDATE_THROTTLE = 5000;
+
+const updateCacheThrottled = throttle(() => onIdle(updateCache), UPDATE_THROTTLE, false);
+
+let isCaching = false;
+let unsubscribeFromBeforeUnload: NoneToVoidFunction | undefined;
+
+export function initCache() {
+ if (GLOBAL_STATE_CACHE_DISABLED) {
+ return;
+ }
+
+ addActionHandler('afterSignIn', () => {
+ setupCaching();
+ });
+
+ addActionHandler('signOut', () => {
+ localStorage.removeItem(GLOBAL_STATE_CACHE_KEY);
+
+ if (!isCaching) {
+ return;
+ }
+
+ clearCaching();
+ });
+}
+
+export function loadCache(initialState: GlobalState) {
+ return readCache(initialState);
+}
+
+function setupCaching() {
+ isCaching = true;
+ unsubscribeFromBeforeUnload = onBeforeUnload(() => {
+ // Allow to manually delete cache
+ if (DEBUG && !localStorage.getItem(GLOBAL_STATE_CACHE_KEY)) {
+ return;
+ }
+
+ updateCache();
+ }, true);
+ window.addEventListener('blur', updateCache);
+ addCallback(updateCacheThrottled);
+}
+
+function clearCaching() {
+ isCaching = false;
+ removeCallback(updateCacheThrottled);
+ window.removeEventListener('blur', updateCache);
+ if (unsubscribeFromBeforeUnload) {
+ unsubscribeFromBeforeUnload();
+ }
+}
+
+function readCache(initialState: GlobalState): GlobalState {
+ if (DEBUG) {
+ // eslint-disable-next-line no-console
+ console.time('global-state-cache-read');
+ }
+
+ const json = localStorage.getItem(GLOBAL_STATE_CACHE_KEY);
+ const cached = json ? JSON.parse(json) as GlobalState : undefined;
+
+ if (DEBUG) {
+ // eslint-disable-next-line no-console
+ console.timeEnd('global-state-cache-read');
+ }
+
+ if (cached) {
+ migrateCache(cached, initialState);
+ }
+
+ return {
+ ...initialState,
+ ...cached,
+ };
+}
+
+function migrateCache(cached: GlobalState, initialState: GlobalState) {
+ // Pre-fill settings with defaults
+ cached.settings = {
+ ...initialState.settings,
+ ...cached.settings,
+ };
+
+ if (cached.balances?.byAccountId && 'byTicker' in cached.balances.byAccountId[MAIN_ACCOUNT_ID]) {
+ cached.balances = undefined;
+ }
+}
+
+function updateCache() {
+ if (GLOBAL_STATE_CACHE_DISABLED) {
+ return;
+ }
+
+ if (!isCaching || isHeavyAnimating()) {
+ return;
+ }
+
+ const global = getGlobal();
+
+ const reducedGlobal: GlobalState = {
+ ...INITIAL_STATE,
+ ...pick(global, [
+ 'addresses',
+ 'balances',
+ 'tokenInfo',
+ 'settings',
+ 'isBackupRequired',
+ ]),
+ };
+
+ const json = JSON.stringify(reducedGlobal);
+ localStorage.setItem(GLOBAL_STATE_CACHE_KEY, json);
+}
diff --git a/src/global/helpers/index.ts b/src/global/helpers/index.ts
new file mode 100644
index 00000000..558640b0
--- /dev/null
+++ b/src/global/helpers/index.ts
@@ -0,0 +1,14 @@
+const HUMAN_FACTOR = 1e9;
+
+export function bigStrToHuman(amount: string) {
+ return divideBigInt(BigInt(amount), BigInt(HUMAN_FACTOR));
+}
+
+export function humanToBigStr(amount: number) {
+ return String(Math.round(amount * HUMAN_FACTOR));
+}
+
+function divideBigInt(a: bigint, b: bigint) {
+ const div = a / b;
+ return Number(div) + Number(a - div * b) / Number(b);
+}
diff --git a/src/global/index.ts b/src/global/index.ts
new file mode 100644
index 00000000..c0d70bd6
--- /dev/null
+++ b/src/global/index.ts
@@ -0,0 +1,10 @@
+import { typify } from '../lib/teact/teactn';
+import { GlobalState, ActionPayloads } from './types';
+
+const typed = typify = (props: P) => any;
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export type FC_withDebug = FC & {
+ DEBUG_contentComponentName?: string;
+};
+
+export enum VirtualElementTypesEnum {
+ Empty,
+ Text,
+ Tag,
+ Component,
+}
+
+interface VirtualElementEmpty {
+ type: VirtualElementTypesEnum.Empty;
+ target?: Node;
+}
+
+interface VirtualElementText {
+ type: VirtualElementTypesEnum.Text;
+ target?: Node;
+ value: string;
+}
+
+export interface VirtualElementTag {
+ type: VirtualElementTypesEnum.Tag;
+ target?: Node;
+ tag: string;
+ props: Props;
+ children: VirtualElementChildren;
+}
+
+export interface VirtualElementComponent {
+ type: VirtualElementTypesEnum.Component;
+ componentInstance: ComponentInstance;
+ props: Props;
+ children: VirtualElementChildren;
+}
+
+export type StateHookSetter