9 |
12 | );
13 | }
14 |
15 | export default PageBanner;
16 |
--------------------------------------------------------------------------------
/src/transaction/sign-box/view/detail/type-labels/_transaction-type-label-list.scss:
--------------------------------------------------------------------------------
1 | .transaction-sign-label-list {
2 | display: flex;
3 | flex-wrap: wrap;
4 | align-items: center;
5 | gap: 8px;
6 |
7 | padding: 0 28px;
8 | }
9 |
10 | .transaction-sign-label-list__item {
11 | padding: 6px 24px;
12 |
13 | background-color: var(--layer-2);
14 | border-radius: 16px;
15 | box-shadow: var(--shadow-1);
16 | }
17 |
--------------------------------------------------------------------------------
/src/account/component/account-passphrase-modal/_account-passphrase-modal.scss:
--------------------------------------------------------------------------------
1 | .account-passphrase-modal {
2 | width: 480px;
3 | }
4 |
5 | .account-passphrase-modal__title {
6 | margin-bottom: 12px;
7 | }
8 |
9 | .account-passphrase-modal__description {
10 | display: flex;
11 | flex-direction: column;
12 | gap: 8px;
13 | }
14 |
15 | .account-passphrase-modal__cta {
16 | width: 100%;
17 |
18 | margin-top: 12px;
19 | }
20 |
--------------------------------------------------------------------------------
/src/asset/components/logo/_asset-logo.scss:
--------------------------------------------------------------------------------
1 | @import "../../../core/ui/typography/_typography-mixins.scss";
2 |
3 | .asset-logo {
4 | .image__img {
5 | border-radius: 100%;
6 | }
7 |
8 | .image__placeholder {
9 | @include typography--tagline();
10 |
11 | position: static;
12 |
13 | color: var(--light-button-disabled-text);
14 |
15 | background: var(--layer-3);
16 | border-radius: 100%;
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/component/loader/pera/_pera-loader.scss:
--------------------------------------------------------------------------------
1 | .pera-loader--gray {
2 | width: 100px;
3 | height: 100px;
4 | }
5 |
6 | .pera-loader--align-center {
7 | position: absolute;
8 | top: 50%;
9 | left: 50%;
10 |
11 | transform: translate(-50%, -50%);
12 | }
13 |
14 | .pera-loader-wrapper--colorful {
15 | width: 56px;
16 | height: 56px;
17 |
18 | background-color: var(--helper-purple-900);
19 | border-radius: 50%;
20 | }
21 |
--------------------------------------------------------------------------------
/src/core/util/environment/environmentConstants.ts:
--------------------------------------------------------------------------------
1 | const isProductionBuild = process.env.REACT_APP_BUILD_ENVIRONMENT === "production";
2 | const isStagingBuild = process.env.REACT_APP_BUILD_ENVIRONMENT === "staging";
3 | const isLocalBuild = process.env.REACT_APP_BUILD_ENVIRONMENT === "local";
4 |
5 | const isOnStagingOrLocal = isLocalBuild || isStagingBuild;
6 |
7 | export {isProductionBuild, isStagingBuild, isLocalBuild, isOnStagingOrLocal};
8 |
--------------------------------------------------------------------------------
/src/core/util/hook/useOnUnmount.tsx:
--------------------------------------------------------------------------------
1 | import {useLayoutEffect} from "react";
2 |
3 | function useOnUnmount(callback?: VoidFunction) {
4 | // eslint-disable-next-line arrow-body-style
5 | useLayoutEffect(() => {
6 | return () => {
7 | if (callback) {
8 | callback();
9 | }
10 | };
11 | // eslint-disable-next-line react-hooks/exhaustive-deps
12 | }, []);
13 | }
14 |
15 | export default useOnUnmount;
16 |
--------------------------------------------------------------------------------
/src/component/image/_image.scss:
--------------------------------------------------------------------------------
1 | .image {
2 | position: relative;
3 |
4 | &__placeholder {
5 | position: absolute;
6 | top: 0;
7 | bottom: 0;
8 | left: 0;
9 | right: 0;
10 |
11 | display: flex;
12 | align-items: center;
13 | justify-content: center;
14 |
15 | height: 100%;
16 | }
17 |
18 | &__img {
19 | width: 100%;
20 | height: 100%;
21 |
22 | object-fit: contain;
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/core/ui/icons/rekey-dots.svg:
--------------------------------------------------------------------------------
1 |
7 |
8 |
--------------------------------------------------------------------------------
/src/core/util/time/timezoneUtils.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Returns the browser's system timezone.
3 | * eg. "Canada/Central"
4 | * @return {string} Local timezone
5 | */
6 | function getLocalTimezone() {
7 | let timeZone = "";
8 |
9 | try {
10 | timeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;
11 | } catch (error) {
12 | console.error(error);
13 | }
14 |
15 | return timeZone;
16 | }
17 |
18 | export {getLocalTimezone};
19 |
--------------------------------------------------------------------------------
/src/component/scroll-to-top/ScrollToTop.tsx:
--------------------------------------------------------------------------------
1 | import {useEffect} from "react";
2 | import {useLocation} from "react-router-dom";
3 |
4 | interface ScrollToTopProps {
5 | children: JSX.Element;
6 | }
7 |
8 | function ScrollToTop({children}: ScrollToTopProps) {
9 | const {pathname} = useLocation();
10 |
11 | useEffect(() => {
12 | window.scrollTo(0, 0);
13 | }, [pathname]);
14 |
15 | return children;
16 | }
17 |
18 | export default ScrollToTop;
19 |
--------------------------------------------------------------------------------
/src/component/network-badge/NetworkBadge.tsx:
--------------------------------------------------------------------------------
1 | import {useAppContext} from "../../core/app/AppContext";
2 | import "./_network-badge.scss";
3 |
4 | function NetworkBadge() {
5 | const {
6 | state: {preferredNetwork}
7 | } = useAppContext();
8 |
9 | if (preferredNetwork !== "testnet") {
10 | return null;
11 | }
12 |
13 | return {"TESTNET"}
;
14 | }
15 |
16 | export default NetworkBadge;
17 |
--------------------------------------------------------------------------------
/src/overview/page/welcome/util/welcomePageUtils.ts:
--------------------------------------------------------------------------------
1 | function generateWelcomePageCopies(hasMasterkey: boolean) {
2 | return hasMasterkey
3 | ? {
4 | title: "Now, add your first account"
5 | }
6 | : {
7 | title: "Welcome to Pera Wallet",
8 | description:
9 | "Pera Wallet is the easiest and safest way to store, buy and swap on the Algorand blockchain."
10 | };
11 | }
12 |
13 | export {generateWelcomePageCopies};
14 |
--------------------------------------------------------------------------------
/src/send-txn/util/sendTxnConstants.ts:
--------------------------------------------------------------------------------
1 | export const ALGORAND_ADDRESS_LENGTH = 58;
2 | export const ALGORAND_TXN_NOTE_MAX_LENGTH = 1000;
3 | export const ALGORAND_DEFAULT_TXN_WAIT_ROUNDS = 1000;
4 |
5 | export enum SEND_TXN_FORM_VALIDATION_MESSAGES {
6 | INVALID_ADDRESS = "Recipient address is not valid.",
7 | ACCOUNT_BALANCE = "Balance is not enough for this transaction.",
8 | INVALID_TXN_LENGTH = "Txn note should be no longer than 1000 characters."
9 | }
10 |
--------------------------------------------------------------------------------
/.env-cmdrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "common":{
3 | "REACT_APP_ALGOD_CLIENT_TOKEN":"",
4 | "REACT_APP_ALGOD_INDEXER_TOKEN":""
5 | },
6 | "development":{
7 | "HTTPS":true,
8 | "HOST":"dev.web.perawallet.app",
9 | "PORT":3000
10 | },
11 | "staging":{
12 | "GENERATE_SOURCEMAP":false,
13 | "REACT_APP_BUILD_ENVIRONMENT":"staging"
14 | },
15 | "production":{
16 | "GENERATE_SOURCEMAP":false,
17 | "REACT_APP_BUILD_ENVIRONMENT":"production"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/component/page/header/util/useShouldShowPageHeaderGoBackButton.tsx:
--------------------------------------------------------------------------------
1 | import {useLocation} from "react-router-dom";
2 |
3 | import {AVAILABLE_PAGE_HEADER_GO_BACK_ROUTES} from "./pageHeaderConstants";
4 |
5 | function useShouldShowPageHeaderGoBackButton() {
6 | const location = useLocation();
7 |
8 | return AVAILABLE_PAGE_HEADER_GO_BACK_ROUTES.some(
9 | (route) => route === location.pathname
10 | );
11 | }
12 |
13 | export default useShouldShowPageHeaderGoBackButton;
14 |
--------------------------------------------------------------------------------
/src/asset/opt-in/page/select-account/_asset-optin-select-account.scss:
--------------------------------------------------------------------------------
1 | @import "../../../../layouts/card-layout/_card-layout.scss";
2 |
3 | .asset-optin-select-account {
4 | @extend .card-layout;
5 |
6 | display: flex;
7 | flex-direction: column;
8 |
9 | width: 424px;
10 | height: 590px;
11 |
12 | padding: 0;
13 | }
14 |
15 | .asset-optin-select-account__go-back-button {
16 | padding: 28px 0 0;
17 | }
18 |
19 | .asset-optin-select-account__loader {
20 | margin: auto;
21 | }
22 |
--------------------------------------------------------------------------------
/src/component/tooltip/_tooltip.scss:
--------------------------------------------------------------------------------
1 | .tooltip {
2 | &.__react_component_tooltip {
3 | width: auto;
4 | max-width: 360px;
5 |
6 | padding: 10px 20px;
7 |
8 | background-color: var(--popover-bg);
9 | border: none;
10 | border-radius: 12px;
11 |
12 | &.place-top {
13 | &:before,
14 | &:after {
15 | border-top-color: var(--popover-bg);
16 | }
17 | }
18 | }
19 | }
20 |
21 | .tooltip-content {
22 | color: var(--popover-text);
23 | }
24 |
--------------------------------------------------------------------------------
/src/core/ui/icons/plus.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/asset/opt-in/components/list/item/_asset-optin-list-item.scss:
--------------------------------------------------------------------------------
1 | .asset-optin-list-item {
2 | .list-item__click-wrapper {
3 | cursor: auto;
4 | }
5 | }
6 |
7 | .asset-optin-list-item__optin-button {
8 | width: 48px;
9 |
10 | .checkmark-icon {
11 | flex-shrink: 0;
12 |
13 | path {
14 | fill: var(--text-gray-lighter);
15 | }
16 | }
17 |
18 | .plus-icon {
19 | flex-shrink: 0;
20 |
21 | path {
22 | fill: var(--text-gray);
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/account/page/import/passphrase/recovery/util/accountImportPassphraseRecoveryUtils.ts:
--------------------------------------------------------------------------------
1 | import {MNEMONIC_LENGTH} from "../../../../../util/accountConstants";
2 |
3 | function validatePassphraseForm({
4 | mnemonicKeys,
5 | mnemonicLength = MNEMONIC_LENGTH
6 | }: {
7 | mnemonicKeys: string[];
8 | mnemonicLength?: number;
9 | }) {
10 | return (
11 | mnemonicKeys.filter((key) => Boolean(key) && key.trim()).length === mnemonicLength
12 | );
13 | }
14 |
15 | export {validatePassphraseForm};
16 |
--------------------------------------------------------------------------------
/src/send-txn/components/textarea/_send-txn-note-textarea.scss:
--------------------------------------------------------------------------------
1 | @import "../../../core/ui/typography/_typography-mixins.scss";
2 |
3 | .send-txn-note__form-field {
4 | --textarea-height: 20px;
5 | --text-color: var(--text-main);
6 |
7 | .textarea {
8 | @include typography--medium-body();
9 |
10 | padding: 0;
11 |
12 | background-color: var(--input-bg);
13 |
14 | border: none;
15 |
16 | &::placeholder {
17 | color: var(--text-gray-lightest);
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/send-txn/page/send-txn/_send-txn.scss:
--------------------------------------------------------------------------------
1 | .send-txn {
2 | height: 600px;
3 | }
4 |
5 | .send-txn__heading {
6 | display: flex;
7 |
8 | margin-bottom: 32px;
9 |
10 | .button:active {
11 | background: none;
12 | }
13 |
14 | .button:focus {
15 | box-shadow: none;
16 | }
17 |
18 | .info-icon {
19 | path,
20 | circle {
21 | fill: var(--ghost-button-text);
22 | }
23 | }
24 | }
25 |
26 | .send-txn__header-icon path {
27 | fill: var(--helper-purple-900);
28 | }
29 |
--------------------------------------------------------------------------------
/src/core/reportWebVitals.ts:
--------------------------------------------------------------------------------
1 | import {ReportHandler} from "web-vitals";
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
5 | import("web-vitals").then(({getCLS, getFID, getFCP, getLCP, getTTFB}) => {
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
9 | getLCP(onPerfEntry);
10 | getTTFB(onPerfEntry);
11 | });
12 | }
13 | };
14 |
15 | export default reportWebVitals;
16 |
--------------------------------------------------------------------------------
/src/core/util/algosdk/algosdkUtils.ts:
--------------------------------------------------------------------------------
1 | // @ts-ignore wordlist is not exported from algosdk/types
2 | import ALGORAND_MNEMONIC_WORDLIST from "algosdk/dist/esm/mnemonic/wordlists/english";
3 |
4 | /**
5 | * Checks the given word exists in the mnemonic wordlist
6 | * @param {string} word string
7 | * @returns {boolean}
8 | */
9 | function isValidMnemonicWord(word: string): boolean {
10 | return ALGORAND_MNEMONIC_WORDLIST.includes(word);
11 | }
12 |
13 | export {ALGORAND_MNEMONIC_WORDLIST, isValidMnemonicWord};
14 |
--------------------------------------------------------------------------------
/src/component/modal/util/modalTypes.ts:
--------------------------------------------------------------------------------
1 | import {ModalProps} from "../Modal";
2 |
3 | type ModalPosition =
4 | | "center"
5 | | "top"
6 | | "top-left"
7 | | "top-right"
8 | | "right-center"
9 | | "bottom-right"
10 | | "bottom-center"
11 | | "bottom-left"
12 | | "left-center";
13 |
14 | interface ModalStackItem extends Omit
12 |
16 | ) : (
17 |
13 |
15 |
18 |
20 | );
21 | }
22 |
23 | export default CardLayout;
24 |
--------------------------------------------------------------------------------
/src/core/ui/icons/moon.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/core/ui/icons/activity.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/core/ui/icons/algo-asa.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/src/core/util/url/urlUtils.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Initiates URLSearchParams with the provided params object and stringifies it
3 | * @param {object} params A params object.
4 | * @returns {string} Stringified search string
5 | * @example
6 | *
7 | * stringifySearchParams({a: "123"})
8 | * // => "a=123"
9 | *
10 | * stringifySearchParams({a: 1, b: "test", c: true})
11 | * // => "a=1&b=test&c=true"
12 | */
13 | function stringifySearchParams
11 |
13 | ) : (
14 | {children}
12 | {children}
15 | );
16 | }
17 |
18 | export default CardLayoutWithoutRoute;
19 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2023 Pera Wallet, LDA.
2 |
3 | Licensed under the Apache License, Version 2.0 (the "License");
4 | you may not use this file except in compliance with the License.
5 | You may obtain a copy of the License at
6 |
7 | http://www.apache.org/licenses/LICENSE-2.0
8 |
9 | Unless required by applicable law or agreed to in writing, software
10 | distributed under the License is distributed on an "AS IS" BASIS,
11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | See the License for the specific language governing permissions and
13 | limitations under the License.
--------------------------------------------------------------------------------
/src/account/page/success/_account-success-page.scss:
--------------------------------------------------------------------------------
1 | .account-success-page__checkmark-animation {
2 | position: relative;
3 | left: -28px;
4 |
5 | width: 120px;
6 | height: 120px;
7 | }
8 |
9 | .account-success-page__header {
10 | display: flex;
11 | align-items: center;
12 | justify-content: space-between;
13 |
14 | margin-bottom: 48px;
15 | }
16 |
17 | .account-success-page__header-cta {
18 | padding: 14px 48px;
19 | }
20 |
21 | .account-success-page__explore-section {
22 | display: flex;
23 | flex-direction: column;
24 | gap: 28px;
25 |
26 | margin-top: 80px;
27 | }
28 |
--------------------------------------------------------------------------------
/src/explore/util/exploreConstants.ts:
--------------------------------------------------------------------------------
1 | import {TabItem} from "@hipo/react-ui-toolkit";
2 |
3 | const EXPLORE_CATEGORIES: TabItem[] = [
4 | {
5 | id: "recommended",
6 | content: "Recommended"
7 | },
8 | {
9 | id: "add_funds",
10 | content: "Add Funds"
11 | },
12 | {
13 | id: "browse_nfts",
14 | content: "Browse NFTs"
15 | },
16 | {
17 | id: "swap",
18 | content: "Swap"
19 | },
20 | {
21 | id: "stake",
22 | content: "Stake"
23 | }
24 | // {
25 | // id: "shop",
26 | // content: "Shop"
27 | // }
28 | ];
29 |
30 | export {EXPLORE_CATEGORIES};
31 |
--------------------------------------------------------------------------------
/src/component/info-box/_info-box.scss:
--------------------------------------------------------------------------------
1 | .info-box {
2 | display: flex;
3 | gap: 12px;
4 |
5 | padding: 16px 20px;
6 |
7 | background: var(--layer-1);
8 | border-radius: 16px;
9 | box-shadow: var(--shadow-2);
10 | }
11 |
12 | .info-box-icon {
13 | width: 28px;
14 | height: 28px;
15 |
16 | padding: 6px;
17 |
18 | background-color: var(--helper-blue-100);
19 | border-radius: 50%;
20 |
21 | .info-icon {
22 | path {
23 | fill: var(--helper-blue-900);
24 | }
25 | }
26 | }
27 |
28 | .info-box-content {
29 | display: flex;
30 | flex-direction: column;
31 | gap: 12px;
32 | }
33 |
--------------------------------------------------------------------------------
/src/core/ui/icons/save.svg:
--------------------------------------------------------------------------------
1 |
4 |
5 |
--------------------------------------------------------------------------------
/public/assets/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Pera Wallet",
3 | "short_name": "Pera Wallet",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "android-chrome-192x192.png",
12 | "sizes": "192x192",
13 | "type": "image/png"
14 | },
15 | {
16 | "src": "android-chrome-512x512.png",
17 | "sizes": "512x512",
18 | "type": "image/png"
19 | }
20 | ],
21 | "theme_color": "#F3F3F7",
22 | "background_color": "#F3F3F7",
23 | "display": "standalone"
24 | }
25 |
--------------------------------------------------------------------------------
/src/asset/opt-in/util/assetOptinUtils.ts:
--------------------------------------------------------------------------------
1 | import algosdk, {Transaction} from "algosdk";
2 |
3 | import algod from "../../../core/util/algod/algod";
4 |
5 | async function generateAssetOptinTxn(
6 | accountAddress: string,
7 | assetId: number
8 | ): Promise-
14 | {(item) => (
15 |
-
18 | {(word) =>
18 | {type === "warning" ? (
19 |
26 | );
27 | }
28 |
29 | export default TransactionSignDetailMessage;
30 |
--------------------------------------------------------------------------------
/src/settings/backup/flow/BackupFlow.tsx:
--------------------------------------------------------------------------------
1 | import {Routes, Route} from "react-router-dom";
2 |
3 | import ROUTES from "../../../core/route/routes";
4 | import CardLayout from "../../../layouts/card-layout/CardLayout";
5 | import BackupFile from "../page/backup-file/BackupFile";
6 | import BackupPassphrase from "../page/backup-passphrase/BackupPassphrase";
7 | import BackupSelectAccounts from "../page/select-accounts/BackupSelectAccounts";
8 |
9 | function BackupFlow() {
10 | return (
11 | {message}
25 |{renderBalance()}
;
17 |
18 | function renderBalance() {
19 | let balance = "-";
20 |
21 | if (preferredNetwork === "mainnet") {
22 | const presign = prefix?.concat(" ") || "";
23 |
24 | balance = `${presign}${usdFormatter(Number(value))}`;
25 | }
26 |
27 | return balance;
28 | }
29 | }
30 |
31 | export default FormatUSDBalance;
32 |
--------------------------------------------------------------------------------
/src/core/ui/style/override/hipo-ui-toolkit/_checkbox-input.scss:
--------------------------------------------------------------------------------
1 | .checkbox-input-label__icon {
2 | --checkbox-focus-bg: var(--primary-button-bg);
3 | --checkbox-focus-border-color: var(--gray-400);
4 | --checkbox-border-color: var(--gray-400);
5 |
6 | border-width: 2px;
7 | border-radius: 6px;
8 |
9 | &:hover {
10 | --checkbox-border-color: var(--primary-button-bg);
11 |
12 | transition: none;
13 | }
14 | }
15 |
16 | .checkbox-input-label--is-selected {
17 | .checkbox-input-label__icon {
18 | border: none;
19 | }
20 | }
21 |
22 | .dark-theme {
23 | .checkbox-input:focus ~ .checkbox-input-label__icon {
24 | --checkbox-focus-border-color: var(--white);
25 | }
26 |
27 | .checkbox-input-label__icon {
28 | .check-icon {
29 | display: none;
30 | }
31 | }
32 |
33 | .checkbox-input-label--is-selected {
34 | .checkbox-input-label__icon {
35 | .check-icon {
36 | display: block;
37 | }
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/core/ui/style/override/hipo-ui-toolkit/_input.scss:
--------------------------------------------------------------------------------
1 | @import "../../../typography/_typography-mixins.scss";
2 |
3 | :root {
4 | --input-bg: var(--layer-1);
5 | --input-border: var(--border-medium);
6 | --input-border-hover: var(--helper-purple-900);
7 | --input-border-error: var(--helper-red-900);
8 | --input-disabled-bg: var(--layer-3);
9 | }
10 |
11 | .input {
12 | @include typography--button();
13 |
14 | position: relative;
15 |
16 | height: 20px;
17 |
18 | padding: 0;
19 |
20 | color: var(--text-main);
21 | background-color: var(--input-bg);
22 | border: unset;
23 |
24 | .input-container__icon {
25 | height: 24px;
26 | }
27 |
28 | &::placeholder {
29 | color: var(--text-gray-lightest);
30 | }
31 |
32 | &:focus + .input-container__right-icon {
33 | display: block;
34 |
35 | width: auto;
36 | }
37 |
38 | &:autofill {
39 | background: var(--input-bg);
40 | box-shadow: 0 0 0 100px var(--input-bg) inset;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/core/util/device/deviceUtils.ts:
--------------------------------------------------------------------------------
1 | function isNavigatorAvailable() {
2 | return typeof navigator !== "undefined";
3 | }
4 |
5 | function isSmallMobileDevice() {
6 | return (
7 | isNavigatorAvailable() &&
8 | ((/Mobile/i.test(navigator.userAgent) && /Android/i.test(navigator.userAgent)) ||
9 | /iPhone/i.test(navigator.userAgent))
10 | );
11 | }
12 |
13 | function isFirefoxPrivate(): Promise11 | {title} 12 |
13 | 14 | {!!subtitle && ( 15 |16 | {subtitle} 17 |
18 | )} 19 | 20 |
21 |
28 |
30 |
31 | );
32 |
33 | function renderBanner() {
34 | if (customBanner) {
35 | return customBanner;
36 | }
37 |
38 | return
22 | {renderBanner()}
23 |
24 |
26 |
27 |
32 |
34 | ) : null;
35 | }
36 |
37 | export default RouteLoading;
38 |
--------------------------------------------------------------------------------
/src/core/ui/typography/_fonts.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Milan";
3 | src: url("./Milan/Milan-Bold.otf") format("opentype");
4 |
5 | font-weight: 700;
6 | font-style: normal;
7 | }
8 |
9 | @font-face {
10 | font-family: "DMSans";
11 | src: url("./DMSans/DMSans-Bold.ttf") format("truetype");
12 |
13 | font-weight: 700;
14 | font-style: normal;
15 | }
16 |
17 | @font-face {
18 | font-family: "Milan";
19 | src: url("./Milan/Milan-SemiBold.otf") format("opentype");
20 |
21 | font-weight: 600;
22 | font-style: normal;
23 | }
24 |
25 | @font-face {
26 | font-family: "Milan";
27 | src: url("./Milan/Milan-Medium.otf") format("opentype");
28 |
29 | font-weight: 500;
30 | font-style: normal;
31 | }
32 |
33 | @font-face {
34 | font-family: "Milan";
35 | src: url("./Milan/Milan-Regular.otf") format("opentype");
36 |
37 | font-weight: 400;
38 | font-style: normal;
39 | }
40 |
41 | @font-face {
42 | font-family: "Milan";
43 | src: url("./Milan/Milan-ExtraLight.otf") format("opentype");
44 |
45 | font-weight: 200;
46 | font-style: normal;
47 | }
48 |
--------------------------------------------------------------------------------
/src/core/util/algoExplorer/algoExplorerUtils.ts:
--------------------------------------------------------------------------------
1 | import {peraApi} from "../pera/api/peraApi";
2 |
3 | // TODO: remove this if all details can be seen via pera-explorer
4 | function generateAlgoExplorerLink(
5 | type: "group-id" | "txn-id" | "account-detail" | "asset-detail",
6 | id: string
7 | ): string {
8 | let baseURL = `https://testnet.algoexplorer.io/`;
9 |
10 | if (peraApi.network === "mainnet") {
11 | baseURL = baseURL.replace("testnet.", "");
12 | }
13 |
14 | switch (type) {
15 | case "txn-id":
16 | baseURL = `${baseURL}/tx/${encodeURIComponent(id)}`;
17 | break;
18 |
19 | case "group-id":
20 | baseURL = `${baseURL}/tx/group/${encodeURIComponent(id)}`;
21 | break;
22 |
23 | case "account-detail":
24 | baseURL = `${baseURL}/address/${encodeURIComponent(id)}`;
25 | break;
26 |
27 | case "asset-detail":
28 | baseURL = `${baseURL}/asset/${encodeURIComponent(id)}`;
29 | break;
30 |
31 | default:
32 | break;
33 | }
34 |
35 | return baseURL;
36 | }
37 |
38 | export {generateAlgoExplorerLink};
39 |
--------------------------------------------------------------------------------
/src/core/ui/style/color/_shadow.scss:
--------------------------------------------------------------------------------
1 | .light-theme {
2 | --shadow-1: 0 2px 6px rgba(var(--black-rgb), 0.12);
3 | --shadow-2: 0 0 0 1px rgba(var(--black-rgb), 0.05),
4 | 0 2px 4px rgba(var(--black-rgb), 0.04), 0 2px 4px -1px rgba(var(--black-rgb), 0.08);
5 | --shadow-3: 0 1px 2px rgba(var(--black-rgb), 0.06),
6 | 0 12px 52px rgba(var(--black-rgb), 0.16);
7 | --shadow-inline: inset 0 1px 1px rgba(var(--black-rgb), 0.04);
8 | --shadow-pressed: 0 0 0 3px rgba(172, 142, 255, 0.14);
9 | }
10 |
11 | .dark-theme {
12 | --shadow-1: 0 0 0 1px rgba(var(--white-rgb), 0.1), 0 2px 4px rgba(var(--black-rgb), 0.1),
13 | 0 2px 4px -1px rgba(var(--black-rgb), 0.16);
14 | --shadow-2: 0 0 0 1px rgba(var(--white-rgb), 0.16),
15 | 0 4px 8px rgba(var(--black-rgb), 0.08), 0 4px 28px rgba(var(--black-rgb), 0.28);
16 | --shadow-3: 0 0 0 1px rgba(var(--white-rgb), 0.16),
17 | 0 4px 8px rgba(var(--black-rgb), 0.4), 0 4px 30px rgba(var(--black-rgb), 0.4);
18 | --shadow-inline: inset 0 1px 1px rgba(var(--black-rgb), 0.04);
19 | --shadow-pressed: 0 0 0 3px rgba(172, 142, 255, 0.14);
20 | }
21 |
--------------------------------------------------------------------------------
/src/transaction/sign-box/view/default/review-txns/asset-list/_transaction-sign-assets-list.scss:
--------------------------------------------------------------------------------
1 | .transaction-sign-assets-list {
2 | &:not(:last-child) {
3 | margin-bottom: 18px;
4 | }
5 | }
6 |
7 | .transaction-sign-assets-list__tooltip {
8 | text-transform: none;
9 |
10 | .tooltip-trigger {
11 | display: flex;
12 | }
13 | }
14 |
15 | .transaction-sign-assets-list__subtitle {
16 | margin-bottom: 8px;
17 |
18 | &--with-tooltip {
19 | display: flex;
20 | align-items: center;
21 | gap: 6px;
22 |
23 | .info-icon {
24 | path {
25 | fill: var(--text-gray-lighter);
26 | }
27 | }
28 | }
29 | }
30 |
31 | .transaction-sign-assets-list__total-algo-value {
32 | display: grid;
33 | align-items: center;
34 | grid-template-columns: 40px auto;
35 | gap: 16px;
36 |
37 | padding: 12px 0;
38 | }
39 |
40 | .transaction-sign-assets-list__total-algo-value__warning {
41 | display: flex;
42 | align-items: center;
43 | gap: 4px;
44 |
45 | .warning-icon {
46 | path {
47 | fill: var(--helper-red-900);
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/account/component/list/empty/EmptyAccountList.tsx:
--------------------------------------------------------------------------------
1 | import {ReactComponent as EmptyWalletIcon} from "../../../../core/ui/icons/empty-wallet.svg";
2 | import {ReactComponent as PlusIcon} from "../../../../core/ui/icons/plus.svg";
3 |
4 | import "./_empty-account-list.scss";
5 |
6 | import LinkButton from "../../../../component/button/LinkButton";
7 | import ROUTES from "../../../../core/route/routes";
8 |
9 | function EmptyAccountList() {
10 | return (
11 |
12 |
23 |
27 |
28 | );
29 | }
30 |
31 | export default EmptyAccountList;
32 |
--------------------------------------------------------------------------------
/src/password/flow/PasswordFlow.tsx:
--------------------------------------------------------------------------------
1 | import {Routes, Route, Navigate} from "react-router-dom";
2 |
3 | import Page from "../../component/page/Page";
4 | import {withGoBackLink} from "../../core/route/context/NavigationContext";
5 | import ROUTES from "../../core/route/routes";
6 | import CardLayout from "../../layouts/card-layout/CardLayout";
7 | import PasswordAccessPage from "../page/access/PasswordAccessPage";
8 | import PasswordCreatePage from "../page/create/PasswordCreatePage";
9 |
10 | function PasswordFlow() {
11 | return (
12 | 15 | {"You have no accounts yet"} 16 |
17 | 18 |19 | {"Add your first account to Pera Web"} 20 |
21 | 22 |
12 |
19 | );
20 |
21 | function handleChangeView(id: string) {
22 | dispatchFormitoAction({
23 | type: "SET_FORM_VALUE",
24 | payload: {
25 | connectFlowAddImportAccountView: id as ConnectFlowAddImportAccountView
26 | }
27 | });
28 | }
29 | }
30 |
31 | export default ConnectPageTabViewImportOptionList;
32 |
--------------------------------------------------------------------------------
/src/core/util/prism/prismUtils.ts:
--------------------------------------------------------------------------------
1 | import {stringifySearchParams} from "../url/urlUtils";
2 |
3 | interface PrismOptions {
4 | height?: number;
5 | width?: number;
6 | quality?: number;
7 | cmd?: "resize_then_fit" | "resize_then_crop";
8 | }
9 |
10 | /**
11 | * Generate a Prism url.
12 | * @param {PrismOptions} options Provide options to customize the generated url
13 | * @returns {function} A function that expects a base url and returns the full Prism url.
14 | */
15 | // eslint-disable-next-line no-magic-numbers
16 | function generatePrismUrl({height, width, quality = 100, cmd}: PrismOptions) {
17 | const params: {w?: string; h?: string; quality: string; cmd?: PrismOptions["cmd"]} = {
18 | quality: `${quality}`
19 | };
20 |
21 | if (width) {
22 | params.w = `${width}`;
23 | }
24 |
25 | if (height) {
26 | params.h = `${height}`;
27 | }
28 |
29 | if (cmd) {
30 | params.cmd = cmd;
31 | }
32 |
33 | const searchString = stringifySearchParams(params as {[x: string]: string});
34 |
35 | return (url: string) => `${url}?${searchString}`;
36 | }
37 |
38 | export {generatePrismUrl};
39 |
--------------------------------------------------------------------------------
/src/layouts/sidebar/_sidebar-layout.scss:
--------------------------------------------------------------------------------
1 | @import "../../core/ui/typography/typography-mixins";
2 |
3 | .sidebar-layout {
4 | display: flex;
5 | flex-direction: column;
6 |
7 | width: 100vw;
8 | min-height: 100vh;
9 |
10 | &--hidden {
11 | .sidebar,
12 | .sidebar-layout__topbar {
13 | display: none;
14 | }
15 | }
16 |
17 | &--is-navigation-disable {
18 | .sidebar__nav-list-item {
19 | &:hover {
20 | background-color: unset;
21 | }
22 | }
23 |
24 | .sidebar__nav-link {
25 | @include text-color--gray-lighter();
26 |
27 | pointer-events: none;
28 |
29 | &:visited {
30 | color: var(--text-gray-light);
31 | }
32 |
33 | svg {
34 | path {
35 | fill: var(--text-gray-light);
36 | }
37 | }
38 | }
39 | }
40 | }
41 |
42 | .sidebar-layout__content {
43 | width: 100%;
44 |
45 | margin-top: 32px;
46 | padding-bottom: 40px;
47 | padding-left: var(--sidebar-width);
48 | }
49 |
50 | .sidebar-layout__body {
51 | width: max-content;
52 | max-width: 95%;
53 |
54 | margin: 0 auto;
55 | }
56 |
--------------------------------------------------------------------------------
/src/settings/transfer-mobile/modal/_transfer-mobile-info-modal.scss:
--------------------------------------------------------------------------------
1 | .transfer-mobile {
2 | display: flex;
3 | flex-direction: column;
4 |
5 | width: 424px;
6 | height: auto;
7 |
8 | .info-modal__description-list-item {
9 | &:first-child {
10 | .info-modal__description-list-item__icon-wrapper {
11 | background: transparent;
12 | }
13 | }
14 |
15 | .info-modal__description-list-item__icon-wrapper {
16 | .warning-icon {
17 | width: 24px;
18 | height: 24px;
19 |
20 | path {
21 | fill: var(--helper-red-900);
22 | }
23 | }
24 |
25 | .info-icon {
26 | path {
27 | fill: var(--text-gray-lighter);
28 | }
29 |
30 | circle {
31 | fill: var(--text-gray-lighter);
32 | }
33 | }
34 | }
35 | }
36 | }
37 |
38 | .transfer-mobile__title {
39 | margin: 8px 0 32px;
40 |
41 | text-align: center;
42 | }
43 |
44 | .transfer-mobile__icon {
45 | width: auto;
46 | height: 80px;
47 |
48 | margin-top: 28px;
49 | }
50 |
51 | .transfer-mobile__cta {
52 | width: 100%;
53 | }
54 |
--------------------------------------------------------------------------------
/src/component/confirmation-modal/_confirmation-modal.scss:
--------------------------------------------------------------------------------
1 | .confirmation-modal__wrapper,
2 | .confirmation-modal__body {
3 | display: flex;
4 | flex-direction: column;
5 | }
6 |
7 | .confirmation-modal__wrapper {
8 | width: 424px;
9 | height: 624px;
10 | }
11 |
12 | .confirmation-modal__body {
13 | align-items: center;
14 | gap: 16px;
15 |
16 | margin-top: 120px;
17 |
18 | white-space: pre-wrap;
19 | }
20 |
21 | .confirmation-modal__icon-wrapper {
22 | display: grid;
23 | place-content: center;
24 |
25 | width: 106px;
26 | height: 106px;
27 |
28 | margin-bottom: 16px;
29 |
30 | border-radius: 100%;
31 | box-shadow: var(--shadow-1);
32 |
33 | .info-icon {
34 | path {
35 | fill: var(--helper-purple-900);
36 | }
37 | }
38 | }
39 |
40 | .confirmation-modal__cta-group {
41 | display: grid;
42 |
43 | gap: 16px;
44 |
45 | margin-top: auto;
46 | padding-top: 16px;
47 |
48 | &:before {
49 | position: absolute;
50 | top: -16px;
51 | left: -30px;
52 | right: -30px;
53 |
54 | border: 1px solid var(--border-default);
55 |
56 | content: "";
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/core/ui/icons/node.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/core/ui/icons/twitter.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/account/component/account-passphrase-box/_account-passphrase-box.scss:
--------------------------------------------------------------------------------
1 | .account-passphrase-box {
2 | .clipboard-button__content {
3 | .copy-icon {
4 | width: 20px;
5 | height: 20px;
6 |
7 | path {
8 | fill: var(--light-button-text);
9 | }
10 | }
11 | }
12 | }
13 |
14 | .account-passphrase-box__passphrase-list {
15 | display: grid;
16 | grid-template: repeat(9, 1fr) / repeat(3, auto);
17 | grid-gap: 8px 12px;
18 |
19 | grid-auto-flow: column;
20 |
21 | margin: 24px auto 40px;
22 | padding: 24px 8px;
23 |
24 | background-color: var(--layer-2);
25 |
26 | border-radius: 12px;
27 | box-shadow: var(--shadow-inline);
28 |
29 | counter-reset: item;
30 | }
31 |
32 | .account-passphrase-box__passphrase-list-item {
33 | user-select: none;
34 |
35 | transform: translateX(28px);
36 | list-style-type: none;
37 |
38 | &:before {
39 | margin-right: 8px;
40 |
41 | color: var(--text-gray-lighter);
42 |
43 | content: counter(item) " ";
44 | counter-increment: item;
45 | }
46 |
47 | &:nth-child(8n + 1):not(:last-child) {
48 | grid-row: 1;
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/account/page/import/AccountImportLandingPage.tsx:
--------------------------------------------------------------------------------
1 | import "./_account-import-landing-page.scss";
2 |
3 | import AccountImportOnboardingOptionList from "../../component/onboarding-option-list/AccountImportOnboardingOptionList";
4 | import {withGoBackLink} from "../../../core/route/context/NavigationContext";
5 | import ROUTES from "../../../core/route/routes";
6 |
7 | function AccountImportLandingPage({title, subtitle}: {title: string; subtitle?: string}) {
8 | return (
9 | {"Add Account"}
13 | 14 |
10 |
28 | );
29 | }
30 |
31 | export default withGoBackLink(AccountImportLandingPage, ROUTES.ACCOUNT.ROUTE);
32 |
--------------------------------------------------------------------------------
/src/asset/opt-in/components/account-link/_asset-optin-account-link.scss:
--------------------------------------------------------------------------------
1 | .asset-optin-account-link {
2 | position: fixed;
3 | bottom: 0;
4 | left: 0;
5 |
6 | width: 100%;
7 |
8 | margin-top: auto;
9 | padding: 18px 0;
10 |
11 | background-color: var(--background);
12 |
13 | border-top: 1px solid var(--border-default);
14 |
15 | &,
16 | &:visited {
17 | color: currentcolor;
18 | }
19 | }
20 |
21 | .asset-optin-account-link__content {
22 | display: flex;
23 | justify-content: space-between;
24 |
25 | width: 424px;
26 |
27 | margin: auto;
28 | }
29 |
30 | .asset-optin-account-link__name {
31 | display: flex;
32 | align-items: center;
33 | gap: 16px;
34 | }
35 |
36 | .asset-optin-account-link__balance {
37 | display: flex;
38 | align-items: center;
39 | gap: 16px;
40 |
41 | .chevron-right-icon path {
42 | fill: var(--text-main);
43 | }
44 | }
45 |
46 | .asset-optin-account-link__balance-warning {
47 | display: flex;
48 | align-items: center;
49 | gap: 4px;
50 |
51 | color: var(--helper-red-900);
52 |
53 | .warning-icon path {
54 | fill: var(--helper-red-900);
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/component/loader/pera/PeraLoader.tsx:
--------------------------------------------------------------------------------
1 | import grayPeraLoaderAnimation from "../../../core/ui/animation/Pera_Loader_Gray.json";
2 | import colorfulPeraLoaderAnimation from "../../../core/ui/animation/Pera_Loader_Colorful.json";
3 | import "./_pera-loader.scss";
4 |
5 | import Lottie from "lottie-react";
6 | import classNames from "classnames";
7 |
8 | interface PeraLoaderProps {
9 | mode: "gray" | "colorful";
10 | customClassName?: string;
11 | }
12 |
13 | function PeraLoader({mode, customClassName}: PeraLoaderProps) {
14 | const source = mode === "gray" ? grayPeraLoaderAnimation : colorfulPeraLoaderAnimation;
15 | const loader = (
16 | 14 | {title} 15 |
16 | 17 | {!!subtitle && ( 18 |22 | {subtitle} 23 |
24 | )} 25 | 26 |
29 | {loader}
30 |
31 | );
32 | }
33 |
34 | return loader;
35 | }
36 |
37 | export default PeraLoader;
38 |
--------------------------------------------------------------------------------
/src/core/ui/icons/add-funds.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/core/ui/icons/pera-transfer.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/component/info-box/InfoBox.tsx:
--------------------------------------------------------------------------------
1 | import "./_info-box.scss";
2 |
3 | import {ReactComponent as InfoIcon} from "../../core/ui/icons/info.svg";
4 |
5 | import classNames from "classnames";
6 |
7 | interface InfoBoxProps {
8 | infoText: string;
9 | title?: string;
10 | icon?: React.ReactNode;
11 | children?: React.ReactNode;
12 | className?: string;
13 | }
14 |
15 | function InfoBox({title, infoText, icon, className, children}: InfoBoxProps) {
16 | const infoBoxClassname = classNames("info-box", className);
17 |
18 | return (
19 |
20 |
36 | );
37 | }
38 |
39 | export default InfoBox;
40 |
--------------------------------------------------------------------------------
/src/account/component/account-passphrase-box/AccountPassphraseBox.tsx:
--------------------------------------------------------------------------------
1 | import "./_account-passphrase-box.scss";
2 |
3 | import {List, ListItem} from "@hipo/react-ui-toolkit";
4 |
5 | import ClipboardButton from "../../../component/clipboard/button/ClipboardButton";
6 |
7 | function AccountPassphraseBox({
8 | passphrase,
9 | displayCopyToClipboard = false
10 | }: {
11 | passphrase: string;
12 | displayCopyToClipboard?: boolean;
13 | }) {
14 | return (
15 |
21 | {icon ||
23 |
24 |
25 | {title && (
26 |
35 | {title}
27 | )} 28 | 29 |30 | {infoText} 31 |
32 | 33 | {children} 34 |
16 |
29 | {"Copy passphrase"}
30 |
31 | )}
32 |
33 | );
34 | }
35 |
36 | export default AccountPassphraseBox;
37 |
--------------------------------------------------------------------------------
/src/component/pera-connect-banner/_pera-connect-banner.scss:
--------------------------------------------------------------------------------
1 | @import "../../core/ui/typography/_typography-mixins.scss";
2 |
3 | .pera-connect-banner {
4 | display: grid;
5 | align-items: center;
6 | justify-content: center;
7 | grid-template-columns: 24px auto;
8 | gap: 16px;
9 |
10 | width: 100%;
11 |
12 | padding: 20px 46px;
13 |
14 | color: var(--white);
15 | background-color: var(--gray-800);
16 |
17 | text-align: center;
18 |
19 | animation: 0.3s slide-animation-for-banner ease-out;
20 | }
21 |
22 | .pera-connect-banner__app-meta__favicon {
23 | width: 24px;
24 | height: 24px;
25 |
26 | object-fit: cover;
27 |
28 | overflow: hidden;
29 |
30 | border-radius: 100%;
31 | }
32 |
33 | .pera-connect-banner__app-meta__favicon__placeholder {
34 | @include typography--tagline();
35 |
36 | display: grid;
37 | place-content: center;
38 |
39 | width: 24px;
40 | height: 24px;
41 |
42 | padding: 2px;
43 |
44 | background-color: var(--layer-2);
45 | border-radius: 50%;
46 | }
47 |
48 | @keyframes slide-animation-for-banner {
49 | 0% {
50 | opacity: 0;
51 | }
52 |
53 | 100% {
54 | opacity: 1;
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/send-txn/page/confirm-txn/_send-txn-confirm.scss:
--------------------------------------------------------------------------------
1 | .send-txn-confirm {
2 | width: 424px;
3 | }
4 |
5 | .send-txn-confirm__amount {
6 | display: grid;
7 | place-content: center;
8 |
9 | gap: 8px;
10 |
11 | width: 100%;
12 | height: 95px;
13 |
14 | color: var(--text-gray);
15 | background: var(--helper-purple-100);
16 |
17 | border-radius: 12px;
18 |
19 | &-algo {
20 | color: var(--helper-purple-900);
21 | }
22 | }
23 |
24 | .send-txn-confirm__list {
25 | display: grid;
26 | gap: 16px;
27 |
28 | margin: 28px 0 48px;
29 |
30 | word-break: break-word;
31 | }
32 |
33 | .send-txn-confirm__list-item {
34 | display: flex;
35 | justify-content: space-between;
36 |
37 | padding-bottom: 16px;
38 |
39 | &:not(:last-child) {
40 | border-bottom: 1px solid var(--border-default);
41 | }
42 | }
43 |
44 | .send-txn-confirm__list-item-content {
45 | display: flex;
46 | flex-direction: column;
47 |
48 | gap: 2px;
49 |
50 | max-width: 36ch; /* stylelint-disable-line unit-allowed-list */
51 |
52 | text-align: right;
53 | }
54 |
55 | .send-txn-confirm__txn-note {
56 | max-height: 200px;
57 |
58 | overflow-y: auto;
59 | }
60 |
--------------------------------------------------------------------------------
/src/core/ui/style/override/hipo-ui-toolkit/_tab.scss:
--------------------------------------------------------------------------------
1 | @import "../../../typography/_typography-mixins.scss";
2 |
3 | .tab {
4 | .tab-header-item {
5 | @include typography--subhead();
6 |
7 | position: relative;
8 |
9 | color: var(--text-gray);
10 |
11 | .list-item__click-wrapper {
12 | padding-bottom: 16px;
13 |
14 | transition: color var(--default-animation);
15 | }
16 |
17 | &:before {
18 | position: absolute;
19 | bottom: -1px;
20 | left: 0;
21 |
22 | width: 100%;
23 | height: 0;
24 |
25 | background-color: transparent;
26 |
27 | content: "";
28 |
29 | transition: all var(--default-animation);
30 | }
31 |
32 | &--is-active,
33 | &:hover,
34 | &:focus {
35 | color: var(--purple-500);
36 |
37 | &:before {
38 | height: 2px;
39 |
40 | background-color: var(--purple-500);
41 | }
42 |
43 | .list-item__click-wrapper {
44 | color: var(--purple-500);
45 | }
46 | }
47 | }
48 |
49 | &__header {
50 | border-bottom: 1px solid var(--gray-200);
51 | }
52 |
53 | &__body {
54 | margin-top: 32px;
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/account/component/account-limit-warning-banner/_account-limit-warning-banner.scss:
--------------------------------------------------------------------------------
1 | .account-limit-warning-banner {
2 | position: relative;
3 |
4 | display: flex;
5 | gap: 12px;
6 |
7 | height: 84px;
8 |
9 | margin: 20px 0 16px;
10 | padding: 16px 20px;
11 |
12 | background: var(--layer-1);
13 |
14 | border-radius: 16px;
15 | box-shadow: var(--shadow-1);
16 | }
17 |
18 | .account-limit-warning-banner__danger-icon-wrapper {
19 | display: flex;
20 | align-items: center;
21 | justify-content: center;
22 |
23 | width: 28px;
24 | height: 28px;
25 |
26 | background-color: var(--helper-pink-100);
27 | border-radius: 100%;
28 |
29 | .danger-icon {
30 | path {
31 | fill: var(--helper-pink-900);
32 | }
33 | }
34 | }
35 |
36 | .account-limit-warning-banner__body__title {
37 | color: var(--helper-pink-900);
38 | }
39 |
40 | .account-limit-warning-banner__close-button {
41 | --button-height: fit-content;
42 | --button-width: fit-content;
43 |
44 | position: absolute;
45 |
46 | top: 16px;
47 | right: 20px;
48 |
49 | padding: 0;
50 |
51 | .close-icon {
52 | path {
53 | fill: var(--text-gray);
54 | }
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/core/ui/icons/account-ledger.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/core/ui/icons/pera-sync.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/account/page/import/ledger/modal/device-search/_ledger-device-search-modal.scss:
--------------------------------------------------------------------------------
1 | @import "../../../../../../core/ui/typography/typography-mixins";
2 |
3 | .ledger-device-search-modal {
4 | display: flex;
5 | align-items: space-between;
6 |
7 | width: 424px;
8 | height: 624px;
9 |
10 | padding-top: 144px;
11 |
12 | .info-modal__icon-wrapper {
13 | width: fit-content;
14 | height: fit-content;
15 |
16 | background: transparent;
17 |
18 | box-shadow: unset;
19 | }
20 |
21 | .info-modal__title {
22 | height: 28px;
23 | }
24 |
25 | .info-modal__description-box {
26 | height: 172px;
27 |
28 | margin-top: auto;
29 |
30 | .info-modal__description-list-item {
31 | &:first-child {
32 | @include typography--medium-body();
33 | }
34 |
35 | &:not(:first-child) {
36 | color: var(--text-gray-lighter);
37 | }
38 | }
39 |
40 | .tip-icon {
41 | path {
42 | fill: var(--helper-purple-900);
43 | }
44 | }
45 |
46 | .info-icon {
47 | path {
48 | fill: var(--text-gray-lighter);
49 | }
50 | }
51 | }
52 |
53 | .info-modal__cta-group {
54 | display: none;
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/connect/view/tab/add-import-account/onboarding-option-list/ConnectPageOnboardingOptionList.tsx:
--------------------------------------------------------------------------------
1 | import "./_connect-page-onboarding-option-list.scss";
2 |
3 | import AccountPageOnboardingOptionList from "../../../../../overview/page/welcome/account-page-onboarding-option-list/AccountPageOnboardingOptionList";
4 | import {
5 | ConnectFlowAddImportAccountView,
6 | useConnectFlowContext
7 | } from "../../../../context/ConnectFlowContext";
8 |
9 | function ConnectPageOnboardingOptionList() {
10 | const {dispatchFormitoAction} = useConnectFlowContext();
11 |
12 | return (
13 | -
20 | {(word) => (
21 |
14 |
23 | );
24 |
25 | function handleChangeView(id: string) {
26 | dispatchFormitoAction({
27 | type: "SET_FORM_VALUE",
28 | payload: {
29 | connectFlowAddImportAccountView: id as ConnectFlowAddImportAccountView
30 | }
31 | });
32 | }
33 | }
34 |
35 | export default ConnectPageOnboardingOptionList;
36 |
--------------------------------------------------------------------------------
/src/password/util/passwordUtils.ts:
--------------------------------------------------------------------------------
1 | export const PASSWORD_VALIDATION_REGEX =
2 | /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[_\W])[a-zA-Z\d_\W]{12,}$/;
3 |
4 | const VALIDATION_MESSAGE =
5 | "Minimum of 12 characters, at least 1 lowercase, 1 uppercase letter, 1 number and 1 special character.";
6 | const CONFIRMATION_MESSAGE = "Passwords do not match.";
7 |
8 | type PasswordCreateFormValidationInfo = Record<
9 | "message" | "password" | "passwordConfirmation",
10 | string[]
11 | >;
12 |
13 | function validatePasswordCreateForm(
14 | password: string,
15 | passwordConfirmation: string
16 | ): PasswordCreateFormValidationInfo {
17 | const validationInfo: PasswordCreateFormValidationInfo = {
18 | message: [VALIDATION_MESSAGE] as string[],
19 | password: [] as string[],
20 | passwordConfirmation: [] as string[]
21 | };
22 |
23 | if (password !== passwordConfirmation && password && passwordConfirmation) {
24 | validationInfo.passwordConfirmation.push(CONFIRMATION_MESSAGE);
25 | }
26 |
27 | if (!password.match(PASSWORD_VALIDATION_REGEX)) {
28 | validationInfo.password.push(VALIDATION_MESSAGE);
29 | }
30 |
31 | return validationInfo;
32 | }
33 |
34 | export {validatePasswordCreateForm};
35 |
--------------------------------------------------------------------------------
/src/core/util/hook/useAlgoPricePolling.tsx:
--------------------------------------------------------------------------------
1 | import {useAppContext} from "../../app/AppContext";
2 | import useAsyncProcess from "../../network/async-process/useAsyncProcess";
3 | import {peraApi} from "../pera/api/peraApi";
4 | import {CurrencyInformation} from "../pera/api/peraApiModels";
5 | import {MINUTE_IN_MS} from "../time/timeConstants";
6 | import useInterval from "./useInterval";
7 |
8 | // eslint-disable-next-line no-magic-numbers
9 | const CURRENCY_POLLING_INTERVAL = 5 * MINUTE_IN_MS;
10 |
11 | function useAlgoPricePolling() {
12 | const {dispatch} = useAppContext();
13 | const {runAsyncProcess} = useAsyncProcess18 | {"Add Account"} 19 |
20 | 21 |
9 |
12 | 
17 |
18 |
19 | {"Pera Web Wallet is not supported on Firefox Private Browsing"}
20 |
21 |
22 |
23 | {"Please use a different browser or switch to regular browsing mode."}
24 |
25 |
26 |
27 | );
28 | }
29 |
30 | export default FirefoxIncognitoLandingPage;
31 |
--------------------------------------------------------------------------------
/src/component/page/header/_page-header.scss:
--------------------------------------------------------------------------------
1 | @import "../../../core/ui/typography/_typography-mixins.scss";
2 |
3 | .page-header {
4 | display: flex;
5 | justify-content: space-between;
6 |
7 | width: 100%;
8 |
9 | padding: 19px 24px 13px;
10 |
11 | background-color: var(--background);
12 | border-radius: 24px 24px 0 0;
13 | box-shadow: transparent;
14 |
15 | transition: box-shadow 0.25 ease;
16 | }
17 |
18 | .page-header--has-scrolled {
19 | box-shadow: var(--shadow-2);
20 |
21 | transition: box-shadow 0.25 ease;
22 | }
23 |
24 | .page-header__indicator-group {
25 | display: flex;
26 | justify-content: flex-end;
27 | gap: 16px;
28 | }
29 |
30 | .page-header__go-back-button {
31 | @include typography--button();
32 |
33 | gap: 8px;
34 |
35 | margin-left: 20px;
36 | padding: 10px;
37 |
38 | .arrow-left-icon {
39 | width: 16px;
40 | height: 16px;
41 |
42 | path {
43 | fill: var(--ghost-button-text);
44 | }
45 | }
46 |
47 | &:before {
48 | display: inline-block;
49 |
50 | width: 1px;
51 | height: 30px;
52 |
53 | border-left: 1px solid var(--helper-gray-200);
54 |
55 | content: " ";
56 |
57 | transform: translateX(-16px);
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/settings/transfer-mobile/modal/transferMobileInfoModalConstants.tsx:
--------------------------------------------------------------------------------
1 | import {ReactComponent as WarningIcon} from "../../../core/ui/icons/warning.svg";
2 | import {ReactComponent as InfoIcon} from "../../../core/ui/icons/info.svg";
3 |
4 | const TRANSFER_MOBILE_INFO_MODAL_ID = "transfer-mobile-info-modal";
5 |
6 | const TRANSFER_MOBILE_INFO_MODAL_TIPS = [
7 | {
8 | id: "sensitive-data-warning",
9 | icon: