+
+ );
+}
+
+export default AccountCreationAnimation;
diff --git a/src/account/component/account-creation-animation/_account-creation-animation.scss b/src/account/component/account-creation-animation/_account-creation-animation.scss
new file mode 100644
index 0000000..d637dc5
--- /dev/null
+++ b/src/account/component/account-creation-animation/_account-creation-animation.scss
@@ -0,0 +1,181 @@
+.account-creation-animation {
+ width: 424px;
+ height: 510px;
+}
+
+.account-creation-animation__icon-wrapper {
+ position: relative;
+
+ width: 56px;
+ height: 56px;
+
+ margin: 186px auto 28px;
+
+ background-color: var(--helper-purple-default);
+ border-radius: 50%;
+
+ animation: accountCreationIconColor 1s forwards;
+ animation-delay: 3s;
+}
+
+.account-creation-animation__icon--lottie-wrapper {
+ background-color: transparent;
+}
+
+.account-creation-animation__icon--lottie {
+ width: 56px;
+ height: 56px;
+
+ animation: accountCreationFadeOut 1s forwards;
+ animation-delay: 3s;
+}
+
+.account-creation-animation__icon--checkmark {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+
+ width: 30px;
+ height: 30px;
+
+ transform: translate(-50%, -50%) scale(0);
+
+ animation: accountCreationFadeIn 1s forwards;
+ animation-delay: 3s;
+
+ path {
+ fill: var(--primary-button-text);
+ }
+}
+
+.account-creation-animation__loading-text-list {
+ position: relative;
+}
+
+.account-creation-animation__loading-text-list-item {
+ position: absolute;
+ top: 0;
+ left: 50%;
+
+ width: 100%;
+
+ opacity: 0;
+
+ text-align: center;
+
+ transform: translateX(-50%);
+
+ &:nth-child(1) {
+ animation: firstAccountCreationSlide 4s forwards;
+ }
+
+ &:nth-child(2) {
+ animation: secondAccountCreationSlide 2s forwards;
+ animation-delay: 2s;
+ }
+
+ &:nth-child(3) {
+ animation: thirdAccountCreationSlide 1s forwards;
+ animation-delay: 3s;
+ }
+}
+
+@keyframes accountCreationFadeOut {
+ from {
+ transform: scale(100%);
+ }
+
+ to {
+ transform: scale(0);
+ }
+}
+
+@keyframes accountCreationFadeIn {
+ from {
+ transform: translate(-50%, -50%) scale(0);
+ }
+
+ to {
+ transform: translate(-50%, -50%) scale(100%);
+ }
+}
+
+@keyframes accountCreationIconColor {
+ from {
+ background-color: var(--helper-purple-default);
+ }
+
+ to {
+ background-color: var(--helper-green-default);
+ }
+}
+
+@keyframes firstAccountCreationSlide {
+ 0% {
+ top: 0;
+
+ opacity: 1;
+
+ transform: translateX(-50%);
+ }
+
+ 50% {
+ top: 0;
+
+ opacity: 1;
+
+ transform: translateX(-50%);
+ }
+
+ 75% {
+ top: 40px;
+
+ opacity: 0.5;
+
+ transform: translateX(-50%) scale(80%);
+ }
+
+ 100% {
+ top: 80px;
+
+ opacity: 0.3;
+
+ transform: translateX(-50%) scale(60%);
+ }
+}
+
+@keyframes secondAccountCreationSlide {
+ 0% {
+ top: 0;
+
+ opacity: 0;
+
+ transform: translateX(-50%);
+ }
+
+ 50% {
+ top: 0;
+
+ opacity: 1;
+
+ transform: translateX(-50%);
+ }
+
+ 100% {
+ top: 40px;
+
+ opacity: 0.5;
+
+ transform: translateX(-50%) scale(80%);
+ }
+}
+
+@keyframes thirdAccountCreationSlide {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
diff --git a/src/account/component/account-creation-animation/util/accountCreationAnimationConstants.ts b/src/account/component/account-creation-animation/util/accountCreationAnimationConstants.ts
new file mode 100644
index 0000000..3b8dbc5
--- /dev/null
+++ b/src/account/component/account-creation-animation/util/accountCreationAnimationConstants.ts
@@ -0,0 +1,87 @@
+const ACCOUNT_CREATION_LOADING_TEXTS = [
+ "Adding Hidden Agendas",
+ "Adjusting Bell Curves",
+ "Aesthesizing Industrial Areas",
+ "Aligning Covariance Matrices",
+ "Applying Feng Shui Shaders",
+ "Applying Theatre Soda Layer",
+ "Asserting Packed Exemplars",
+ "Attempting to Lock Back-Buffer",
+ "Binding Sapling Root System",
+ "Breeding Fauna",
+ "Building Data Trees",
+ "Bureacritizing Bureaucracies",
+ "Calibrating Blue Skies",
+ "Charging Ozone Layer",
+ "Coalescing Cloud Formations",
+ "Cohorting Exemplars",
+ "Collecting Meteor Particles",
+ "Compounding Inert Tessellations",
+ "Compressing Fish Files",
+ "Computing Optimal Bin Packing",
+ "Concatenating Sub-Contractors",
+ "Containing Existential Buffer",
+ "Debarking Ark Ramp",
+ "Decomposing Singular Values",
+ "Decrementing Tectonic Plates",
+ "Deleting Ferry Routes",
+ "Depositing Slush Funds",
+ "Destabilizing Economic Indicators",
+ "Determining Width of Blast Fronts",
+ "Deunionizing Bulldozers",
+ "Dicing Models",
+ "Extracting Resources",
+ "Factoring Pay Scale",
+ "Fixing Election Outcome Matrix",
+ "Flood-Filling Ground Water",
+ "Flushing Pipe Network",
+ "Gathering Particle Sources",
+ "Generating Jobs",
+ "Gesticulating Mimes",
+ "Graphing Whale Migration",
+ "Hiding Willio Webnet Mask",
+ "Implementing Impeachment Routine",
+ "Increasing Magmafacation",
+ "Inserting Sublimated Messages",
+ "Integrating Curves",
+ "Integrating Population Graphs",
+ "Iterating Cellular Automata",
+ "Lecturing Errant Subsystems",
+ "Mixing Genetic Pool",
+ "Modeling Object Components",
+ "Mopping Occupant Leaks",
+ "Normalizing Power",
+ "Obfuscating Quigley Matrix",
+ "Perturbing Matrices",
+ "Pixalating Nude Patch",
+ "Polishing Water Highlights",
+ "Populating Lot Templates",
+ "Preparing Sprites for Random Walks",
+ "Prioritizing Landmarks",
+ "Realigning Alternate Time Frames",
+ "Relaxing Splines",
+ "Removing Texture Gradients",
+ "Resolving GUID Conflict",
+ "Reticulating Splines",
+ "Retracting Phong Shader",
+ "Retrieving from Back Store",
+ "Scattering Rhino Food Sources",
+ "Scrubbing Terrain",
+ "Searching for Llamas",
+ "Sequencing Particles",
+ "Setting Advisor Moods",
+ "Setting Inner Deity Indicators",
+ "Setting Universal Physical Constants",
+ "Speculating Stock Market Indices",
+ "Splatting Transforms",
+ "Stratifying Ground Layers",
+ "Sub-Sampling Water Data",
+ "Synthesizing Gravity",
+ "Synthesizing Wavelets",
+ "Time-Compressing Simulator Clock",
+ "Unable to Reveal Current Activity",
+ "Weathering Buildings",
+ "Zeroing Crime Network"
+];
+
+export {ACCOUNT_CREATION_LOADING_TEXTS};
diff --git a/src/account/component/account-list/account-list-item-content/AccountListItemContent.tsx b/src/account/component/account-list/account-list-item-content/AccountListItemContent.tsx
new file mode 100644
index 0000000..c817a8b
--- /dev/null
+++ b/src/account/component/account-list/account-list-item-content/AccountListItemContent.tsx
@@ -0,0 +1,55 @@
+import "./_account-list-item-content.scss";
+
+import classNames from "classnames";
+
+import {getAccountIcon, trimAccountAddress} from "../../../util/accountUtils";
+import {ALGO_UNIT} from "../../../../core/ui/typography/typographyConstants";
+import {defaultPriceFormatter} from "../../../../core/util/number/numberUtils";
+
+export type AccountListItemContentProps = {
+ address: string;
+ accountType?: AccountType;
+ name?: string;
+ balance?: string;
+};
+
+function AccountListItemContent({
+ accountType,
+ name,
+ address,
+ balance
+}: AccountListItemContentProps) {
+ const {algoFormatter} = defaultPriceFormatter();
+ const accountAddressClassname = classNames({
+ "typography--secondary-body text-color--gray-light": name,
+ "typography--body": !name
+ });
+
+ return (
+
+
+
+ -
+ {(item) => (
+
+ {getAccountIcon({type: accountType, width: 32, height: 32})}
+
+
+ );
+}
+
+export default AccountListItemContent;
diff --git a/src/account/component/account-list/account-list-item-content/_account-list-item-content.scss b/src/account/component/account-list/account-list-item-content/_account-list-item-content.scss
new file mode 100644
index 0000000..87e5e56
--- /dev/null
+++ b/src/account/component/account-list/account-list-item-content/_account-list-item-content.scss
@@ -0,0 +1,40 @@
+.account-list-item-content {
+ position: relative;
+
+ display: grid;
+ align-items: center;
+ grid-template-columns: 32px 240px 1fr;
+ grid-gap: 0 16px;
+
+ &:not(:last-child):after {
+ position: absolute;
+
+ bottom: -16px;
+
+ width: 100%;
+
+ border-bottom: solid 1px var(--gray-200);
+
+ content: "";
+ }
+
+ .account-list-item-content__wallet-icon {
+ display: grid;
+
+ width: 32px;
+ height: 32px;
+
+ background: #8bf4db;
+ border-radius: 100%;
+ place-content: center;
+ }
+
+ .account-list-item-content__account-info {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .account-balance {
+ margin-left: auto;
+ }
+}
diff --git a/src/account/component/account-mnemonic-form/AccountMnemonicForm.tsx b/src/account/component/account-mnemonic-form/AccountMnemonicForm.tsx
new file mode 100644
index 0000000..50f75f1
--- /dev/null
+++ b/src/account/component/account-mnemonic-form/AccountMnemonicForm.tsx
@@ -0,0 +1,119 @@
+import React, {SyntheticEvent} from "react";
+import {FormField, Input, useToaster} from "@hipo/react-ui-toolkit";
+
+import "./_account-mnemonic-form.scss";
+
+import {generateNumberArray, replaceAtIndex} from "../../../core/util/array/arrayUtils";
+import {MNEMONIC_LENGTH} from "../../util/accountConstants";
+import Button from "../../../component/button/Button";
+import useFormito from "../../../core/util/hook/formito/useFormito";
+import {validatePassphraseForm} from "../../page/import/passphrase/recovery/util/accountImportPassphraseRecoveryUtils";
+import {MNEMONIC_KEYS_COMMA_OR_SPACE_REGEX} from "./util/accountMnemonicFormConstants";
+import PeraToast from "../../../component/pera-toast/PeraToast";
+
+interface AccountMnemonicFormProps {
+ onFormSubmit: (mnemonicKeys: string[]) => void;
+}
+
+const initialMnemonicForm = {
+ mnemonicKeys: [] as string[]
+};
+
+function AccountMnemonicForm({onFormSubmit}: AccountMnemonicFormProps) {
+ const {
+ formitoState: {mnemonicKeys},
+ dispatchFormitoAction: dispatchMnemonicFormAction
+ } = useFormito(initialMnemonicForm);
+ const toaster = useToaster();
+
+ return (
+
+ );
+
+ function handleFormSubmit(event: SyntheticEvent
+ {name && (
+
+ {name}
+
+ )}
+
+ {trimAccountAddress(address)}
+
+
+ {balance && (
+ {`${ALGO_UNIT}${algoFormatter(Number(balance), {
+ maximumFractionDigits: 2
+ })}
+ `}
+ )}
+
+
+ );
+
+ function handleConfirmClick() {
+ closeModal();
+
+ dispatchModalStateAction({
+ type: "OPEN_MODAL",
+ payload: {
+ item: {
+ id: PASSWORD_ACCESS_MODAL_ID,
+ modalContentLabel: "Remove Account Confirmation",
+ children: (
+
+
+
+
+
+
+
+
+
+ + {"Remove account"} +
+ ++ {"You are about to unlink your account "} + {`"${account.name}"`} + { + " from this device. This does not delete the account, but to re-add it in future, you will need to import it again with your 25 word passphrase." + } +
+
+
+ );
+
+ async function handleRenameAccountSubmit(accountName: string) {
+ const {address, pk, date} = account;
+
+ const renamedAccount = {
+ type: "standard" as AccountType,
+ name: accountName,
+ address,
+ pk,
+ date
+ };
+
+ await appDBManager.set("accounts", masterkey!)(address, renamedAccount);
+
+ dispatchAppState({type: "SET_ACCOUNT", account: renamedAccount});
+
+ closeModal();
+
+ simpleToaster.display({
+ message: "Account name changed",
+ type: "success"
+ });
+ }
+
+ function handleCancelClick() {
+ closeModal();
+ }
+
+ function closeModal() {
+ dispatchModalStateAction({
+ type: "CLOSE_MODAL",
+ payload: {
+ id: ACCOUNT_RENAME_MODAL_ID
+ }
+ });
+ }
+}
+
+export default AccountRenameModal;
diff --git a/src/account/component/account-rename-modal/_account-rename-modal.scss b/src/account/component/account-rename-modal/_account-rename-modal.scss
new file mode 100644
index 0000000..bf39b0c
--- /dev/null
+++ b/src/account/component/account-rename-modal/_account-rename-modal.scss
@@ -0,0 +1,17 @@
+.account-rename-modal {
+ width: 424px;
+
+ .account-name-form__cta {
+ margin-top: 120px;
+ }
+}
+
+.account-rename-modal__title {
+ margin-bottom: 32px;
+}
+
+.account-rename-modal__cancel-cta {
+ width: 100%;
+
+ margin-top: 8px;
+}
diff --git a/src/account/component/list/empty/EmptyAccountList.tsx b/src/account/component/list/empty/EmptyAccountList.tsx
new file mode 100644
index 0000000..d30c4d9
--- /dev/null
+++ b/src/account/component/list/empty/EmptyAccountList.tsx
@@ -0,0 +1,31 @@
+import {ReactComponent as EmptyWalletIcon} from "../../../../core/ui/icons/empty-wallet.svg";
+import {ReactComponent as PlusIcon} from "../../../../core/ui/icons/plus.svg";
+
+import "./_empty-account-list.scss";
+
+import LinkButton from "../../../../component/button/LinkButton";
+import ROUTES from "../../../../core/route/routes";
+
+function EmptyAccountList() {
+ return (
+ + {"Name your account"} +
+ +
+
+
+
+ );
+}
+
+export default EmptyAccountList;
diff --git a/src/account/component/list/empty/_empty-account-list.scss b/src/account/component/list/empty/_empty-account-list.scss
new file mode 100644
index 0000000..a733e78
--- /dev/null
+++ b/src/account/component/list/empty/_empty-account-list.scss
@@ -0,0 +1,27 @@
+.empty-account-list {
+ margin: auto;
+
+ text-align: center;
+
+ .empty-wallet-icon {
+ margin-bottom: 32px;
+
+ path {
+ fill: var(--text-gray-light);
+ }
+ }
+}
+
+.empty-account-list__cta {
+ display: flex;
+ gap: 8px;
+
+ width: 240px;
+ height: 48px;
+
+ margin: 48px auto 0;
+
+ .plus-icon path {
+ fill: var(--primary-button-text);
+ }
+}
diff --git a/src/account/component/list/searchable/SearchableAccountList.tsx b/src/account/component/list/searchable/SearchableAccountList.tsx
new file mode 100644
index 0000000..476a399
--- /dev/null
+++ b/src/account/component/list/searchable/SearchableAccountList.tsx
@@ -0,0 +1,74 @@
+import "./_searchable-account-list.scss";
+
+import {useState} from "react";
+import classNames from "classnames";
+
+import SearchableList from "../../../../component/list/searchable-list/SearchableList";
+import SelectableListItem from "../../../../component/list/selectable-list-item/SelectableListItem";
+import {useAppContext} from "../../../../core/app/AppContext";
+import {PortfolioOverview} from "../../../../overview/util/hook/usePortfolioOverview";
+import AccountListItemContent from "../../account-list/account-list-item-content/AccountListItemContent";
+import EmptyAccountList from "../empty/EmptyAccountList";
+
+interface SearchableAccountListProps {
+ accounts: PortfolioOverview["accounts"];
+ onSelectAccount: (address: string) => void;
+ customClassName?: string;
+}
+
+function SearchableAccountList({
+ accounts: searchableAccounts,
+ onSelectAccount,
+ customClassName
+}: SearchableAccountListProps) {
+ const [filteredAccounts, setFilteredAccounts] =
+ useState+ {"You have no accounts yet"} +
+ ++ {"Add your first account to Pera Web"} +
+ +
+ {isMultipleSelect && toggleAllCheckboxContent && (
+
+ );
+
+ function generateInitialSelectAccountsFormitoState(initialSelectedStatus: boolean) {
+ const initialState = {} as Record
+
+ {checkIfAllAccountsChecked() ? "Unselect all" : "Select all"}
+
+ ),
+ inputProps: {htmlFor: "select-all", name: "select-all", value: ""}
+ }}
+ />
+
+ {toggleAllCheckboxContent}
+
+ )}
+
+ -
+
-
+ {(account) => (
+
-
+ {({id, icon, helperText, title, to, imgSrc}) => (
+
+ {!shouldShowIllustrations && icon}
+
+ {!hasAccounts && (
+
+
+ {shouldShowIllustrations && (
+ + {helperText} +
+ )} + +
+
+ + {title} +
+ +
+
+ );
+
+ async function handleCreateAccountFormSubmit(accountName: string) {
+ const pk = await encryptSK(account.sk, masterkey!);
+ const newAccount = {
+ type: "standard",
+ address: account.addr,
+ name: accountName,
+ pk,
+ date: new Date()
+ } as AppDBAccount;
+
+ await appDBManager.set("accounts", masterkey!)(account.addr, newAccount);
+
+ dispatchAppState({
+ type: "SET_ACCOUNT",
+ account: newAccount
+ });
+
+ if (flow === "connect") {
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ createAccountViews: "animation"
+ }
+ });
+ } else {
+ navigate(ROUTES.ACCOUNT.CREATE.PENDING.ROUTE, {
+ state: {creationType: "create"}
+ });
+ }
+ }
+}
+
+export default AccountCreate;
diff --git a/src/account/page/create/_account-create.scss b/src/account/page/create/_account-create.scss
new file mode 100644
index 0000000..8920c69
--- /dev/null
+++ b/src/account/page/create/_account-create.scss
@@ -0,0 +1,12 @@
+.account-create {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ width: 424px;
+}
+
+.account-create__title,
+.account-create__address-box {
+ margin-bottom: 32px;
+}
diff --git a/src/account/page/import/passphrase/name/AccountImportPassphraseName.tsx b/src/account/page/import/passphrase/name/AccountImportPassphraseName.tsx
new file mode 100644
index 0000000..e7caee1
--- /dev/null
+++ b/src/account/page/import/passphrase/name/AccountImportPassphraseName.tsx
@@ -0,0 +1,88 @@
+import "./_account-import-passphrase-name.scss";
+
+import {Account} from "algosdk";
+import {useLocation} from "react-router-dom";
+
+import {useAppContext} from "../../../../../core/app/AppContext";
+import AccountNameForm from "../../../../component/account-name-form/AccountNameForm";
+import ROUTES from "../../../../../core/route/routes";
+import {encryptSK} from "../../../../../core/util/nacl/naclUtils";
+import useNavigateFlow from "../../../../../core/route/navigate/useNavigateFlow";
+import {useConnectFlowContext} from "../../../../../connect/context/ConnectFlowContext";
+import {AccountComponentFlows} from "../../../../util/accountTypes";
+import {appDBManager} from "../../../../../core/app/db";
+
+type LocationState = {account: Account};
+
+export interface AccountImportPassphraseNameProps {
+ flow?: AccountComponentFlows;
+}
+
+function AccountImportPassphraseName({
+ flow = "default"
+}: AccountImportPassphraseNameProps) {
+ const navigate = useNavigateFlow();
+ const location = useLocation();
+ const {formitoState, dispatchFormitoAction} = useConnectFlowContext();
+ const {account} = (location?.state || {}) as LocationState;
+ const isInConnectFlow = flow === "connect";
+ const importedAccount =
+ isInConnectFlow && formitoState ? formitoState.importedAccountInFlow : account;
+ const {
+ state: {masterkey},
+ dispatch: dispatchAppState
+ } = useAppContext();
+
+ return (
+ + {"Name your account"} +
+ +
+
+ );
+
+ async function handleAccountImportNaming(accountName: string) {
+ if (!importedAccount || !masterkey) return;
+
+ const pk = await encryptSK(importedAccount.sk, masterkey!);
+
+ const newAccount = {
+ type: "standard" as AccountType,
+ name: accountName,
+ address: importedAccount.addr,
+ pk,
+ date: new Date()
+ };
+
+ await appDBManager.set("accounts", masterkey)(importedAccount.addr, newAccount);
+
+ dispatchAppState({type: "SET_ACCOUNT", account: newAccount});
+
+ if (!isInConnectFlow) {
+ navigate(ROUTES.ACCOUNT.IMPORT.PASSPHRASE.PENDING.FULL_PATH, {
+ state: {creationType: "import"}
+ });
+ return;
+ }
+
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ importAccountViews: "animation"
+ }
+ });
+ }
+}
+
+export default AccountImportPassphraseName;
diff --git a/src/account/page/import/passphrase/name/_account-import-passphrase-name.scss b/src/account/page/import/passphrase/name/_account-import-passphrase-name.scss
new file mode 100644
index 0000000..77d7318
--- /dev/null
+++ b/src/account/page/import/passphrase/name/_account-import-passphrase-name.scss
@@ -0,0 +1,7 @@
+.account-import-passphrase-name {
+ width: 424px;
+}
+
+.account-import-passphrase-name__title {
+ margin: 0 0 32px;
+}
diff --git a/src/account/page/import/passphrase/prepare/AccountImportPassphrasePrepare.tsx b/src/account/page/import/passphrase/prepare/AccountImportPassphrasePrepare.tsx
new file mode 100644
index 0000000..1d39771
--- /dev/null
+++ b/src/account/page/import/passphrase/prepare/AccountImportPassphrasePrepare.tsx
@@ -0,0 +1,66 @@
+import "./_account-import-passphrase-prepare.scss";
+
+import {ReactComponent as KeyIcon} from "../../../../../core/ui/icons/key.svg";
+
+import {Link} from "react-router-dom";
+
+import ROUTES from "../../../../../core/route/routes";
+import Button from "../../../../../component/button/Button";
+import {AccountComponentFlows} from "../../../../util/accountTypes";
+import {useConnectFlowContext} from "../../../../../connect/context/ConnectFlowContext";
+
+export interface AccountImportPassphraseProps {
+ flow?: AccountComponentFlows;
+}
+
+function AccountImportPassphrase({flow = "default"}: AccountImportPassphraseProps) {
+ const {dispatchFormitoAction} = useConnectFlowContext();
+
+ return (
+ + {"Name your account"} +
+ +
+
+ {"Import account with"}
+
+
+
+ );
+
+ function handleChangeView() {
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ importAccountViews: "recovery"
+ }
+ });
+ }
+}
+
+export default AccountImportPassphrase;
diff --git a/src/account/page/import/passphrase/prepare/_account-import-passphrase-prepare.scss b/src/account/page/import/passphrase/prepare/_account-import-passphrase-prepare.scss
new file mode 100644
index 0000000..5d5ebb8
--- /dev/null
+++ b/src/account/page/import/passphrase/prepare/_account-import-passphrase-prepare.scss
@@ -0,0 +1,52 @@
+.account-import-passphrase {
+ display: flex;
+ flex-direction: column;
+
+ width: 424px;
+
+ text-align: center;
+}
+
+.account-import-passphrase__description {
+ margin: 16px 0 116px;
+}
+
+.account-import-passphrase__icon-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 106px;
+ height: 106px;
+
+ margin: 52px auto 32px;
+
+ border-radius: 100%;
+ box-shadow: var(--shadow-xlarge);
+
+ .key-icon {
+ path {
+ fill: var(--helper-purple-default);
+ }
+ }
+}
+
+.account-import-passphrase__icon {
+ width: 56px;
+ height: 56px;
+
+ path {
+ fill: var(--purple-10);
+ }
+}
+
+.account-import-passphrase__cta {
+ width: 100%;
+ height: 48px;
+
+ padding: 14px;
+
+ color: var(--primary-button-text);
+ background: var(--primary-button-bg);
+ border-radius: 12px;
+}
diff --git a/src/account/page/import/passphrase/recovery/AccountImportPassphraseRecovery.tsx b/src/account/page/import/passphrase/recovery/AccountImportPassphraseRecovery.tsx
new file mode 100644
index 0000000..906c65a
--- /dev/null
+++ b/src/account/page/import/passphrase/recovery/AccountImportPassphraseRecovery.tsx
@@ -0,0 +1,91 @@
+import "./_account-import-passphrase-recovery.scss";
+
+import algosdk from "algosdk";
+import {useToaster} from "@hipo/react-ui-toolkit";
+
+import ROUTES from "../../../../../core/route/routes";
+import PeraToast from "../../../../../component/pera-toast/PeraToast";
+import AccountMnemonicForm from "../../../../component/account-mnemonic-form/AccountMnemonicForm";
+import useNavigateFlow from "../../../../../core/route/navigate/useNavigateFlow";
+import {useConnectFlowContext} from "../../../../../connect/context/ConnectFlowContext";
+import {AccountComponentFlows} from "../../../../util/accountTypes";
+
+export interface AccountImportPassphraseRecoveryProps {
+ flow?: AccountComponentFlows;
+}
+
+function AccountImportPassphraseRecovery({
+ flow = "default"
+}: AccountImportPassphraseRecoveryProps) {
+ const navigate = useNavigateFlow();
+ const toaster = useToaster();
+ const {dispatchFormitoAction} = useConnectFlowContext();
+ const isInConnectFlow = flow === "connect";
+
+ return (
+
+
+
+
+ {"Import account with"}
+
+ {"Recovery Passphrase"}
+
+
+ + { + "In the following steps, you'll enter your 25-word recovery passphrase to import an Algorand account. Have your recovery phrase handy before you begin." + } +
+ + {flow === "connect" ? ( + + ) : ( + + {"Next"} + + )} +
+
+ );
+
+ function handleImportAccountMnemonic(mnemonicKeys: string[]) {
+ const mnemonic = mnemonicKeys.join(" ");
+
+ try {
+ const account = algosdk.mnemonicToSecretKey(mnemonic);
+
+ if (!isInConnectFlow) {
+ navigate(ROUTES.ACCOUNT.IMPORT.PASSPHRASE.NAME.FULL_PATH, {
+ state: {account}
+ });
+
+ return;
+ }
+
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ importedAccountInFlow: account,
+ importAccountViews: "name"
+ }
+ });
+ } catch (error: any) {
+ console.error(error);
+
+ toaster.display({
+ render() {
+ return (
+ + {"Recovery Passphrase"} +
+ ++ {"Enter your recovery passphrase in the correct order."} +
+ ++ {"You can paste your passphrase as 25 words separated with commas or spaces."} +
+ +
+
+ );
+
+ function handleOpenPasswordModal() {
+ dispatchModalStateAction({
+ type: "OPEN_MODAL",
+ payload: {
+ item: {
+ id: PASSWORD_ACCESS_MODAL_ID,
+ modalContentLabel: "Start account import process from pera mobile",
+ children: (
+ {"Import from Pera Mobile"}
+ ++ { + "If you are already a Pera Mobile user you can import all your accounts to Pera Web at once." + } +
+ + +
+
+ );
+
+ function handleNavigation() {
+ if (!isInConnectFlow) {
+ navigate(ROUTES.OVERVIEW.ROUTE);
+
+ return;
+ }
+
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ connectFlowView: "select-account"
+ }
+ });
+ }
+
+ function getAccountOverviewList() {
+ const overview: Record
+
+
+
+
+
+ {isRequestPending && (
+ {"Accounts Imported!"}
+ ++ {importedAccounts?.length} + + {` account${ + importedAccounts && importedAccounts.length > 1 ? "s were" : " was" + } imported to Pera Web`} +
+
+
+ )}
+
+ {isRequestFetched && (
+
+
+ )}
+
+
+ -
+ {({address, total_algo_value}) => (
+
+
+ );
+}
+
+export default withGoBackLink(AccountLandingPage, ROUTES.OVERVIEW.ROUTE);
diff --git a/src/account/page/landing/_account-landing-page.scss b/src/account/page/landing/_account-landing-page.scss
new file mode 100644
index 0000000..f53c248
--- /dev/null
+++ b/src/account/page/landing/_account-landing-page.scss
@@ -0,0 +1,38 @@
+.account-landing-page__option-list {
+ margin: 80px 0 32px;
+}
+
+.account-landing-page__nano-ledger {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ margin-left: auto;
+ padding: 16px;
+
+ background-color: rgba(var(--gray-200-rgb), 0.5);
+ border-radius: 16px;
+ box-shadow: var(--shadow-disabled);
+
+ cursor: not-allowed;
+
+ .ledger-icon {
+ margin-right: 12px;
+
+ path {
+ fill: var(--text-gray-light);
+ }
+
+ circle {
+ fill: var(--text-gray-light);
+ }
+ }
+}
+
+.account-landing-page__nano-ledger__badge {
+ margin-left: 16px;
+ padding: 6px 12px;
+
+ background-color: var(--white);
+ border-radius: 16px;
+}
diff --git a/src/account/page/qr-code-sync/AccountQRCodeSync.tsx b/src/account/page/qr-code-sync/AccountQRCodeSync.tsx
new file mode 100644
index 0000000..69ffe0f
--- /dev/null
+++ b/src/account/page/qr-code-sync/AccountQRCodeSync.tsx
@@ -0,0 +1,235 @@
+import "./_account-qr-code-sync.scss";
+
+import nacl from "tweetnacl";
+import {List, ListItem} from "@hipo/react-ui-toolkit";
+import {useMemo} from "react";
+import {Navigate, useLocation} from "react-router-dom";
+
+import PeraQRCode from "../../../component/pera-qr-code/PeraQRCode";
+import ROUTES from "../../../core/route/routes";
+import useInterval from "../../../core/util/hook/useInterval";
+import {peraApi} from "../../../core/util/pera/api/peraApi";
+import {
+ stringBytesToUint8Array,
+ uint8ArrayToString
+} from "../../../core/util/blob/blobUtils";
+import {useAppContext} from "../../../core/app/AppContext";
+import {
+ PERA_SYNC_POLLING_INTERVAL,
+ PERA_SYNC_POLLING_LIMIT,
+ SYNC_MOBILE_TO_WEB_CONSTANTS,
+ SYNC_WEB_TO_MOBILE_CONSTANTS
+} from "./accountQRCodeSyncConstants";
+import {decryptAccountBackup, encryptSK} from "../../../core/util/nacl/naclUtils";
+import {MobileSyncAccount} from "../../accountModels";
+import {useSimpleToaster} from "../../../component/simple-toast/util/simpleToastHooks";
+import {deriveAccountFromPrivateKey} from "../../util/accountUtils";
+import useNavigateFlow from "../../../core/route/navigate/useNavigateFlow";
+import {AccountComponentFlows} from "../../util/accountTypes";
+import {useConnectFlowContext} from "../../../connect/context/ConnectFlowContext";
+import {PortfolioOverview} from "../../../overview/util/hook/usePortfolioOverview";
+import {appDBManager} from "../../../core/app/db";
+
+interface AccountQRCodeSyncProps {
+ sync: "web-to-mobile" | "mobile-to-web";
+ flow?: AccountComponentFlows;
+}
+
+type LocationState = {
+ state: {modificationKey?: string; backupId?: string};
+};
+
+// This component handles both mobile-to-web / web-to-mobile qr-code processes
+function AccountQRCodeSync({sync, flow = "default"}: AccountQRCodeSyncProps) {
+ // TODO: get searchParams to decide if export or import qr
+ const navigate = useNavigateFlow();
+ const location = useLocation() as LocationState;
+ const {
+ state: {accounts: webAccounts, masterkey},
+ dispatch: dispatchAppState
+ } = useAppContext();
+ const simpleToaster = useSimpleToaster();
+ const encryptionKey = useMemo(() => nacl.randomBytes(nacl.secretbox.keyLength), []);
+ const {formitoState, dispatchFormitoAction} = useConnectFlowContext();
+
+ const isInConnectFlow = flow === "connect";
+ const backupId =
+ isInConnectFlow && formitoState
+ ? formitoState.accountBackup?.backupId
+ : location?.state?.backupId;
+ const modificationKey = isInConnectFlow
+ ? formitoState.accountBackup?.modificationKey
+ : location.state.modificationKey;
+ const accountBackupState = {modificationKey, backupId};
+
+ const QR_CODE_SYNC_CONTANTS =
+ sync === "web-to-mobile"
+ ? SYNC_WEB_TO_MOBILE_CONSTANTS
+ : SYNC_MOBILE_TO_WEB_CONSTANTS;
+
+ // Polling;
+ useInterval(handleAccountBackupPolling, PERA_SYNC_POLLING_INTERVAL, {
+ shouldRunCallbackAtStart: true,
+ refreshLimit: PERA_SYNC_POLLING_LIMIT
+ });
+
+ if (!isInConnectFlow && (!backupId || !modificationKey)) {
+ return {"Add Account"}
+ +
+
+ + {"Pair Nano Ledger"} +
+ +
+ {"COMING SOON"}
+
+
+
+ );
+
+ async function handleAccountBackupPolling() {
+ let cipher: string | null = null;
+
+ // encrypted_content: stringified Uint8Array[nonce] + Uint8Array[cipher]
+ // nonce: first 24 bytes of the encrypted content
+ try {
+ const {encrypted_content} = (await peraApi.getAccountBackup(backupId!)) || {};
+
+ cipher = encrypted_content;
+ } catch (error) {
+ console.error("API Error", error);
+ return;
+ }
+
+ if (cipher) {
+ // nacl returns null in case of decryption error
+ const decryptedContent = decryptAccountBackup(cipher, encryptionKey);
+
+ if (!decryptedContent) {
+ console.error("Encryption Error");
+ return;
+ }
+
+ let mobileAccounts: MobileSyncAccount[] | null = null;
+
+ try {
+ const {accounts} = JSON.parse(uint8ArrayToString(decryptedContent));
+
+ mobileAccounts = accounts as MobileSyncAccount[];
+ } catch (error) {
+ console.error("JSON Parse Error");
+ return;
+ }
+
+ // this method handles individual account errors inside
+ const importedAccounts = await handleImportAccounts(
+ mobileAccounts as MobileSyncAccount[]
+ );
+
+ if (importedAccounts.length === 0) {
+ simpleToaster.display({
+ message: "There is no new account to be synced.",
+ type: "info"
+ });
+
+ if (flow === "connect") {
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ connectFlowView: "add-account"
+ }
+ });
+ } else {
+ navigate(ROUTES.ACCOUNT.ROUTE);
+ }
+
+ return;
+ }
+
+ if (flow === "connect") {
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ importAccountFromMobileViews: "success",
+ importedAccountsFromMobile:
+ importedAccounts as unknown as PortfolioOverview["accounts"]
+ }
+ });
+ } else {
+ navigate(ROUTES.ACCOUNT.IMPORT.PERA_SYNC.SUCCESS.FULL_PATH, {
+ state: {
+ importedAccounts,
+ allAccountsImported: mobileAccounts.length === importedAccounts.length
+ }
+ });
+ }
+ }
+ }
+
+ async function handleImportAccounts(
+ mobileAccounts: MobileSyncAccount[]
+ ): Promise{"Import from Pera Mobile"}
+ +
+
+
+ -
+ {(instruction, _, instructionIndex) => (
+
+
+
+ {"Go to Accounts"}
+
+ )}
+
+
+
+ + {`Account ${type === "CREATE" ? "created" : "imported"}`} +
+ + {flow === "connect" && formitoState ? ( + + ) : ( +
+
+ )}
+ + {"Explore more on Algorand"} +
+ +
+
+ );
+
+ function handleDisplayQRCodeModal() {
+ dispatchModalStateAction({
+ type: "OPEN_MODAL",
+ payload: {
+ item: {
+ id: ACCOUNT_SHOW_QR_MODAL_ID,
+ modalContentLabel: "Rename account",
+ children: (
+
+
+
+ {type === "IMPORT" && (
+
+
+
+ {"Account value"}
+ +{`${ALGO_UNIT}${algoFormatter( + Number(accountPortfolio?.total_algo_value || "0.00") + )}`}
+ ++ {accountPortfolio?.total_usd_value + ? usdFormatter(parseFloat(accountPortfolio.total_usd_value), { + minimumFractionDigits: 2 + }) + : "-"} +
+ + +
+
+ {"Account address"}
+ ++ {trimAccountAddress(address)} +
+ ++ {trimAccountName(accounts[address].name)} +
+ +
+
+ {"Copy"}
+
+
+
+
+
+
+ {"View on Pera Explorer"}
+
+
+
+ )}
+ + {"See your account in more detail"} +
+ ++ {"on Pera Explorer"} +
+ +
+
+ {"Transfer your accounts to"}
+
+
+
+ );
+
+ function handleStartTransferMobile() {
+ navigate(ROUTES.TRANSFER.SELECT_ACCOUNTS.ROUTE);
+ }
+}
+
+export default TransferMobilePrepare;
diff --git a/src/account/page/transfer-mobile/page/prepare/_transfer-mobile-prepare.scss b/src/account/page/transfer-mobile/page/prepare/_transfer-mobile-prepare.scss
new file mode 100644
index 0000000..2be2c79
--- /dev/null
+++ b/src/account/page/transfer-mobile/page/prepare/_transfer-mobile-prepare.scss
@@ -0,0 +1,29 @@
+.transfer-mobile {
+ display: flex;
+ flex-direction: column;
+
+ text-align: center;
+}
+
+.transfer-mobile__info-box {
+ margin: 32px 0 48px;
+
+ text-align: left;
+
+ .info-box-icon {
+ background-color: var(--helper-red-lighter);
+ }
+}
+
+.transfer-mobile__title {
+ margin: 32px 0 16px;
+}
+
+.transfer-mobile__icon {
+ width: auto;
+ height: 80px;
+}
+
+.transfer-mobile__cta {
+ width: 100%;
+}
diff --git a/src/account/page/transfer-mobile/page/select-accounts/TransferMobileSelectAccounts.tsx b/src/account/page/transfer-mobile/page/select-accounts/TransferMobileSelectAccounts.tsx
new file mode 100644
index 0000000..131e6b6
--- /dev/null
+++ b/src/account/page/transfer-mobile/page/select-accounts/TransferMobileSelectAccounts.tsx
@@ -0,0 +1,66 @@
+import "./_transfer-mobile-select-accounts.scss";
+
+import {SyntheticEvent} from "react";
+
+import GoBackButton from "../../../../../component/go-back-button/GoBackButton";
+import {useAppContext} from "../../../../../core/app/AppContext";
+import Button from "../../../../../component/button/Button";
+import SelectableAccountList from "../../../../component/list/selectable/SelectableAccountList";
+import {NO_OP} from "../../../../../core/util/array/arrayUtils";
+import usePortfolioOverview from "../../../../../overview/util/hook/usePortfolioOverview";
+
+function TransferMobileSelectAccounts() {
+ const {
+ state: {accounts}
+ } = useAppContext();
+ const portfolioOverview = usePortfolioOverview();
+
+ return (
+ <>
+
+ {"Transfer your accounts to"}
+
+ {"Pera Mobile"}
+
+
+ + {"You can transfer all your accounts at once to your Pera Wallet Mobile."} +
+ ++ {"Select your accounts to transfer to Pera Mobile"} +
+ + + + ); + + function handleAccountExporting(event: SyntheticEvent
+
+
+
+
+
+ {rightSide}
+
+ {asset.name}
+
+ {renderVerificationTierIcon(asset)}
+
+
+
+ {`${asset.unit_name}, ${asset.asset_id}`}
+
+
+ {getAccountIcon({
+ type: accounts[account.address].type,
+ width: 32,
+ height: 32
+ })}
+
+
+
+
+
+ + {"Selected account"} +
+ ++ {trimAccountName(account.name, TRIM_ACCOUNT_NAME_LENGTH)} +
+
+ {renderAccountBalance()}
+
+
+
+ );
+
+ function renderAccountBalance() {
+ let node;
+
+ if (!accountPortfolio) return {`${ALGO_UNIT}${algoFormatter(accountPortfolioBalance, { + maximumFractionDigits: 2 + })}`}
+ ); + } else { + node = ( +
+
+ );
+ }
+
+ return node;
+ }
+}
+
+export default AssetOptinAccountLink;
diff --git a/src/asset/opt-in/components/account-link/_asset-optin-account-link.scss b/src/asset/opt-in/components/account-link/_asset-optin-account-link.scss
new file mode 100644
index 0000000..b5cab9c
--- /dev/null
+++ b/src/asset/opt-in/components/account-link/_asset-optin-account-link.scss
@@ -0,0 +1,38 @@
+.asset-optin-account-link {
+ display: flex;
+ justify-content: space-between;
+
+ margin-top: auto;
+ padding: 16px 40px 16px 28px;
+
+ border-top: 1px solid var(--gray-200);
+
+ &,
+ &:visited {
+ color: currentColor;
+ }
+}
+
+.asset-optin-account-link__name {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+.asset-optin-account-link__balance {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+.asset-optin-account-link__balance-warning {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+
+ color: var(--helper-red-default);
+
+ .warning-icon path {
+ fill: var(--helper-red-default);
+ }
+}
diff --git a/src/asset/opt-in/components/list/AssetOptinList.tsx b/src/asset/opt-in/components/list/AssetOptinList.tsx
new file mode 100644
index 0000000..0202e1b
--- /dev/null
+++ b/src/asset/opt-in/components/list/AssetOptinList.tsx
@@ -0,0 +1,96 @@
+import React, {useEffect, useCallback, useRef} from "react";
+
+import SearchableList from "../../../../component/list/searchable-list/SearchableList";
+import useAsyncProcess from "../../../../core/network/async-process/useAsyncProcess";
+import {filterTruthyObjectValues} from "../../../../core/util/object/objectUtils";
+import {peraApi} from "../../../../core/util/pera/api/peraApi";
+import AssetOptinListItem from "./item/AssetOptinListItem";
+import {AccountASA} from "../../../../core/util/pera/api/peraApiModels";
+import {generateKeyMapFromArray} from "../../../../core/util/array/arrayUtils";
+import {useSimpleToaster} from "../../../../component/simple-toast/util/simpleToastHooks";
+import {assetDBManager} from "../../../../core/app/db";
+
+interface AssetOptinListProps {
+ account: AppDBAccount;
+}
+
+function AssetOptinList({account}: AssetOptinListProps) {
+ const accountAssetsRef = useRef
+
+ {`${ALGO_UNIT}0.00`} +
+
+
+ );
+
+ function getOptinInfoItems() {
+ return [
+ {
+ title: "ID",
+ content: (
+ {"Opt-in"}
+ +
+
+
+
+
+
+ {asset.name}
+ + {renderVerificationTierIcon(asset, 24)} +{asset.unit_name}
+-
+ {({title, content}) => (
+
{title}
+ + {content} ++ { + "Adding an asset requires sending a transaction with a minimum transaction fee. This will appear on your transaction history." + } +
+ + + + +
+
+ )
+ },
+ {
+ title: "Account",
+ content: (
+ {asset.asset_id}
+ +
+ {getAccountIcon({type: account.type, width: 24, height: 24})}
+
+
+ )
+ },
+ {
+ title: "Transaction Fee",
+ content: (
+ + {trimAccountName(account.name)} +
++ {optinTxn ? `${ALGO_UNIT}${algoFormatter(optinTxn.fee)}` : "-"} +
+ ) + } + ]; + } + + function handleApproveOptin() { + if (optinTxn) { + onApprove(optinTxn); + } + } +} + +export default AssetOptinConfirmationModal; diff --git a/src/asset/opt-in/modal/confirmation/_asset-optin-confirmation-modal.scss b/src/asset/opt-in/modal/confirmation/_asset-optin-confirmation-modal.scss new file mode 100644 index 0000000..90bcd01 --- /dev/null +++ b/src/asset/opt-in/modal/confirmation/_asset-optin-confirmation-modal.scss @@ -0,0 +1,62 @@ +.asset-optin-confirmation-modal { + width: 424px; +} + +.asset-optin-confirmation-modal__asset { + margin-top: 40px; +} + +.asset-optin-confirmation-modal__asset-name { + display: flex; + align-items: center; + gap: 4px; + + margin: 16px 0 4px; +} + +.asset-optin-confirmation-modal__info-list { + margin: 24px 0 32px; +} + +.asset-optin-confirmation-modal__info-list-item { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + padding: 16px 0; + + border-top: 1px solid var(--gray-100); +} + +.asset-optin-confirmation-modal__logo--is-nft { + &.asset-logo { + .image__img, + .image__placeholder { + border-radius: 12px; + } + } +} + +.asset-optin-confirmation-modal__info-list-item__content { + display: flex; + align-items: center; + gap: 8px; +} + +.asset-optin-confirmation-modal__copy-button { + width: max-content; + height: max-content; + + padding: 0; + + .copy-icon { + path { + fill: var(--text-gray-light); + } + } +} + +.asset-optin-confirmation-modal__approve-cta { + margin: 48px 0 12px; +} diff --git a/src/asset/opt-in/modal/info/AssetOptinInfoModal.tsx b/src/asset/opt-in/modal/info/AssetOptinInfoModal.tsx new file mode 100644 index 0000000..480c97d --- /dev/null +++ b/src/asset/opt-in/modal/info/AssetOptinInfoModal.tsx @@ -0,0 +1,55 @@ +import {ReactComponent as OptinIcon} from "../../../../core/ui/icons/opt-in.svg"; + +import "./_asset-optin-info-modal.scss"; + +import {useNavigate} from "react-router-dom"; + +import { + ASSET_OPTIN_INFO_MODAL_ID, + ASSET_OPTIN_INFO_MODAL_TIPS +} from "./util/assetOptinInfoModalConstants"; +import {STORED_KEYS} from "../../../../core/util/storage/web/webStorage"; +import ROUTES from "../../../../core/route/routes"; +import {ASSET_OPTIN_PAGE_SEARCH_PARAM} from "../../page/AssetOptinPage"; +import InfoModal from "../../../../component/info-modal/InfoModal"; + +interface AssetOptinInfoModalProps { + account?: AppDBAccount; + displayDontShowAgain?: boolean; +} + +function AssetOptinInfoModal({ + account, + displayDontShowAgain = false +}: AssetOptinInfoModalProps) { + const navigate = useNavigate(); + + return ( +
+
+ );
+
+ function handleInfoButtonClick() {
+ dispatchModalStateAction({
+ type: "OPEN_MODAL",
+ payload: {
+ item: {
+ id: ASSET_OPTIN_INFO_MODAL_ID,
+ modalContentLabel: "Opt-in to asset",
+ children:
+
+
+ {account ? (
+ <>
+ {"Opt-in to Asset"}
+ + +
+
+ );
+
+ function handleSelectAccount(address: string) {
+ navigate({
+ pathname: ROUTES.ASSET_OPTIN.ROUTE,
+ search: `?${ASSET_OPTIN_PAGE_SEARCH_PARAM}=${address}`
+ });
+ }
+}
+
+export default AssetOptinSelectAccount;
diff --git a/src/asset/opt-in/page/select-account/_asset-optin-select-account.scss b/src/asset/opt-in/page/select-account/_asset-optin-select-account.scss
new file mode 100644
index 0000000..ac7698b
--- /dev/null
+++ b/src/asset/opt-in/page/select-account/_asset-optin-select-account.scss
@@ -0,0 +1,21 @@
+@import "../../../../layouts/card-layout/_card-layout.scss";
+
+.asset-optin-select-account {
+ @extend .card-layout;
+
+ display: flex;
+ flex-direction: column;
+
+ width: 480px;
+ height: 590px;
+
+ padding: 0;
+}
+
+.asset-optin-select-account__go-back-button {
+ padding: 28px 28px 0;
+}
+
+.asset-optin-select-account__loader {
+ margin: auto;
+}
diff --git a/src/asset/opt-in/util/assetOptinUtils.ts b/src/asset/opt-in/util/assetOptinUtils.ts
new file mode 100644
index 0000000..703fe8c
--- /dev/null
+++ b/src/asset/opt-in/util/assetOptinUtils.ts
@@ -0,0 +1,20 @@
+import algosdk, {Transaction} from "algosdk";
+
+import algod from "../../../core/util/algod/algod";
+
+async function generateAssetOptinTxn(
+ accountAddress: string,
+ assetId: number
+): Promise
+ {state.isRequestFetched && state.data ? (
+ <>
+
+ );
+}
+
+export default AlgoCurrency;
diff --git a/src/component/algo-currency/_algo-currency.scss b/src/component/algo-currency/_algo-currency.scss
new file mode 100644
index 0000000..211b6bb
--- /dev/null
+++ b/src/component/algo-currency/_algo-currency.scss
@@ -0,0 +1,33 @@
+.algo-currency {
+ display: flex;
+ gap: 6px;
+
+ min-width: 136px;
+ height: 40px;
+
+ padding: 10px 16px;
+
+ border: 1px solid var(--gray-200);
+ border-radius: 12px;
+}
+
+.algo-currency__icon-wrapper {
+ display: grid;
+
+ width: 20px;
+ height: 20px;
+
+ background-color: var(--gray-400);
+ border-radius: 100%;
+ place-content: center;
+
+ .algo-icon {
+ path {
+ fill: var(--white);
+ }
+ }
+}
+
+.algo-currency__loader {
+ margin: auto;
+}
diff --git a/src/component/async-content/AsyncContent.tsx b/src/component/async-content/AsyncContent.tsx
new file mode 100644
index 0000000..c111351
--- /dev/null
+++ b/src/component/async-content/AsyncContent.tsx
@@ -0,0 +1,23 @@
+export type AsyncContentStatus = "error" | "pending" | "success";
+export type AsyncContentError = undefined | AsyncProcessState["error"];
+
+interface AsyncContentProps {
+ requestStates: AsyncProcessState[];
+ content: (status: AsyncContentStatus, error?: AsyncContentError) => JSX.Element;
+}
+
+function AsyncContent({requestStates, content}: AsyncContentProps) {
+ const isAllFetched = requestStates.every((request) => request.isRequestFetched);
+ const requestError = requestStates.find((request) => request.error);
+ let node = content("pending");
+
+ if (requestError) {
+ node = content("error", requestError.error);
+ } else if (isAllFetched) {
+ node = content("success");
+ }
+
+ return node;
+}
+
+export default AsyncContent;
diff --git a/src/component/button/Button.tsx b/src/component/button/Button.tsx
new file mode 100644
index 0000000..3641e5b
--- /dev/null
+++ b/src/component/button/Button.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import {
+ Button as HipoButton,
+ ButtonProps as HipoButtonProps
+} from "@hipo/react-ui-toolkit";
+import classNames from "classnames";
+
+import SimpleLoader from "../loader/simple/SimpleLoader";
+
+// This SCSS file is imported to the app under index.tsx
+// import "./_button.scss";
+
+export type ButtonProps = HipoButtonProps & {
+ buttonType?: "primary" | "secondary" | "light" | "ghost" | "danger" | "custom";
+ size?: "small" | "medium" | "large";
+ shouldHideChildrenOnSpinnerView?: boolean;
+};
+
+const Button = React.forwardRef
+
+
+ {`≈ ${numberFormatter(
+ parseFloat(state.data.exchange_price)
+ )} ${state.data.currency_id}`}
+
+ ) : (
+ {renderBalance()}
;
+
+ function renderBalance() {
+ let balance = "-";
+
+ if (preferredNetwork === "mainnet") {
+ const presign = prefix?.concat(" ") || "";
+
+ balance = `${presign}${usdFormatter(Number(value))}`;
+ }
+
+ return balance;
+ }
+}
+
+export default FormatUSDBalance;
diff --git a/src/component/go-back-button/GoBackButton.tsx b/src/component/go-back-button/GoBackButton.tsx
new file mode 100644
index 0000000..3751013
--- /dev/null
+++ b/src/component/go-back-button/GoBackButton.tsx
@@ -0,0 +1,55 @@
+import {ReactComponent as ArrowLeftIcon} from "../../core/ui/icons/arrow-left.svg";
+
+import "./_go-back-button.scss";
+
+import {Link, To} from "react-router-dom";
+import classNames from "classnames";
+
+type GoBackButtonProps = {
+ text?: string;
+ to?: To;
+ icon?: JSX.Element;
+ iconPosition?: "left" | "right";
+
+ children?: React.ReactNode;
+ customClassName?: string;
+};
+
+function GoBackButton({
+ text,
+ to,
+ icon =
+ {iconPosition === "left" && actionButton}
+
+ {text && (
+
+ {text}
+
+ )}
+
+ {iconPosition === "right" && actionButton}
+
+ {children}
+
+ );
+}
+
+export default GoBackButton;
diff --git a/src/component/go-back-button/_go-back-button.scss b/src/component/go-back-button/_go-back-button.scss
new file mode 100644
index 0000000..fb5c9ad
--- /dev/null
+++ b/src/component/go-back-button/_go-back-button.scss
@@ -0,0 +1,11 @@
+.go-back-button-container {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+
+ margin-bottom: 32px;
+}
+
+.go-back-button {
+ display: flex;
+}
diff --git a/src/component/image/Image.tsx b/src/component/image/Image.tsx
new file mode 100644
index 0000000..44d7366
--- /dev/null
+++ b/src/component/image/Image.tsx
@@ -0,0 +1,56 @@
+import "./_image.scss";
+
+import React, {useState} from "react";
+import classNames from "classnames";
+
+import SimpleLoader from "../loader/simple/SimpleLoader";
+
+type ImageProps = React.DetailedHTMLProps<
+ React.ImgHTMLAttributes
+ {shouldDisplayPlaceholder && !shouldDisplayError && (
+ ![{shouldDisplayPlaceholder]()
+ )}
+
+ );
+
+ function handleHidePlaceholder() {
+ setPlaceholderVisibility(false);
+ }
+
+ function handleDisplayError() {
+ handleHidePlaceholder();
+ setErrorVisibility(true);
+ }
+}
+
+export default Image;
diff --git a/src/component/image/_image.scss b/src/component/image/_image.scss
new file mode 100644
index 0000000..d4f0a05
--- /dev/null
+++ b/src/component/image/_image.scss
@@ -0,0 +1,24 @@
+.image {
+ position: relative;
+
+ &__placeholder {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ height: 100%;
+ }
+
+ &__img {
+ width: 100%;
+ height: 100%;
+
+ object-fit: contain;
+ }
+}
diff --git a/src/component/info-box/InfoBox.tsx b/src/component/info-box/InfoBox.tsx
new file mode 100644
index 0000000..8a888d2
--- /dev/null
+++ b/src/component/info-box/InfoBox.tsx
@@ -0,0 +1,37 @@
+import "./_info-box.scss";
+
+import {ReactComponent as InfoIcon} from "../../core/ui/icons/info.svg";
+
+import classNames from "classnames";
+
+interface InfoBoxProps {
+ infoText: string;
+ title?: string;
+ icon?: React.ReactNode;
+ children?: React.ReactNode;
+ className?: string;
+}
+
+function InfoBox({title, infoText, icon, className, children}: InfoBoxProps) {
+ const infoBoxClassname = classNames("info-box", className);
+
+ return (
+
+
+ )}
+
+ {shouldDisplayError && (
+ {customPlaceholder || alt}
+ )}
+
+ {!shouldDisplayError && (
+
+
+ );
+}
+
+export default InfoBox;
diff --git a/src/component/info-box/_info-box.scss b/src/component/info-box/_info-box.scss
new file mode 100644
index 0000000..09a0f20
--- /dev/null
+++ b/src/component/info-box/_info-box.scss
@@ -0,0 +1,32 @@
+.info-box {
+ display: flex;
+ gap: 12px;
+
+ padding: 16px 20px;
+
+ background: var(--card-default);
+ border-radius: 16px;
+ box-shadow: var(--shadow-small);
+}
+
+.info-box-icon {
+ width: 28px;
+ height: 28px;
+
+ padding: 6px;
+
+ background-color: var(--helper-orange-lighter);
+ border-radius: 50%;
+
+ .info-icon {
+ path {
+ fill: var(--helper-orange-darker);
+ }
+ }
+}
+
+.info-box-content {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
diff --git a/src/component/info-modal/InfoModal.tsx b/src/component/info-modal/InfoModal.tsx
new file mode 100644
index 0000000..f4c5a58
--- /dev/null
+++ b/src/component/info-modal/InfoModal.tsx
@@ -0,0 +1,107 @@
+import "./_info-modal.scss";
+
+import {ReactNode} from "react";
+import {List, ListItem} from "@hipo/react-ui-toolkit";
+import classNames from "classnames";
+
+import webStorage from "../../core/util/storage/web/webStorage";
+import Button from "../button/Button";
+import {useModalDispatchContext} from "../modal/context/ModalContext";
+
+interface InfoModalProps {
+ modalId: string;
+ iconHeader?: ReactNode;
+ title: string;
+ infoItems: {id: string; icon?: ReactNode; description: ReactNode}[];
+ confirmationText?: string;
+ onConfirm?: () => void;
+ displayDontShowAgain?: {webStorageKey: string};
+ footer?: ReactNode;
+ customClassName?: string;
+}
+
+function InfoModal({
+ modalId,
+ iconHeader,
+ title,
+ infoItems,
+ confirmationText,
+ onConfirm,
+ displayDontShowAgain,
+ footer,
+ customClassName
+}: InfoModalProps) {
+ const dispatchModalStateAction = useModalDispatchContext();
+ const infoModalClassname = classNames("info-modal-wrapper", customClassName);
+
+ return (
+
+ {icon ||
+
+
+ {title &&
+ {title}
} + ++ {infoText} +
+ + {children} +
+ {iconHeader &&
+ );
+
+ function handleOnConfirm() {
+ handleCloseModal();
+
+ if (onConfirm) {
+ onConfirm();
+ }
+ }
+
+ function handleDontShowAgainClick() {
+ if (!displayDontShowAgain) return;
+
+ webStorage.local.setItem(displayDontShowAgain.webStorageKey, true);
+
+ handleOnConfirm();
+ }
+
+ function handleCloseModal() {
+ dispatchModalStateAction({
+ type: "CLOSE_MODAL",
+ payload: {id: modalId}
+ });
+ }
+}
+
+export default InfoModal;
diff --git a/src/component/info-modal/_info-modal.scss b/src/component/info-modal/_info-modal.scss
new file mode 100644
index 0000000..9cf5d39
--- /dev/null
+++ b/src/component/info-modal/_info-modal.scss
@@ -0,0 +1,85 @@
+.info-modal-wrapper {
+ display: grid;
+
+ justify-items: center;
+ gap: 24px;
+}
+
+.info-modal__icon-wrapper {
+ display: grid;
+
+ width: 106px;
+ height: 106px;
+
+ margin: 28px auto 0;
+
+ background-color: var(--card-default);
+ border-radius: 100%;
+ box-shadow: var(--shadow-large);
+
+ place-content: center;
+}
+
+.info-modal__description-box {
+ width: 424px;
+
+ margin-top: 8px;
+ padding: 20px;
+
+ background-color: var(--gray-100);
+ border-radius: 12px;
+}
+
+.info-modal__description-header {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+
+ margin-left: 4px;
+}
+
+.info-modal__description-list-item {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+
+ &:not(:last-child) {
+ margin-bottom: 20px;
+ }
+
+ &--header {
+ .info-modal__description-list-item__icon-wrapper {
+ background-color: var(--gray-100);
+ }
+ }
+}
+
+.info-modal__description-list-item__icon-wrapper {
+ display: grid;
+
+ width: 32px;
+ height: 32px;
+ flex-shrink: 0;
+
+ background-color: rgba(var(--gray-400-rgb), 0.1);
+ border-radius: 100%;
+
+ place-content: center;
+
+ .tip-icon {
+ path {
+ fill: var(--helper-purple-default);
+ }
+ }
+}
+
+.info-modal__cta-group {
+ display: grid;
+ gap: 12px;
+
+ width: 100%;
+}
+
+.info-modal__continue-cta {
+ margin-top: 24px;
+}
diff --git a/src/component/list/searchable-list/SearchableList.tsx b/src/component/list/searchable-list/SearchableList.tsx
new file mode 100644
index 0000000..d2f94cd
--- /dev/null
+++ b/src/component/list/searchable-list/SearchableList.tsx
@@ -0,0 +1,60 @@
+import {ReactComponent as SearchIcon} from "../../../core/ui/icons/search.svg";
+
+import "./_searchable-list.scss";
+
+import {
+ FormField,
+ TypeaheadInput,
+ List,
+ ListProps,
+ TypeaheadInputProps
+} from "@hipo/react-ui-toolkit";
+import classNames from "classnames";
+
+import SimpleLoader from "../../loader/simple/SimpleLoader";
+
+type SearchableListProps{iconHeader}
}
+
+ {title}
+ +
+
+
+ {footer && -
+ {({icon, description}) => (
+
+ {icon}
+
+ )}
+
+ {description}
+ {footer}
}
+
+
+
+
+ {displayDontShowAgain && (
+
+ )}
+
+
+
+
+
+ {items.length > 0 ? (
+
+ );
+}
+
+export default SearchableList;
diff --git a/src/component/list/searchable-list/_searchable-list.scss b/src/component/list/searchable-list/_searchable-list.scss
new file mode 100644
index 0000000..e1b4c15
--- /dev/null
+++ b/src/component/list/searchable-list/_searchable-list.scss
@@ -0,0 +1,39 @@
+.searchable-list {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ height: 356px;
+
+ overflow-y: auto;
+
+ padding: 0 28px;
+}
+
+.searchable-list__search {
+ margin: 0 28px 24px;
+
+ .form-field__label {
+ display: flex;
+ gap: 16px;
+ }
+
+ .search-icon {
+ path {
+ fill: var(--text-gray-light);
+ }
+ }
+
+ .input-container__icon {
+ width: 20px;
+ height: 20px;
+ }
+
+ .input-container__left-icon {
+ margin-right: 16px;
+ }
+}
+
+.searchable-list__no-result-message {
+ margin: auto;
+}
diff --git a/src/component/list/selectable-list-item/SelectableListItem.tsx b/src/component/list/selectable-list-item/SelectableListItem.tsx
new file mode 100644
index 0000000..63a5ff1
--- /dev/null
+++ b/src/component/list/selectable-list-item/SelectableListItem.tsx
@@ -0,0 +1,64 @@
+import "./_selectable-list-item.scss";
+
+import {ListItem, ListItemProps, CheckboxInputProps} from "@hipo/react-ui-toolkit";
+import classNames from "classnames";
+
+import CheckboxInput from "../../checkbox/Checkbox";
+import {NO_OP} from "../../../core/util/array/arrayUtils";
+
+export interface SelectableListItemProps
+ extends Omit-
+ {(...listItemProps) => children(...listItemProps)}
+
+ {loader}
+
+ );
+ }
+
+ return loader;
+}
+
+export default PeraLoader;
diff --git a/src/component/loader/pera/_pera-loader.scss b/src/component/loader/pera/_pera-loader.scss
new file mode 100644
index 0000000..d425c9d
--- /dev/null
+++ b/src/component/loader/pera/_pera-loader.scss
@@ -0,0 +1,20 @@
+.pera-loader--gray {
+ width: 100px;
+ height: 100px;
+}
+
+.pera-loader--align-center {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+
+ transform: translate(-50%, -50%);
+}
+
+.pera-loader-wrapper--colorful {
+ width: 56px;
+ height: 56px;
+
+ background-color: var(--helper-purple-default);
+ border-radius: 50%;
+}
diff --git a/src/component/loader/simple/SimpleLoader.tsx b/src/component/loader/simple/SimpleLoader.tsx
new file mode 100644
index 0000000..501fd22
--- /dev/null
+++ b/src/component/loader/simple/SimpleLoader.tsx
@@ -0,0 +1,24 @@
+import "./_simple-loader.scss";
+
+import classNames from "classnames";
+
+function SimpleLoader({customClassName}: {customClassName?: string}) {
+ return (
+
+ );
+}
+
+export default SimpleLoader;
diff --git a/src/component/loader/simple/_simple-loader.scss b/src/component/loader/simple/_simple-loader.scss
new file mode 100644
index 0000000..9a952dd
--- /dev/null
+++ b/src/component/loader/simple/_simple-loader.scss
@@ -0,0 +1,15 @@
+.simple-loader {
+ width: 16px;
+ height: 16px;
+}
+
+.simple-loader__content {
+ transform-origin: center;
+ animation: SimpleLoaderAnimation 0.75s infinite linear;
+}
+
+@keyframes SimpleLoaderAnimation {
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/component/lock-button/LockButton.tsx b/src/component/lock-button/LockButton.tsx
new file mode 100644
index 0000000..fede67a
--- /dev/null
+++ b/src/component/lock-button/LockButton.tsx
@@ -0,0 +1,46 @@
+import {ReactComponent as LockIcon} from "../../core/ui/icons/lock.svg";
+import {ReactComponent as CommandKeyIcon} from "../../core/ui/icons/command-key.svg";
+
+import "./_lock-button.scss";
+
+import Button from "../button/Button";
+import {useAppContext} from "../../core/app/AppContext";
+import useLockApp from "../../core/util/hook/useLockApp";
+
+function LockButton() {
+ const {
+ state: {masterkey}
+ } = useAppContext();
+ const lockApp = useLockApp();
+ const isLocked = !masterkey;
+
+ return (
+
+ );
+
+ function handleLockingApp() {
+ if (!isLocked) lockApp();
+ }
+}
+
+export default LockButton;
diff --git a/src/component/lock-button/_lock-button.scss b/src/component/lock-button/_lock-button.scss
new file mode 100644
index 0000000..7cb8588
--- /dev/null
+++ b/src/component/lock-button/_lock-button.scss
@@ -0,0 +1,34 @@
+@import "../../core//ui//typography/typography-mixins";
+
+.lock-button,
+.lock-button__shortcut {
+ @include typography--button();
+
+ display: flex;
+ align-items: center;
+}
+
+.lock-button {
+ gap: 8px;
+
+ width: 124px;
+ height: 40px;
+
+ .lock-icon {
+ path {
+ fill: var(--light-button-text);
+ }
+ }
+
+ &.button--is-inactive {
+ .lock-icon {
+ path {
+ fill: var(--light-button-disabled-text);
+ }
+ }
+ }
+}
+
+.lock-button__shortcut {
+ color: var(--text-gray-light);
+}
diff --git a/src/component/modal/Modal.tsx b/src/component/modal/Modal.tsx
new file mode 100644
index 0000000..4357568
--- /dev/null
+++ b/src/component/modal/Modal.tsx
@@ -0,0 +1,83 @@
+import "./_modal.scss";
+
+import ReactModal from "react-modal";
+import classNames from "classnames";
+
+import {MODAL_CLOSE_TIMEOUT} from "./util/modalConstants";
+import {ModalPosition} from "./util/modalTypes";
+
+interface ModalProps {
+ isOpen: boolean;
+ modalContentLabel: string;
+ onClose: (...args: any[]) => void;
+ onAfterOpen?: (...args: any[]) => void;
+ onAfterClose?: (...args: any[]) => void;
+ closeTimeout?: number;
+ shouldCloseOnOverlayClick?: boolean;
+ customClassName?: string;
+ customOverlayClassName?: string;
+ children?: React.ReactNode;
+ shouldCloseOnEsc?: boolean;
+ bodyOpenClassName?: string;
+ portalClassName?: string;
+ position?: ModalPosition;
+}
+
+ReactModal.defaultStyles = {};
+ReactModal.setAppElement("#root");
+
+function getParent() {
+ return document.querySelector("#modal-root") as HTMLElement;
+}
+
+function Modal({
+ isOpen,
+ customClassName,
+ children,
+ closeTimeout = MODAL_CLOSE_TIMEOUT,
+ modalContentLabel,
+ onAfterClose,
+ onAfterOpen,
+ customOverlayClassName,
+ shouldCloseOnOverlayClick = true,
+ shouldCloseOnEsc = true,
+ bodyOpenClassName,
+ onClose,
+ portalClassName,
+ position = "center"
+}: ModalProps) {
+ const containerClassName = classNames("ReactModal__Content", customClassName);
+ const bodyClassName = classNames("ReactModal__Body--open", bodyOpenClassName);
+ const overlayClassName = classNames(
+ `ReactModal__Overlay--position--${position}`,
+ customOverlayClassName
+ );
+
+ return (
+ {children}
+ {modalChildren}
+ {"TESTNET"}
;
+}
+
+export default NetworkBadge;
diff --git a/src/component/network-badge/_network-badge.scss b/src/component/network-badge/_network-badge.scss
new file mode 100644
index 0000000..1e2675a
--- /dev/null
+++ b/src/component/network-badge/_network-badge.scss
@@ -0,0 +1,9 @@
+.network-badge {
+ margin-left: 12px;
+ padding: 4px 8px;
+
+ color: var(--helper-orange-darker);
+
+ background: var(--helper-orange-lighter);
+ border-radius: 12px;
+}
diff --git a/src/component/page/Page.tsx b/src/component/page/Page.tsx
new file mode 100644
index 0000000..707a64d
--- /dev/null
+++ b/src/component/page/Page.tsx
@@ -0,0 +1,33 @@
+import "./_page.scss";
+
+import classNames from "classnames";
+import {Outlet} from "react-router-dom";
+
+import PageHeader from "./header/PageHeader";
+import useSetPageTitle from "../../core/util/hook/useSetPageTitle";
+
+interface PageProps {
+ title: string;
+ customClassName?: string;
+ banner?: React.ReactNode;
+}
+
+function Page({customClassName, title, banner}: PageProps) {
+ useSetPageTitle(title);
+
+ return (
+
+
+
+
+ );
+}
+
+export default Page;
diff --git a/src/component/page/_page.scss b/src/component/page/_page.scss
new file mode 100644
index 0000000..959d0a7
--- /dev/null
+++ b/src/component/page/_page.scss
@@ -0,0 +1,32 @@
+.page {
+ min-height: 100vh;
+
+ &--without-header {
+ .page-header {
+ display: none;
+ }
+ }
+
+ &--with-banner {
+ .page__header-wrapper {
+ background-color: var(--gray-800);
+ }
+
+ .page-header {
+ background-color: var(--background);
+
+ border-radius: 24px 24px 0 0;
+ }
+ }
+}
+
+.page-content {
+ max-width: var(--page-content-max-width);
+
+ margin: 0 auto;
+ padding: 0 32px 40px;
+}
+
+.page__header-wrapper {
+ background-color: var(--background);
+}
diff --git a/src/component/page/header/PageHeader.tsx b/src/component/page/header/PageHeader.tsx
new file mode 100644
index 0000000..7510ef2
--- /dev/null
+++ b/src/component/page/header/PageHeader.tsx
@@ -0,0 +1,73 @@
+import {ReactComponent as PeraLogo} from "../../../core/ui/icons/pera-logo.svg";
+import {ReactComponent as ArrowLeftIcon} from "../../../core/ui/icons/arrow-left.svg";
+
+import "./_page-header.scss";
+
+import {useState} from "react";
+import {Link} from "react-router-dom";
+import classNames from "classnames";
+
+import AlgoCurrency from "../../algo-currency/AlgoCurrency";
+import LockButton from "../../lock-button/LockButton";
+import NetworkBadge from "../../network-badge/NetworkBadge";
+import ROUTES from "../../../core/route/routes";
+import useScroll from "../../../core/util/hook/useScroll";
+import {getPageHeaderBackButtonText} from "./util/pageHeaderUtils";
+import useShouldShowPageHeaderGoBackButton from "./util/useShouldShowPageHeaderGoBackButton";
+import {useNavigationContext} from "../../../core/route/context/NavigationContext";
+import {useAppContext} from "../../../core/app/AppContext";
+
+interface PageHeaderProps {
+ customClassName?: string;
+}
+
+function PageHeader({customClassName}: PageHeaderProps) {
+ const {
+ state: {hasAccounts}
+ } = useAppContext();
+ const [scrollPosition, setScrollPosition] = useState(0);
+ const shouldShowGoBackButton = useShouldShowPageHeaderGoBackButton();
+ const {navigationState} = useNavigationContext();
+
+ useScroll(() => {
+ setScrollPosition(Math.round(window.pageYOffset));
+ });
+
+ return (
+
+ {banner}
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+ );
+}
+
+export default Sidebar;
diff --git a/src/component/page/sidebar/_sidebar.scss b/src/component/page/sidebar/_sidebar.scss
new file mode 100644
index 0000000..1a5b4c5
--- /dev/null
+++ b/src/component/page/sidebar/_sidebar.scss
@@ -0,0 +1,120 @@
+.sidebar,
+.sidebar__nav-list,
+.sidebar__footer {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+
+ width: 240px;
+ height: 100vh;
+
+ padding: 112px 16px 32px;
+}
+
+.sidebar__nav {
+ flex: 1;
+}
+
+.sidebar__nav-list-item {
+ width: max-content;
+
+ border-radius: 12px;
+
+ transition: background-color var(--default-animation);
+
+ &:hover {
+ background-color: var(--primary-button-disabled-bg);
+ }
+}
+
+.sidebar__nav-list-item--disabled {
+ color: var(--text-gray-light);
+
+ svg path {
+ fill: var(--text-gray-light);
+ }
+
+ &:hover {
+ background-color: var(--background);
+
+ .sidebar__nav-link {
+ pointer-events: none;
+ }
+ }
+}
+
+.sidebar__nav-link {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+
+ padding: 10px 24px 10px 12px;
+
+ border-radius: 12px;
+
+ text-decoration: none;
+
+ transition: background-color var(--default-animation);
+
+ &,
+ &:visited {
+ color: currentColor;
+ }
+
+ &--active {
+ color: var(--helper-purple-default);
+ background: var(--helper-purple-lighter);
+
+ svg path {
+ fill: var(--helper-purple-default);
+ }
+
+ &:visited {
+ color: var(--helper-purple-default);
+ }
+ }
+}
+
+.sidebar__footer {
+ margin-left: 12px;
+}
+
+.sidebar__footer-list {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ margin-bottom: 32px;
+}
+
+.sidebar__footer-link {
+ &,
+ &:visited {
+ color: var(--text-gray);
+ }
+
+ &:hover {
+ color: var(--text-main);
+ }
+}
+
+.sidebar__footer-social-list {
+ display: flex;
+ gap: 16px;
+}
+
+.sidebar__footer-social-link {
+ &:hover {
+ path {
+ fill: var(--text-main);
+
+ transition: fill var(--default-animation);
+ }
+ }
+}
diff --git a/src/component/page/sidebar/util/sidebarConstants.tsx b/src/component/page/sidebar/util/sidebarConstants.tsx
new file mode 100644
index 0000000..18b71da
--- /dev/null
+++ b/src/component/page/sidebar/util/sidebarConstants.tsx
@@ -0,0 +1,37 @@
+import {ReactComponent as TwitterIcon} from "../../../../core/ui/icons/twitter.svg";
+import {ReactComponent as DiscordIcon} from "../../../../core/ui/icons/discord.svg";
+import {ReactComponent as RedditIcon} from "../../../../core/ui/icons/reddit.svg";
+
+export const SIDEBAR_FOOTER_LINKS = [
+ {
+ text: "Get Help",
+ to: "https://perawallet.app/support/"
+ },
+ {
+ text: "About Pera",
+ to: "https://perawallet.app/"
+ },
+ {
+ text: "Pera Explorer",
+ to: "https://explorer.perawallet.app/"
+ },
+ {
+ text: "Terms of Use",
+ to: "https://perawallet.app/terms-and-services/"
+ }
+];
+
+export const SIDEBAR_SOCIAL_LINK = [
+ {
+ icon:
+
+ -
+ {(item) => (
+
-
+ {(item) => (
+
+ {currentSession ? (
+
+ );
+}
+
+export default PeraConnectBanner;
diff --git a/src/component/pera-connect-banner/_pera-connect-banner.scss b/src/component/pera-connect-banner/_pera-connect-banner.scss
new file mode 100644
index 0000000..2f128c2
--- /dev/null
+++ b/src/component/pera-connect-banner/_pera-connect-banner.scss
@@ -0,0 +1,39 @@
+.pera-connect-banner {
+ display: grid;
+ align-items: center;
+ justify-content: center;
+ grid-template-columns: 24px auto;
+ gap: 16px;
+
+ width: 100%;
+
+ padding: 20px 46px;
+
+ color: var(--white);
+ background-color: var(--gray-800);
+
+ text-align: center;
+
+ animation: 0.3s slideAnimationForBanner ease-out;
+}
+
+.pera-connect-banner__app-meta__favicon {
+ width: 24px;
+ height: 24px;
+
+ object-fit: cover;
+
+ overflow: hidden;
+
+ border-radius: 100%;
+}
+
+@keyframes slideAnimationForBanner {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
diff --git a/src/component/pera-password-input/PeraPasswordInput.tsx b/src/component/pera-password-input/PeraPasswordInput.tsx
new file mode 100644
index 0000000..b458ea0
--- /dev/null
+++ b/src/component/pera-password-input/PeraPasswordInput.tsx
@@ -0,0 +1,61 @@
+import {Button, Input, PasswordInputProps} from "@hipo/react-ui-toolkit";
+import classNames from "classnames";
+import {useState} from "react";
+
+import "./_pera-password-input.scss";
+
+export interface PeraPasswordInputProps extends Omit+ {"We will take you back to "} + + + {currentSession?.title || "application"} + + + {" once you finish the process"} +
+
+ {renderIcon()}
+
+
+
+ {hasCloseButton && (
+
+
+ )}
+
+ );
+
+ function renderIcon() {
+ let icon =
+ {icon}
+
+ );
+ }
+}
+
+export default PeraToast;
diff --git a/src/component/pera-toast/_pera-toast.scss b/src/component/pera-toast/_pera-toast.scss
new file mode 100644
index 0000000..ec5c6d7
--- /dev/null
+++ b/src/component/pera-toast/_pera-toast.scss
@@ -0,0 +1,108 @@
+.toast-stack {
+ width: 404px;
+
+ padding: 32px;
+}
+
+.pera-toast {
+ display: flex;
+ justify-content: space-between;
+ gap: 12px;
+
+ width: 340px;
+
+ margin-top: 4px;
+ padding: 16px 20px;
+
+ background-color: var(--card-default);
+ border-radius: 16px;
+ box-shadow: var(--shadow-xxlarge);
+
+ &--small {
+ width: 300px;
+
+ margin-left: auto;
+ }
+}
+
+.pera-toast--animation {
+ opacity: 0;
+
+ transform: scale(0.97) translate(16px, 16px);
+
+ animation: PeraToastAnimation 0.2s ease-out forwards;
+}
+
+@keyframes PeraToastAnimation {
+ 100% {
+ opacity: 1;
+
+ transform: scale(1) translate(0, 0);
+ }
+}
+
+.pera-toast__title {
+ margin: 2px 0 4px;
+}
+
+.pera-toast--warning {
+ .pera-toast__title {
+ color: var(--helper-red-darker);
+ }
+}
+
+.pera-toast--info {
+ .pera-toast__title {
+ color: var(--helper-orange-darker);
+ }
+}
+
+.pera-toast__learn-more {
+ display: block;
+
+ margin-top: 12px;
+}
+
+.pera-toast__icon-wrapper {
+ width: 28px;
+ height: 28px;
+
+ padding: 6px;
+
+ border-radius: 50%;
+}
+
+.pera-toast__icon-wrapper--info {
+ background-color: var(--helper-orange-lighter);
+
+ .key-icon {
+ path {
+ fill: var(--helper-orange-darker);
+ }
+ }
+}
+
+.pera-toast__icon-wrapper--warning {
+ background-color: var(--helper-red-lighter);
+
+ .info-icon {
+ path {
+ fill: var(--helper-red-darker);
+ }
+ }
+}
+
+.toast-close-button {
+ width: 24px;
+ height: 24px;
+
+ padding: unset;
+
+ background-color: transparent;
+
+ .close-icon {
+ path {
+ fill: var(--text-gray-lightest);
+ }
+ }
+}
diff --git a/src/component/simple-toast/SimpleToast.tsx b/src/component/simple-toast/SimpleToast.tsx
new file mode 100644
index 0000000..7ff8404
--- /dev/null
+++ b/src/component/simple-toast/SimpleToast.tsx
@@ -0,0 +1,66 @@
+import {ReactComponent as TickCircleIcon} from "../../core/ui/icons/tick-circle.svg";
+import {ReactComponent as DangerIcon} from "../../core/ui/icons/danger.svg";
+
+import {Fragment, useLayoutEffect} from "react";
+import ReactDOM from "react-dom";
+import classNames from "classnames";
+
+import "./_simple-toast.scss";
+
+import {SimpleToastContextState} from "./util/simpleToastTypes";
+import {SimpleToastItemContext} from "./SimpleToastItemContext";
+import {useSimpleToaster, useSimpleToastContextState} from "./util/simpleToastHooks";
+
+export interface SimpleToastProps {
+ data: SimpleToastContextState["toast"];
+}
+
+function SimpleToast({data}: SimpleToastProps) {
+ const contextState = useSimpleToastContextState();
+ const {hide} = useSimpleToaster();
+
+ useLayoutEffect(() => {
+ const timeoutId = setTimeout(() => {
+ hide();
+ }, contextState.defaultAutoCloseTimeout);
+
+ return () => {
+ if (timeoutId) {
+ clearTimeout(timeoutId);
+ }
+ };
+ }, [contextState.defaultAutoCloseTimeout, hide, contextState.toast?.id]);
+
+ return ReactDOM.createPortal(
+ contextState.toast ? (
+
+ {renderIcon()}
+
+ {data?.message}
+
+
+
+
+ );
+}
+
+function OptionalTooltip(props: {withinTooltip: boolean} & TooltipProps) {
+ const {withinTooltip, children, ...tooltipProps} = props;
+
+ if (withinTooltip) {
+ return
+ {children}
+
+
+ {content}
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ + {currentSession?.title} + + {" wants to connect to your account"} + +
+ + + {currentSession?.url} + +
+
+
+
+ {`Select Account (${accountCount})`}
+
+
+
+ = 2
+ })}>
+
+
+
+
+ );
+
+ function handleSelectAllAccounts() {
+ if (selectedAccounts?.length === accountCount) {
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ selectedAccounts: []
+ }
+ });
+ } else {
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ selectedAccounts: accountsArray
+ }
+ });
+ }
+ }
+}
+
+export default ConnectPageSelectAccount;
diff --git a/src/connect/select-account/_connect-page-select-account.scss b/src/connect/select-account/_connect-page-select-account.scss
new file mode 100644
index 0000000..c726c15
--- /dev/null
+++ b/src/connect/select-account/_connect-page-select-account.scss
@@ -0,0 +1,85 @@
+.connect-page-select-account__content {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ width: 100%;
+ height: 578px;
+}
+
+.connect-page-select-account__app-information {
+ height: calc(100% - 97px);
+
+ overflow: auto;
+
+ padding: 40px 28px 28px;
+}
+
+.connect-page-select-account__app-meta {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ text-align: center;
+}
+
+.connect-page-select-account__app-meta__favicon {
+ width: 80px;
+ height: 80px;
+
+ object-fit: cover;
+
+ overflow: hidden;
+
+ border-radius: 100%;
+}
+
+.connect-page-select-account__app-meta__url {
+ margin-bottom: 40px;
+
+ color: var(--secondary-button-text);
+}
+
+.connect-page-select-account__app-meta__title {
+ margin: 16px 0 4px;
+}
+
+.connect-page-select-account__select-account-text-wrapper {
+ margin-bottom: 12px;
+}
+
+.connect-page-select-account__select-all-button.button {
+ height: unset;
+
+ padding: 0;
+}
+
+.connect-page-select-account__spinner-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 24px;
+
+ width: 100%;
+ height: 100%;
+
+ text-align: center;
+}
+
+.connect-page-select-account__please-wait-text {
+ max-width: 328px;
+}
+
+.connect-page-select-account__connect-button-wrapper {
+ padding: 28px;
+
+ &--border {
+ border-top: 1px solid var(--gray-200);
+ }
+}
+
+.connect-page-select-account__connect-button {
+ width: 100%;
+ height: 48px;
+}
diff --git a/src/connect/select-account/account-list/ConnectPageAccountList.tsx b/src/connect/select-account/account-list/ConnectPageAccountList.tsx
new file mode 100644
index 0000000..76f989a
--- /dev/null
+++ b/src/connect/select-account/account-list/ConnectPageAccountList.tsx
@@ -0,0 +1,127 @@
+import {ReactComponent as CheckboxIcon} from "../../../core/ui/icons/checkbox.svg";
+
+import "./_connect-page-account-list.scss";
+
+import {List, ListItem} from "@hipo/react-ui-toolkit";
+import classNames from "classnames";
+
+import {
+ getAccountIcon,
+ trimAccountAddress,
+ trimAccountName
+} from "../../../account/util/accountUtils";
+import {useConnectFlowContext} from "../../context/ConnectFlowContext";
+import {useAppContext} from "../../../core/app/AppContext";
+import {filterOutItemsByKey} from "../../../core/util/array/arrayUtils";
+import {usePortfolioContext} from "../../../overview/context/PortfolioOverviewContext";
+import {ALGO_UNIT} from "../../../core/ui/typography/typographyConstants";
+import {defaultPriceFormatter} from "../../../core/util/number/numberUtils";
+
+function ConnectPageAccountList() {
+ const {
+ state: {accounts}
+ } = useAppContext();
+ const accountsArray = Object.values(accounts);
+ const {
+ formitoState: {selectedAccounts},
+ dispatchFormitoAction
+ } = useConnectFlowContext();
+ const listClassName = classNames("connect-page-account-list", {
+ "connect-page-account-list--is-selectable": !!onSelectAccount
+ });
+ const portfolioOverview = usePortfolioContext();
+ const {algoFormatter} = defaultPriceFormatter();
+
+ return (
+ + {"Establishing connection..."} +
+ )} + + {currentSession && accountCount === 1 && ( ++ {`Connecting you to ${currentSession.title}...`} +
+ )} +-
+ {(account) => (
+
+ {getAccountIcon({type: account.type, width: 32, height: 32})}
+
+
+
+
+
+ {account.name && (
+
+
+
+ {trimAccountName(account.name)}
+
+ )}
+
+
+ {trimAccountAddress(account.address)}
+
+
+
+ {`${ALGO_UNIT}${algoFormatter(
+ Number(
+ portfolioOverview?.accounts.find(
+ (portfolioAccount) => portfolioAccount.address === account.address
+ )?.total_algo_value || 0
+ ),
+ {
+ maximumFractionDigits: 2
+ }
+ )}`}
+
+
+
+
+
+
+
+ );
+
+ function renderContent() {
+ if (!hashedMasterkey || !hasAccounts) {
+ return (
+ {renderContent()}
+
+
+ );
+ }
+
+ return (
+
+
+ );
+}
+
+export default ConnectPageEmbeddedViewAddImportAccount;
diff --git a/src/connect/view/embedded/add-import-account/_connect-page-embedded-view-add-import-account.scss b/src/connect/view/embedded/add-import-account/_connect-page-embedded-view-add-import-account.scss
new file mode 100644
index 0000000..c815771
--- /dev/null
+++ b/src/connect/view/embedded/add-import-account/_connect-page-embedded-view-add-import-account.scss
@@ -0,0 +1,73 @@
+.connect-page-embedded-view-add-import-account {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ height: calc(100% - 40px);
+
+ padding-top: 48px;
+}
+
+.connect-page-embedded-view-add-import-account__icon-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 72px;
+ height: 72px;
+
+ margin: 0 auto 16px;
+
+ background: var(--card-default);
+
+ border-radius: 50%;
+ box-shadow: var(--shadow-large);
+}
+
+.connect-page-embedded-view-add-import-account__description {
+ margin: 0 auto 32px;
+
+ text-align: center;
+
+ &--no-account {
+ max-width: 268px;
+ }
+}
+
+.connect-page-embedded-view-add-import-account__button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+
+ width: 100%;
+
+ margin-bottom: 24px;
+
+ .chevron-right-icon {
+ path {
+ fill: var(--card-default);
+ }
+ }
+}
+
+.connect-page-embedded-view-add-import-account__import-account {
+ display: block;
+
+ margin: 4px auto 0;
+ padding: 0;
+
+ color: var(--helper-purple-default);
+ background-color: transparent;
+
+ text-align: center;
+}
+
+.connect-page-embedded-view-add-import-account__spinner-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 100%;
+ height: 100%;
+}
diff --git a/src/connect/view/tab/ConnectPageTabView.tsx b/src/connect/view/tab/ConnectPageTabView.tsx
new file mode 100644
index 0000000..c55ab4d
--- /dev/null
+++ b/src/connect/view/tab/ConnectPageTabView.tsx
@@ -0,0 +1,155 @@
+import "./_connect-page-tab-view.scss";
+
+import {useCallback} from "react";
+import classNames from "classnames";
+
+import {useAppContext} from "../../../core/app/AppContext";
+import appTellerManager, {PeraTeller} from "../../../core/app/teller/appTellerManager";
+import useTellerListener from "../../../core/util/hook/useTellerListener";
+import ConnectPageSelectAccount from "../../select-account/ConnectPageSelectAccount";
+import {useConnectFlowContext} from "../../context/ConnectFlowContext";
+import {NETWORK_MISMATCH_MESSAGE} from "../../../core/util/algod/algodConstants";
+import ConnectPageTabViewAddImportAccount from "./add-import-account/ConnectPageTabViewAddImportAccount";
+import PasswordAccessPage from "../../../password/page/access/PasswordAccessPage";
+import {appDBManager} from "../../../core/app/db";
+
+function ConnectPageTabView() {
+ const {
+ state: {preferredNetwork, hashedMasterkey, hasAccounts, masterkey},
+ dispatch: dispatchAppState
+ } = useAppContext();
+ const {
+ formitoState: {connectFlowView, selectedAccounts, currentSession},
+ dispatchFormitoAction
+ } = useConnectFlowContext();
+
+ // Receive "CONNECT" request from dApp
+ const onReceiveMessage = useCallback(
+ (event: MessageEvent
+
+
+
+
+
+
+ + {description} +
+
+
+ );
+
+ function renderContent() {
+ if (connectFlowView === "add-account") {
+ return {renderContent()}
+
+
+ );
+ }
+ }
+}
+
+export default ConnectPageTabViewAddImportAccount;
diff --git a/src/connect/view/tab/add-import-account/_connect-page-tab-view-add-import-account.scss b/src/connect/view/tab/add-import-account/_connect-page-tab-view-add-import-account.scss
new file mode 100644
index 0000000..3ef5dfc
--- /dev/null
+++ b/src/connect/view/tab/add-import-account/_connect-page-tab-view-add-import-account.scss
@@ -0,0 +1,38 @@
+.connect-page-tab-view-add-import-account__option-list {
+ margin: 80px 0 32px;
+}
+
+.connect-page-tab-view-add-import-account__nano-ledger {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ margin-left: auto;
+ padding: 16px;
+
+ background-color: rgba(var(--gray-200-rgb), 0.5);
+ border-radius: 16px;
+ box-shadow: var(--shadow-disabled);
+
+ cursor: not-allowed;
+
+ .ledger-icon {
+ margin-right: 12px;
+
+ path {
+ fill: var(--text-gray-light);
+ }
+
+ circle {
+ fill: var(--text-gray-light);
+ }
+ }
+}
+
+.connect-page-tab-view-add-import-account__nano-ledger__badge {
+ margin-left: 16px;
+ padding: 6px 12px;
+
+ background-color: var(--white);
+ border-radius: 16px;
+}
diff --git a/src/connect/view/tab/add-import-account/account-create/ConnectPageAccountCreate.tsx b/src/connect/view/tab/add-import-account/account-create/ConnectPageAccountCreate.tsx
new file mode 100644
index 0000000..8136ebf
--- /dev/null
+++ b/src/connect/view/tab/add-import-account/account-create/ConnectPageAccountCreate.tsx
@@ -0,0 +1,29 @@
+import AccountCreationAnimation from "../../../../../account/component/account-creation-animation/AccountCreationAnimation";
+import AccountCreate from "../../../../../account/page/create/AccountCreate";
+import AccountSuccessPage from "../../../../../account/page/success/AccountSuccessPage";
+import CardLayoutWithoutRoute from "../../../../../layouts/card-layout-without-route/CardLayoutWithoutRoute";
+import {useConnectFlowContext} from "../../../../context/ConnectFlowContext";
+
+export type ConnectPageAccountCreateViews = "create" | "animation" | "success";
+
+function ConnectPageAccountCreate() {
+ const {
+ formitoState: {createAccountViews}
+ } = useConnectFlowContext();
+
+ if (createAccountViews === "success") {
+ return {"Add Account"}
+ +
+
+ + {"Pair Nano Ledger"} +
+ +
+ {"COMING SOON"}
+
+ -
+ {({id, helperText, title, icon, imgSrc}) => (
+
+ {!shouldShowIllustrations && icon}
+
+
+
+ {shouldShowIllustrations && (
+ + {helperText} +
+ +
+
+ + {title} +
+ +
+
+ );
+ }
+
+ return (
+
+
+ );
+}
+
+export default MoonPayModal;
diff --git a/src/core/integrations/moon-pay/modal/_moon-pay-modal.scss b/src/core/integrations/moon-pay/modal/_moon-pay-modal.scss
new file mode 100644
index 0000000..ee61437
--- /dev/null
+++ b/src/core/integrations/moon-pay/modal/_moon-pay-modal.scss
@@ -0,0 +1,46 @@
+.moon-pay-modal-container {
+ .modal__body {
+ padding: 0;
+ }
+}
+
+.moon-pay-modal {
+ width: 480px;
+ height: 700px;
+
+ &--loading {
+ display: grid;
+
+ place-content: center;
+ }
+}
+
+.moon-pay-modal__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ padding: 12px 28px 4px;
+
+ border-bottom: 1px solid var(--gray-200);
+}
+
+.moon-pay-modal__close-button {
+ padding: 0 4px;
+}
+
+.moon-pay-modal__iframe-container {
+ height: calc(100% - 104px);
+
+ padding: 0 16px 8px 10px;
+}
+
+.moon-pay-modal__footer {
+ display: flex;
+ justify-content: center;
+ gap: 12px;
+
+ padding: 12px 28px;
+
+ border-top: 1px solid var(--gray-200);
+}
diff --git a/src/core/network/Fetcher.ts b/src/core/network/Fetcher.ts
new file mode 100644
index 0000000..f776b92
--- /dev/null
+++ b/src/core/network/Fetcher.ts
@@ -0,0 +1,137 @@
+import {isRecord} from "../util/object/objectUtils";
+import {stringifySearchParams} from "../util/url/urlUtils";
+import FetcherError from "./FetcherError";
+import {FetcherConfig, FetcherMiddleware} from "./fetcherTypes";
+import {fetchJSONMiddleware} from "./fetcherUtils";
+
+class Fetcher {
+ readonly config: FetcherConfig;
+
+ constructor(config: FetcherConfig) {
+ this.config = {
+ responseMiddlewares: [fetchJSONMiddleware],
+ rejectMiddlewares: [],
+ ...config,
+ initOptions: {
+ ...(config?.initOptions || {})
+ }
+ };
+ }
+
+ run
+
+
+ {"Add Funds"}
+ + +
+ {state.data?.url ? (
+ <>
+
+
+ ) : (
+
+
+ {"We failed to generate MoonPay URL."}
+ )} +
+ 
+
+ {"Powered by "}
+ +>( + WrappedFlow: React.FC
,
+ link?: string
+) {
+ return (props: P) => {
+ const {dispatchNavigationStateAction} = useNavigationContext();
+ const {from} = useLocationWithState<{from?: Location}>();
+ const headerGoBackLink = link || from?.pathname;
+
+ useLayoutEffect(() => {
+ if (headerGoBackLink) {
+ dispatchNavigationStateAction({
+ type: "SET_FORM_VALUE",
+ payload: {headerGoBackLink}
+ });
+ }
+ }, [dispatchNavigationStateAction, headerGoBackLink]);
+
+ return
+ {
+ // Spinner can be placed here
+ "Loading ..."
+ }
+
+ ) : null;
+}
+
+export default RouteLoading;
diff --git a/src/core/route/loading/_route-loading.scss b/src/core/route/loading/_route-loading.scss
new file mode 100644
index 0000000..015a626
--- /dev/null
+++ b/src/core/route/loading/_route-loading.scss
@@ -0,0 +1,13 @@
+.route-loading {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ background-color: var(--background-color);
+}
diff --git a/src/core/route/navigate/NavigateFlow.tsx b/src/core/route/navigate/NavigateFlow.tsx
new file mode 100644
index 0000000..cbad084
--- /dev/null
+++ b/src/core/route/navigate/NavigateFlow.tsx
@@ -0,0 +1,26 @@
+import {Navigate, NavigateProps, To} from "react-router-dom";
+
+import useLocationWithState from "../../util/hook/useLocationWithState";
+import ROUTES from "../routes";
+
+type NavigateFlowProps = Omit
+ ...
+
+ )
+*/
diff --git a/src/core/util/hook/useSetPageTitle.tsx b/src/core/util/hook/useSetPageTitle.tsx
new file mode 100644
index 0000000..2721e66
--- /dev/null
+++ b/src/core/util/hook/useSetPageTitle.tsx
@@ -0,0 +1,9 @@
+import {useLayoutEffect} from "react";
+
+function useSetPageTitle(title: string) {
+ useLayoutEffect(() => {
+ document.title = `${title} | Pera Wallet`;
+ }, [title]);
+}
+
+export default useSetPageTitle;
diff --git a/src/core/util/hook/useTellerListener.ts b/src/core/util/hook/useTellerListener.ts
new file mode 100644
index 0000000..a1feae9
--- /dev/null
+++ b/src/core/util/hook/useTellerListener.ts
@@ -0,0 +1,17 @@
+import {useEffect} from "react";
+
+import appTellerManager, {PeraTeller} from "../../app/teller/appTellerManager";
+
+function useTellerListener(
+ onReceiveMessage: (event: MessageEvent-
+ {(item) => (
+
+
+ ) : (
+ {children}
+ {children}
+ );
+}
+
+export default CardLayoutWithoutRoute;
diff --git a/src/layouts/card-layout/CardLayout.tsx b/src/layouts/card-layout/CardLayout.tsx
new file mode 100644
index 0000000..ac1af89
--- /dev/null
+++ b/src/layouts/card-layout/CardLayout.tsx
@@ -0,0 +1,23 @@
+import "./_card-layout.scss";
+
+import {Outlet} from "react-router-dom";
+
+interface CardLayoutProps {
+ hasOverlay?: boolean;
+}
+
+function CardLayout({hasOverlay = false}: CardLayoutProps) {
+ return hasOverlay ? (
+
+
+ ) : (
+
+
+
+
+ );
+}
+
+export default CardLayout;
diff --git a/src/layouts/card-layout/_card-layout.scss b/src/layouts/card-layout/_card-layout.scss
new file mode 100644
index 0000000..144e3a3
--- /dev/null
+++ b/src/layouts/card-layout/_card-layout.scss
@@ -0,0 +1,38 @@
+.card-layout {
+ position: relative;
+
+ display: flex;
+ flex-direction: column;
+
+ width: max-content;
+
+ margin: auto;
+ padding: 28px;
+
+ background: var(--card-default);
+ border-radius: 16px;
+ box-shadow: var(--shadow-small);
+}
+
+.card-layout-overlay {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ width: 100vw;
+ height: 100vh;
+
+ background: var(--overlay);
+}
+
+.card-layout-content {
+ @extend .card-layout;
+
+ position: absolute;
+ top: 50%;
+ left: 50%;
+
+ transform: translate(-50%, -50%);
+}
diff --git a/src/layouts/sidebar/SidebarLayout.tsx b/src/layouts/sidebar/SidebarLayout.tsx
new file mode 100644
index 0000000..222fca1
--- /dev/null
+++ b/src/layouts/sidebar/SidebarLayout.tsx
@@ -0,0 +1,42 @@
+import "./_sidebar-layout.scss";
+
+import {Outlet, useOutletContext} from "react-router-dom";
+import {useReducer} from "react";
+import classNames from "classnames";
+
+import Sidebar from "../../component/page/sidebar/Sidebar";
+import {
+ initialSidebarState,
+ SidebarContextType,
+ sidebarStateReducer
+} from "./sidebarStateReducer";
+import PageHeader from "../../component/page/header/PageHeader";
+
+function SidebarLayout() {
+ const [state, dispatch] = useReducer(sidebarStateReducer, initialSidebarState);
+
+ const sidebarLayoutClassnames = classNames("sidebar-layout", {
+ "sidebar-layout--is-navigation-disable": state.isSidebarDisable,
+ "sidebar-layout--hidden": !state.isSidebarVisible
+ });
+
+ return (
+
+
+ );
+}
+
+export function useSidebarContext() {
+ return useOutletContext
+
+
+
+
+
+ 
+
+
+ {"Pera Web Wallet is not supported on Firefox Private Browsing"}
+
+
+
+ {"Please use a different browser or switch to regular browsing mode."}
+
+
+
+ );
+}
+
+export default FirefoxIncognitoLandingPage;
diff --git a/src/not-supported/firefox-incognito/_firefox-incognito-landing-page.scss b/src/not-supported/firefox-incognito/_firefox-incognito-landing-page.scss
new file mode 100644
index 0000000..6269c05
--- /dev/null
+++ b/src/not-supported/firefox-incognito/_firefox-incognito-landing-page.scss
@@ -0,0 +1,38 @@
+.firefox-incognito-landing-page {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ width: 100vw;
+ height: 100vh;
+
+ color: var(--white);
+ background-color: var(--purple-500);
+
+ text-align: center;
+
+ .pera-logo {
+ position: absolute;
+ top: 10%;
+ left: 50%;
+
+ width: 150px;
+ height: 56px;
+
+ transform: translateX(-50%);
+ }
+
+ .firefox-incognito-landing-page__header {
+ margin: 40px 0 16px;
+ }
+
+ .firefox-incognito-landing-page__figure {
+ width: 50%;
+ }
+
+ .firefox-incognito-landing-page__figure-img {
+ width: 75%;
+ height: auto;
+ }
+}
diff --git a/src/not-supported/mobile/MobileLandingPage.tsx b/src/not-supported/mobile/MobileLandingPage.tsx
new file mode 100644
index 0000000..787e29c
--- /dev/null
+++ b/src/not-supported/mobile/MobileLandingPage.tsx
@@ -0,0 +1,41 @@
+import "./_mobile-landing-page.scss";
+
+import MobileNotSupportedImage from "../../core/ui/image/mobile-not-supported.svg";
+import {ReactComponent as PeraLogoWithText} from "../../core/ui/icons/pera-logo-with-text.svg";
+
+import Image from "../../component/image/Image";
+import LinkButton from "../../component/button/LinkButton";
+
+const PERA_MOBILE_APP_URL = "https://perawallet.app/download";
+
+function MobileLandingPage() {
+ return (
+
+
+ );
+}
+
+export default MobileLandingPage;
diff --git a/src/not-supported/mobile/_mobile-landing-page.scss b/src/not-supported/mobile/_mobile-landing-page.scss
new file mode 100644
index 0000000..ee37b65
--- /dev/null
+++ b/src/not-supported/mobile/_mobile-landing-page.scss
@@ -0,0 +1,15 @@
+.mobile-landing-page__heading-image {
+ max-width: 326px;
+
+ margin-bottom: 77px;
+}
+
+.mobile-landing-page__content {
+ padding: 0 40px;
+}
+
+.mobile-landing-page__message {
+ margin: 32px 0 48px;
+
+ color: var(--text-gray);
+}
diff --git a/src/overview/context/PortfolioOverviewContext.tsx b/src/overview/context/PortfolioOverviewContext.tsx
new file mode 100644
index 0000000..f5966bd
--- /dev/null
+++ b/src/overview/context/PortfolioOverviewContext.tsx
@@ -0,0 +1,29 @@
+import {createContext, ReactNode, useContext} from "react";
+
+import usePortfolioOverview, {PortfolioOverview} from "../util/hook/usePortfolioOverview";
+import {SECOND_IN_MS} from "../../core/util/time/timeConstants";
+
+const PortfolioContext = createContext(undefined as PortfolioOverview | undefined);
+
+PortfolioContext.displayName = "PortfolioContext";
+
+// eslint-disable-next-line no-magic-numbers
+const PORTFOLIO_OVERVIEW_POLLING_INTERVAL = SECOND_IN_MS * 3.5;
+
+export function PortfolioContextProvider({children}: {children: ReactNode}) {
+ const portfolioOverview = usePortfolioOverview({
+ interval: PORTFOLIO_OVERVIEW_POLLING_INTERVAL
+ });
+
+ return (
+
+
+ {"Install Pera Wallet"}
+
+
+ + { + "Pera Web is not supported on mobile. Download Pera Mobile or use a desktop browser." + } +
+ +
+
+
+
+
+
+ {"Accounts"}
+ + {accountCount} + +
+
+ );
+
+ function handleSelectAccount(address: string) {
+ dispatchModalStateAction({
+ type: "OPEN_MODAL",
+ payload: {
+ item: {
+ id: MOON_PAY_MODAL_ID,
+ modalContentLabel: "Add funds via Moonpay",
+ customClassName: "moon-pay-modal-container",
+ children:
+
+
+
+
+ {"Select account"}
+-
+ {({
+ total_usd_value,
+ total_algo_value,
+ address,
+ standard_asset_count,
+ collectible_count
+ }) => (
+
+ {accounts[address]?.name && (
+
+ {accounts[address].name}
+
+ )}
+
+
+
+ + {trimAccountAddress(address)} +
+
+
+ {accountAssetCount}
+
+
+
+ {"Assets"}
+
+
+
+
+
+ {collectibleCount}
+
+
+
+ {"NFTs"}
+
+
+
+
+
+ {`${ALGO_UNIT}${algoFormatter(Number(accountALGOValue), {
+ maximumFractionDigits: 2
+ })}`}
+
+
+
+
+
+
+
+ );
+
+ function handleAddFundsClick() {
+ dispatchModalStateAction({
+ type: "OPEN_MODAL",
+ payload: {
+ item: {
+ id: ACCOUNT_OVERVIEW_ADD_FUNDS_MODAL_ID,
+ modalContentLabel: "Select an Account to Opt-in",
+ customClassName: "account-overview-portfolio-value__add-funds-modal",
+ children: (
+ {"Portfolio Value"}
+ +
+
+
+
+
+
+
+
+
+ + {algoFormatter(algoValue, { + maximumFractionDigits: 2 + })} +
+
+
+
+
+
+
+
+
+ {"Copy Passphrase"}
+
+
+
+
+ );
+
+ async function deriveAccountMnemonic() {
+ const secretKey = await decryptSK(accounts[address!].pk, masterkey!);
+ const mnemonic = algosdk.secretKeyToMnemonic(secretKey!);
+
+ return mnemonic;
+ }
+
+ function handleCloseClick() {
+ onClose();
+ }
+}
+
+export default AccountShowPassphraseModal;
diff --git a/src/overview/page/show-passphrase/_account-show-passphrase.scss b/src/overview/page/show-passphrase/_account-show-passphrase.scss
new file mode 100644
index 0000000..2c22dd3
--- /dev/null
+++ b/src/overview/page/show-passphrase/_account-show-passphrase.scss
@@ -0,0 +1,69 @@
+.account-show-passphrase-modal {
+ width: 424px;
+ height: auto;
+}
+
+.account-show-passphrase-modal__header {
+ font-size: 24px;
+ font-weight: 600;
+ line-height: 29px;
+}
+
+.account-show-passphrase-modal__info-box {
+ margin: 32px 0 16px;
+
+ .key-icon {
+ path {
+ fill: var(--helper-orange-darker);
+ }
+ }
+}
+
+.account-show-passphrase-modal__learn-more-link {
+ display: flex;
+ align-items: center;
+
+ .arrow-right-icon {
+ margin-left: 2px;
+ }
+}
+
+.account-show-passphrase-modal__passphrase-list {
+ display: grid;
+ grid-template: repeat(9, 1fr) / repeat(3, auto);
+ grid-gap: 8px 12px;
+
+ grid-auto-flow: column;
+
+ margin: 16px auto 24px;
+ padding: 24px 8px;
+
+ background-color: var(--background);
+ border-radius: 12px;
+
+ counter-reset: item;
+}
+
+.account-show-passphrase-modal__passphrase-list-item {
+ transform: translateX(28px);
+ list-style-type: none;
+
+ &:before {
+ margin-right: 8px;
+
+ color: var(--text-gray-light);
+
+ content: counter(item) " ";
+ counter-increment: item;
+ }
+
+ &:nth-child(8n + 1):not(:last-child) {
+ grid-row: 1;
+ }
+}
+
+.account-show-passphrase-modal__close-button {
+ width: 100%;
+
+ margin-top: 12px;
+}
diff --git a/src/overview/page/show-qr/AccountShowQR.tsx b/src/overview/page/show-qr/AccountShowQR.tsx
new file mode 100644
index 0000000..0953ad0
--- /dev/null
+++ b/src/overview/page/show-qr/AccountShowQR.tsx
@@ -0,0 +1,59 @@
+import "./_account-show-qr.scss";
+
+import {useAppContext} from "../../../core/app/AppContext";
+import ClipboardButton from "../../../component/clipboard/button/ClipboardButton";
+import PeraQRCode from "../../../component/pera-qr-code/PeraQRCode";
+import Button from "../../../component/button/Button";
+
+interface AccountShowQRModalProps {
+ address: string;
+ onClose: VoidFunction;
+}
+
+export const ACCOUNT_SHOW_QR_MODAL_ID = "account-show-qr-modal";
+
+function AccountShowQRModal({address, onClose}: AccountShowQRModalProps) {
+ const {
+ state: {accounts}
+ } = useAppContext();
+
+ const {name} = accounts[address];
+
+ return (
+ {"View Passphrase"}
+ +-
+ {(word) => (
+
+
+ {"Copy Address"}
+
+
+
+
+ );
+}
+
+export default AccountShowQRModal;
diff --git a/src/overview/page/show-qr/_account-show-qr.scss b/src/overview/page/show-qr/_account-show-qr.scss
new file mode 100644
index 0000000..687faa1
--- /dev/null
+++ b/src/overview/page/show-qr/_account-show-qr.scss
@@ -0,0 +1,36 @@
+.account-show-qr-modal {
+ width: 480px;
+
+ text-align: center;
+}
+
+#react-qrcode-logo {
+ margin: 14px 0 42px;
+
+ border-radius: 24px;
+ box-shadow: var(--shadow-xxlarge);
+}
+
+.account-show-qr-modal__address {
+ width: 320px;
+
+ margin: 16px auto 32px;
+
+ word-wrap: break-word;
+}
+
+.account-show-qr-modal__clipboard-button {
+ width: 132px;
+
+ margin: 0 auto 48px;
+
+ .copy-icon {
+ path {
+ fill: var(--secondary-button-text);
+ }
+ }
+}
+
+.account-show-qr-modal__close-button {
+ width: 100%;
+}
diff --git a/src/overview/page/welcome/WelcomePage.tsx b/src/overview/page/welcome/WelcomePage.tsx
new file mode 100644
index 0000000..de8ec16
--- /dev/null
+++ b/src/overview/page/welcome/WelcomePage.tsx
@@ -0,0 +1,47 @@
+import "./_welcome-page.scss";
+
+import {Navigate} from "react-router-dom";
+
+import AccountOnboardingOptionList from "../../../account/component/onboarding-option-list/AccountOnboardingOptionList";
+import {useAppContext} from "../../../core/app/AppContext";
+import {generateWelcomePageCopies} from "./util/welcomePageUtils";
+import ROUTES from "../../../core/route/routes";
+import RequirePassword from "../../../core/route/RequirePassword";
+
+function WelcomePage() {
+ const {
+ state: {hashedMasterkey, hasAccounts}
+ } = useAppContext();
+ const {title, description} = generateWelcomePageCopies(!!hashedMasterkey);
+
+ if (hasAccounts) return + {"ADDRESS FOR ACCOUNT "} + {name} +
+ ++ {address} +
+ +
+
+ );
+
+ if (hashedMasterkey) {
+ content = {title}
+ + {description && ( ++ {description} +
+ )} + +
+
+ );
+
+ async function onAccessFormSubmit(event: SyntheticEvent
+
+
+
+ {renderHeroIcon()}
+
+ {type !== "embedded" && (
+ + {title || "Unlock Pera Wallet"} +
+ )} + ++ {description || "Enter your passcode to unlock your wallet"} +
+
+
+
+ {"Learn more →"}
+
+
+
+
+
+
+ );
+
+ function onPasswordSubmit(event: React.SyntheticEvent+ {"Create a passcode"} +
+ ++ {"By creating an account, you agree to Pera Wallet’s "} + + + {"Terms and Conditions"} + + + {" and "} + + + {"Privacy Policy"} + +
+
+
+
+ {!isDisabled && (
+ + {label} +
+ + {name && ( +
+ {icon || null}
+
+
+ )}
+
+ {!name && placeholder && (
+ {trimAccountName(name)}
++ {placeholder} +
+ )} +
+ {description && (
+
+ )}
+
+ );
+}
+
+export default SendTxnLink;
diff --git a/src/send-txn/components/link/_send-txn-link.scss b/src/send-txn/components/link/_send-txn-link.scss
new file mode 100644
index 0000000..8238936
--- /dev/null
+++ b/src/send-txn/components/link/_send-txn-link.scss
@@ -0,0 +1,29 @@
+.send-txn-link {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ color: currentColor;
+
+ &:visited {
+ color: inherit;
+ }
+
+ &--disabled {
+ background: var(--background);
+
+ cursor: not-allowed;
+
+ pointer-events: none;
+ }
+}
+
+.send-txn-link__name-row {
+ gap: 8px;
+
+ margin-top: 4px;
+}
+
+.send-txn-link__description-container {
+ gap: 16px;
+}
diff --git a/src/send-txn/components/link/account/SendTxnAccountLink.tsx b/src/send-txn/components/link/account/SendTxnAccountLink.tsx
new file mode 100644
index 0000000..d6cff57
--- /dev/null
+++ b/src/send-txn/components/link/account/SendTxnAccountLink.tsx
@@ -0,0 +1,54 @@
+import {ReactComponent as AccountDefaultIcon} from "../../../../core/ui/icons/account-default.svg";
+
+import {useAppContext} from "../../../../core/app/AppContext";
+import ROUTES from "../../../../core/route/routes";
+import {ALGO_UNIT} from "../../../../core/ui/typography/typographyConstants";
+import {useSendTxnFlowContext} from "../../../context/SendTxnFlowContext";
+import SendTxnLink from "../SendTxnLink";
+import {defaultPriceFormatter} from "../../../../core/util/number/numberUtils";
+import FormatUSDBalance from "../../../../component/format-balance/usd/FormatUSDBalance";
+import {usePortfolioContext} from "../../../../overview/context/PortfolioOverviewContext";
+
+function SendTxnAccountLink() {
+ const {
+ state: {accounts}
+ } = useAppContext();
+ const {
+ formitoState: {senderAddress}
+ } = useSendTxnFlowContext();
+ const portfolioOverview = usePortfolioContext();
+ const {algoFormatter} = defaultPriceFormatter();
+ const selectedAccountDetails = portfolioOverview!.accounts.find(
+ (account) => account.address === senderAddress
+ );
+
+ return (
+ {description}
+ )}
+
+ {!description && descriptionPlaceholder && (
+ {descriptionPlaceholder}
+ )}
+
+
+
+ ),
+ placeholder: "Select account"
+ }}
+ />
+ );
+}
+
+export default SendTxnAccountLink;
diff --git a/src/send-txn/components/link/asset/SendTxnAssetLink.tsx b/src/send-txn/components/link/asset/SendTxnAssetLink.tsx
new file mode 100644
index 0000000..ff7a736
--- /dev/null
+++ b/src/send-txn/components/link/asset/SendTxnAssetLink.tsx
@@ -0,0 +1,43 @@
+import Tooltip from "../../../../component/tooltip/Tooltip";
+import ROUTES from "../../../../core/route/routes";
+import {getAssetImgSrc} from "../../../../core/util/image/imageUtils";
+import {useSendTxnFlowContext} from "../../../context/SendTxnFlowContext";
+import SendTxnLink from "../SendTxnLink";
+import {formatASAAmount} from "../../../../core/util/asset/assetUtils";
+import AssetLogo from "../../../../asset/components/logo/AssetLogo";
+
+function SendTxnAssetLink() {
+ const {
+ formitoState: {senderAddress, selectedAsset}
+ } = useSendTxnFlowContext();
+
+ return (
+ + {ALGO_UNIT} + {algoFormatter(Number(selectedAccountDetails.total_algo_value))} +
+
+ {"For more information on transacting, "}
+
+
+ {" visit here →"}
+
+
+ }
+ />
+ );
+}
+
+export default SendTxnInfoModal;
diff --git a/src/send-txn/modal/_send-txn-info-modal.scss b/src/send-txn/modal/_send-txn-info-modal.scss
new file mode 100644
index 0000000..47a787c
--- /dev/null
+++ b/src/send-txn/modal/_send-txn-info-modal.scss
@@ -0,0 +1,36 @@
+@import "../../core/ui/typography/typography-mixins";
+
+.send-txn__info-modal {
+ .info-modal__description-list-item {
+ @include text-color--gray();
+ @include typography--secondary-body();
+
+ &:first-of-type {
+ @include typography--medium-body();
+
+ color: var(--text-main);
+
+ .send-txn__info-tip-icon path {
+ fill: var(--helper-purple-default);
+ }
+
+ .info-modal__description-list-item__icon-wrapper {
+ background: none;
+ }
+ }
+
+ &:not(:first-of-type) {
+ .send-txn__info-tip-icon path {
+ fill: var(--text-gray-light);
+ }
+ }
+ }
+}
+
+.send-txn__info-modal-link {
+ color: var(--helper-purple-default);
+}
+
+.send-txn__info-warning {
+ color: var(--helper-red-default);
+}
diff --git a/src/send-txn/page/confirm-txn/SendTxnConfirm.tsx b/src/send-txn/page/confirm-txn/SendTxnConfirm.tsx
new file mode 100644
index 0000000..8da7869
--- /dev/null
+++ b/src/send-txn/page/confirm-txn/SendTxnConfirm.tsx
@@ -0,0 +1,209 @@
+/* eslint-disable no-magic-numbers */
+import "./_send-txn-confirm.scss";
+
+import {List, ListItem} from "@hipo/react-ui-toolkit";
+import algosdk, {Transaction} from "algosdk";
+import {useState} from "react";
+import {Navigate, useNavigate} from "react-router-dom";
+
+import {trimAccountAddress, trimAccountName} from "../../../account/util/accountUtils";
+import Button from "../../../component/button/Button";
+import GoBackButton from "../../../component/go-back-button/GoBackButton";
+import {useSimpleToaster} from "../../../component/simple-toast/util/simpleToastHooks";
+import {useAppContext} from "../../../core/app/AppContext";
+import ROUTES from "../../../core/route/routes";
+import {ALGO_UNIT} from "../../../core/ui/typography/typographyConstants";
+import algod from "../../../core/util/algod/algod";
+import {decryptSK} from "../../../core/util/nacl/naclUtils";
+import {encodeString} from "../../../core/util/string/stringUtils";
+import {useSendTxnFlowContext} from "../../context/SendTxnFlowContext";
+import {defaultPriceFormatter} from "../../../core/util/number/numberUtils";
+import {
+ formatASAAmount,
+ fractionDecimalToInteger,
+ isALGO
+} from "../../../core/util/asset/assetUtils";
+import FormatUSDBalance from "../../../component/format-balance/usd/FormatUSDBalance";
+import {ALGORAND_DEFAULT_TXN_WAIT_ROUNDS} from "../../util/sendTxnConstants";
+
+const CONFIRM_ACCOUNT_ADDRESS_DIVIDE_LENGTH = 30;
+
+function SendTxnConfirm() {
+ const navigate = useNavigate();
+ const {
+ state: {accounts, masterkey}
+ } = useAppContext();
+ const {
+ formitoState: {
+ senderAddress,
+ selectedAsset,
+ recipientAddress,
+ txnAmount,
+ txnNote,
+ txnFee,
+ exchangePrice
+ }
+ } = useSendTxnFlowContext();
+ const {display} = useSimpleToaster();
+ const [isTxnPending, setIsTxnPending] = useState(false);
+ const {algoFormatter} = defaultPriceFormatter();
+
+ if (!recipientAddress) {
+ return
+
+ );
+
+ async function handleSignTransaction() {
+ try {
+ setIsTxnPending(true);
+
+ let txnToSign: Transaction;
+ const isAssetTxn = selectedAsset && selectedAsset.name !== "ALGO";
+
+ // prepare txn parameters
+ const suggestedParams = await algod.client.getTransactionParams().do();
+ let txnPayload: Parameters<
+ | typeof algosdk.makePaymentTxnWithSuggestedParamsFromObject
+ | typeof algosdk.makeAssetTransferTxnWithSuggestedParamsFromObject
+ >[0] = {
+ from: senderAddress!,
+ to: recipientAddress!,
+ amount: algosdk.algosToMicroalgos(Number(txnAmount!)),
+ suggestedParams,
+ note: encodeString(txnNote || "")
+ };
+
+ if (isAssetTxn) {
+ const assetAmount = fractionDecimalToInteger(
+ Number(txnAmount!),
+ selectedAsset?.fraction_decimals
+ );
+
+ txnPayload = {
+ ...txnPayload,
+ amount: Math.round(assetAmount),
+ assetIndex: selectedAsset.asset_id
+ };
+ txnToSign = algosdk.makeAssetTransferTxnWithSuggestedParamsFromObject(txnPayload);
+ }
+ // payment txn
+ else {
+ txnToSign = algosdk.makePaymentTxnWithSuggestedParamsFromObject(txnPayload);
+ }
+
+ // decrypt secret_key and sign
+ const decryptedKey = accounts[senderAddress!].pk;
+ const sk = await decryptSK(decryptedKey, masterkey!);
+ const signedTxn = txnToSign.signTxn(sk!);
+
+ // send node and wait for confirmation for routing to overview
+ await algod.client.sendRawTransaction(signedTxn).do();
+ await algosdk.waitForConfirmation(
+ algod.client,
+ txnToSign.txID().toString(),
+ ALGORAND_DEFAULT_TXN_WAIT_ROUNDS
+ );
+
+ navigate(ROUTES.SEND_TXN.SUCCESS.FULL_PATH, {state: {txnId: txnToSign.txID()}});
+ } catch (error: any) {
+ let message = "Please try again later.";
+
+ // TODO: search error messages in algosdk
+ if (error?.message.includes("must optin")) {
+ message = "Receiver must optin to receive this asset.";
+ }
+
+ console.error(error?.message);
+
+ display({type: "error", message});
+ } finally {
+ setIsTxnPending(false);
+ }
+ }
+
+ function generateTransactionDetails(): {title: string; description: React.ReactNode}[] {
+ return [
+ {
+ title: "From",
+ description: (
+ <>
+ {
+ {txnAmount && (
+
+
+ + {isALGO(selectedAsset!) + ? `${ALGO_UNIT}${algoFormatter( + algosdk.algosToMicroalgos(Number(txnAmount)) + )}` + : `${formatASAAmount(selectedAsset!, { + assetAmount: Number(txnAmount), + inBaseUnits: false + })}`} +
+ )} + + {isALGO(selectedAsset!) && ( +-
+ {({title, description}) => (
+
{title}
+ +
+ {description}
+
+ {`${trimAccountName(accounts[senderAddress!].name!)} Account `}
} + ++ {trimAccountAddress(senderAddress || "")} +
+ + ) + }, + { + title: "To", + description: ( +
+ {recipientAddress!.slice(0, CONFIRM_ACCOUNT_ADDRESS_DIVIDE_LENGTH)}
+
+
+
+ {recipientAddress!.slice(CONFIRM_ACCOUNT_ADDRESS_DIVIDE_LENGTH)}
+
{txnNote || ""}
+ }, + { + title: "Transaction Fee", + description: `${algoFormatter(txnFee)} ALGO` + } + ]; + } +} + +export default SendTxnConfirm; diff --git a/src/send-txn/page/confirm-txn/_send-txn-confirm.scss b/src/send-txn/page/confirm-txn/_send-txn-confirm.scss new file mode 100644 index 0000000..ef32f70 --- /dev/null +++ b/src/send-txn/page/confirm-txn/_send-txn-confirm.scss @@ -0,0 +1,57 @@ +.send-txn-confirm { + width: 424px; +} + +.send-txn-confirm__amount { + display: grid; + + gap: 8px; + + width: 100%; + height: 95px; + + background: var(--helper-purple-lighter); + border-radius: 12px; + place-content: center; + + &-algo { + color: var(--helper-purple-default); + } +} + +.send-txn-confirm__list { + display: grid; + gap: 16px; + + margin: 28px 0 48px; + + word-break: break-word; +} + +.send-txn-confirm__list-item { + display: flex; + justify-content: space-between; + + padding-bottom: 16px; + + &:not(:last-child) { + border-bottom: 1px solid var(--background); + } +} + +.send-txn-confirm__list-item-content { + display: flex; + flex-direction: column; + + gap: 2px; + + max-width: 36ch; /* stylelint-disable-line unit-allowed-list */ + + text-align: right; +} + +.send-txn-confirm__txn-note { + max-height: 200px; + + overflow-y: auto; +} diff --git a/src/send-txn/page/select-txn-account/SendTxnSelectAccount.tsx b/src/send-txn/page/select-txn-account/SendTxnSelectAccount.tsx new file mode 100644 index 0000000..d1e475e --- /dev/null +++ b/src/send-txn/page/select-txn-account/SendTxnSelectAccount.tsx @@ -0,0 +1,53 @@ +import "./_send-txn-select-account.scss"; + +import {useNavigate} from "react-router-dom"; + +import GoBackButton from "../../../component/go-back-button/GoBackButton"; +import ROUTES from "../../../core/route/routes"; +import {useSendTxnFlowContext} from "../../context/SendTxnFlowContext"; +import {usePortfolioContext} from "../../../overview/context/PortfolioOverviewContext"; +import SearchableAccountList from "../../../account/component/list/searchable/SearchableAccountList"; + +function SendTxnSelectAccount() { + const navigate = useNavigate(); + const { + formitoState: {senderAddress}, + dispatchFormitoAction + } = useSendTxnFlowContext(); + const portfolioOverview = usePortfolioContext(); + + return ( +
+
+ );
+
+ function handleSelectAccount(address: string) {
+ if (!portfolioOverview) return;
+
+ if (senderAddress !== address) {
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ senderAddress: address,
+ recipientAddress: undefined,
+ selectedAsset: undefined,
+ txnAmount: undefined,
+ minBalance: undefined
+ }
+ });
+ }
+
+ navigate(ROUTES.SEND_TXN.ROUTE);
+ }
+}
+
+export default SendTxnSelectAccount;
diff --git a/src/send-txn/page/select-txn-account/_send-txn-select-account.scss b/src/send-txn/page/select-txn-account/_send-txn-select-account.scss
new file mode 100644
index 0000000..71bd404
--- /dev/null
+++ b/src/send-txn/page/select-txn-account/_send-txn-select-account.scss
@@ -0,0 +1,17 @@
+@import "../../../layouts/card-layout/_card-layout.scss";
+
+.send-txn__account {
+ @extend .card-layout;
+
+ display: flex;
+ flex-direction: column;
+
+ width: 480px;
+ height: 590px;
+
+ padding: 0;
+}
+
+.send-txn__account__go-back-button {
+ padding: 28px 28px 0;
+}
diff --git a/src/send-txn/page/select-txn-asset/SendTxnSelectAsset.tsx b/src/send-txn/page/select-txn-asset/SendTxnSelectAsset.tsx
new file mode 100644
index 0000000..9032eb9
--- /dev/null
+++ b/src/send-txn/page/select-txn-asset/SendTxnSelectAsset.tsx
@@ -0,0 +1,162 @@
+import "./_send-txn-select-asset.scss";
+
+import {ReactComponent as PlusIcon} from "../../../core/ui/icons/plus.svg";
+
+import {Navigate, useNavigate} from "react-router-dom";
+import {useEffect, useState} from "react";
+
+import GoBackButton from "../../../component/go-back-button/GoBackButton";
+import {useSendTxnFlowContext} from "../../context/SendTxnFlowContext";
+import ROUTES from "../../../core/route/routes";
+import useAsyncProcess from "../../../core/network/async-process/useAsyncProcess";
+import {AccountASA} from "../../../core/util/pera/api/peraApiModels";
+import SearchableList from "../../../component/list/searchable-list/SearchableList";
+import SendTxnSelectAssetListItem from "./list-item/SendTxnSelectAssetListItem";
+import InfoBox from "../../../component/info-box/InfoBox";
+import Button from "../../../component/button/Button";
+import MoonPayModal, {
+ MOON_PAY_MODAL_ID
+} from "../../../core/integrations/moon-pay/modal/MoonPayModal";
+import {useModalDispatchContext} from "../../../component/modal/context/ModalContext";
+import {assetDBManager} from "../../../core/app/db";
+
+function SendTxnSelectAsset() {
+ const navigate = useNavigate();
+ const {
+ formitoState: {senderAddress},
+ dispatchFormitoAction
+ } = useSendTxnFlowContext();
+ const {
+ state: {data: accountAssets, isRequestPending, isRequestFetched, error},
+ runAsyncProcess
+ } = useAsyncProcess
+
+ {(asset) => (
+
+ )}
+
+ {isRequestFetched && assetsListItems.length === 0 && (
+
+ );
+
+ function handleFilterAsset(value: string) {
+ const query = value.toLowerCase();
+
+ const queriedAssetsData =
+ accountAssets?.filter(
+ (asset) =>
+ asset.name.toLowerCase().includes(query) ||
+ asset.unit_name.toLowerCase().includes(query)
+ ) || [];
+
+ setQueriedAssets(queriedAssetsData);
+ }
+
+ function filterZeroValuedAssetListItems(assets: AccountASA[]) {
+ return assets.filter((asset) => asset.amount !== "0");
+ }
+
+ function handleOnSelectAsset(asset: AccountASA) {
+ return () => {
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ selectedAsset: asset,
+ txnAmount: ""
+ }
+ });
+
+ navigate(ROUTES.SEND_TXN.ROUTE);
+ };
+ }
+
+ function handleAddFundsClick() {
+ dispatchModalStateAction({
+ type: "OPEN_MODAL",
+ payload: {
+ item: {
+ id: MOON_PAY_MODAL_ID,
+ modalContentLabel: "Add funds via MoonPay",
+ customClassName: "moon-pay-modal-container",
+ children: (
+
+
+ )}
+ + {"You have no funds in this account"} +
+ + +{`${assetAmount}`}
+ +
+
+ );
+}
+
+export default SendTxn;
diff --git a/src/send-txn/page/send-txn/_send-txn.scss b/src/send-txn/page/send-txn/_send-txn.scss
new file mode 100644
index 0000000..b790c67
--- /dev/null
+++ b/src/send-txn/page/send-txn/_send-txn.scss
@@ -0,0 +1,21 @@
+.send-txn {
+ height: 600px;
+}
+
+.send-txn__heading {
+ display: flex;
+
+ margin-bottom: 32px;
+
+ .button:active {
+ background: none;
+ }
+
+ .button:focus {
+ box-shadow: none;
+ }
+}
+
+.send-txn__header-icon path {
+ fill: var(--helper-purple-default);
+}
diff --git a/src/send-txn/page/send-txn/sendTxnConstants.tsx b/src/send-txn/page/send-txn/sendTxnConstants.tsx
new file mode 100644
index 0000000..9e11390
--- /dev/null
+++ b/src/send-txn/page/send-txn/sendTxnConstants.tsx
@@ -0,0 +1,34 @@
+import {ReactComponent as InfoIcon} from "../../../core/ui/icons/info.svg";
+import {ReactComponent as TipIcon} from "../../../core/ui/icons/tip.svg";
+
+export const SEND_TXN_INFO_MODAL_ID = "send-txn-info-modal";
+
+export const SEND_TXN_INFO_MODAL_TIPS = [
+ {
+ id: "header",
+ icon:
+
+
+ {"Send"}
+ + +
+ {
+ "Exchanges change their deposit addresses frequently, and saved exchange addresses may no longer be in use. "
+ }
+
+
+ {"Ensure you're sending to the correct address."}
+
+
+ )
+ }
+];
diff --git a/src/send-txn/page/success/SendTxnSuccess.tsx b/src/send-txn/page/success/SendTxnSuccess.tsx
new file mode 100644
index 0000000..0df0236
--- /dev/null
+++ b/src/send-txn/page/success/SendTxnSuccess.tsx
@@ -0,0 +1,131 @@
+/* eslint-disable react/jsx-key */
+import "./_send-txn-success.scss";
+
+import {ReactComponent as CheckmarkIcon} from "../../../core/ui/icons/checkmark.svg";
+import {ReactComponent as ExportIcon} from "../../../core/ui/icons/export.svg";
+import {ReactComponent as ArrowRightIcon} from "../../../core/ui/icons/arrow-right.svg";
+
+import algosdk from "algosdk";
+import {Navigate} from "react-router-dom";
+import {List, ListItem} from "@hipo/react-ui-toolkit";
+
+import {useSendTxnFlowContext} from "../../context/SendTxnFlowContext";
+import {trimAccountAddress, trimAccountName} from "../../../account/util/accountUtils";
+import {defaultPriceFormatter} from "../../../core/util/number/numberUtils";
+import ClipboardButton from "../../../component/clipboard/button/ClipboardButton";
+import useLocationWithState from "../../../core/util/hook/useLocationWithState";
+import ROUTES from "../../../core/route/routes";
+import LinkButton from "../../../component/button/LinkButton";
+import {isALGO} from "../../../core/util/asset/assetUtils";
+import {generateAlgoExplorerLink} from "../../../core/util/algoExplorer/algoExplorerUtils";
+import {useAppContext} from "../../../core/app/AppContext";
+
+type LocationState = {txnId: string};
+
+function SendTxnSuccess() {
+ const {
+ state: {accounts}
+ } = useAppContext();
+ const {
+ formitoState: {senderAddress, selectedAsset, recipientAddress, txnAmount}
+ } = useSendTxnFlowContext();
+ const {txnId} = useLocationWithState
+
+ {"Back to Accounts"}
+
+
+
+ {"View on Algo Explorer"}
+
+
+ );
+
+ function generateTxnSummary() {
+ let amount = `${algoFormatter(algosdk.algosToMicroalgos(Number(txnAmount)))} ALGO`;
+
+ if (selectedAsset && !isALGO(selectedAsset)) {
+ amount = `${txnAmount} ${selectedAsset.unit_name}`;
+ }
+
+ return [
+ [
+ <>
+
+
+
+ + {"Transaction Submitted"} +
+ ++ {"Your transaction was successfully submitted to the Algorand network"} +
+ +-
+ {([from, middle, to]) => (
+
{from}
+ + {middle && middle} + + {to && to} +{`${trimAccountName( + accounts[senderAddress!].name + )} Account `}
+ ++ {trimAccountAddress(senderAddress!)} +
+ , +
+
,
+
+ + {trimAccountAddress(recipientAddress!)} +
+ ], + ["Amount",{amount}
], + [ + "Transaction ID", +
+
+
+
+ ]
+ ];
+ }
+}
+
+export default SendTxnSuccess;
diff --git a/src/send-txn/page/success/_send-txn-success.scss b/src/send-txn/page/success/_send-txn-success.scss
new file mode 100644
index 0000000..cd07c1b
--- /dev/null
+++ b/src/send-txn/page/success/_send-txn-success.scss
@@ -0,0 +1,106 @@
+.send-txn-success {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ width: 480px;
+ height: 594px;
+}
+
+.send-txn-success__icon {
+ width: 106px;
+ height: 106px;
+
+ margin: 14px auto 32px;
+
+ background: white;
+ border-radius: 100%;
+ box-shadow: var(--shadow-large);
+
+ .check-mark-icon path {
+ fill: var(--purple-500);
+ }
+}
+
+.send-txn-success__subheader {
+ width: 295px;
+
+ margin: 28px 0;
+
+ text-align: center;
+}
+
+.send-txn-success__list {
+ display: grid;
+ grid-gap: 16px;
+
+ width: 100%;
+}
+
+.send-txn-success__arrow-icon-wrapper {
+ display: grid;
+ place-content: center;
+
+ padding: 2px 8px;
+
+ background: var(--helper-green-lighter);
+ border-radius: 43px;
+
+ .arrow-right-icon path {
+ fill: var(--helper-green-default);
+ }
+}
+
+.send-txn-success__list-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ padding-bottom: 16px;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid var(--gray-100);
+ }
+
+ &:last-child {
+ align-self: flex-end;
+ }
+}
+
+.send-txn-success__link {
+ display: flex;
+ gap: 8px;
+
+ width: 100%;
+ height: 48px;
+
+ margin-top: 16px;
+
+ &:first-of-type {
+ margin-top: auto;
+ }
+
+ .home-icon path {
+ fill: var(--helper-purple-default);
+ }
+}
+
+.send-txn-success__clipboard-button {
+ --button-bg: transparent;
+ --button-height: 28px;
+
+ &:hover,
+ &:focus {
+ --button-bg: transparent;
+
+ box-shadow: none;
+ }
+
+ .clipboard-button__content {
+ .copy-icon {
+ path {
+ fill: var(--light-button-text);
+ }
+ }
+ }
+}
diff --git a/src/send-txn/util/sendTxnConstants.ts b/src/send-txn/util/sendTxnConstants.ts
new file mode 100644
index 0000000..f7af2f7
--- /dev/null
+++ b/src/send-txn/util/sendTxnConstants.ts
@@ -0,0 +1,9 @@
+export const ALGORAND_ADDRESS_LENGTH = 58;
+export const ALGORAND_TXN_NOTE_MAX_LENGTH = 1000;
+export const ALGORAND_DEFAULT_TXN_WAIT_ROUNDS = 1000;
+
+export enum SEND_TXN_FORM_VALIDATION_MESSAGES {
+ INVALID_ADDRESS = "Recipient address is not valid.",
+ ACCOUNT_BALANCE = "Balance is not enough for this transaction.",
+ INVALID_TXN_LENGTH = "Txn note should be no longer than 1000 characters."
+}
diff --git a/src/settings/component/clear-wallet-data-modal/ClearWalletDataModal.tsx b/src/settings/component/clear-wallet-data-modal/ClearWalletDataModal.tsx
new file mode 100644
index 0000000..55c4ac3
--- /dev/null
+++ b/src/settings/component/clear-wallet-data-modal/ClearWalletDataModal.tsx
@@ -0,0 +1,118 @@
+import "./_clear-wallet-data-modal.scss";
+
+import Button from "../../../component/button/Button";
+import {useModalDispatchContext} from "../../../component/modal/context/ModalContext";
+import useFormito from "../../../core/util/hook/formito/useFormito";
+import PasswordAccessPage, {
+ PASSWORD_ACCESS_MODAL_ID
+} from "../../../password/page/access/PasswordAccessPage";
+import {useSimpleToaster} from "../../../component/simple-toast/util/simpleToastHooks";
+import ClearWalletDataModalConfirmationView from "./view/confirmation/ClearWalletDataModalConfirmationView";
+import ClearWalletDataModalBackupView from "./view/backup/ClearWalletDataModalBackupView";
+import {appDBManager} from "../../../core/app/db";
+
+export const CLEAR_WALLET_DATA_MODAL_ID = "clear-wallet-data-modal";
+
+function ClearWalletDataModal() {
+ const dispatchModalStateAction = useModalDispatchContext();
+ const simpleToaster = useSimpleToaster();
+ const {
+ formitoState: {modalView},
+ dispatchFormitoAction
+ } = useFormito({modalView: "backup-view"});
+
+ return (
+ + {/* eslint-disable-next-line no-magic-numbers */} + {`${txnId!.slice(0, 10)}...`} +
+
+ {renderView()}
+
+
+
+ );
+
+ function renderView() {
+ let view;
+
+ if (modalView === "backup-view") {
+ view =
+
+
+ + {"Have you backed up your accounts?"} +
+ ++ { + "Before clearing your accounts, make sure you have backed up all your recovery passphrases." + } +
+ +
+
+
+
+
+ );
+}
+
+export default ClearWalletDataModalBackupView;
diff --git a/src/settings/component/clear-wallet-data-modal/view/confirmation/ClearWalletDataModalConfirmationView.tsx b/src/settings/component/clear-wallet-data-modal/view/confirmation/ClearWalletDataModalConfirmationView.tsx
new file mode 100644
index 0000000..71d5aec
--- /dev/null
+++ b/src/settings/component/clear-wallet-data-modal/view/confirmation/ClearWalletDataModalConfirmationView.tsx
@@ -0,0 +1,84 @@
+import {ReactComponent as DeleteIcon} from "../../../../../core/ui/icons/lock-password-login-delete.svg";
+
+import {SyntheticEvent} from "react";
+import {FormField, Input} from "@hipo/react-ui-toolkit";
+
+import Button from "../../../../../component/button/Button";
+import useFormito from "../../../../../core/util/hook/formito/useFormito";
+import {validateClearWalletDataConfirmationText} from "../../util/clearWalletDataModalUtils";
+
+interface ClearWalletDataModalConfirmationViewProps {
+ onSubmit: VoidFunction;
+}
+
+function ClearWalletDataModalConfirmationView({
+ onSubmit
+}: ClearWalletDataModalConfirmationViewProps) {
+ const {
+ formitoState: {confirmationText},
+ dispatchFormitoAction
+ } = useFormito({confirmationText: ""});
+
+ return (
+ <>
+
+
+
+
+ {"Learn how to backup your accounts →"}
+
+
+
+
+ {"Clear Wallet Data"}
+ ++ {"You are about to unlink your Algorand accounts from this device. "} + + {"You will no longer be able to access your data using your passcode. "} + + {"This does not delete your accounts."} +
+ ++ {"Please type "} + + {"clear wallet data"} + + {" to confirm"} +
+ + + + ); + + function handleConfirmationTextChange(event: SyntheticEvent
+
+ {placeholderLetters}
+
+ }
+ />
+
+
+
+
+
+
+ );
+
+ async function handleDisconnectSession() {
+ if (!masterkey) return;
+
+ try {
+ await appDBManager.delete("sessions")({key: session.url, encryptionKey: masterkey});
+
+ dispatchAppState({
+ type: "REMOVE_SESSION",
+ url: session.url
+ });
+ } catch (error) {
+ toaster.display({
+ render() {
+ return (
+ + {session.title} +
+ + {session.description && ( ++ {session.description} +
+ )} + ++ {formatPeraConnectSessionDate(session.date)} +
+ +-
+ {(accountAddress) => (
+
+ {`Connected with ${accounts[accountAddress].name}`} +
+
+
+ );
+
+ async function disconnectAllSessions() {
+ if (!masterkey) return;
+
+ try {
+ for (const session of sessionsByNetwork) {
+ await appDBManager.delete("sessions")({
+ key: session.url,
+ encryptionKey: masterkey
+ });
+
+ dispatchAppState({
+ type: "REMOVE_SESSION",
+ url: session.url
+ });
+ }
+
+ navigate(ROUTES.SETTINGS.ROUTE);
+ } catch (error) {
+ toaster.display({
+ render() {
+ return (
+ 0
+ })}>
+
+
+ {isThereActiveSession ? (
+
+
+ ) : (
+ -
+ {(session) => (
+
+
+ )}
+ {"No sessions yet"}
+{"Settings"}
+ +
+
+
+ -
+ {(item) => (
+
+
+
+ {renderSettingsListItemButton(item.id)}
+
+
+
+ + {item.title} +
++ {item.description} +
+ + {item.learnMore && ( + + {"Learn more →"} + + )} +
+ {sessionCount > 0 && (
+ {sessionCount}
+ )}
+
+
+ {"View Sessions"}
+
+
+ );
+ }
+ break;
+
+ case "clear-wallet":
+ cta = (
+
+ );
+ break;
+
+ default:
+ break;
+ }
+
+ return {cta}
;
+ }
+
+ function togglePreferredNetwork() {
+ const switchedNetwork = preferredNetwork === "testnet" ? "mainnet" : "testnet";
+
+ dispatchAppState({
+ type: "SET_PREFERRED_NETWORK",
+ preferredNetwork: switchedNetwork
+ });
+
+ webStorage.local.setItem(STORED_KEYS.PREFERRED_NETWORK, switchedNetwork);
+
+ // account balances should be refetched from BE
+ webStorage.local.removeItem(STORED_KEYS.STALE_PORTFOLIO_OVERVIEW);
+
+ updateAPIsPreferredNetwork(switchedNetwork);
+ }
+
+ function handleClearWalletDataClick() {
+ dispatchModalStateAction({
+ type: "OPEN_MODAL",
+ payload: {
+ item: {
+ id: CLEAR_WALLET_DATA_MODAL_ID,
+ children: -
+ {(transaction, _, index) => (
+
+
+ );
+
+ function getTotalWarningCount() {
+ let total = 0;
+
+ if (transactionHasRekey(transaction)) {
+ total += 1;
+ }
+
+ if (transactionHasCloseRemainder(transaction)) {
+ total += 1;
+ }
+
+ if (transactionHasClearState(transaction)) {
+ total += 1;
+ }
+
+ return total;
+ }
+}
+
+export default TransactionDetailsListItemContent;
diff --git a/src/transaction/detail/list/list-item/content/_transaction-details-list-item-content.scss b/src/transaction/detail/list/list-item/content/_transaction-details-list-item-content.scss
new file mode 100644
index 0000000..04ba4b0
--- /dev/null
+++ b/src/transaction/detail/list/list-item/content/_transaction-details-list-item-content.scss
@@ -0,0 +1,31 @@
+.transaction-details-list-item-content__footer {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.transaction-details-list-item-content {
+ .chevron-right-icon {
+ opacity: 0;
+
+ transition: opacity var(--default-animation);
+ }
+
+ &:hover {
+ .chevron-right-icon {
+ opacity: 1;
+ }
+ }
+}
+
+.transaction-details-list-item-content__warning {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+
+ .warning-icon {
+ path {
+ fill: var(--helper-red-default);
+ }
+ }
+}
diff --git a/src/transaction/detail/list/list-item/title/TransactionDetailsListItemTitle.tsx b/src/transaction/detail/list/list-item/title/TransactionDetailsListItemTitle.tsx
new file mode 100644
index 0000000..e1360e3
--- /dev/null
+++ b/src/transaction/detail/list/list-item/title/TransactionDetailsListItemTitle.tsx
@@ -0,0 +1,148 @@
+import algosdk, {microalgosToAlgos, OnApplicationComplete, Transaction} from "algosdk";
+import classNames from "classnames";
+
+import {trimAccountAddress} from "../../../../../account/util/accountUtils";
+import {ALGO_UNIT} from "../../../../../core/ui/typography/typographyConstants";
+import {integerToFractionDecimal} from "../../../../../core/util/asset/assetUtils";
+import {formatNumber} from "../../../../../core/util/number/numberUtils";
+import {useTransactionSignFlowContext} from "../../../../context/TransactionSignFlowContext";
+import {
+ checkIfTransactionApplicationCall,
+ checkIfTransactionAssetConfig,
+ checkIfTransactionIsReceive,
+ checkIfTransactionOptIn,
+ getTransactionType,
+ isCreateApplicationTransaction,
+ isTransactionCreateAssetConfig,
+ isTransactionDeleteAssetConfig,
+ isTransactionUpdateAssetConfig,
+ TransactionTypeCounts
+} from "../../../../utils/transactionUtils";
+
+interface TransactionDetailListItemTitleProps {
+ transaction: Transaction;
+}
+
+const TRANSACTION_TYPE_TITLE_MAP = {
+ appl: {transactionTypeText: "Application", type: "", to: "from"},
+ axferReceive: {transactionTypeText: "Receive", type: "success", to: "from"},
+ axfer: {transactionTypeText: "Transfer", type: "danger", to: "to"},
+ pay: {transactionTypeText: "Payment", type: "danger", to: "to"},
+ acfg: {transactionTypeText: "Asset Config", type: "danger", to: "from"}
+};
+
+function TransactionDetailListItemTitle({
+ transaction
+}: TransactionDetailListItemTitleProps) {
+ const {
+ formitoState: {userAddress, transactionAssets, transactionAssetsFromNode}
+ } = useTransactionSignFlowContext();
+ const toAddress = transaction.to ? algosdk.encodeAddress(transaction.to.publicKey) : "";
+ const fromAddress = transaction.from
+ ? algosdk.encodeAddress(transaction.from.publicKey)
+ : "";
+
+ const transactionType = getTransactionType(transaction, userAddress);
+ const {transactionTypeText, to, type} =
+ TRANSACTION_TYPE_TITLE_MAP[transactionType as keyof TransactionTypeCounts];
+ const isReceiveTransaction = transactionType === "axferReceive";
+ const isApplicationCall = checkIfTransactionApplicationCall(transaction);
+ const isOptInTransaction = checkIfTransactionOptIn(transaction, userAddress);
+ const isAssetConfig = checkIfTransactionAssetConfig(transaction);
+ const isReceivePaymentTransaction =
+ transaction.type === "pay" && checkIfTransactionIsReceive(transaction, userAddress);
+ const amountClassName = classNames({
+ "text-color--danger": type === "danger" && !isReceivePaymentTransaction,
+ "text-color--success": type === "success" || isReceivePaymentTransaction
+ });
+ const transactionAssetIndex = transaction.assetIndex;
+ const transactionAsset = transactionAssets?.find(
+ (asset) => asset.asset_id === transaction.assetIndex
+ );
+ const transactionAssetFromNode = transactionAssetsFromNode?.find(
+ (asset) => asset.index === transaction.assetIndex
+ );
+ const transactionAddress =
+ isReceiveTransaction ||
+ isApplicationCall ||
+ isReceivePaymentTransaction ||
+ isAssetConfig
+ ? fromAddress
+ : toAddress;
+
+ const transactionAmount = transactionAssetIndex
+ ? `${
+ formatNumber({maximumFractionDigits: 2})(
+ integerToFractionDecimal(
+ Number(transaction.amount),
+ transactionAsset?.fraction_decimals
+ )
+ ) || ""
+ } ${transactionAsset?.name || transactionAssetFromNode?.params.name}`
+ : `${microalgosToAlgos(Number(transaction.amount || ""))}${ALGO_UNIT}`;
+
+ return (
+
+
+
+
+ {getTransactionTypeText(transaction, userAddress)}
+
+
+
+ {`${transactionIndex + 1} of ${txns.length}`}
+
+ {totalWarningCount > 0 && (
+ <>
+
+
+
+
+
+
+ )}
+
+ {renderTransactionTypeText()}
+
+ {`${
+ isApplicationCall || isAssetConfig ? "" : transactionAmount
+ }`}
+
+ {to && (
+ {` ${isReceivePaymentTransaction ? "from" : to} ${trimAccountAddress(
+ transactionAddress
+ )}`}
+ )}
+
+ );
+
+ function renderTransactionTypeText() {
+ if (isApplicationCall) {
+ if (isCreateApplicationTransaction(transaction)) {
+ return "Create Application";
+ }
+
+ switch (transaction.appOnComplete) {
+ case OnApplicationComplete.OptInOC:
+ return `Opt-In to #${transaction.appIndex}`;
+ case OnApplicationComplete.CloseOutOC:
+ return `Close Out App #${transaction.appIndex}`;
+ case OnApplicationComplete.UpdateApplicationOC:
+ return `Modify App #${transaction.appIndex}`;
+ case OnApplicationComplete.DeleteApplicationOC:
+ return `Destroy App #${transaction.appIndex}`;
+ default:
+ return `#${transaction.appIndex} Application`;
+ }
+ }
+
+ if (isAssetConfig) {
+ if (isTransactionCreateAssetConfig(transaction)) {
+ return transaction.assetName
+ ? `Create "${transaction.assetName}" Asset`
+ : "Create Asset";
+ }
+
+ if (isTransactionUpdateAssetConfig(transaction)) {
+ return `Modify "${
+ transactionAsset?.name || transactionAssetFromNode?.params.name
+ }" Asset`;
+ }
+
+ if (isTransactionDeleteAssetConfig(transaction)) {
+ return `Delete "${
+ transactionAsset?.name || transactionAssetFromNode?.params.name
+ }" Asset`;
+ }
+ }
+
+ if (isOptInTransaction) {
+ return "Opt-In to";
+ }
+
+ return `${transactionTypeText} `;
+ }
+}
+
+export default TransactionDetailListItemTitle;
diff --git a/src/transaction/flow/TransactionSignFlow.tsx b/src/transaction/flow/TransactionSignFlow.tsx
new file mode 100644
index 0000000..f2477e5
--- /dev/null
+++ b/src/transaction/flow/TransactionSignFlow.tsx
@@ -0,0 +1,45 @@
+import classNames from "classnames";
+import {Route, Routes, useSearchParams} from "react-router-dom";
+
+import Page from "../../component/page/Page";
+import PeraConnectBanner from "../../component/pera-connect-banner/PeraConnectBanner";
+import {useTransactionSignFlowContext} from "../context/TransactionSignFlowContext";
+import TransactionSignEmbeddedView from "../view/embedded/TransactionSignEmbeddedView";
+import TransactionSignTabView from "../view/tab/TransactionSignTabView";
+
+function TransactionSignFlow() {
+ const [searchParams] = useSearchParams();
+ const isEmbedded = Boolean(searchParams.get("embedded"));
+ const {formitoState} = useTransactionSignFlowContext();
+
+ return (
+
+ {checkTransactionsAssetsIsInvalidRequestFetched && isAssetDetailRequestFetched ? (
+ renderContent()
+ ) : (
+
+ );
+
+ function renderContent() {
+ let node;
+
+ const hasNetworkMismatch = txns.some(
+ (transaction) =>
+ !checkIfTransactionNetworkIsMatches(transaction.txn, preferredNetwork)
+ );
+
+ if (hasNetworkMismatch) {
+ return (
+
+
+ )}
+
+
+ );
+}
+
+export default TransactionSignErrorState;
diff --git a/src/transaction/sign-box/error-state/_transaction-sign-error-state.scss b/src/transaction/sign-box/error-state/_transaction-sign-error-state.scss
new file mode 100644
index 0000000..79452c8
--- /dev/null
+++ b/src/transaction/sign-box/error-state/_transaction-sign-error-state.scss
@@ -0,0 +1,63 @@
+.transaction-sign-error-state {
+ height: 100%;
+}
+
+.transaction-sign-error-state__content {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ height: 495px;
+
+ padding: 80px 0 28px;
+
+ text-align: center;
+}
+
+.transaction-sign-error-state__content__message {
+ padding: 0 28px;
+}
+
+.transaction-sign-error-state__error-icon-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 56px;
+ height: 56px;
+
+ margin: 0 auto 28px;
+
+ background-color: var(--helper-red-default);
+ border-radius: 50%;
+
+ .close-icon {
+ width: 30px;
+ height: 30px;
+
+ path {
+ fill: var(--white);
+ }
+ }
+}
+
+.transaction-sign-error-state__title {
+ margin-bottom: 16px;
+}
+
+.transaction-sign-error-state__actions {
+ padding: 28px 28px 0;
+
+ border-top: 1px solid var(--gray-100);
+
+ &--with-settings-link {
+ display: grid;
+ grid-template-columns: 132px auto;
+ gap: 16px;
+ }
+}
+
+.transaction-sign-error-state__actions__button {
+ width: 100%;
+ height: 48px;
+}
diff --git a/src/transaction/sign-box/error-state/util/transactionSignErrorStateConstants.ts b/src/transaction/sign-box/error-state/util/transactionSignErrorStateConstants.ts
new file mode 100644
index 0000000..e7cf7bf
--- /dev/null
+++ b/src/transaction/sign-box/error-state/util/transactionSignErrorStateConstants.ts
@@ -0,0 +1,30 @@
+import {NETWORK_MISMATCH_MESSAGE} from "../../../../core/util/algod/algodConstants";
+
+const TRANSACTION_SIGN_ERRORS = {
+ INVALID_ASSET_ID: {
+ title: "Invalid Asset ID",
+ description:
+ "We can't process this transaction because the asset ID provided is invalid. Contact the dApp developer for further information."
+ },
+ UNSUPPORTED_TXN_TYPE: {
+ title: "Unsupported Transaction Type",
+ description:
+ "Unfortunately we can’t process this type of transaction. Contact the dApp developer to resolve this."
+ },
+ NETWORK_MISMATCH: {
+ title: "Network mismatch",
+ description: NETWORK_MISMATCH_MESSAGE
+ },
+ AUTH_ADDRESS_NOT_VALID: {
+ title: "Invalid Public Key",
+ description:
+ "We can't process this transaction because the authorization address provided is invalid. Contact the dApp developer for further information."
+ },
+ OBSCURED_TRANSACTIONS: {
+ title: "Obscured Transactions",
+ description:
+ "This transaction group contains one or more obscured transactions. An obscured transaction means a dApp or other party has signed a transaction within this group, but has not sent it to us to display. Pera does not allow users to sign groups containing obscured transactions. Please contact the dApp developer for more information."
+ }
+};
+
+export {TRANSACTION_SIGN_ERRORS};
diff --git a/src/transaction/sign-box/message/TransactionSignDetailMessage.tsx b/src/transaction/sign-box/message/TransactionSignDetailMessage.tsx
new file mode 100644
index 0000000..5228f69
--- /dev/null
+++ b/src/transaction/sign-box/message/TransactionSignDetailMessage.tsx
@@ -0,0 +1,29 @@
+import {ReactComponent as WarningIcon} from "../../../core/ui/icons/warning.svg";
+import {ReactComponent as InfoIcon} from "../../../core/ui/icons/info.svg";
+
+import "./_transaction-sign-detail-message.scss";
+
+interface TransactionSignDetailMessageProps {
+ message: string;
+ type: "warning" | "info";
+}
+
+function TransactionSignDetailMessage({
+ message,
+ type
+}: TransactionSignDetailMessageProps) {
+ return (
+
+
+
+
+
+
+
+
+ + {title} +
+ +{description}
+
+
+
+ {shouldRenderSettingsLink && (
+
+ {"Change Node on Pera Web"}
+
+ )}
+
+
+ {type === "warning" ? (
+
+ );
+}
+
+export default TransactionSignDetailMessage;
diff --git a/src/transaction/sign-box/message/_transaction-sign-detail-message.scss b/src/transaction/sign-box/message/_transaction-sign-detail-message.scss
new file mode 100644
index 0000000..1d5fe49
--- /dev/null
+++ b/src/transaction/sign-box/message/_transaction-sign-detail-message.scss
@@ -0,0 +1,38 @@
+.transaction-sign-detail-message {
+ display: grid;
+ grid-template-columns: 24px auto;
+ gap: 12px;
+
+ margin-bottom: 16px;
+ padding: 16px;
+
+ border-radius: 16px;
+
+ word-break: break-word;
+
+ &:last-of-type {
+ margin-bottom: 32px;
+ }
+
+ &--warning {
+ color: var(--helper-red-default);
+ background-color: var(--red-50);
+
+ .warning-icon {
+ path {
+ fill: var(--helper-red-default);
+ }
+ }
+ }
+
+ &--info {
+ background-color: var(--card-default);
+ box-shadow: var(--shadow-small);
+
+ .info-icon {
+ path {
+ fill: var(--gray-500);
+ }
+ }
+ }
+}
diff --git a/src/transaction/sign-box/view/default/TransactionSignDefaultView.tsx b/src/transaction/sign-box/view/default/TransactionSignDefaultView.tsx
new file mode 100644
index 0000000..b41b9f7
--- /dev/null
+++ b/src/transaction/sign-box/view/default/TransactionSignDefaultView.tsx
@@ -0,0 +1,30 @@
+import "./_transaction-sign-default-view.scss";
+
+import TransactionSignReviewTransactions from "./review-txns/TransactionSignReviewTransactions";
+import TransactionSignAppMeta from "./app-meta/TransactionSignAppMeta";
+import TransactionSignTransactionActions from "./actions/TransactionSignTransactionActions";
+
+interface TransactionSignDefaultViewProps {
+ handleSignClick: VoidFunction;
+ handleSignCancel: VoidFunction;
+}
+
+function TransactionSignDefaultView({
+ handleSignClick,
+ handleSignCancel
+}: TransactionSignDefaultViewProps) {
+ return (
+ <>
+ {message}
+
+
+
+ {signIsRequired && (
+
+ )}
+
+ );
+}
+
+export default TransactionSignTransactionActions;
diff --git a/src/transaction/sign-box/view/default/actions/_transaction-sign-transaction-actions.scss b/src/transaction/sign-box/view/default/actions/_transaction-sign-transaction-actions.scss
new file mode 100644
index 0000000..08ba616
--- /dev/null
+++ b/src/transaction/sign-box/view/default/actions/_transaction-sign-transaction-actions.scss
@@ -0,0 +1,15 @@
+.transaction-sign-transaction-actions {
+ padding: 28px;
+
+ border-top: 1px solid var(--gray-100);
+
+ &--sign-required {
+ display: grid;
+ grid-template-columns: 132px auto;
+ gap: 16px;
+ }
+}
+
+.transaction-sign-transaction-actions__button {
+ width: 100%;
+}
diff --git a/src/transaction/sign-box/view/default/app-meta/TransactionSignAppMeta.tsx b/src/transaction/sign-box/view/default/app-meta/TransactionSignAppMeta.tsx
new file mode 100644
index 0000000..24c0a57
--- /dev/null
+++ b/src/transaction/sign-box/view/default/app-meta/TransactionSignAppMeta.tsx
@@ -0,0 +1,63 @@
+import {ReactComponent as AccountDefaultIcon} from "../../../../../core/ui/icons/account-default.svg";
+import {ReactComponent as ChevronRight} from "../../../../../core/ui/icons/chevron-right.svg";
+
+import "./_transaction-sign-app-meta.scss";
+
+import {trimAccountAddress} from "../../../../../account/util/accountUtils";
+import Image from "../../../../../component/image/Image";
+import {useTransactionSignFlowContext} from "../../../../context/TransactionSignFlowContext";
+
+function TransactionSignAppMeta() {
+ const {
+ formitoState: {currentSession, userAccountName, userAddress}
+ } = useTransactionSignFlowContext();
+
+ return (
+
+
+ );
+}
+
+export default TransactionSignAppMeta;
diff --git a/src/transaction/sign-box/view/default/app-meta/_transaction-sign-app-meta.scss b/src/transaction/sign-box/view/default/app-meta/_transaction-sign-app-meta.scss
new file mode 100644
index 0000000..522cddd
--- /dev/null
+++ b/src/transaction/sign-box/view/default/app-meta/_transaction-sign-app-meta.scss
@@ -0,0 +1,50 @@
+.transaction-sign-app-meta {
+ gap: 18px;
+
+ padding: 20px;
+
+ border-bottom: 1px solid var(--gray-100);
+
+ .chevron-right-icon {
+ path {
+ fill: var(--text-gray-lightest);
+ }
+ }
+}
+
+.transaction-sign-app-meta__dapp-details {
+ width: 144px;
+}
+
+.transaction-sign-app-meta__signer-account-details {
+ display: grid;
+ align-items: center;
+ grid-template-columns: 28px auto;
+ gap: 12px;
+
+ width: 184px;
+}
+
+.transaction-sign-app-meta__information {
+ display: grid;
+ align-items: center;
+ grid-template-columns: 28px auto;
+ gap: 12px;
+
+ width: 184px;
+}
+
+.transaction-sign-app-meta__url {
+ display: block;
+
+ margin-top: 2px;
+}
+
+.transaction-sign-app-meta__favicon {
+ width: 28px;
+ height: 28px;
+
+ .image__img {
+ border-radius: 50%;
+ }
+}
diff --git a/src/transaction/sign-box/view/default/review-txns/TransactionSignReviewTransactions.tsx b/src/transaction/sign-box/view/default/review-txns/TransactionSignReviewTransactions.tsx
new file mode 100644
index 0000000..abbed09
--- /dev/null
+++ b/src/transaction/sign-box/view/default/review-txns/TransactionSignReviewTransactions.tsx
@@ -0,0 +1,131 @@
+import {ReactComponent as ChevronRight} from "../../../../../core/ui/icons/chevron-right.svg";
+
+import "./_transaction-sign-review-transactions.scss";
+
+import Button from "../../../../../component/button/Button";
+import {useTransactionSignFlowContext} from "../../../../context/TransactionSignFlowContext";
+import {
+ checkIfSignRequiredForTransactions,
+ isAllTransactionsEmpty,
+ seperateTransactionReceiveAndSpend
+} from "../../../../utils/transactionUtils";
+import TransactionSignAssetsList from "./asset-list/TransactionSignAssetsList";
+import TransactionSignDetailMessage from "../../../message/TransactionSignDetailMessage";
+
+function TransactionSignReviewTransactions() {
+ const {
+ formitoState: {txns, userAddress, currentSession},
+ dispatchFormitoAction: dispatchTransactionPageAction
+ } = useTransactionSignFlowContext();
+ const {
+ signedBySomebodyElseTransactions,
+ receiveTransactions,
+ spendTransactions,
+ optInTransactions,
+ applicationCallTransactions,
+ assetConfigTransactions
+ } = seperateTransactionReceiveAndSpend(txns, userAddress);
+ const transactions = txns.map((txn) => txn.txn);
+
+ return (
+
+
+
+
+
+ + {currentSession!.title} +
+ + + {currentSession!.url} + +
+
+
+
+ {userAccountName}
+ ++ {trimAccountAddress(userAddress)} +
+
+
+ );
+
+ function handleChangeView() {
+ dispatchTransactionPageAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ transactionSignView: "txn-detail-summary"
+ }
+ });
+ }
+}
+
+export default TransactionSignReviewTransactions;
diff --git a/src/transaction/sign-box/view/default/review-txns/_transaction-sign-review-transactions.scss b/src/transaction/sign-box/view/default/review-txns/_transaction-sign-review-transactions.scss
new file mode 100644
index 0000000..6158e5d
--- /dev/null
+++ b/src/transaction/sign-box/view/default/review-txns/_transaction-sign-review-transactions.scss
@@ -0,0 +1,33 @@
+.transaction-sign-review-transactions {
+ height: 398px;
+
+ overflow: auto;
+
+ padding: 20px 28px;
+}
+
+.transaction-sign-review-transactions__title-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ margin-bottom: 24px;
+}
+
+.transaction-sign-review-transactions__button.button {
+ --button-color: var(--secondary-button-text);
+
+ &:hover,
+ &:focus {
+ opacity: 0.8;
+ }
+
+ .chevron-right-icon {
+ width: 16px;
+ height: 16px;
+
+ path {
+ fill: var(--secondary-button-text);
+ }
+ }
+}
diff --git a/src/transaction/sign-box/view/default/review-txns/asset-list/TransactionSignAssetsList.tsx b/src/transaction/sign-box/view/default/review-txns/asset-list/TransactionSignAssetsList.tsx
new file mode 100644
index 0000000..8ff9682
--- /dev/null
+++ b/src/transaction/sign-box/view/default/review-txns/asset-list/TransactionSignAssetsList.tsx
@@ -0,0 +1,133 @@
+import {ReactComponent as AlgoASAIcon} from "../../../../../../core/ui/icons/algo-asa.svg";
+import {ReactComponent as WarningIcon} from "../../../../../../core/ui/icons/warning.svg";
+import {ReactComponent as InfoIcon} from "../../../../../../core/ui/icons/info.svg";
+
+import "./_transaction-sign-assets-list.scss";
+
+import {List} from "@hipo/react-ui-toolkit";
+import {microalgosToAlgos, Transaction} from "algosdk";
+import classNames from "classnames";
+
+import TransactionSignAssetsListItem from "./item/TransactionSignAssetsListItem";
+import {ALGO_UNIT} from "../../../../../../core/ui/typography/typographyConstants";
+import {formatNumber} from "../../../../../../core/util/number/numberUtils";
+import {
+ isAlgoTransferTransaction,
+ isAllTransactionsEmpty,
+ transactionHasCloseRemainder,
+ transactionHasRekey
+} from "../../../../../utils/transactionUtils";
+import Tooltip from "../../../../../../component/tooltip/Tooltip";
+import Button from "../../../../../../component/button/Button";
+import {useTransactionSignFlowContext} from "../../../../../context/TransactionSignFlowContext";
+
+interface TransactionSignAssetsListProps {
+ transactions: Transaction[];
+ title: string;
+ type: "receive" | "spend" | "opt-in" | "app-call" | "asset-config" | "signed-by-others";
+}
+
+function TransactionSignAssetsList({
+ transactions,
+ title,
+ type
+}: TransactionSignAssetsListProps) {
+ const {dispatchFormitoAction: dispatchTransactionPageAction} =
+ useTransactionSignFlowContext();
+ const algoTransactions = transactions.filter(isAlgoTransferTransaction);
+ const totalAlgoValue = algoTransactions.reduce(
+ (prevValue, transaction) => prevValue + Number(transaction.amount),
+ 0
+ );
+ const hasRekeyTransaction = algoTransactions.some(transactionHasRekey);
+ const hasCloseReminderTransaction = algoTransactions.some(transactionHasCloseRemainder);
+
+ return (
+
+
+
+ + {"Summary"} +
+ + +
+ {!checkIfSignRequiredForTransactions(txns, currentSession!) && (
+
+
+
+ {receiveTransactions.length > 0 && (
+
+
+
+ );
+
+ function handleChangeView() {
+ dispatchTransactionPageAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ activeTransactionIndex: 0,
+ transactionSignView: "txn-detail-single"
+ }
+ });
+ }
+}
+
+export default TransactionSignAssetsList;
diff --git a/src/transaction/sign-box/view/default/review-txns/asset-list/_transaction-sign-assets-list.scss b/src/transaction/sign-box/view/default/review-txns/asset-list/_transaction-sign-assets-list.scss
new file mode 100644
index 0000000..abf018d
--- /dev/null
+++ b/src/transaction/sign-box/view/default/review-txns/asset-list/_transaction-sign-assets-list.scss
@@ -0,0 +1,48 @@
+.transaction-sign-assets-list {
+ margin-bottom: 18px;
+}
+
+.transaction-sign-assets-list__tooltip {
+ text-transform: none;
+
+ .tooltip-trigger {
+ display: flex;
+ }
+}
+
+.transaction-sign-assets-list__subtitle {
+ margin-bottom: 8px;
+
+ &--with-tooltip {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+
+ .info-icon {
+ path {
+ fill: var(--text-gray-light);
+ }
+ }
+ }
+}
+
+.transaction-sign-assets-list__total-algo-value {
+ display: grid;
+ align-items: center;
+ grid-template-columns: 40px auto;
+ gap: 16px;
+
+ padding: 12px 0;
+}
+
+.transaction-sign-assets-list__total-algo-value__warning {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+
+ .warning-icon {
+ path {
+ fill: var(--helper-red-default);
+ }
+ }
+}
diff --git a/src/transaction/sign-box/view/default/review-txns/asset-list/item/TransactionSignAssetsListItem.tsx b/src/transaction/sign-box/view/default/review-txns/asset-list/item/TransactionSignAssetsListItem.tsx
new file mode 100644
index 0000000..14bb497
--- /dev/null
+++ b/src/transaction/sign-box/view/default/review-txns/asset-list/item/TransactionSignAssetsListItem.tsx
@@ -0,0 +1,270 @@
+import {ReactComponent as ReceiveIcon} from "../../../../../../../core/ui/icons/receive.svg";
+import {ReactComponent as SendIcon} from "../../../../../../../core/ui/icons/send.svg";
+import {ReactComponent as ApplicationCallIcon} from "../../../../../../../core/ui/icons/application-call.svg";
+import {ReactComponent as DeleteIcon} from "../../../../../../../core/ui/icons/delete.svg";
+import {ReactComponent as Modifycon} from "../../../../../../../core/ui/icons/modify.svg";
+import {ReactComponent as CreateIcon} from "../../../../../../../core/ui/icons/create.svg";
+import {ReactComponent as WarningIcon} from "../../../../../../../core/ui/icons/warning.svg";
+
+import "./_transaction-sign-assets-list-item.scss";
+
+import {ListItem} from "@hipo/react-ui-toolkit";
+import {OnApplicationComplete, Transaction} from "algosdk";
+import classNames from "classnames";
+
+import Image from "../../../../../../../component/image/Image";
+import {
+ getAssetImgSrc,
+ getAssetPlaceholderContent
+} from "../../../../../../../core/util/image/imageUtils";
+import {useTransactionSignFlowContext} from "../../../../../../context/TransactionSignFlowContext";
+import {formatNumber} from "../../../../../../../core/util/number/numberUtils";
+import {
+ checkIfTransactionApplicationCall,
+ checkIfTransactionAssetConfig,
+ checkIfTransactionIsReceive,
+ checkIfTransactionOptIn,
+ isAlgoTransferTransaction,
+ isCreateApplicationTransaction,
+ isTransactionCreateAssetConfig,
+ isTransactionDeleteAssetConfig,
+ isTransactionUpdateAssetConfig,
+ transactionHasClearState,
+ transactionHasCloseRemainder,
+ transactionHasRekey
+} from "../../../../../../utils/transactionUtils";
+import {
+ getAssetUSDValue,
+ integerToFractionDecimal
+} from "../../../../../../../core/util/asset/assetUtils";
+import Button from "../../../../../../../component/button/Button";
+
+interface TransactionSignAssetsListItemProps {
+ transaction: Transaction;
+ customClassName?: string;
+}
+
+function TransactionSignAssetsListItem({
+ transaction,
+ customClassName
+}: TransactionSignAssetsListItemProps) {
+ const {
+ formitoState: {transactionAssets, userAddress, transactionAssetsFromNode, txns},
+ dispatchFormitoAction: dispatchTransactionPageAction
+ } = useTransactionSignFlowContext();
+ const transactionAssetIndex = transaction.assetIndex;
+ const transactionAsset = transactionAssets?.find(
+ (asset) => asset.asset_id === transactionAssetIndex
+ );
+ const transactionAssetFromNode = transactionAssetsFromNode?.find(
+ (asset) => asset.index === transactionAssetIndex
+ );
+ const isCollectible = !!transactionAsset?.collectible;
+ const isReceive = checkIfTransactionIsReceive(transaction, userAddress);
+ const transactionAmount = Number(transaction.amount);
+ const assetAmountUSDValue = transactionAsset
+ ? getAssetUSDValue({amount: transactionAmount, asset: transactionAsset})
+ : "";
+ const aritmeticSign = isReceive ? "+" : "-";
+ const isOptInTransaction = checkIfTransactionOptIn(transaction, userAddress);
+ const isApplicationCall = checkIfTransactionApplicationCall(transaction);
+ const isAssetConfig = checkIfTransactionAssetConfig(transaction);
+ const transactionIndex = txns.findIndex(({txn}) => txn.txID === transaction.txID);
+
+ if (isAlgoTransferTransaction(transaction)) {
+ return null;
+ }
+
+ return (
+
+ {title}
+
+ {type === "signed-by-others" && (
+
+
+ )}
+
+
+ {!isAllTransactionsEmpty(transactions) && (
+ -
+ {(item) => (
+
+
+ )}
+
+
+
+ {(hasRekeyTransaction || hasCloseReminderTransaction) && (
+
+ )}
+
+
+ {`${ + type === "receive" ? "+" : "-" + }${ALGO_UNIT}${formatNumber({ + minimumFractionDigits: 2 + })( + microalgosToAlgos( + isAllTransactionsEmpty(transactions) ? 0 : totalAlgoValue + ) + )}`}
+ ++ {"ALGO"} +
+
+ {transactionAsset && !isAssetConfig && (
+
+
+ {(transactionHasRekey(transaction) ||
+ transactionHasCloseRemainder(transaction) ||
+ transactionHasClearState(transaction)) && (
+
+ )}
+
+ {isReceive || isOptInTransaction ?
+ )}
+
+
+
+ {getAssetTitle()}
+ + {getAssetDescription()} +
+ {`${transactionAsset?.name} `}
+
+
+
+ {` ${transactionAsset?.asset_id}`}
+
+ );
+ }
+
+ if (assetAmountUSDValue) {
+ return (
+ + {`≈ $${assetAmountUSDValue}`} +
+ ); + } + + return ( ++ {transactionAsset?.asset_id} +
+ ); + } + + function renderIcon() { + if (isApplicationCall) { + if (isCreateApplicationTransaction(transaction)) { + return-
+ {(item) => (
+
+
+ );
+
+ function handleChangeView() {
+ dispatchTransactionPageAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ transactionSignView: "txn-detail-single"
+ }
+ });
+ }
+}
+
+export default TransactionSignDetailRawView;
diff --git a/src/transaction/sign-box/view/detail/view/raw/_transaction-sign-detail-raw-view.scss b/src/transaction/sign-box/view/detail/view/raw/_transaction-sign-detail-raw-view.scss
new file mode 100644
index 0000000..888dd00
--- /dev/null
+++ b/src/transaction/sign-box/view/detail/view/raw/_transaction-sign-detail-raw-view.scss
@@ -0,0 +1,51 @@
+.transaction-sign-detail-raw-view__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+
+ margin-bottom: 32px;
+ padding: 28px 28px 0;
+}
+
+.transaction-sign-detail-raw-view__header__back-button.button {
+ &:hover,
+ &:focus {
+ .arrow-left-icon path {
+ fill: var(--ghost-button-text);
+ }
+ }
+}
+
+.transaction-sign-detail-raw-view__header__copy-button.button {
+ --button-color: var(--secondary-button-text);
+
+ &.button--fluid {
+ width: max-content;
+ }
+
+ &:hover,
+ &:focus {
+ opacity: 0.8;
+ }
+
+ .chevron-right-icon {
+ width: 16px;
+ height: 16px;
+
+ path {
+ fill: var(--secondary-button-text);
+ }
+ }
+}
+
+.transaction-sign-detail-raw-view__raw-transaction {
+ margin: 0 28px 28px;
+ padding: 16px;
+
+ background-color: var(--card-default);
+ border-radius: 12px;
+ box-shadow: var(--shadow-small);
+
+ word-break: break-word;
+}
diff --git a/src/transaction/sign-box/view/detail/view/single/TransactionSignDetailSingleView.tsx b/src/transaction/sign-box/view/detail/view/single/TransactionSignDetailSingleView.tsx
new file mode 100644
index 0000000..8d2e59c
--- /dev/null
+++ b/src/transaction/sign-box/view/detail/view/single/TransactionSignDetailSingleView.tsx
@@ -0,0 +1,40 @@
+import {ReactComponent as ArrowLeft} from "../../../../../../core/ui/icons/arrow-left.svg";
+
+import "./_transaction-sign-detail-single-view.scss";
+
+import {useTransactionSignFlowContext} from "../../../../../context/TransactionSignFlowContext";
+import TransactionSignSingleViewWallets from "./wallets/TransactionSignSingleViewWallets";
+import TransactionSignDetailWarningMessages from "./messages/TransactionSignDetailWarningMessages";
+import TransactionSignDetailList from "./detail-list/TransactionSignDetailList";
+
+function TransactionSignDetailSingleView() {
+ const {dispatchFormitoAction: dispatchTransactionPageAction} =
+ useTransactionSignFlowContext();
+
+ return (
+
+
+
+
+ {"Copy"}
+
+
+
+ {"Raw Transaction"}
+ +
+
+ {`${txn}`}
+
+
+ );
+
+ function handleChangeTransactionDetailView() {
+ dispatchTransactionPageAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ transactionSignView: "txn-detail-summary"
+ }
+ });
+ }
+}
+
+export default TransactionSignDetailSingleView;
diff --git a/src/transaction/sign-box/view/detail/view/single/_transaction-sign-detail-single-view.scss b/src/transaction/sign-box/view/detail/view/single/_transaction-sign-detail-single-view.scss
new file mode 100644
index 0000000..7c8dd6a
--- /dev/null
+++ b/src/transaction/sign-box/view/detail/view/single/_transaction-sign-detail-single-view.scss
@@ -0,0 +1,104 @@
+@import "../../../../../../core/ui/typography/typography-mixins";
+
+.transaction-sign-detail-single-view {
+ padding: 28px 28px 30px;
+
+ .transaction-sign-detail-message {
+ &:last-of-type {
+ margin-bottom: 32px;
+ }
+ }
+}
+
+.transaction-sign-detail-single-view__header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+
+ margin-bottom: 32px;
+}
+
+.transaction-sign-detail-single-view__transaction-details-list__item__title {
+ margin-bottom: 4px;
+}
+
+.transaction-sign-detail-single-view__asset-img {
+ width: 40px;
+ height: 40px;
+
+ border-radius: 50%;
+
+ .image__img {
+ border-radius: 50%;
+ }
+
+ .image__placeholder {
+ @include typography--tagline();
+
+ background-color: var(--overlay);
+
+ border-radius: 50%;
+ }
+
+ &--collectible {
+ .image__placeholder,
+ .image__img {
+ border-radius: 8px;
+ }
+ }
+}
+
+.transaction-sign-detail-single-view__asset-detail,
+.transaction-sign-detail-single-view__asset-detail__asset-name,
+.transaction-sign-detail-single-view__asset-detail__asset-information {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+.transaction-sign-detail-single-view__asset-detail__asset-name {
+ gap: 6px;
+}
+
+.transaction-sign-detail-single-view__asset-detail__asset-information {
+ gap: 8px;
+}
+
+.transaction-sign-detail-single-view__transaction-details-list__item {
+ padding: 16px 0;
+
+ &:not(:last-of-type) {
+ border-bottom: 1px solid var(--gray-100);
+ }
+
+ &:first-of-type {
+ padding-top: 0;
+ }
+
+ &:last-of-type {
+ padding-bottom: 0;
+ }
+}
+
+.transaction-sign-detail-single-view__transaction-note {
+ word-break: break-word;
+}
+
+.transaction-sign-detail-single-view__actions {
+ margin-top: 24px;
+}
+
+.transaction-sign-detail-single-view__actions__button.button {
+ @include typography--caption();
+
+ --button-bg: var(--background);
+ --button-color: var(--text-gray);
+
+ padding: 6px 12px;
+
+ border-radius: 16px;
+
+ &:hover {
+ cursor: pointer;
+ }
+}
diff --git a/src/transaction/sign-box/view/detail/view/single/detail-list/TransactionSignDetailList.tsx b/src/transaction/sign-box/view/detail/view/single/detail-list/TransactionSignDetailList.tsx
new file mode 100644
index 0000000..86e0810
--- /dev/null
+++ b/src/transaction/sign-box/view/detail/view/single/detail-list/TransactionSignDetailList.tsx
@@ -0,0 +1,194 @@
+import classNames from "classnames";
+import {microalgosToAlgos} from "algosdk";
+
+import {
+ integerToFractionDecimal,
+ renderVerificationTierIcon
+} from "../../../../../../../core/util/asset/assetUtils";
+import {
+ getAssetImgSrc,
+ getAssetPlaceholderContent
+} from "../../../../../../../core/util/image/imageUtils";
+import {useTransactionSignFlowContext} from "../../../../../../context/TransactionSignFlowContext";
+import Image from "../../../../../../../component/image/Image";
+import {uint8ArrayToString} from "../../../../../../../core/util/blob/blobUtils";
+import {formatNumber} from "../../../../../../../core/util/number/numberUtils";
+import {ALGO_UNIT} from "../../../../../../../core/ui/typography/typographyConstants";
+import Button from "../../../../../../../component/button/Button";
+
+function TransactionSignDetailList() {
+ const {
+ formitoState: {
+ txns,
+ activeTransactionIndex,
+ transactionAssets,
+ transactionAssetsFromNode
+ },
+ dispatchFormitoAction
+ } = useTransactionSignFlowContext();
+ const activeTransaction = txns[activeTransactionIndex];
+ const activeTransactionAsset = transactionAssets?.find(
+ (asset) => asset.asset_id === activeTransaction.txn.assetIndex
+ );
+ const activeTransactionAssetFromNode = transactionAssetsFromNode?.find(
+ (asset) => asset.index === activeTransaction.txn.assetIndex
+ );
+ const isCollectible = !!activeTransactionAsset?.collectible;
+
+ return (
+
+
+
+ {"Transaction Details"}
+
+ {(activeTransactionAsset || activeTransactionAssetFromNode) && (
+
+ );
+
+ function getTransactionAmount() {
+ let transactionAmount = `${ALGO_UNIT}${formatNumber({maximumFractionDigits: 2})(
+ microalgosToAlgos(Number(activeTransaction.txn.amount || ""))
+ )}`;
+
+ if (activeTransactionAsset) {
+ transactionAmount = `${formatNumber({maximumFractionDigits: 2})(
+ integerToFractionDecimal(
+ Number(activeTransaction.txn.amount),
+ activeTransactionAsset?.fraction_decimals
+ )
+ )} ${activeTransactionAsset.name}`;
+ }
+ return transactionAmount;
+ }
+
+ function handleChangeView() {
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ transactionSignView: "raw-txn"
+ }
+ });
+ }
+}
+
+export default TransactionSignDetailList;
diff --git a/src/transaction/sign-box/view/detail/view/single/messages/TransactionSignDetailWarningMessages.tsx b/src/transaction/sign-box/view/detail/view/single/messages/TransactionSignDetailWarningMessages.tsx
new file mode 100644
index 0000000..0cded1e
--- /dev/null
+++ b/src/transaction/sign-box/view/detail/view/single/messages/TransactionSignDetailWarningMessages.tsx
@@ -0,0 +1,82 @@
+import algosdk from "algosdk";
+
+import {useTransactionSignFlowContext} from "../../../../../../context/TransactionSignFlowContext";
+import {
+ checkIfSignRequiredForTransaction,
+ isSingleAuthTransaction,
+ transactionHasClearState,
+ transactionHasCloseRemainder,
+ transactionHasRekey
+} from "../../../../../../utils/transactionUtils";
+import TransactionSignDetailMessage from "../../../../../message/TransactionSignDetailMessage";
+
+function TransactionSignDetailWarningMessages() {
+ const {
+ formitoState: {txns, activeTransactionIndex, transactionAssets, currentSession}
+ } = useTransactionSignFlowContext();
+ const activeTransaction = txns[activeTransactionIndex];
+ const activeTransactionAsset = transactionAssets?.find(
+ (asset) => asset.asset_id === activeTransaction.txn.assetIndex
+ );
+
+ return (
+
+
+ )}
+
+ {activeTransaction.txn.amount && (
+
+
+ + {"Asset"} +
+ +
+ {activeTransactionAsset && (
+
+
+
+
+
+
+ + {activeTransactionAsset?.name || + activeTransactionAssetFromNode?.params.name} +
+ + {!isCollectible && + activeTransactionAsset && + renderVerificationTierIcon(activeTransactionAsset)} +
+
+ + {activeTransactionAsset?.asset_id || + activeTransactionAssetFromNode?.index} +
+ + + ++ {activeTransactionAsset?.unit_name || + activeTransactionAssetFromNode?.params.unitName} +
+
+
+ )}
+
+ + {"Amount"} +
+ +{getTransactionAmount()}
+
+
+
+ {activeTransaction.txn.note && activeTransaction.txn.note?.length > 0 && (
+ + {"Network Fee"} +
+ +{`- ${ALGO_UNIT}${microalgosToAlgos( + activeTransaction.txn.fee + )}`}
+
+
+ )}
+
+ + {"Note"} +
+ ++ {uint8ArrayToString(activeTransaction.txn.note)} +
+
+
+
+
+ {isSingleAuthTransaction(activeTransaction.txn) && (
+
+ );
+}
+
+export default TransactionSignDetailWarningMessages;
diff --git a/src/transaction/sign-box/view/detail/view/single/wallets/TransactionSignSingleViewWallets.tsx b/src/transaction/sign-box/view/detail/view/single/wallets/TransactionSignSingleViewWallets.tsx
new file mode 100644
index 0000000..9bd88d6
--- /dev/null
+++ b/src/transaction/sign-box/view/detail/view/single/wallets/TransactionSignSingleViewWallets.tsx
@@ -0,0 +1,168 @@
+import {ReactComponent as AccountDefaultIcon} from "../../../../../../../core/ui/icons/account-default.svg";
+import {ReactComponent as ApplicationCallIcon} from "../../../../../../../core/ui/icons/application-call.svg";
+import {ReactComponent as CreateIcon} from "../../../../../../../core/ui/icons/create.svg";
+import {ReactComponent as DeleteIcon} from "../../../../../../../core/ui/icons/delete.svg";
+import {ReactComponent as ModifyIcon} from "../../../../../../../core/ui/icons/modify.svg";
+
+import "./_transaction-sign-single-view-wallets.scss";
+
+import algosdk, {OnApplicationComplete} from "algosdk";
+import classNames from "classnames";
+
+import {useAppContext} from "../../../../../../../core/app/AppContext";
+import {
+ trimAccountAddress,
+ trimAccountName
+} from "../../../../../../../account/util/accountUtils";
+import {
+ checkIfTransactionApplicationCall,
+ checkIfTransactionAssetConfig,
+ isCreateApplicationTransaction,
+ isTransactionCreateAssetConfig,
+ isTransactionDeleteAssetConfig,
+ isTransactionUpdateAssetConfig
+} from "../../../../../../utils/transactionUtils";
+import {useTransactionSignFlowContext} from "../../../../../../context/TransactionSignFlowContext";
+
+function TransactionSignSingleViewWallets() {
+ const {
+ state: {accounts}
+ } = useAppContext();
+ const {
+ formitoState: {activeTransactionIndex, txns}
+ } = useTransactionSignFlowContext();
+ const activeTransaction = txns[activeTransactionIndex];
+ const accountsArray = Object.values(accounts);
+ const isApplicationCall = checkIfTransactionApplicationCall(activeTransaction.txn);
+ const isAssetConfig = checkIfTransactionAssetConfig(activeTransaction.txn);
+ const toAddress = activeTransaction.txn.to
+ ? algosdk.encodeAddress(activeTransaction.txn.to.publicKey)
+ : "";
+ const fromAddress = activeTransaction.txn.from
+ ? algosdk.encodeAddress(activeTransaction.txn.from.publicKey)
+ : "";
+ const fromAccount = accountsArray.find((account) => account.address === fromAddress);
+ const toAccount = accountsArray.find((account) => account.address === toAddress);
+
+ return (
+
+
+ );
+
+ function renderFromIcon() {
+ if (isApplicationCall) {
+ if (isCreateApplicationTransaction(activeTransaction.txn)) {
+ return
+
+
+
+
+ + {`${ + fromAccount?.name + ? trimAccountName(fromAccount.name) + : trimAccountAddress(fromAddress) + }${fromAccount ? " (You)" : ""}`} +
+ + {fromAccount?.name && ( ++ {trimAccountAddress(fromAddress)} +
+ )} +
+
+
+ + {"To"} +
+
+ {renderFromIcon()}
+
+ {renderFromDescription()}
+
+
+
+ );
+ }
+}
+
+export default TransactionSignSingleViewWallets;
diff --git a/src/transaction/sign-box/view/detail/view/single/wallets/_transaction-sign-single-view-wallets.scss b/src/transaction/sign-box/view/detail/view/single/wallets/_transaction-sign-single-view-wallets.scss
new file mode 100644
index 0000000..e310f03
--- /dev/null
+++ b/src/transaction/sign-box/view/detail/view/single/wallets/_transaction-sign-single-view-wallets.scss
@@ -0,0 +1,45 @@
+.transaction-sign-single-view-wallets {
+ margin-bottom: 32px;
+
+ border-radius: 12px;
+ box-shadow: var(--shadow-small);
+}
+
+.transaction-sign-single-view-wallets__wallet {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+
+ padding: 22px 16px;
+
+ &--from-unknown-wallet,
+ &--to-unknown-wallet {
+ .account-default-icon {
+ rect {
+ fill: var(--secondary-button-disabled-bg);
+ }
+
+ path {
+ fill: var(--primary-button-disabled-text);
+ }
+ }
+ }
+}
+
+.transaction-sign-single-view-wallets__to {
+ position: relative;
+
+ border-bottom: 1px solid var(--gray-100);
+}
+
+.transaction-sign-single-view-wallets__to__text {
+ position: absolute;
+ top: -8px;
+ right: calc(50% - 16px);
+
+ width: 32px;
+
+ background-color: var(--card-default);
+
+ text-align: center;
+}
diff --git a/src/transaction/sign-box/view/detail/view/summary/TransactionSignDetailSummaryView.tsx b/src/transaction/sign-box/view/detail/view/summary/TransactionSignDetailSummaryView.tsx
new file mode 100644
index 0000000..e3b3dfe
--- /dev/null
+++ b/src/transaction/sign-box/view/detail/view/summary/TransactionSignDetailSummaryView.tsx
@@ -0,0 +1,45 @@
+import {ReactComponent as ArrowLeft} from "../../../../../../core/ui/icons/arrow-left.svg";
+
+import "./_transaction-sign-detail-summary-view.scss";
+
+import {useTransactionSignFlowContext} from "../../../../../context/TransactionSignFlowContext";
+import TransactionDetailsList from "../../../../../detail/list/TransactionDetailsList";
+import TransactionTypeLabelList from "../../type-labels/TransactionTypeLabelList";
+import Button from "../../../../../../component/button/Button";
+
+function TransactionSignDetailSummaryView() {
+ const {
+ formitoState: {txns},
+ dispatchFormitoAction: dispatchTransactionPageAction
+ } = useTransactionSignFlowContext();
+
+ return (
+ + {`${ + toAccount?.name + ? trimAccountName(toAccount.name) + : trimAccountAddress(toAddress) + }${toAccount ? " (You)" : ""}`} +
+ + {toAccount?.name && ( ++ {trimAccountAddress(toAddress)} +
+ )} +
+
+ );
+
+ function handleChangeView() {
+ dispatchTransactionPageAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ transactionSignView: "default"
+ }
+ });
+ }
+}
+
+export default TransactionSignDetailSummaryView;
diff --git a/src/transaction/sign-box/view/detail/view/summary/_transaction-sign-detail-summary-view.scss b/src/transaction/sign-box/view/detail/view/summary/_transaction-sign-detail-summary-view.scss
new file mode 100644
index 0000000..67781d9
--- /dev/null
+++ b/src/transaction/sign-box/view/detail/view/summary/_transaction-sign-detail-summary-view.scss
@@ -0,0 +1,17 @@
+.transaction-sign-detail-summary-view__header {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+
+ margin-bottom: 32px;
+ padding: 28px 28px 0;
+}
+
+.transaction-sign-detail-summary-view__header__back-button.button {
+ &:hover,
+ &:focus {
+ .arrow-left-icon path {
+ fill: var(--ghost-button-text);
+ }
+ }
+}
diff --git a/src/transaction/utils/transactionTypes.d.ts b/src/transaction/utils/transactionTypes.d.ts
new file mode 100644
index 0000000..4a4dcee
--- /dev/null
+++ b/src/transaction/utils/transactionTypes.d.ts
@@ -0,0 +1,13 @@
+interface SignedTxn {
+ txnId: string;
+ signedTxn: string;
+}
+
+interface TransactionSignPageState {
+ hasMessageReceived: boolean;
+ isSignStarted: boolean;
+ txns: Transaction[];
+ currentSession: AppDBSession | null;
+ signerAddress: string;
+ signerAccountName: string;
+}
diff --git a/src/transaction/utils/transactionUtils.test.ts b/src/transaction/utils/transactionUtils.test.ts
new file mode 100644
index 0000000..710ec67
--- /dev/null
+++ b/src/transaction/utils/transactionUtils.test.ts
@@ -0,0 +1,78 @@
+/* eslint-disable no-magic-numbers */
+import algosdk from "algosdk";
+
+import {encodeUnsignedTransactionInBase64} from "../../core/util/blob/blobUtils";
+import {hasInvalidGroupOnTransactions} from "./transactionUtils";
+
+const suggestedParams = {
+ fee: 1000,
+ firstRound: 2168,
+ lastRound: 2178,
+ genesisHash: "SGO1GKSzyE7IEPItTxCByw9x8FmnrCDexi9/cOUJOiI=",
+ genesisID: "testnet-v1.0"
+};
+
+function prepareMockTransactions(): algosdk.Transaction[] {
+ const mockTransactions: algosdk.Transaction[] = [];
+
+ for (let i = 0; i < 7; i++) {
+ mockTransactions.push(
+ algosdk.makePaymentTxnWithSuggestedParamsFromObject({
+ from: "JFK7NTHGDFIPJNWAWJS54NW7K53C24V4ZYLMTUWAUSEO4MK53PVJQXBMBM",
+ to: "ACKNL76PGZKL673I7P6Z524323E34PSHRUYWM2XDZQWE3P2YJXK7QBOWI4",
+ amount: 100000 + i,
+ note: new Uint8Array(Buffer.from(`txn ${i}}`)),
+
+ suggestedParams
+ })
+ );
+ }
+
+ return mockTransactions;
+}
+
+// Prepare couple of mock transactions & groups to simulate a transaction group
+const transactions = prepareMockTransactions();
+const groups = [
+ [{txn: transactions[0]}, {txn: transactions[1]}],
+ [{txn: transactions[2]}, {txn: transactions[3]}],
+ [{txn: transactions[4]}, {txn: transactions[6]}]
+];
+
+// Assign a group ID to each transaction inside a group
+groups.forEach((group) => algosdk.assignGroupID(group.map((toSign) => toSign.txn)));
+
+// Encode transactions to base64 to lose context reference from source
+const encodedTransactions = groups
+ .flat()
+ .map((transaction) => encodeUnsignedTransactionInBase64(transaction.txn));
+
+describe("has invalid groups", () => {
+ it("should return `true` if a transaction is missing from group", () => {
+ // Randomly remove a transaction from the group
+ const newEncodedTransactions = encodedTransactions.filter((_, index) => index !== 5);
+
+ expect(hasInvalidGroupOnTransactions(newEncodedTransactions)).toBe(true);
+ });
+
+ it("should return `false` if all transactions represented in the group correctly", () => {
+ expect(hasInvalidGroupOnTransactions(encodedTransactions)).toBe(false);
+ });
+
+ it("should return `false` if a single transaction represented in the group", () => {
+ const transaction = prepareMockTransactions()[0];
+
+ // Assign a group ID to the transaction
+ algosdk.assignGroupID([transaction]);
+
+ // Encode transaction to base64 to lose context reference from source
+ const encodedTransaction = encodeUnsignedTransactionInBase64(transaction);
+
+ expect(hasInvalidGroupOnTransactions([encodedTransaction])).toBe(false);
+ });
+
+ it("should return `false` if pass empty group", () => {
+ expect(hasInvalidGroupOnTransactions([])).toBe(false);
+ });
+});
+/* eslint-enable no-magic-numbers */
diff --git a/src/transaction/utils/transactionUtils.tsx b/src/transaction/utils/transactionUtils.tsx
new file mode 100644
index 0000000..a51fcc0
--- /dev/null
+++ b/src/transaction/utils/transactionUtils.tsx
@@ -0,0 +1,394 @@
+/* eslint-disable max-lines */
+import algosdk, {isValidAddress, OnApplicationComplete, Transaction} from "algosdk";
+
+import {GENESIS_HASH_BY_NETWORK} from "../../core/util/algod/algodConstants";
+import {base64ToUint8Array, uint8ArrayToBase64} from "../../core/util/blob/blobUtils";
+import {SignerTransaction} from "../../core/util/model/peraWalletModel";
+
+export interface TransactionTypeCounts {
+ appl: number;
+ axfer: number;
+ pay: number;
+ axferReceive: number;
+ acfg: number;
+}
+
+const TRANSACTION_TYPE_LABEL_MAP = {
+ appl: "ApplicationCall",
+ axferReceive: "Receive",
+ axfer: "Asset Transfer",
+ pay: "Payment",
+ acfg: "AssetConfig"
+};
+
+function getTransactionTypeCounts(transactions: Transaction[], userAddress: string) {
+ return transactions.reduce(
+ (acc, txn) => {
+ const type = getTransactionType(txn, userAddress) as keyof TransactionTypeCounts;
+
+ if (type) {
+ acc[type] = acc[type] ? acc[type] + 1 : 1;
+ }
+ return acc;
+ },
+ {
+ appl: 0,
+ axfer: 0,
+ pay: 0,
+ axferReceive: 0,
+ acfg: 0
+ }
+ );
+}
+
+function getTransactionType(transaction: Transaction, userAddress: string) {
+ return checkIfTransactionIsAxferReceive(transaction, userAddress)
+ ? "axferReceive"
+ : transaction.type;
+}
+
+function getTransactionTypeText(transaction: Transaction, userAddress: string) {
+ return TRANSACTION_TYPE_LABEL_MAP[
+ getTransactionType(transaction, userAddress) as keyof TransactionTypeCounts
+ ];
+}
+
+function getTransactionTypeCountTexts(transactions: Transaction[], userAddress: string) {
+ const transactionTypeCounts = getTransactionTypeCounts(transactions, userAddress);
+
+ return Object.keys(transactionTypeCounts)
+ .filter((type) => transactionTypeCounts[type as keyof TransactionTypeCounts] > 0)
+ .map((type) => {
+ const typeNumber = transactionTypeCounts[type as keyof TransactionTypeCounts];
+
+ return `${typeNumber}x ${
+ TRANSACTION_TYPE_LABEL_MAP[type as keyof TransactionTypeCounts]
+ }`;
+ });
+}
+
+function seperateTransactionReceiveAndSpend(
+ transactions: SignerTransaction[],
+ userAddress: string
+) {
+ const receiveTransactions: Transaction[] = transactions.map(
+ (transaction) => transaction.txn
+ );
+
+ return receiveTransactions.reduce(
+ (txns, txn) => {
+ if (checkIfTransactionSignedBySomebodyElse(txn, userAddress)) {
+ txns.signedBySomebodyElseTransactions.push(txn);
+ } else if (checkIfTransactionApplicationCall(txn)) {
+ txns.applicationCallTransactions.push(txn);
+ } else if (checkIfTransactionOptIn(txn, userAddress)) {
+ txns.optInTransactions.push(txn);
+ } else if (checkIfTransactionIsReceive(txn, userAddress)) {
+ txns.receiveTransactions.push(txn);
+ } else if (checkIfTransactionAssetConfig(txn)) {
+ txns.assetConfigTransactions.push(txn);
+ } else {
+ txns.spendTransactions.push(txn);
+ }
+ return txns;
+ },
+ {
+ signedBySomebodyElseTransactions: [] as Transaction[],
+ receiveTransactions: [] as Transaction[],
+ spendTransactions: [] as Transaction[],
+ optInTransactions: [] as Transaction[],
+ applicationCallTransactions: [] as Transaction[],
+ assetConfigTransactions: [] as Transaction[]
+ }
+ );
+}
+
+function getOptInTransactions(transactions: Transaction[], userAddress: string) {
+ return transactions.filter((transaction) =>
+ checkIfTransactionOptIn(transaction, userAddress)
+ );
+}
+
+function getApplicationCallTransactions(transactions: Transaction[]) {
+ return transactions.filter((transaction) =>
+ checkIfTransactionApplicationCall(transaction)
+ );
+}
+
+function isCreateApplicationTransaction(transaction: Transaction) {
+ return transaction.type === "appl" && transaction.appIndex === undefined;
+}
+
+function getAssetIndexesFromTransactions(transactions: SignerTransaction[]) {
+ return transactions.reduce((assetIndexes, transaction) => {
+ if (transaction?.txn.assetIndex) {
+ assetIndexes.push(transaction.txn.assetIndex);
+ }
+
+ return assetIndexes;
+ }, [] as number[]);
+}
+
+function checkIfTransactionIsReceive(transaction: Transaction, userAddress: string) {
+ return Boolean(
+ transaction.to
+ ? algosdk.encodeAddress(transaction.to.publicKey) === userAddress
+ : false
+ );
+}
+
+function checkIfTransactionIsAxferReceive(transaction: Transaction, userAddress: string) {
+ return (
+ checkIfTransactionIsReceive(transaction, userAddress) && transaction.type === "axfer"
+ );
+}
+
+function checkIfTransactionSignedBySomebodyElse(
+ transaction: Transaction,
+ userAddress: string
+) {
+ return Boolean(algosdk.encodeAddress(transaction.from?.publicKey) !== userAddress);
+}
+
+function checkIfTransactionOptIn(transaction: Transaction, userAddress: string) {
+ return Boolean(
+ transaction.assetIndex &&
+ (!transaction.amount || Number(transaction.amount) === 0) &&
+ getTransactionType(transaction, userAddress) === "axferReceive"
+ );
+}
+
+function checkIfTransactionApplicationCall(transaction: Transaction) {
+ return transaction.type === "appl";
+}
+
+function checkIfTransactionAssetConfig(transaction: Transaction) {
+ return transaction.type === "acfg";
+}
+
+function isTransactionTypeSupported(transaction: Transaction, userAddress: string) {
+ return getTransactionTypeText(transaction, userAddress) !== undefined;
+}
+
+function checkIfTransactionNetworkIsMatches(
+ transaction: Transaction,
+ network: NetworkToggle
+) {
+ return uint8ArrayToBase64(transaction.genesisHash) === GENESIS_HASH_BY_NETWORK[network];
+}
+
+function checkIfSignRequiredForTransactions(
+ transactions: SignerTransaction[],
+ currentSession: AppDBSession
+) {
+ return transactions.some((transaction) =>
+ checkIfSignRequiredForTransaction(transaction, currentSession)
+ );
+}
+
+function checkIfSignRequiredForTransaction(
+ transaction: SignerTransaction,
+ currentSession: AppDBSession
+) {
+ const signerAddress = getSignerAddress(transaction);
+
+ return currentSession?.accountAddresses.includes(signerAddress);
+}
+
+function getSignerAddress(transaction: SignerTransaction) {
+ if (transaction.authAddr && isValidAddress(transaction.authAddr)) {
+ return transaction.authAddr;
+ }
+
+ if (transaction.signers) {
+ if (transaction.signers.length === 0) {
+ return "";
+ } else if (
+ transaction.signers.length === 1 &&
+ isValidAddress(transaction.signers[0])
+ ) {
+ return transaction.signers[0];
+ }
+ }
+
+ return algosdk.encodeAddress(transaction.txn.from.publicKey);
+}
+
+function isSingleAuthTransaction(transaction: Transaction) {
+ return (
+ transaction &&
+ transaction.type === "pay" &&
+ (transaction.amount === 0 || transaction.amount === undefined)
+ );
+}
+
+function isAllTransactionsEmpty(transactions: Transaction[]) {
+ return transactions.every(isSingleAuthTransaction);
+}
+
+function isAlgoTransferTransaction(transaction: Transaction) {
+ return Boolean(!transaction.assetIndex && transaction.amount);
+}
+
+function transactionHasRekey(transaction: Transaction) {
+ return Boolean(transaction.reKeyTo);
+}
+
+function transactionHasCloseRemainder(transaction: Transaction) {
+ return Boolean(transaction.closeRemainderTo);
+}
+
+function checkAuthAddressesIsValid(authAddresses: string[]) {
+ return authAddresses.every((address) => algosdk.isValidAddress(address));
+}
+
+function transactionHasClearState(transaction: Transaction) {
+ return transaction.appOnComplete === OnApplicationComplete.ClearStateOC;
+}
+
+function isTransactionDeleteAssetConfig(transaction: Transaction) {
+ return (
+ transaction.assetClawback === undefined &&
+ transaction.assetIndex &&
+ transaction.type === "acfg"
+ );
+}
+
+function isTransactionUpdateAssetConfig(transaction: Transaction) {
+ return (
+ transaction.assetClawback && transaction.assetIndex && transaction.type === "acfg"
+ );
+}
+
+function isTransactionCreateAssetConfig(transaction: Transaction) {
+ return !transaction.assetIndex && transaction.type === "acfg";
+}
+
+/**
+ * Verify that all transactions in a group have the same
+ * group ID and there are no missing transactions
+ *
+ * @param {Transaction[]} transactions Transaction[]
+ * @throws {Error} If the group ID is not the same for all transactions or if there's no transactions
+ * @returns {boolean} boolean
+ */
+function verifyTransactionsGroupID(transactions: Transaction[]) {
+ // If there are no transactions, we can't verify the group ID
+ if (transactions.length === 0) {
+ throw new Error("Transaction group has 0 items");
+ }
+
+ // Memorize the first group ID to compare with the rest
+ const firstTransactionGroupID = transactions[0].group;
+
+ // A group of size 1 may have an empty group ID
+ if (transactions.length === 1 && firstTransactionGroupID === undefined) {
+ return true;
+ }
+
+ for (let i = 0; i < transactions.length; i++) {
+ // Pass the first transaction, since we already have its group ID
+ // To have a valid comparison, group IDs shouldn't be undefined
+ // Check if the group ID is the same as the first transaction's group ID
+ if (
+ i > 0 &&
+ (transactions[i].group === undefined ||
+ firstTransactionGroupID === undefined ||
+ uint8ArrayToBase64(transactions[i].group!) !==
+ uint8ArrayToBase64(firstTransactionGroupID!))
+ ) {
+ throw new Error("Transaction group has multiple group IDs");
+ }
+
+ // Reset group IDs so we can compute it again
+ transactions[i].group = undefined;
+ }
+
+ // Compute the group ID again
+ const computedGroupID = algosdk.computeGroupID(transactions);
+
+ return (
+ // Compare it with the first transaction's group ID
+ uint8ArrayToBase64(computedGroupID) === uint8ArrayToBase64(firstTransactionGroupID!)
+ );
+}
+
+/**
+ * Groups transactions by group ID
+ * @param {transaction[]} transactions Transaction[]
+ * @returns {Transaction[][]} Transaction[][]
+ */
+function getTransactionGroups(transactions: Transaction[]) {
+ return transactions.reduce((grouped, transaction) => {
+ if (transaction.group) {
+ const groupID = uint8ArrayToBase64(transaction.group);
+ const groupIndex = grouped.findIndex(
+ (group) =>
+ group.length > 0 &&
+ group[0].group &&
+ uint8ArrayToBase64(group[0].group) === groupID
+ );
+
+ if (groupIndex === -1) {
+ grouped.push([transaction]);
+ } else {
+ grouped[groupIndex].push(transaction);
+ }
+ } else {
+ grouped.push([transaction]);
+ }
+
+ return grouped;
+ }, [] as Transaction[][]);
+}
+
+/**
+ * Check if a transaction group has an invalid group ID
+ * @param {string[]} base64 encoded Transaction[]
+ * @returns {boolean}
+ */
+function hasInvalidGroupOnTransactions(transactions: string[]) {
+ const decodedTransactions = transactions.map((transaction) =>
+ algosdk.decodeUnsignedTransaction(base64ToUint8Array(transaction))
+ );
+ const transactionGroups = getTransactionGroups(decodedTransactions);
+
+ return transactionGroups.some((txnGroup) => !verifyTransactionsGroupID(txnGroup));
+}
+
+export {
+ getTransactionTypeCounts,
+ getTransactionTypeCountTexts,
+ getTransactionTypeText,
+ checkIfTransactionIsReceive,
+ getTransactionType,
+ seperateTransactionReceiveAndSpend,
+ getAssetIndexesFromTransactions,
+ checkIfTransactionSignedBySomebodyElse,
+ checkIfTransactionOptIn,
+ checkIfTransactionApplicationCall,
+ getOptInTransactions,
+ getApplicationCallTransactions,
+ isCreateApplicationTransaction,
+ isTransactionTypeSupported,
+ checkIfTransactionNetworkIsMatches,
+ checkIfSignRequiredForTransactions,
+ checkIfSignRequiredForTransaction,
+ isSingleAuthTransaction,
+ isAlgoTransferTransaction,
+ transactionHasRekey,
+ transactionHasCloseRemainder,
+ checkAuthAddressesIsValid,
+ transactionHasClearState,
+ getSignerAddress,
+ checkIfTransactionAssetConfig,
+ isTransactionDeleteAssetConfig,
+ isTransactionUpdateAssetConfig,
+ isTransactionCreateAssetConfig,
+ isAllTransactionsEmpty,
+ verifyTransactionsGroupID,
+ hasInvalidGroupOnTransactions,
+ getTransactionGroups
+};
+
+/* eslint-enable max-lines */
diff --git a/src/transaction/view/embedded/TransactionSignEmbeddedView.tsx b/src/transaction/view/embedded/TransactionSignEmbeddedView.tsx
new file mode 100644
index 0000000..37d2731
--- /dev/null
+++ b/src/transaction/view/embedded/TransactionSignEmbeddedView.tsx
@@ -0,0 +1,206 @@
+import "./_transaction-sign-embedded-view.scss";
+
+import {useCallback, useEffect} from "react";
+import algosdk from "algosdk";
+
+import appTellerManager, {PeraTeller} from "../../../core/app/teller/appTellerManager";
+import {useAppContext} from "../../../core/app/AppContext";
+import {base64ToUint8Array, uint8ArrayToBase64} from "../../../core/util/blob/blobUtils";
+import useTellerListener from "../../../core/util/hook/useTellerListener";
+import TransactionSignBox from "../../sign-box/TransactionSignBox";
+import {decryptSK} from "../../../core/util/nacl/naclUtils";
+import PasswordAccessPage from "../../../password/page/access/PasswordAccessPage";
+import {useTransactionSignFlowContext} from "../../context/TransactionSignFlowContext";
+import {
+ checkIfTransactionNetworkIsMatches,
+ getSignerAddress
+} from "../../utils/transactionUtils";
+import {NETWORK_MISMATCH_MESSAGE} from "../../../core/util/algod/algodConstants";
+import PeraLoader from "../../../component/loader/pera/PeraLoader";
+import {SignerTransaction} from "../../../core/util/model/peraWalletModel";
+
+function TransactionSignEmbeddedView() {
+ const {
+ state: {sessions, accounts, masterkey, preferredNetwork}
+ } = useAppContext();
+ const {
+ formitoState: {currentSession, hasMessageReceived, txns, messageOrigin},
+ dispatchFormitoAction
+ } = useTransactionSignFlowContext();
+
+ useEffect(() => {
+ if (hasMessageReceived && masterkey) {
+ if (sessions[messageOrigin]) {
+ const fromAddress = algosdk.encodeAddress(
+ txns[0].txn.from?.publicKey || new Uint8Array(0)
+ );
+ const toAddress = algosdk.encodeAddress(
+ txns[0].txn.to?.publicKey || new Uint8Array(0)
+ );
+
+ const userAddress = sessions[messageOrigin].accountAddresses.find(
+ (address) => address === (fromAddress || toAddress)
+ );
+
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ currentSession: sessions[messageOrigin],
+ userAddress,
+ userAccountName: userAddress ? accounts[userAddress]?.name : undefined
+ }
+ });
+ } else {
+ appTellerManager.sendMessage({
+ message: {
+ type: "SESSION_DISCONNECTED",
+ error: "The session is not active anymore."
+ },
+ targetWindow: window.parent
+ });
+ }
+ }
+ }, [
+ hasMessageReceived,
+ masterkey,
+ sessions,
+ messageOrigin,
+ txns,
+ accounts,
+ dispatchFormitoAction
+ ]);
+
+ const onReceiveMessage = useCallback(
+ (event: MessageEvent
+
+
+
+
+ {`Summary of ${txns.length} Transactions`}
+
+ {renderContent()}
+
+ );
+
+ function renderContent() {
+ if (!masterkey) {
+ return
+
+ );
+ }
+
+ function handleSignCancel() {
+ appTellerManager.sendMessage({
+ message: {
+ type: "SIGN_TXN_CALLBACK_ERROR",
+ error: "Transaction signing is cancelled"
+ },
+ targetWindow: window.parent
+ });
+ }
+
+ function handleSignClick() {
+ if (masterkey) {
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ isSignStarted: true
+ }
+ });
+
+ const signedTxns: SignedTxn[] = [];
+
+ txns.forEach(async (txnToSign) => {
+ const signerAddress = getSignerAddress(txnToSign);
+
+ // If the from address is not in the accounts, then it shouldn't be signed
+ // It also gives an extra layer of security,
+ // user SHOULD only sign the current session's txns
+ if (!currentSession?.accountAddresses.includes(signerAddress)) {
+ // Filter out the txns that are not requires to be signed
+ return;
+ }
+
+ const account = accounts[signerAddress];
+ const pk = await decryptSK(account.pk, masterkey);
+ const signedTxn = algosdk.signTransaction(txnToSign.txn, pk!);
+
+ signedTxns.push({
+ txnId: signedTxn.txID,
+ signedTxn: uint8ArrayToBase64(signedTxn.blob)
+ });
+ });
+
+ appTellerManager.sendMessage({
+ message: {
+ type: "SIGN_TXN_CALLBACK",
+ signedTxns
+ },
+ targetWindow: window.parent
+ });
+ }
+ }
+}
+
+export default TransactionSignEmbeddedView;
diff --git a/src/transaction/view/embedded/_transaction-sign-embedded-view.scss b/src/transaction/view/embedded/_transaction-sign-embedded-view.scss
new file mode 100644
index 0000000..61d92f1
--- /dev/null
+++ b/src/transaction/view/embedded/_transaction-sign-embedded-view.scss
@@ -0,0 +1,22 @@
+.transaction-sign-embedded-view {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+
+ width: 100%;
+ height: 100%;
+
+ color: var(--text-main);
+ background: var(--card-default);
+
+ transform: translate(-50%, -50%);
+}
+
+.transaction-sign-embedded-view__spinner-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 100%;
+ height: 100%;
+}
diff --git a/src/transaction/view/tab/TransactionSignTabView.tsx b/src/transaction/view/tab/TransactionSignTabView.tsx
new file mode 100644
index 0000000..19332fe
--- /dev/null
+++ b/src/transaction/view/tab/TransactionSignTabView.tsx
@@ -0,0 +1,215 @@
+import "./_transaction-sign-tab-view.scss";
+
+import algosdk from "algosdk";
+import {useCallback, useEffect} from "react";
+
+import appTellerManager, {PeraTeller} from "../../../core/app/teller/appTellerManager";
+import {base64ToUint8Array, uint8ArrayToBase64} from "../../../core/util/blob/blobUtils";
+import {useAppContext} from "../../../core/app/AppContext";
+import useTellerListener from "../../../core/util/hook/useTellerListener";
+import TransactionSignBox from "../../sign-box/TransactionSignBox";
+import {decryptSK} from "../../../core/util/nacl/naclUtils";
+import PasswordAccessPage from "../../../password/page/access/PasswordAccessPage";
+import {useTransactionSignFlowContext} from "../../context/TransactionSignFlowContext";
+import {NETWORK_MISMATCH_MESSAGE} from "../../../core/util/algod/algodConstants";
+import {
+ checkIfTransactionNetworkIsMatches,
+ getSignerAddress
+} from "../../utils/transactionUtils";
+import PeraLoader from "../../../component/loader/pera/PeraLoader";
+import {SignerTransaction} from "../../../core/util/model/peraWalletModel";
+
+function TransactionSignTabView() {
+ const {
+ state: {accounts, sessions, masterkey, preferredNetwork}
+ } = useAppContext();
+ const {
+ formitoState: {txns, currentSession, hasMessageReceived, messageOrigin},
+ dispatchFormitoAction
+ } = useTransactionSignFlowContext();
+
+ useEffect(() => {
+ if (hasMessageReceived && masterkey) {
+ if (sessions[messageOrigin]) {
+ const fromAddress = algosdk.encodeAddress(
+ txns[0].txn.from?.publicKey || new Uint8Array(0)
+ );
+ const toAddress = algosdk.encodeAddress(
+ txns[0].txn.to?.publicKey || new Uint8Array(0)
+ );
+
+ const userAddress = sessions[messageOrigin].accountAddresses.find(
+ (address) => address === (fromAddress || toAddress)
+ );
+
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ currentSession: sessions[messageOrigin],
+ userAddress,
+ userAccountName: userAddress ? accounts[userAddress]?.name : undefined
+ }
+ });
+ } else {
+ appTellerManager.sendMessage({
+ message: {
+ type: "SESSION_DISCONNECTED",
+ error: "The session is not active anymore."
+ },
+ targetWindow: window.opener
+ });
+ }
+ }
+ }, [
+ hasMessageReceived,
+ masterkey,
+ sessions,
+ messageOrigin,
+ txns,
+ accounts,
+ dispatchFormitoAction
+ ]);
+
+ const onReceiveMessage = useCallback(
+ (event: MessageEvent{renderContent()}
;
+
+ function renderContent() {
+ if (!masterkey) {
+ return (
+
+
+ );
+ }
+
+ if (currentSession && hasMessageReceived) {
+ return (
+
+
+ );
+ }
+
+ function handleSignCancel() {
+ appTellerManager.sendMessage({
+ message: {
+ type: "SIGN_TXN_CALLBACK_ERROR",
+ error: "Transaction signing is cancelled"
+ },
+ targetWindow: window.opener
+ });
+ }
+
+ function handleSignClick() {
+ if (masterkey) {
+ dispatchFormitoAction({
+ type: "SET_FORM_VALUE",
+ payload: {
+ isSignStarted: true
+ }
+ });
+
+ const signedTxns: SignedTxn[] = [];
+
+ txns.forEach(async (txnToSign) => {
+ const signerAddress = getSignerAddress(txnToSign);
+
+ // If the from address is not in the accounts, then it shouldn't be signed
+ // It also gives an extra layer of security,
+ // user SHOULD only sign the current session's txns
+ if (!currentSession?.accountAddresses.includes(signerAddress)) {
+ // Filter out the txns that are not requires to be signed
+ return;
+ }
+
+ const account = accounts[signerAddress];
+ const pk = await decryptSK(account.pk, masterkey);
+ const signedTxn = algosdk.signTransaction(txnToSign.txn, pk!);
+
+ signedTxns.push({
+ txnId: signedTxn.txID,
+ signedTxn: uint8ArrayToBase64(signedTxn.blob)
+ });
+ });
+
+ appTellerManager.sendMessage({
+ message: {
+ type: "SIGN_TXN_CALLBACK",
+ signedTxns
+ },
+ targetWindow: window.opener
+ });
+ }
+ }
+}
+export default TransactionSignTabView;
diff --git a/src/transaction/view/tab/_transaction-sign-tab-view.scss b/src/transaction/view/tab/_transaction-sign-tab-view.scss
new file mode 100644
index 0000000..8a021ca
--- /dev/null
+++ b/src/transaction/view/tab/_transaction-sign-tab-view.scss
@@ -0,0 +1,31 @@
+.transaction-sign-tab-view {
+ display: flex;
+ flex-direction: column;
+
+ gap: 24px;
+
+ width: 480px;
+
+ margin: 0 auto;
+}
+
+.transaction-sign-tab-view__access-page {
+ background-color: var(--card-default);
+ border-radius: 16px;
+ box-shadow: var(--shadow-small);
+}
+
+.transaction-sign-tab-view__spinner-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ width: 480px;
+ height: 578px;
+
+ color: var(--text-main);
+ background: var(--card-default);
+
+ border-radius: 16px;
+ box-shadow: var(--shadow-small);
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..0faf0a6
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "target": "esnext",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Additional Checks */
+ "noUnusedLocals": true /* Report errors on unused locals. */,
+ "noUnusedParameters": true /* Report errors on unused parameters. */,
+ "noImplicitReturns": true /* Report error when not all code paths in function return a value. */
+ },
+ "include": ["src"]
+}