From d404d3648556ef34afe4192227174bd5dc038f75 Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Fri, 9 Feb 2024 11:06:44 -0700 Subject: [PATCH 01/21] refactors set allowed flow for new preview designs --- extension/src/popup/basics/Modal/styles.scss | 12 ++-- .../src/popup/components/ModalInfo/index.tsx | 10 ++- .../popup/components/ModalInfo/styles.scss | 34 ++++++++-- .../components/WarningMessages/styles.scss | 7 ++- .../identicons/KeyIdenticon/styles.scss | 2 +- .../index.tsx} | 63 +++++++++---------- .../src/popup/views/GrantAccess/styles.scss | 15 +++++ 7 files changed, 94 insertions(+), 49 deletions(-) rename extension/src/popup/views/{GrantAccess.tsx => GrantAccess/index.tsx} (58%) create mode 100644 extension/src/popup/views/GrantAccess/styles.scss diff --git a/extension/src/popup/basics/Modal/styles.scss b/extension/src/popup/basics/Modal/styles.scss index f1444b71fe..e72739de75 100644 --- a/extension/src/popup/basics/Modal/styles.scss +++ b/extension/src/popup/basics/Modal/styles.scss @@ -1,5 +1,5 @@ :root { - --buttons-container-height: 5.5rem; + --buttons-container-height: 3rem; } .ModalWrapper { @@ -7,7 +7,10 @@ box-sizing: border-box; &__scrollbar { - height: calc(var(--popup--height) - var(--buttons-container-height)); + height: 100vh; + display: flex; + align-items: end; + justify-content: center; } &__disable-scroll-x { @@ -21,9 +24,8 @@ &__buttons-container { display: flex; - gap: 0.75rem; + gap: 0.5rem; height: var(--buttons-container-height); - justify-content: space-around; - padding: 1rem 1.5rem; + padding: 0.5rem 0; } } diff --git a/extension/src/popup/components/ModalInfo/index.tsx b/extension/src/popup/components/ModalInfo/index.tsx index e56abde37f..a220d2d7bd 100644 --- a/extension/src/popup/components/ModalInfo/index.tsx +++ b/extension/src/popup/components/ModalInfo/index.tsx @@ -1,7 +1,8 @@ import React from "react"; -import { Card } from "@stellar/design-system"; +import { Card, Icon } from "@stellar/design-system"; import { PunycodedDomain } from "popup/components/PunycodedDomain"; +import { FirstTimeWarningMessage } from "popup/components/WarningMessages"; import "./styles.scss"; @@ -22,6 +23,13 @@ export const ModalInfo = ({
+
+
+ +

Connection Request

+
+
+
{subject}
{children} diff --git a/extension/src/popup/components/ModalInfo/styles.scss b/extension/src/popup/components/ModalInfo/styles.scss index b2262af85d..7f99db00e2 100644 --- a/extension/src/popup/components/ModalInfo/styles.scss +++ b/extension/src/popup/components/ModalInfo/styles.scss @@ -1,14 +1,36 @@ .ModalInfo { + &--connection-request { + display: flex; + justify-content: center; + margin-bottom: 0.75rem; + } + + &--connection-request-pill { + display: flex; + align-items: center; + padding: 0 0.5rem; + background-color: var(--color-gray-30); + color: var(--color-gray-70); + border-color: var(--color-gray-50); + border-radius: 6px; + margin-bottom: 0.5rem; + line-height: 1.25rem; + + p { + font-size: 0.75rem; + margin-left: 0.25rem; + } + } + &--subject { - border-bottom: 1px solid var(--color-gray-30); - color: var(--color-gray-90); + font-size: 0.75rem; + color: var(--color-gray-70); + background-color: var(--color-gray-30); + border-radius: 6px; line-height: 1.5rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; + padding: 0.5rem; text-align: center; } - - &--card { - margin-bottom: 2rem; - } } diff --git a/extension/src/popup/components/WarningMessages/styles.scss b/extension/src/popup/components/WarningMessages/styles.scss index 3c257868a1..197d60e196 100644 --- a/extension/src/popup/components/WarningMessages/styles.scss +++ b/extension/src/popup/components/WarningMessages/styles.scss @@ -32,12 +32,12 @@ &__infoBlock { background: #32275f; - border: none; + border: 1px solid; border-radius: 0.5rem; color: var(--color-white) !important; font-size: 0.875rem; margin-bottom: 1rem; - padding: 0.875rem; + padding: 0.5rem; &--high-alert { background: rgba(241, 50, 50, 0.32); @@ -48,7 +48,8 @@ } &--warning { - background: rgba(241, 165, 50, 0.32); + border-color: rgba(241, 165, 50, 0.32); + background-color: rgba(94, 58, 4, 0.32); .WarningMessage__icon { color: rgba(241, 165, 50, 1); diff --git a/extension/src/popup/components/identicons/KeyIdenticon/styles.scss b/extension/src/popup/components/identicons/KeyIdenticon/styles.scss index 8bdee3f071..22a433d905 100644 --- a/extension/src/popup/components/identicons/KeyIdenticon/styles.scss +++ b/extension/src/popup/components/identicons/KeyIdenticon/styles.scss @@ -1,6 +1,6 @@ .KeyIdenticon { --Icon-padding: 0.25rem; - --Icon-dimension: 2rem; + --Icon-dimension: 1.5rem; align-items: center; display: flex; diff --git a/extension/src/popup/views/GrantAccess.tsx b/extension/src/popup/views/GrantAccess/index.tsx similarity index 58% rename from extension/src/popup/views/GrantAccess.tsx rename to extension/src/popup/views/GrantAccess/index.tsx index ab12b806f8..3aefca7129 100644 --- a/extension/src/popup/views/GrantAccess.tsx +++ b/extension/src/popup/views/GrantAccess/index.tsx @@ -9,18 +9,14 @@ import { getUrlHostname, parsedSearchParam } from "helpers/urls"; import { rejectAccess, grantAccess } from "popup/ducks/access"; import { publicKeySelector } from "popup/ducks/accountServices"; -import { - ButtonsContainer, - ModalHeader, - ModalWrapper, -} from "popup/basics/Modal"; +import { ButtonsContainer, ModalWrapper } from "popup/basics/Modal"; import { ModalInfo } from "popup/components/ModalInfo"; -import { FirstTimeWarningMessage } from "popup/components/WarningMessages"; import { KeyIdenticon } from "popup/components/identicons/KeyIdenticon"; import "popup/metrics/access"; +import "./styles.scss"; export const GrantAccess = () => { const { t } = useTranslation(); @@ -49,39 +45,40 @@ export const GrantAccess = () => { return ( <> - - {t("Share Public Key")} - - - +
+
Signing with
+
+ +
+
+ + + + - - - - ); }; diff --git a/extension/src/popup/views/GrantAccess/styles.scss b/extension/src/popup/views/GrantAccess/styles.scss new file mode 100644 index 0000000000..0ad837b371 --- /dev/null +++ b/extension/src/popup/views/GrantAccess/styles.scss @@ -0,0 +1,15 @@ +.GrantAccess { + &__SigningWith { + display: flex; + flex-direction: column; + } + + &__PublicKey { + padding: 0.5rem; + padding: 0.25rem 0.5rem; + border-radius: 7px; + border: 1px solid; + margin-top: 10px; + border-color: var(--color-gray-40); + } +} From d32632298fe3bd8c30728c7371a85ad69f70870b Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Fri, 9 Feb 2024 14:15:13 -0700 Subject: [PATCH 02/21] adds Tabs component and first pass at summary preview tab --- extension/package.json | 1 + .../popup/components/ModalInfo/styles.scss | 4 +- .../components/PunycodedDomain/styles.scss | 3 +- extension/src/popup/components/Tabs/index.tsx | 32 +++++ .../src/popup/components/Tabs/styles.scss | 42 ++++++ .../SignTransaction/Preview/Summary/index.tsx | 51 +++++++ .../Preview/Summary/styles.scss | 70 ++++++++++ .../src/popup/views/SignTransaction/index.tsx | 125 ++++++++++++++---- .../popup/views/SignTransaction/styles.scss | 76 ++++++++++- yarn.lock | 5 + 10 files changed, 378 insertions(+), 31 deletions(-) create mode 100644 extension/src/popup/components/Tabs/index.tsx create mode 100644 extension/src/popup/components/Tabs/styles.scss create mode 100644 extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx create mode 100644 extension/src/popup/views/SignTransaction/Preview/Summary/styles.scss diff --git a/extension/package.json b/extension/package.json index 42ba556aa4..756b3667c0 100644 --- a/extension/package.json +++ b/extension/package.json @@ -42,6 +42,7 @@ "@types/yup": "^0.29.2", "bignumber.js": "^9.1.1", "buffer": "^6.0.3", + "classnames": "^2.5.1", "concurrently": "^5.1.0", "copy-webpack-plugin": "^5.1.1", "css-loader": "^5.0.0", diff --git a/extension/src/popup/components/ModalInfo/styles.scss b/extension/src/popup/components/ModalInfo/styles.scss index 7f99db00e2..abf613548a 100644 --- a/extension/src/popup/components/ModalInfo/styles.scss +++ b/extension/src/popup/components/ModalInfo/styles.scss @@ -9,9 +9,9 @@ display: flex; align-items: center; padding: 0 0.5rem; - background-color: var(--color-gray-30); + background-color: var(--color-gray-20); color: var(--color-gray-70); - border-color: var(--color-gray-50); + border: 1px solid var(--color-gray-30); border-radius: 6px; margin-bottom: 0.5rem; line-height: 1.25rem; diff --git a/extension/src/popup/components/PunycodedDomain/styles.scss b/extension/src/popup/components/PunycodedDomain/styles.scss index c039d24709..26c5f2b0c3 100644 --- a/extension/src/popup/components/PunycodedDomain/styles.scss +++ b/extension/src/popup/components/PunycodedDomain/styles.scss @@ -3,7 +3,6 @@ display: flex; flex-direction: column; justify-content: center; - margin-bottom: 0.5rem; &--row { flex-direction: row; @@ -26,6 +25,6 @@ } div { - margin-bottom: 1rem; + margin-bottom: 0.25rem; } } diff --git a/extension/src/popup/components/Tabs/index.tsx b/extension/src/popup/components/Tabs/index.tsx new file mode 100644 index 0000000000..fef0d6b8d2 --- /dev/null +++ b/extension/src/popup/components/Tabs/index.tsx @@ -0,0 +1,32 @@ +import React, { ReactNode } from "react"; +import classnames from "classnames"; + +import "./styles.scss"; + +interface TabsProps { + tabs: string[]; + renderTab: (tab: string) => ReactNode; +} + +export const Tabs = (props: TabsProps) => { + const [activeTab, setActiveTab] = React.useState(props.tabs[0]); + return ( +
+
+ {props.tabs.map((tab) => { + const classes = classnames("Tab", { Active: activeTab === tab }); + return ( +
setActiveTab(tab)} + > + {tab} +
+ ); + })} +
+
{props.renderTab(activeTab)}
+
+ ); +}; diff --git a/extension/src/popup/components/Tabs/styles.scss b/extension/src/popup/components/Tabs/styles.scss new file mode 100644 index 0000000000..36c23532b5 --- /dev/null +++ b/extension/src/popup/components/Tabs/styles.scss @@ -0,0 +1,42 @@ +.Tabs { + width: 100%; + display: flex; + flex-direction: column; + + &__Selectors { + display: flex; + height: 25px; + border: 1px solid var(--color-gray-40); + border-radius: 4px; + font-size: 0.8rem; + font-weight: 600; + margin-bottom: 1rem; + + .Tab { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + padding: 0.25rem; + cursor: pointer; + + &.Active { + background-color: var(--color-gray-40); + } + + &:first-child { + border-right: 1px solid var(--color-gray-40); + } + + &:last-child { + border-left: 1px solid var(--color-gray-40); + } + } + } + + &__Body { + display: flex; + flex-grow: 1; + margin-bottom: 10px; + } +} diff --git a/extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx b/extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx new file mode 100644 index 0000000000..2bd7bcd2b1 --- /dev/null +++ b/extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx @@ -0,0 +1,51 @@ +import React from "react"; + +import "./styles.scss"; +import { Icon } from "@stellar/design-system"; +import { stroopToXlm } from "helpers/stellar"; + +interface SummaryProps { + operationNames: string[]; + fee: string; + sequenceNumber: string; +} + +export const Summary = (props: SummaryProps) => ( +
+
Operations
+
+ {props.operationNames.map((opName) => ( +
+ +

{opName}

+
+ ))} +
+
Transaction Info
+
+
+
+ +

Operations

+
+

{props.operationNames.length}

+
+
+
+ +

Fees

+
+

+ {stroopToXlm(props.fee).toString()} XLM +

+
+
+
+ +

Sequence #

+
+

{props.sequenceNumber}

+
+
+
+); diff --git a/extension/src/popup/views/SignTransaction/Preview/Summary/styles.scss b/extension/src/popup/views/SignTransaction/Preview/Summary/styles.scss new file mode 100644 index 0000000000..e4667a07d2 --- /dev/null +++ b/extension/src/popup/views/SignTransaction/Preview/Summary/styles.scss @@ -0,0 +1,70 @@ +.SummaryBody { + width: 100%; + display: flex; + flex-direction: column; + border-radius: 4px; + background-color: var(--color-gray-40); + padding: 1rem; + overflow-y: scroll; + + h5 { + color: var(--color-gray-70); + } + + .Operations { + display: flex; + flex-direction: column; + margin-bottom: 1rem; + + .OpName { + display: flex; + align-items: center; + margin-bottom: 0.25rem; + + &:first-child { + margin-top: 0.5rem; + } + + svg { + fill: var(--color-gray-60); + } + + p { + font-size: 0.75rem; + margin-left: 0.5rem; + } + } + } + + .TxInfo { + display: flex; + flex-direction: column; + margin-top: 0.5rem; + + .TxInfoBlock { + display: flex; + justify-content: space-between; + + &__title { + display: flex; + align-items: center; + + svg { + fill: var(--color-gray-60); + } + + p { + font-size: 0.75rem; + margin-left: 0.5rem; + } + } + + &__value { + font-size: 0.75rem; + color: var( + --color-gray-70 + ) !important; //sds rule does not allwo changing colors on p tags + } + } + } +} diff --git a/extension/src/popup/views/SignTransaction/index.tsx b/extension/src/popup/views/SignTransaction/index.tsx index c3f3b29c18..5524a91381 100644 --- a/extension/src/popup/views/SignTransaction/index.tsx +++ b/extension/src/popup/views/SignTransaction/index.tsx @@ -1,8 +1,8 @@ -import React, { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect } from "react"; import { useLocation } from "react-router-dom"; import { useSelector } from "react-redux"; import { useTranslation, Trans } from "react-i18next"; -import { Button, Card, Icon, Notification } from "@stellar/design-system"; +import { Button, Icon } from "@stellar/design-system"; import { FeeBumpTransaction, MuxedAccount, @@ -22,48 +22,51 @@ import { import { ShowOverlayStatus } from "popup/ducks/transactionSubmission"; -import { TRANSACTION_WARNING } from "constants/transaction"; +import { OPERATION_TYPES, TRANSACTION_WARNING } from "constants/transaction"; import { emitMetric } from "helpers/metrics"; import { getTransactionInfo, isFederationAddress, isMuxedAccount, - truncatedPublicKey, + // truncatedPublicKey, } from "helpers/stellar"; import { decodeMemo } from "popup/helpers/parseTransaction"; import { useSetupSigningFlow } from "popup/helpers/useSetupSigningFlow"; -import { TransactionHeading } from "popup/basics/TransactionHeading"; +// import { TransactionHeading } from "popup/basics/TransactionHeading"; import { METRIC_NAMES } from "popup/constants/metricsNames"; -import { AccountListIdenticon } from "popup/components/identicons/AccountListIdenticon"; -import { AccountList, OptionTag } from "popup/components/account/AccountList"; +// import { AccountListIdenticon } from "popup/components/identicons/AccountListIdenticon"; +// import { AccountList, OptionTag } from "popup/components/account/AccountList"; import { PunycodedDomain } from "popup/components/PunycodedDomain"; import { WarningMessageVariant, WarningMessage, - FirstTimeWarningMessage, - FlaggedWarningMessage, - TransferWarning, + // FirstTimeWarningMessage, + // FlaggedWarningMessage, + // TransferWarning, } from "popup/components/WarningMessages"; -import { Transaction as SignTxTransaction } from "popup/components/signTransaction/Transaction"; +// import { Transaction as SignTxTransaction } from "popup/components/signTransaction/Transaction"; import { HardwareSign } from "popup/components/hardwareConnect/HardwareSign"; -import { SlideupModal } from "popup/components/SlideupModal"; -import { View } from "popup/basics/layout/View"; +import { KeyIdenticon } from "popup/components/identicons/KeyIdenticon"; +// import { SlideupModal } from "popup/components/SlideupModal"; +// import { View } from "popup/basics/layout/View"; import { VerifyAccount } from "popup/views/VerifyAccount"; import "./styles.scss"; import { FlaggedKeys } from "types/transactions"; -import { TransactionInfo } from "popup/components/signTransaction/TransactionInfo"; +import { Tabs } from "popup/components/Tabs"; +import { Summary } from "./Preview/Summary"; +// import { TransactionInfo } from "popup/components/signTransaction/TransactionInfo"; export const SignTransaction = () => { const location = useLocation(); const { t } = useTranslation(); - const [isDropdownOpen, setIsDropdownOpen] = useState(false); + // const [isDropdownOpen, setIsDropdownOpen] = useState(false); const isExperimentalModeEnabled = useSelector( settingsExperimentalModeSelector, @@ -78,7 +81,7 @@ export const SignTransaction = () => { accountToSign: _accountToSign, transactionXdr, domain, - isDomainListedAllowed, + // isDomainListedAllowed, isHttpsDomain, flaggedKeys, } = tx; @@ -98,13 +101,14 @@ export const SignTransaction = () => { const { fee: _fee, networkPassphrase: _networkPassphrase } = transaction; let isFeeBump = false; - let _innerTransaction; + let _innerTransaction = {}; let _memo = {}; - let _sequence; + let _sequence = ""; if ("innerTransaction" in transaction) { _innerTransaction = transaction.innerTransaction; isFeeBump = true; + console.log(isFeeBump, _innerTransaction); } else { _sequence = transaction.sequence; _memo = transaction.memo; @@ -116,12 +120,12 @@ export const SignTransaction = () => { let accountToSign = _accountToSign; const { - allAccounts, - accountNotFound, + // allAccounts, + // accountNotFound, currentAccount, isConfirming, isPasswordRequired, - publicKey, + // publicKey, handleApprove, hwStatus, rejectAndClose, @@ -223,6 +227,35 @@ export const SignTransaction = () => { ); } + function renderTab(tab: string) { + // TODO: split for FeeBumpTx + const _tx = transaction as Transaction, Operation[]>; + switch (tab) { + case "Summary": { + return ( + OPERATION_TYPES[op.type] || op.type, + )} + /> + ); + } + + case "Details": { + return
Details
; + } + + case "Data": { + return
Data
; + } + + default: + return <>; + } + } + return isPasswordRequired ? ( { {hwStatus === ShowOverlayStatus.IN_PROGRESS && hardwareWalletType && ( )} - - - +
+
+
+ +
+
+ +

Transaction Request

+
+
+
+ +
+
+
Signing with
+
+ +
+
+
+ + +
+
+
+ + {/* {!isFeeBump ? ( { setIsDropdownOpen={setIsDropdownOpen} />
- - + */} +
); }; diff --git a/extension/src/popup/views/SignTransaction/styles.scss b/extension/src/popup/views/SignTransaction/styles.scss index 0b14a73124..606e45cb95 100644 --- a/extension/src/popup/views/SignTransaction/styles.scss +++ b/extension/src/popup/views/SignTransaction/styles.scss @@ -1,7 +1,53 @@ .SignTransaction { - height: var(--popup--height); + height: 100vh; overflow: hidden; position: relative; + padding: 1rem; + background-color: var(--color-gray-20); + display: flex; + justify-content: center; + + &__Title { + display: flex; + flex-direction: column; + height: 130px; + } + + .Tabs { + width: 100%; + flex-grow: 1; + } + + &__Body { + display: flex; + flex-direction: column; + margin-top: 2rem; + max-width: 57rem; + width: 100%; + } + + &--connection-request { + display: flex; + justify-content: center; + margin-bottom: 0.75rem; + } + + &--connection-request-pill { + display: flex; + align-items: center; + padding: 0 0.5rem; + background-color: var(--color-gray-20); + color: var(--color-gray-70); + border: 1px solid var(--color-gray-30); + border-radius: 6px; + margin-bottom: 0.5rem; + line-height: 1.25rem; + + p { + font-size: 0.75rem; + margin-left: 0.25rem; + } + } .Blob { display: -webkit-box; @@ -65,4 +111,32 @@ &__account-not-found { margin-top: 1rem; } + + &__Actions { + display: flex; + flex-direction: column; + align-self: flex-end; + width: 100%; + height: 130px; + + &__SigningWith { + display: flex; + flex-direction: column; + } + + &__PublicKey { + padding: 0.5rem; + padding: 0.25rem 0.5rem; + border-radius: 7px; + border: 1px solid; + margin-top: 10px; + border-color: var(--color-gray-40); + } + + &__BtnRow { + display: flex; + margin-top: 10px; + gap: 0.5rem; + } + } } diff --git a/yarn.lock b/yarn.lock index 224b1074e2..028290889e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6261,6 +6261,11 @@ cjs-module-lexer@^1.0.0: resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz" integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA== +classnames@^2.5.1: + version "2.5.1" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b" + integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow== + clean-css@4.2.x, clean-css@^4.2.3: version "4.2.3" resolved "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz" From 845fe6857b532f9cdfb0863c7eb74a5b8a3a6fdc Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Fri, 9 Feb 2024 14:49:25 -0700 Subject: [PATCH 03/21] first pass at preview detail tab --- .../Operations/KeyVal/index.tsx | 2 +- .../signTransaction/Operations/index.tsx | 7 ++--- .../signTransaction/Operations/styles.scss | 21 ++++++++++----- .../SignTransaction/Preview/Details/index.tsx | 26 +++++++++++++++++++ .../Preview/Details/styles.scss | 10 +++++++ .../src/popup/views/SignTransaction/index.tsx | 9 ++++++- 6 files changed, 63 insertions(+), 12 deletions(-) create mode 100644 extension/src/popup/views/SignTransaction/Preview/Details/index.tsx create mode 100644 extension/src/popup/views/SignTransaction/Preview/Details/styles.scss diff --git a/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx b/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx index 3554d04db4..bc00ee9686 100644 --- a/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx +++ b/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx @@ -107,7 +107,7 @@ export const KeyValueList = ({ operationValue: string | number | React.ReactNode; }) => (
-
{operationKey}:
+
{operationKey}
{operationValue}
); diff --git a/extension/src/popup/components/signTransaction/Operations/index.tsx b/extension/src/popup/components/signTransaction/Operations/index.tsx index 968e0a3b9c..f0ec4c6f26 100644 --- a/extension/src/popup/components/signTransaction/Operations/index.tsx +++ b/extension/src/popup/components/signTransaction/Operations/index.tsx @@ -137,7 +137,7 @@ export const Operations = ({ /> ); @@ -745,8 +745,9 @@ export const Operations = ({ return (
- - {operationIndex}. {OPERATION_TYPES[type] || type} + + + {OPERATION_TYPES[type] || type}
diff --git a/extension/src/popup/components/signTransaction/Operations/styles.scss b/extension/src/popup/components/signTransaction/Operations/styles.scss index eb00508f66..dcedc35eec 100644 --- a/extension/src/popup/components/signTransaction/Operations/styles.scss +++ b/extension/src/popup/components/signTransaction/Operations/styles.scss @@ -5,19 +5,26 @@ margin-bottom: 1.5rem; &--header { - color: var(--color-gray-90); + display: flex; + align-items: center; + color: var(--color-gray-60); line-height: 1.5rem; - margin-bottom: 1rem; + margin-bottom: 0.5rem; + + .OpType { + font-weight: 600; + margin-left: 0.5rem; + } } &--item { display: flex; flex-direction: column; - gap: 1rem; + gap: 0.25rem; & > .Operations__pair { align-items: center; - color: var(--color-gray-60); + color: var(--color-gray-90); display: flex; justify-content: space-between; line-height: 1.5rem; @@ -25,7 +32,7 @@ &--invoke { flex-direction: column; align-items: baseline; - color: var(--color-gray-60); + color: var(--color-gray-90); display: flex; justify-content: space-between; line-height: 1.5rem; @@ -40,7 +47,7 @@ } & > :nth-child(2) { - color: var(--color-gray-90); + color: var(--color-gray-60); } } } @@ -60,7 +67,7 @@ gap: 0.5rem; &--item { - color: var(--color-gray-60); + color: var(--color-gray-90); font-size: 0.75rem; line-height: 1.5rem; flex-direction: column; diff --git a/extension/src/popup/views/SignTransaction/Preview/Details/index.tsx b/extension/src/popup/views/SignTransaction/Preview/Details/index.tsx new file mode 100644 index 0000000000..c750b958e0 --- /dev/null +++ b/extension/src/popup/views/SignTransaction/Preview/Details/index.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import { Operation } from "stellar-sdk"; + +import "./styles.scss"; +import { Operations } from "popup/components/signTransaction/Operations"; +import { FlaggedKeys } from "types/transactions"; + +interface DetailsProps { + operations: Operation[]; + flaggedKeys: FlaggedKeys; + isMemoRequired: boolean; +} + +export const Details = ({ + operations, + flaggedKeys, + isMemoRequired, +}: DetailsProps) => ( +
+ +
+); diff --git a/extension/src/popup/views/SignTransaction/Preview/Details/styles.scss b/extension/src/popup/views/SignTransaction/Preview/Details/styles.scss new file mode 100644 index 0000000000..5f333e8a09 --- /dev/null +++ b/extension/src/popup/views/SignTransaction/Preview/Details/styles.scss @@ -0,0 +1,10 @@ +.DetailsBody { + width: 100%; + display: flex; + flex-direction: column; + border-radius: 4px; + background-color: var(--color-gray-40); + padding: 1rem; + overflow-y: scroll; + font-size: 0.75rem; +} diff --git a/extension/src/popup/views/SignTransaction/index.tsx b/extension/src/popup/views/SignTransaction/index.tsx index 5524a91381..f7ed0bf2db 100644 --- a/extension/src/popup/views/SignTransaction/index.tsx +++ b/extension/src/popup/views/SignTransaction/index.tsx @@ -60,6 +60,7 @@ import "./styles.scss"; import { FlaggedKeys } from "types/transactions"; import { Tabs } from "popup/components/Tabs"; import { Summary } from "./Preview/Summary"; +import { Details } from "./Preview/Details"; // import { TransactionInfo } from "popup/components/signTransaction/TransactionInfo"; export const SignTransaction = () => { @@ -244,7 +245,13 @@ export const SignTransaction = () => { } case "Details": { - return
Details
; + return ( +
+ ); } case "Data": { From e4d6fd56b87ff7d67b80e548509b2c8f1eb2770d Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Fri, 9 Feb 2024 15:18:40 -0700 Subject: [PATCH 04/21] first pass at data tab --- .../SignTransaction/Preview/Data/index.tsx | 18 +++++++++++++++++ .../SignTransaction/Preview/Data/styles.scss | 20 +++++++++++++++++++ .../Preview/Details/styles.scss | 2 +- .../Preview/Summary/styles.scss | 2 +- .../src/popup/views/SignTransaction/index.tsx | 3 ++- .../popup/views/SignTransaction/styles.scss | 2 +- 6 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 extension/src/popup/views/SignTransaction/Preview/Data/index.tsx create mode 100644 extension/src/popup/views/SignTransaction/Preview/Data/styles.scss diff --git a/extension/src/popup/views/SignTransaction/Preview/Data/index.tsx b/extension/src/popup/views/SignTransaction/Preview/Data/index.tsx new file mode 100644 index 0000000000..a8704008bf --- /dev/null +++ b/extension/src/popup/views/SignTransaction/Preview/Data/index.tsx @@ -0,0 +1,18 @@ +import React from "react"; + +import "./styles.scss"; +import { Icon } from "@stellar/design-system"; + +interface DataProps { + xdr: string; +} + +export const Data = ({ xdr }: DataProps) => ( +
+
+
Raw XDR
+ +
+
{xdr}
+
+); diff --git a/extension/src/popup/views/SignTransaction/Preview/Data/styles.scss b/extension/src/popup/views/SignTransaction/Preview/Data/styles.scss new file mode 100644 index 0000000000..db2d81f5d7 --- /dev/null +++ b/extension/src/popup/views/SignTransaction/Preview/Data/styles.scss @@ -0,0 +1,20 @@ +.DataBody { + width: 100%; + display: flex; + flex-direction: column; + border-radius: 4px; + background-color: var(--color-gray-20); + padding: 1rem; + overflow-y: scroll; + + &__TitleRow { + display: flex; + justify-content: space-between; + } + + &__Xdr { + overflow-wrap: break-word; + font-size: 0.75rem; + margin-top: 1rem; + } +} diff --git a/extension/src/popup/views/SignTransaction/Preview/Details/styles.scss b/extension/src/popup/views/SignTransaction/Preview/Details/styles.scss index 5f333e8a09..78d7f4d02d 100644 --- a/extension/src/popup/views/SignTransaction/Preview/Details/styles.scss +++ b/extension/src/popup/views/SignTransaction/Preview/Details/styles.scss @@ -3,7 +3,7 @@ display: flex; flex-direction: column; border-radius: 4px; - background-color: var(--color-gray-40); + background-color: var(--color-gray-20); padding: 1rem; overflow-y: scroll; font-size: 0.75rem; diff --git a/extension/src/popup/views/SignTransaction/Preview/Summary/styles.scss b/extension/src/popup/views/SignTransaction/Preview/Summary/styles.scss index e4667a07d2..a032d6649b 100644 --- a/extension/src/popup/views/SignTransaction/Preview/Summary/styles.scss +++ b/extension/src/popup/views/SignTransaction/Preview/Summary/styles.scss @@ -3,7 +3,7 @@ display: flex; flex-direction: column; border-radius: 4px; - background-color: var(--color-gray-40); + background-color: var(--color-gray-20); padding: 1rem; overflow-y: scroll; diff --git a/extension/src/popup/views/SignTransaction/index.tsx b/extension/src/popup/views/SignTransaction/index.tsx index f7ed0bf2db..7d56b46385 100644 --- a/extension/src/popup/views/SignTransaction/index.tsx +++ b/extension/src/popup/views/SignTransaction/index.tsx @@ -61,6 +61,7 @@ import { FlaggedKeys } from "types/transactions"; import { Tabs } from "popup/components/Tabs"; import { Summary } from "./Preview/Summary"; import { Details } from "./Preview/Details"; +import { Data } from "./Preview/Data"; // import { TransactionInfo } from "popup/components/signTransaction/TransactionInfo"; export const SignTransaction = () => { @@ -255,7 +256,7 @@ export const SignTransaction = () => { } case "Data": { - return
Data
; + return ; } default: diff --git a/extension/src/popup/views/SignTransaction/styles.scss b/extension/src/popup/views/SignTransaction/styles.scss index 606e45cb95..b6b7b41c10 100644 --- a/extension/src/popup/views/SignTransaction/styles.scss +++ b/extension/src/popup/views/SignTransaction/styles.scss @@ -3,7 +3,7 @@ overflow: hidden; position: relative; padding: 1rem; - background-color: var(--color-gray-20); + background-color: var(--color-gray-10); display: flex; justify-content: center; From 36f4c7f08a44c412c04e8ffeec79f36e7e758048 Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Fri, 9 Feb 2024 15:19:32 -0700 Subject: [PATCH 05/21] Added translations --- extension/src/popup/locales/en/translation.json | 11 ++--------- extension/src/popup/locales/pt/translation.json | 11 ++--------- 2 files changed, 4 insertions(+), 18 deletions(-) diff --git a/extension/src/popup/locales/en/translation.json b/extension/src/popup/locales/en/translation.json index 81a0a03692..d3f3c7721a 100644 --- a/extension/src/popup/locales/en/translation.json +++ b/extension/src/popup/locales/en/translation.json @@ -94,9 +94,9 @@ "Confirm removing Network": "Confirm removing Network", "Confirm Send": "Confirm Send", "Confirm Swap": "Confirm Swap", - "Confirm Transaction": "Confirm Transaction", "Confirm your recovery phrase": "Confirm your recovery phrase", "congestion": "congestion", + "Connect": "Connect", "Connect device to computer": "Connect device to computer", "CONNECTION ERROR": "CONNECTION ERROR", "Continue": "Continue", @@ -215,7 +215,6 @@ "invalid public key": "invalid public key", "INVALID STELLAR ADDRESS": "INVALID STELLAR ADDRESS", "Invocation Type": "Invocation Type", - "is requesting approval to a": "is requesting approval to a", "is requesting approval to sign a blob of data": "is requesting approval to sign a blob of data", "is requesting approval to sign an authorization entry": "is requesting approval to sign an authorization entry", "Issuer": "Issuer", @@ -380,9 +379,8 @@ "Set recommended": "Set recommended", "Settings": "Settings", "Settings > Preferences": "Settings > Preferences", - "Share": "Share", - "Share Public Key": "Share Public Key", "Show recovery phrase": "Show recovery phrase", + "Sign": "Sign", "Signed Payload": "Signed Payload", "Signer": "Signer", "Signer Key": "Signer Key", @@ -437,7 +435,6 @@ "This is a relatively new asset": "This is a relatively new asset.", "This new backup phrase will be used for your new accounts": "This new backup phrase will be used for your new accounts.", "This transaction could not be completed": "This transaction could not be completed.", - "This website wants to know data about your account": "This website wants to know data about your account", "To": "To", "To create a new account you need to send at least 1 XLM to it": "To create a new account you need to send at least 1 XLM to it.", "To create this account, fund it with a minimum of 1 XLM": "To create this account, fund it with a minimum of 1 XLM.", @@ -450,7 +447,6 @@ "Transaction": "Transaction", "Transaction failed": "Transaction failed", "Transaction fee": "Transaction fee", - "Transaction Info": "Transaction Info", "Transaction sequence number": "Transaction sequence number", "Transactions": "Transactions", "Trustline Error": "Trustline Error", @@ -481,9 +477,6 @@ "You are attempting to sign arbitrary data": { " Please use extreme caution and understand the implications of signing this data": "You are attempting to sign arbitrary data. Please use extreme caution and understand the implications of signing this data." }, - "You are interacting with a transaction that may be using untested and changing schemas": { - " Proceed at your own risk": "You are interacting with a transaction that may be using untested and changing schemas. Proceed at your own risk." - }, "You are interacting with data that may be using untested and changing schemas": { " Proceed at your own risk": "You are interacting with data that may be using untested and changing schemas. Proceed at your own risk." }, diff --git a/extension/src/popup/locales/pt/translation.json b/extension/src/popup/locales/pt/translation.json index 786ac7444f..9ff392a795 100644 --- a/extension/src/popup/locales/pt/translation.json +++ b/extension/src/popup/locales/pt/translation.json @@ -94,9 +94,9 @@ "Confirm removing Network": "Confirm removing Network", "Confirm Send": "Confirm Send", "Confirm Swap": "Confirm Swap", - "Confirm Transaction": "Confirm Transaction", "Confirm your recovery phrase": "Confirm your recovery phrase", "congestion": "congestion", + "Connect": "Connect", "Connect device to computer": "Connect device to computer", "CONNECTION ERROR": "CONNECTION ERROR", "Continue": "Continue", @@ -215,7 +215,6 @@ "invalid public key": "invalid public key", "INVALID STELLAR ADDRESS": "INVALID STELLAR ADDRESS", "Invocation Type": "Invocation Type", - "is requesting approval to a": "is requesting approval to a", "is requesting approval to sign a blob of data": "is requesting approval to sign a blob of data", "is requesting approval to sign an authorization entry": "is requesting approval to sign an authorization entry", "Issuer": "Issuer", @@ -380,9 +379,8 @@ "Set recommended": "Set recommended", "Settings": "Settings", "Settings > Preferences": "Settings > Preferences", - "Share": "Share", - "Share Public Key": "Share Public Key", "Show recovery phrase": "Show recovery phrase", + "Sign": "Sign", "Signed Payload": "Signed Payload", "Signer": "Signer", "Signer Key": "Signer Key", @@ -437,7 +435,6 @@ "This is a relatively new asset": "This is a relatively new asset.", "This new backup phrase will be used for your new accounts": "This new backup phrase will be used for your new accounts.", "This transaction could not be completed": "This transaction could not be completed.", - "This website wants to know data about your account": "This website wants to know data about your account", "To": "To", "To create a new account you need to send at least 1 XLM to it": "To create a new account you need to send at least 1 XLM to it.", "To create this account, fund it with a minimum of 1 XLM": "To create this account, fund it with a minimum of 1 XLM.", @@ -450,7 +447,6 @@ "Transaction": "Transaction", "Transaction failed": "Transaction failed", "Transaction fee": "Transaction fee", - "Transaction Info": "Transaction Info", "Transaction sequence number": "Transaction sequence number", "Transactions": "Transactions", "Trustline Error": "Trustline Error", @@ -481,9 +477,6 @@ "You are attempting to sign arbitrary data": { " Please use extreme caution and understand the implications of signing this data": "You are attempting to sign arbitrary data. Please use extreme caution and understand the implications of signing this data." }, - "You are interacting with a transaction that may be using untested and changing schemas": { - " Proceed at your own risk": "You are interacting with a transaction that may be using untested and changing schemas. Proceed at your own risk." - }, "You are interacting with data that may be using untested and changing schemas": { " Proceed at your own risk": "You are interacting with data that may be using untested and changing schemas. Proceed at your own risk." }, From 93a1df320ab808bb29a61cf09f3f41facfc2ee0d Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Mon, 12 Feb 2024 12:12:26 -0700 Subject: [PATCH 06/21] adds auth review route and component, wip auth review details --- extension/src/popup/Router.tsx | 4 + .../src/popup/components/Tabs/styles.scss | 2 + .../Operations/KeyVal/index.tsx | 1 - .../signTransaction/Operations/index.tsx | 2 +- .../signTransaction/Operations/styles.scss | 5 +- extension/src/popup/constants/metricsNames.ts | 1 + extension/src/popup/constants/routes.ts | 1 + extension/src/popup/helpers/soroban.ts | 2 +- extension/src/popup/metrics/views.ts | 1 + .../src/popup/views/ReviewAuth/index.tsx | 152 ++++++++++++++++++ .../src/popup/views/ReviewAuth/styles.scss | 79 +++++++++ .../SignTransaction/Preview/Data/index.tsx | 6 +- .../SignTransaction/Preview/Summary/index.tsx | 8 +- .../src/popup/views/SignTransaction/index.tsx | 52 ++++-- 14 files changed, 295 insertions(+), 21 deletions(-) create mode 100644 extension/src/popup/views/ReviewAuth/index.tsx create mode 100644 extension/src/popup/views/ReviewAuth/styles.scss diff --git a/extension/src/popup/Router.tsx b/extension/src/popup/Router.tsx index 304d2f6a52..9561bf3f60 100644 --- a/extension/src/popup/Router.tsx +++ b/extension/src/popup/Router.tsx @@ -69,6 +69,7 @@ import { AccountMigration } from "popup/views/AccountMigration"; import "popup/metrics/views"; import { DEV_SERVER } from "@shared/constants/services"; import { SignBlob } from "./views/SignBlob"; +import { ReviewAuth } from "./views/ReviewAuth"; export const PublicKeyRoute = (props: RouteProps) => { const location = useLocation(); @@ -274,6 +275,9 @@ export const Router = () => { + + + diff --git a/extension/src/popup/components/Tabs/styles.scss b/extension/src/popup/components/Tabs/styles.scss index 36c23532b5..9d7ff55bb4 100644 --- a/extension/src/popup/components/Tabs/styles.scss +++ b/extension/src/popup/components/Tabs/styles.scss @@ -38,5 +38,7 @@ display: flex; flex-grow: 1; margin-bottom: 10px; + height: 230px; + overflow-y: auto; } } diff --git a/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx b/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx index bc00ee9686..8f80b8ae9f 100644 --- a/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx +++ b/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx @@ -314,7 +314,6 @@ export const KeyValueInvokeHostFn = ({ }: { op: Operation.InvokeHostFunction; }) => { - // TODO: render sub-invocation/auth const { t } = useTranslation(); const authEntries = op.auth || []; const hostfn = op.func; diff --git a/extension/src/popup/components/signTransaction/Operations/index.tsx b/extension/src/popup/components/signTransaction/Operations/index.tsx index f0ec4c6f26..6ba6a7f31d 100644 --- a/extension/src/popup/components/signTransaction/Operations/index.tsx +++ b/extension/src/popup/components/signTransaction/Operations/index.tsx @@ -745,7 +745,7 @@ export const Operations = ({ return (
- + {OPERATION_TYPES[type] || type} diff --git a/extension/src/popup/components/signTransaction/Operations/styles.scss b/extension/src/popup/components/signTransaction/Operations/styles.scss index dcedc35eec..53d230a93c 100644 --- a/extension/src/popup/components/signTransaction/Operations/styles.scss +++ b/extension/src/popup/components/signTransaction/Operations/styles.scss @@ -1,9 +1,12 @@ .Operations { display: flex; flex-direction: column; - gap: 2rem; margin-bottom: 1.5rem; + &--wrapper { + margin-bottom: 1.5rem; + } + &--header { display: flex; align-items: center; diff --git a/extension/src/popup/constants/metricsNames.ts b/extension/src/popup/constants/metricsNames.ts index aec259c14a..4cf523674e 100644 --- a/extension/src/popup/constants/metricsNames.ts +++ b/extension/src/popup/constants/metricsNames.ts @@ -19,6 +19,7 @@ export const METRIC_NAMES = { viewRecoverAccount: "loaded screen: recover account", viewRecoverAccountSuccess: "loaded screen: recover account: success", viewSignTransaction: "loaded screen: sign transaction", + viewReviewAuthorization: "loaded screen: review authorization", viewSignBlob: "loaded screen: sign blob", viewSignAuthEntry: "loaded screen: sign auth entry", viewUnlockAccount: "loaded screen: unlock account", diff --git a/extension/src/popup/constants/routes.ts b/extension/src/popup/constants/routes.ts index 6e5d679abe..f71a988922 100644 --- a/extension/src/popup/constants/routes.ts +++ b/extension/src/popup/constants/routes.ts @@ -25,6 +25,7 @@ export enum ROUTES { swapConfirm = "/swap/confirm", addAccount = "/add-account", signTransaction = "/sign-transaction", + reviewAuthorization = "/review-auth", signBlob = "/sign-blob", signAuthEntry = "/sign-auth-entry", grantAccess = "/grant-access", diff --git a/extension/src/popup/helpers/soroban.ts b/extension/src/popup/helpers/soroban.ts index 6d94fde700..051a76c1e0 100644 --- a/extension/src/popup/helpers/soroban.ts +++ b/extension/src/popup/helpers/soroban.ts @@ -212,7 +212,7 @@ export const isContractId = (contractId: string) => { } }; -interface InvocationTree { +export interface InvocationTree { type: string; args: any; invocations: InvocationTree[]; diff --git a/extension/src/popup/metrics/views.ts b/extension/src/popup/metrics/views.ts index 512f01cd42..ea66b3e538 100644 --- a/extension/src/popup/metrics/views.ts +++ b/extension/src/popup/metrics/views.ts @@ -19,6 +19,7 @@ const routeToEventName = { [ROUTES.connectDevice]: METRIC_NAMES.viewConnectDevice, [ROUTES.signBlob]: METRIC_NAMES.viewSignBlob, [ROUTES.signTransaction]: METRIC_NAMES.viewSignTransaction, + [ROUTES.reviewAuthorization]: METRIC_NAMES.viewSignTransaction, [ROUTES.signAuthEntry]: METRIC_NAMES.viewSignAuthEntry, [ROUTES.grantAccess]: METRIC_NAMES.viewGrantAccess, [ROUTES.mnemonicPhrase]: METRIC_NAMES.viewMnemonicPhrase, diff --git a/extension/src/popup/views/ReviewAuth/index.tsx b/extension/src/popup/views/ReviewAuth/index.tsx new file mode 100644 index 0000000000..516bb6f202 --- /dev/null +++ b/extension/src/popup/views/ReviewAuth/index.tsx @@ -0,0 +1,152 @@ +import React from "react"; +import { useLocation } from "react-router-dom"; +import { + Operation, + StrKey, + Transaction, + TransactionBuilder, + xdr, +} from "stellar-sdk"; +import { useSelector } from "react-redux"; + +import { decodeString } from "helpers/urls"; +import { Icon } from "@stellar/design-system"; +import { PunycodedDomain } from "popup/components/PunycodedDomain"; +import { settingsNetworkDetailsSelector } from "popup/ducks/settings"; + +import "./styles.scss"; +import { + KeyValueInvokeHostFnArgs, + KeyValueList, +} from "popup/components/signTransaction/Operations/KeyVal"; +import { useTranslation } from "react-i18next"; +import { truncateString } from "helpers/stellar"; + +export const ReviewAuth = () => { + const location = useLocation(); + const decodedSearchParam = decodeString(location.search.replace("?", "")); + const params = decodedSearchParam ? JSON.parse(decodedSearchParam) : {}; + console.log(params); + + const [activeAuthEntryIndex, setActiveAuthEntryIndex] = React.useState(0); + const { networkPassphrase } = useSelector(settingsNetworkDetailsSelector); + const transaction = TransactionBuilder.fromXDR( + params.transactionXdr, + networkPassphrase, + ) as Transaction; + const op = transaction.operations[0] as Operation.InvokeHostFunction; + const authCount = op.auth ? op.auth.length : 0; + console.log(setActiveAuthEntryIndex); + + return ( +
+
+
+ +
+
+ +

Transaction Request

+
+
+
+
+
+ {activeAuthEntryIndex}/{authCount} Authorizations +
+ {op.auth && } +
+
+ {/*
+
Signing with
+
+ +
+
+
+ + {needsReviewAuth ? ( + + ) : ( + + )} +
*/} +
+
+
+ ); +}; + +function getInvocationDetails(invocation: xdr.SorobanAuthorizedInvocation) { + return [ + getInvocationArgs(invocation), + ...invocation.subInvocations().map(getInvocationArgs), + ]; +} + +function getInvocationArgs(invocation: xdr.SorobanAuthorizedInvocation) { + const _invocation = invocation.function().contractFn(); + const contractId = StrKey.encodeContract( + _invocation.contractAddress().contractId(), + ); + const fnName = _invocation.functionName().toString(); + const args = _invocation.args(); + return { fnName, contractId, args }; +} + +const AuthDetail = ({ + authEntry, +}: { + authEntry: xdr.SorobanAuthorizationEntry; +}) => { + const { t } = useTranslation(); + const details = getInvocationDetails(authEntry.rootInvocation()); + return ( +
+
+ + {details.map((detail) => ( + +

Invocation

+
+ + + +
+ + ))} +
+
+ ); +}; diff --git a/extension/src/popup/views/ReviewAuth/styles.scss b/extension/src/popup/views/ReviewAuth/styles.scss new file mode 100644 index 0000000000..42efb3c964 --- /dev/null +++ b/extension/src/popup/views/ReviewAuth/styles.scss @@ -0,0 +1,79 @@ +.ReviewAuth { + height: 100vh; + overflow: hidden; + position: relative; + padding: 1rem; + background-color: var(--color-gray-10); + display: flex; + justify-content: center; + + &__Title { + display: flex; + flex-direction: column; + height: 130px; + } + + &__Body { + display: flex; + flex-direction: column; + margin-top: 2rem; + max-width: 57rem; + width: 100%; + } + + &--connection-request { + display: flex; + justify-content: center; + margin-bottom: 0.75rem; + } + + &--connection-request-pill { + display: flex; + align-items: center; + padding: 0 0.5rem; + background-color: var(--color-gray-20); + color: var(--color-gray-70); + border: 1px solid var(--color-gray-30); + border-radius: 6px; + margin-bottom: 0.5rem; + line-height: 1.25rem; + + p { + font-size: 0.75rem; + margin-left: 0.25rem; + } + } + + &__Details { + width: 100%; + flex-grow: 1; + } + + &__Actions { + display: flex; + flex-direction: column; + align-self: flex-end; + width: 100%; + height: 130px; + + &__SigningWith { + display: flex; + flex-direction: column; + } + + &__PublicKey { + padding: 0.5rem; + padding: 0.25rem 0.5rem; + border-radius: 7px; + border: 1px solid; + margin-top: 10px; + border-color: var(--color-gray-40); + } + + &__BtnRow { + display: flex; + margin-top: 10px; + gap: 0.5rem; + } + } +} diff --git a/extension/src/popup/views/SignTransaction/Preview/Data/index.tsx b/extension/src/popup/views/SignTransaction/Preview/Data/index.tsx index a8704008bf..f20aa47157 100644 --- a/extension/src/popup/views/SignTransaction/Preview/Data/index.tsx +++ b/extension/src/popup/views/SignTransaction/Preview/Data/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import "./styles.scss"; -import { Icon } from "@stellar/design-system"; +import { CopyText, Icon } from "@stellar/design-system"; interface DataProps { xdr: string; @@ -11,7 +11,9 @@ export const Data = ({ xdr }: DataProps) => (
Raw XDR
- + + +
{xdr}
diff --git a/extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx b/extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx index 2bd7bcd2b1..bc3e769030 100644 --- a/extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx +++ b/extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx @@ -16,7 +16,7 @@ export const Summary = (props: SummaryProps) => (
{props.operationNames.map((opName) => (
- +

{opName}

))} @@ -25,14 +25,14 @@ export const Summary = (props: SummaryProps) => (
- +

Operations

{props.operationNames.length}

- +

Fees

@@ -41,7 +41,7 @@ export const Summary = (props: SummaryProps) => (

- +

Sequence #

{props.sequenceNumber}

diff --git a/extension/src/popup/views/SignTransaction/index.tsx b/extension/src/popup/views/SignTransaction/index.tsx index 7d56b46385..12b7736be6 100644 --- a/extension/src/popup/views/SignTransaction/index.tsx +++ b/extension/src/popup/views/SignTransaction/index.tsx @@ -24,6 +24,7 @@ import { ShowOverlayStatus } from "popup/ducks/transactionSubmission"; import { OPERATION_TYPES, TRANSACTION_WARNING } from "constants/transaction"; +import { encodeObject } from "helpers/urls"; import { emitMetric } from "helpers/metrics"; import { getTransactionInfo, @@ -34,7 +35,8 @@ import { import { decodeMemo } from "popup/helpers/parseTransaction"; import { useSetupSigningFlow } from "popup/helpers/useSetupSigningFlow"; // import { TransactionHeading } from "popup/basics/TransactionHeading"; - +import { navigateTo } from "popup/helpers/navigate"; +import { ROUTES } from "popup/constants/routes"; import { METRIC_NAMES } from "popup/constants/metricsNames"; // import { AccountListIdenticon } from "popup/components/identicons/AccountListIdenticon"; @@ -264,6 +266,12 @@ export const SignTransaction = () => { } } + const needsReviewAuth = + !isFeeBump && + (transaction as Transaction, Operation[]>).operations.some( + (op) => op.type === "invokeHostFunction" && op.auth && op.auth.length, + ); + return isPasswordRequired ? ( { > {t("Cancel")} - + {needsReviewAuth ? ( + + ) : ( + + )}
From a349841e452fd27c4251bce67fec701af530b9c8 Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Mon, 12 Feb 2024 14:42:06 -0700 Subject: [PATCH 07/21] organizes auth review details, adds auth review signing, adds account selection back --- .../src/popup/views/ReviewAuth/index.tsx | 213 +++++++++++++----- .../src/popup/views/ReviewAuth/styles.scss | 75 +++++- .../src/popup/views/SignTransaction/index.tsx | 83 ++----- .../popup/views/SignTransaction/styles.scss | 10 +- 4 files changed, 251 insertions(+), 130 deletions(-) diff --git a/extension/src/popup/views/ReviewAuth/index.tsx b/extension/src/popup/views/ReviewAuth/index.tsx index 516bb6f202..2092da0935 100644 --- a/extension/src/popup/views/ReviewAuth/index.tsx +++ b/extension/src/popup/views/ReviewAuth/index.tsx @@ -10,25 +10,40 @@ import { import { useSelector } from "react-redux"; import { decodeString } from "helpers/urls"; -import { Icon } from "@stellar/design-system"; +import { Button, Icon } from "@stellar/design-system"; import { PunycodedDomain } from "popup/components/PunycodedDomain"; import { settingsNetworkDetailsSelector } from "popup/ducks/settings"; +import { signTransaction, rejectTransaction } from "popup/ducks/access"; -import "./styles.scss"; import { KeyValueInvokeHostFnArgs, KeyValueList, } from "popup/components/signTransaction/Operations/KeyVal"; import { useTranslation } from "react-i18next"; import { truncateString } from "helpers/stellar"; +import { FlaggedKeys } from "types/transactions"; +import { KeyIdenticon } from "popup/components/identicons/KeyIdenticon"; +import { useSetupSigningFlow } from "popup/helpers/useSetupSigningFlow"; +import { Tabs } from "popup/components/Tabs"; +import { SlideupModal } from "popup/components/SlideupModal"; +import { AccountList } from "popup/components/account/AccountList"; +import { OPERATION_TYPES } from "constants/transaction"; +import { Summary } from "../SignTransaction/Preview/Summary"; +import { Details } from "../SignTransaction/Preview/Details"; +import { Data } from "../SignTransaction/Preview/Data"; +import "./styles.scss"; export const ReviewAuth = () => { const location = useLocation(); + const { t } = useTranslation(); + const decodedSearchParam = decodeString(location.search.replace("?", "")); const params = decodedSearchParam ? JSON.parse(decodedSearchParam) : {}; - console.log(params); const [activeAuthEntryIndex, setActiveAuthEntryIndex] = React.useState(0); + const [hasConfirmedAuth, setHasConfirmedAuth] = React.useState(false); + const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); + const { networkPassphrase } = useSelector(settingsNetworkDetailsSelector); const transaction = TransactionBuilder.fromXDR( params.transactionXdr, @@ -36,7 +51,26 @@ export const ReviewAuth = () => { ) as Transaction; const op = transaction.operations[0] as Operation.InvokeHostFunction; const authCount = op.auth ? op.auth.length : 0; - console.log(setActiveAuthEntryIndex); + + const { + allAccounts, + // accountNotFound, + currentAccount, + isConfirming, + // isPasswordRequired, + publicKey, + handleApprove, + // hwStatus, + rejectAndClose, + // setIsPasswordRequired, + // verifyPasswordThenSign, + // hardwareWalletType, + } = useSetupSigningFlow( + rejectTransaction, + signTransaction, + params.transactionXdr, + params.accountToSign, + ); return (
@@ -51,53 +85,80 @@ export const ReviewAuth = () => {
-
- {activeAuthEntryIndex}/{authCount} Authorizations -
- {op.auth && } + {!hasConfirmedAuth && op.auth ? ( + <> +
+ {activeAuthEntryIndex + 1}/{authCount} Authorizations +
+ + + ) : ( + + )}
- {/*
+ {hasConfirmedAuth && ( +
Signing with
-
+
+ +
-
+ )} +
+ {hasConfirmedAuth ? ( + + ) : ( - {needsReviewAuth ? ( - - ) : ( - - )} -
*/} + )} + + +
+ +
+ +
+
); }; @@ -128,25 +189,61 @@ const AuthDetail = ({ const details = getInvocationDetails(authEntry.rootInvocation()); return (
-
- - {details.map((detail) => ( - -

Invocation

-
- - - -
- - ))} -
+ {details.map((detail) => ( + +
+ +
Invocation
+
+
+ + + +
+ + ))}
); }; + +const SignTransaction = ({ tx }: { tx: Transaction }) => { + function renderTab(tab: string) { + switch (tab) { + case "Summary": { + return ( + OPERATION_TYPES[op.type] || op.type, + )} + /> + ); + } + + case "Details": { + return ( +
+ ); + } + + case "Data": { + return ; + } + + default: + return <>; + } + } + return ; +}; diff --git a/extension/src/popup/views/ReviewAuth/styles.scss b/extension/src/popup/views/ReviewAuth/styles.scss index 42efb3c964..eacebb74fc 100644 --- a/extension/src/popup/views/ReviewAuth/styles.scss +++ b/extension/src/popup/views/ReviewAuth/styles.scss @@ -47,6 +47,72 @@ &__Details { width: 100%; flex-grow: 1; + height: 230px; + + .AuthDetail { + height: 230px; + overflow-y: auto; + border-radius: 4px; + background-color: var(--color-gray-20); + padding: 1rem; + margin-top: 0.5rem; + + &__TitleRow { + display: flex; + align-items: center; + + h5 { + font-size: 0.75rem; + margin-left: 0.5rem; + } + } + + &__InfoBlock { + display: flex; + flex-direction: column; + margin-top: 1rem; + font-size: 0.75rem; + + & > .Operations__pair { + align-items: center; + color: var(--color-gray-90); + display: flex; + justify-content: space-between; + line-height: 1.5rem; + + &--invoke { + flex-direction: column; + align-items: baseline; + color: var(--color-gray-90); + display: flex; + justify-content: space-between; + line-height: 1.5rem; + + .OperationParameters { + .Parameter { + color: var(--color-gray-60); + } + } + } + + &--smart-contract { + flex-direction: column; + + pre { + margin: 0; + } + } + + & > :nth-child(2) { + color: var(--color-gray-60); + } + } + } + } + + .Tabs__Body { + height: 190px; + } } &__Actions { @@ -54,7 +120,7 @@ flex-direction: column; align-self: flex-end; width: 100%; - height: 130px; + min-height: 130px; &__SigningWith { display: flex; @@ -62,7 +128,11 @@ } &__PublicKey { - padding: 0.5rem; + display: flex; + justify-content: space-between; + align-items: center; + background: transparent; + cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 7px; border: 1px solid; @@ -72,6 +142,7 @@ &__BtnRow { display: flex; + flex-direction: column; margin-top: 10px; gap: 0.5rem; } diff --git a/extension/src/popup/views/SignTransaction/index.tsx b/extension/src/popup/views/SignTransaction/index.tsx index 12b7736be6..d43a94268b 100644 --- a/extension/src/popup/views/SignTransaction/index.tsx +++ b/extension/src/popup/views/SignTransaction/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { useLocation } from "react-router-dom"; import { useSelector } from "react-redux"; import { useTranslation, Trans } from "react-i18next"; @@ -40,7 +40,7 @@ import { ROUTES } from "popup/constants/routes"; import { METRIC_NAMES } from "popup/constants/metricsNames"; // import { AccountListIdenticon } from "popup/components/identicons/AccountListIdenticon"; -// import { AccountList, OptionTag } from "popup/components/account/AccountList"; +import { AccountList } from "popup/components/account/AccountList"; import { PunycodedDomain } from "popup/components/PunycodedDomain"; import { WarningMessageVariant, @@ -52,7 +52,7 @@ import { // import { Transaction as SignTxTransaction } from "popup/components/signTransaction/Transaction"; import { HardwareSign } from "popup/components/hardwareConnect/HardwareSign"; import { KeyIdenticon } from "popup/components/identicons/KeyIdenticon"; -// import { SlideupModal } from "popup/components/SlideupModal"; +import { SlideupModal } from "popup/components/SlideupModal"; // import { View } from "popup/basics/layout/View"; import { VerifyAccount } from "popup/views/VerifyAccount"; @@ -70,7 +70,7 @@ export const SignTransaction = () => { const location = useLocation(); const { t } = useTranslation(); - // const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); const isExperimentalModeEnabled = useSelector( settingsExperimentalModeSelector, @@ -90,13 +90,6 @@ export const SignTransaction = () => { flaggedKeys, } = tx; - /* - Reconstruct the tx from xdr as passing a tx through extension contexts - loses custom prototypes associated with some values. This is fine for most cases - where we just need a high level overview of the tx, like just a list of operations. - But in this case, we will need the hostFn prototype associated with Soroban tx operations. - */ - const transaction = TransactionBuilder.fromXDR( transactionXdr, networkPassphrase, @@ -124,12 +117,12 @@ export const SignTransaction = () => { let accountToSign = _accountToSign; const { - // allAccounts, + allAccounts, // accountNotFound, currentAccount, isConfirming, isPasswordRequired, - // publicKey, + publicKey, handleApprove, hwStatus, rejectAndClose, @@ -298,9 +291,13 @@ export const SignTransaction = () => {
Signing with
-
+
+ +
- - + */} { setIsDropdownOpen={setIsDropdownOpen} />
- */} +
); diff --git a/extension/src/popup/views/SignTransaction/styles.scss b/extension/src/popup/views/SignTransaction/styles.scss index b6b7b41c10..87799d00b3 100644 --- a/extension/src/popup/views/SignTransaction/styles.scss +++ b/extension/src/popup/views/SignTransaction/styles.scss @@ -106,6 +106,10 @@ &__modal { padding: 0.5rem 0 0.5rem 1.5rem; + + .View__inset--scroll-shadows { + --bgRGB: 22, 22, 24; + } } &__account-not-found { @@ -125,7 +129,11 @@ } &__PublicKey { - padding: 0.5rem; + display: flex; + justify-content: space-between; + align-items: center; + background: transparent; + cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 7px; border: 1px solid; From 6ea3be86057654fbc0fa4b77422aaf7b51d2daff Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Mon, 12 Feb 2024 14:42:58 -0700 Subject: [PATCH 08/21] Added translations --- extension/src/popup/locales/en/translation.json | 2 ++ extension/src/popup/locales/pt/translation.json | 2 ++ 2 files changed, 4 insertions(+) diff --git a/extension/src/popup/locales/en/translation.json b/extension/src/popup/locales/en/translation.json index d3f3c7721a..b8d44d1586 100644 --- a/extension/src/popup/locales/en/translation.json +++ b/extension/src/popup/locales/en/translation.json @@ -45,6 +45,7 @@ "Anonymous data sharing": "Anonymous data sharing", "Anyone who has access to this phrase has access to your account and to the funds in it, so save it in a safe and secure place": "Anyone who has access to this phrase has access to your account and to the funds in it, so save it in a safe and secure place.", "Approve": "Approve", + "Approve and review next": "Approve and review next", "Approve using": "Approve using", "are required to add a new asset": "are required to add a new asset.", "Are you sure you want to remove this network? You will have to re-add it if you want to use it again": "Are you sure you want to remove this network? You will have to re-add it if you want to use it again.", @@ -381,6 +382,7 @@ "Settings > Preferences": "Settings > Preferences", "Show recovery phrase": "Show recovery phrase", "Sign": "Sign", + "Sign Transaction": "Sign Transaction", "Signed Payload": "Signed Payload", "Signer": "Signer", "Signer Key": "Signer Key", diff --git a/extension/src/popup/locales/pt/translation.json b/extension/src/popup/locales/pt/translation.json index 9ff392a795..b9121d08b1 100644 --- a/extension/src/popup/locales/pt/translation.json +++ b/extension/src/popup/locales/pt/translation.json @@ -45,6 +45,7 @@ "Anonymous data sharing": "Anonymous data sharing", "Anyone who has access to this phrase has access to your account and to the funds in it, so save it in a safe and secure place": "Anyone who has access to this phrase has access to your account and to the funds in it, so save it in a safe and secure place.", "Approve": "Approve", + "Approve and review next": "Approve and review next", "Approve using": "Approve using", "are required to add a new asset": "are required to add a new asset.", "Are you sure you want to remove this network? You will have to re-add it if you want to use it again": "Are you sure you want to remove this network? You will have to re-add it if you want to use it again.", @@ -381,6 +382,7 @@ "Settings > Preferences": "Settings > Preferences", "Show recovery phrase": "Show recovery phrase", "Sign": "Sign", + "Sign Transaction": "Sign Transaction", "Signed Payload": "Signed Payload", "Signer": "Signer", "Signer Key": "Signer Key", From 83041645d24cfc0ae413426a7d7ce2b089c8481b Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Tue, 13 Feb 2024 09:41:07 -0700 Subject: [PATCH 09/21] adds warnings back, updates warning style and tweaks dimensions to fit window --- .../components/WarningMessages/index.tsx | 20 +- .../components/WarningMessages/styles.scss | 4 +- .../src/popup/views/ReviewAuth/index.tsx | 8 +- .../SignTransaction/Preview/Data/index.tsx | 8 +- .../SignTransaction/Preview/Data/styles.scss | 10 +- .../Preview/Details/styles.scss | 6 - .../SignTransaction/Preview/Summary/index.tsx | 4 +- .../Preview/Summary/styles.scss | 10 +- .../src/popup/views/SignTransaction/index.tsx | 227 +++++++----------- .../popup/views/SignTransaction/styles.scss | 12 +- 10 files changed, 122 insertions(+), 187 deletions(-) diff --git a/extension/src/popup/components/WarningMessages/index.tsx b/extension/src/popup/components/WarningMessages/index.tsx index 03e9a7e301..662aa1be93 100644 --- a/extension/src/popup/components/WarningMessages/index.tsx +++ b/extension/src/popup/components/WarningMessages/index.tsx @@ -10,6 +10,7 @@ import { Operation, Horizon, TransactionBuilder, + xdr, } from "stellar-sdk"; import { ActionStatus } from "@shared/api/types"; @@ -667,21 +668,16 @@ export const NewAssetWarning = ({ }; export const TransferWarning = ({ - operation, + authEntry, }: { - operation: Operation.InvokeHostFunction; + authEntry: xdr.SorobanAuthorizationEntry; }) => { const { t } = useTranslation(); - const authEntries = operation.auth || []; - const transfers = authEntries - .map((entry) => { - const rootInvocation = entry.rootInvocation(); - const rootJson = buildInvocationTree(rootInvocation); - const isInvokeContract = rootInvocation.function().switch().value === 0; - return isInvokeContract ? pickTransfers(rootJson) : []; - }) - .flat(); + const rootInvocation = authEntry.rootInvocation(); + const rootJson = buildInvocationTree(rootInvocation); + const isInvokeContract = rootInvocation.function().switch().value === 0; + const transfers = isInvokeContract ? pickTransfers(rootJson) : []; if (!transfers.length) { return null; @@ -690,7 +686,7 @@ export const TransferWarning = ({ return (

diff --git a/extension/src/popup/components/WarningMessages/styles.scss b/extension/src/popup/components/WarningMessages/styles.scss index 197d60e196..f85bbed185 100644 --- a/extension/src/popup/components/WarningMessages/styles.scss +++ b/extension/src/popup/components/WarningMessages/styles.scss @@ -15,8 +15,8 @@ var(--popup--side-padding); position: absolute; top: 0; - width: var(--popup--width); - height: var(--popup--height); + width: 100vw; + height: 100vh; } &__activate-button { diff --git a/extension/src/popup/views/ReviewAuth/index.tsx b/extension/src/popup/views/ReviewAuth/index.tsx index 2092da0935..ec86655466 100644 --- a/extension/src/popup/views/ReviewAuth/index.tsx +++ b/extension/src/popup/views/ReviewAuth/index.tsx @@ -27,6 +27,7 @@ import { useSetupSigningFlow } from "popup/helpers/useSetupSigningFlow"; import { Tabs } from "popup/components/Tabs"; import { SlideupModal } from "popup/components/SlideupModal"; import { AccountList } from "popup/components/account/AccountList"; +import { TransferWarning } from "popup/components/WarningMessages"; import { OPERATION_TYPES } from "constants/transaction"; import { Summary } from "../SignTransaction/Preview/Summary"; import { Details } from "../SignTransaction/Preview/Details"; @@ -54,17 +55,11 @@ export const ReviewAuth = () => { const { allAccounts, - // accountNotFound, currentAccount, isConfirming, - // isPasswordRequired, publicKey, handleApprove, - // hwStatus, rejectAndClose, - // setIsPasswordRequired, - // verifyPasswordThenSign, - // hardwareWalletType, } = useSetupSigningFlow( rejectTransaction, signTransaction, @@ -189,6 +184,7 @@ const AuthDetail = ({ const details = getInvocationDetails(authEntry.rootInvocation()); return (

+ {details.map((detail) => (
diff --git a/extension/src/popup/views/SignTransaction/Preview/Data/index.tsx b/extension/src/popup/views/SignTransaction/Preview/Data/index.tsx index f20aa47157..ef6abcb79d 100644 --- a/extension/src/popup/views/SignTransaction/Preview/Data/index.tsx +++ b/extension/src/popup/views/SignTransaction/Preview/Data/index.tsx @@ -8,13 +8,13 @@ interface DataProps { } export const Data = ({ xdr }: DataProps) => ( -
-
+ <> +
Raw XDR
-
{xdr}
-
+
{xdr}
+ ); diff --git a/extension/src/popup/views/SignTransaction/Preview/Data/styles.scss b/extension/src/popup/views/SignTransaction/Preview/Data/styles.scss index db2d81f5d7..7354cadb5e 100644 --- a/extension/src/popup/views/SignTransaction/Preview/Data/styles.scss +++ b/extension/src/popup/views/SignTransaction/Preview/Data/styles.scss @@ -1,12 +1,4 @@ -.DataBody { - width: 100%; - display: flex; - flex-direction: column; - border-radius: 4px; - background-color: var(--color-gray-20); - padding: 1rem; - overflow-y: scroll; - +.BodyWrapper { &__TitleRow { display: flex; justify-content: space-between; diff --git a/extension/src/popup/views/SignTransaction/Preview/Details/styles.scss b/extension/src/popup/views/SignTransaction/Preview/Details/styles.scss index 78d7f4d02d..e627babbcf 100644 --- a/extension/src/popup/views/SignTransaction/Preview/Details/styles.scss +++ b/extension/src/popup/views/SignTransaction/Preview/Details/styles.scss @@ -1,10 +1,4 @@ .DetailsBody { width: 100%; - display: flex; - flex-direction: column; - border-radius: 4px; - background-color: var(--color-gray-20); - padding: 1rem; - overflow-y: scroll; font-size: 0.75rem; } diff --git a/extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx b/extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx index bc3e769030..46560a30e4 100644 --- a/extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx +++ b/extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx @@ -11,7 +11,7 @@ interface SummaryProps { } export const Summary = (props: SummaryProps) => ( -
+ <>
Operations
{props.operationNames.map((opName) => ( @@ -47,5 +47,5 @@ export const Summary = (props: SummaryProps) => (

{props.sequenceNumber}

-
+ ); diff --git a/extension/src/popup/views/SignTransaction/Preview/Summary/styles.scss b/extension/src/popup/views/SignTransaction/Preview/Summary/styles.scss index a032d6649b..9d20bc915b 100644 --- a/extension/src/popup/views/SignTransaction/Preview/Summary/styles.scss +++ b/extension/src/popup/views/SignTransaction/Preview/Summary/styles.scss @@ -1,12 +1,4 @@ -.SummaryBody { - width: 100%; - display: flex; - flex-direction: column; - border-radius: 4px; - background-color: var(--color-gray-20); - padding: 1rem; - overflow-y: scroll; - +.BodyWrapper { h5 { color: var(--color-gray-70); } diff --git a/extension/src/popup/views/SignTransaction/index.tsx b/extension/src/popup/views/SignTransaction/index.tsx index d43a94268b..cfb9209675 100644 --- a/extension/src/popup/views/SignTransaction/index.tsx +++ b/extension/src/popup/views/SignTransaction/index.tsx @@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from "react"; import { useLocation } from "react-router-dom"; import { useSelector } from "react-redux"; import { useTranslation, Trans } from "react-i18next"; -import { Button, Icon } from "@stellar/design-system"; +import { Button, Icon, Notification } from "@stellar/design-system"; import { FeeBumpTransaction, MuxedAccount, @@ -30,7 +30,7 @@ import { getTransactionInfo, isFederationAddress, isMuxedAccount, - // truncatedPublicKey, + truncatedPublicKey, } from "helpers/stellar"; import { decodeMemo } from "popup/helpers/parseTransaction"; import { useSetupSigningFlow } from "popup/helpers/useSetupSigningFlow"; @@ -39,15 +39,13 @@ import { navigateTo } from "popup/helpers/navigate"; import { ROUTES } from "popup/constants/routes"; import { METRIC_NAMES } from "popup/constants/metricsNames"; -// import { AccountListIdenticon } from "popup/components/identicons/AccountListIdenticon"; import { AccountList } from "popup/components/account/AccountList"; import { PunycodedDomain } from "popup/components/PunycodedDomain"; import { WarningMessageVariant, WarningMessage, - // FirstTimeWarningMessage, - // FlaggedWarningMessage, - // TransferWarning, + FirstTimeWarningMessage, + FlaggedWarningMessage, } from "popup/components/WarningMessages"; // import { Transaction as SignTxTransaction } from "popup/components/signTransaction/Transaction"; import { HardwareSign } from "popup/components/hardwareConnect/HardwareSign"; @@ -56,16 +54,15 @@ import { SlideupModal } from "popup/components/SlideupModal"; // import { View } from "popup/basics/layout/View"; import { VerifyAccount } from "popup/views/VerifyAccount"; - -import "./styles.scss"; - -import { FlaggedKeys } from "types/transactions"; import { Tabs } from "popup/components/Tabs"; import { Summary } from "./Preview/Summary"; import { Details } from "./Preview/Details"; import { Data } from "./Preview/Data"; +import { FlaggedKeys } from "types/transactions"; // import { TransactionInfo } from "popup/components/signTransaction/TransactionInfo"; +import "./styles.scss"; + export const SignTransaction = () => { const location = useLocation(); const { t } = useTranslation(); @@ -85,7 +82,7 @@ export const SignTransaction = () => { accountToSign: _accountToSign, transactionXdr, domain, - // isDomainListedAllowed, + isDomainListedAllowed, isHttpsDomain, flaggedKeys, } = tx; @@ -98,14 +95,13 @@ export const SignTransaction = () => { const { fee: _fee, networkPassphrase: _networkPassphrase } = transaction; let isFeeBump = false; - let _innerTransaction = {}; + // let _innerTransaction = {}; let _memo = {}; let _sequence = ""; if ("innerTransaction" in transaction) { - _innerTransaction = transaction.innerTransaction; + // _innerTransaction = transaction.innerTransaction; isFeeBump = true; - console.log(isFeeBump, _innerTransaction); } else { _sequence = transaction.sequence; _memo = transaction.memo; @@ -118,7 +114,7 @@ export const SignTransaction = () => { const { allAccounts, - // accountNotFound, + accountNotFound, currentAccount, isConfirming, isPasswordRequired, @@ -204,59 +200,92 @@ export const SignTransaction = () => { ); } - - if (!isHttpsDomain && !isExperimentalModeEnabled) { - return ( - window.close()} - isActive - variant={WarningMessageVariant.warning} - header={t("WEBSITE CONNECTION IS NOT SECURE")} - > -

- - The website {{ domain }} does not use an SSL - certificate. For additional safety Freighter only works with - websites that provide an SSL certificate. - -

- - ); - } + console.log(isHttpsDomain, isExperimentalModeEnabled, Trans); + // if (!isHttpsDomain && !isExperimentalModeEnabled) { + // return ( + // window.close()} + // isActive + // variant={WarningMessageVariant.warning} + // header={t("WEBSITE CONNECTION IS NOT SECURE")} + // > + //

+ // + // The website {{ domain }} does not use an SSL + // certificate. For additional safety Freighter only works with + // websites that provide an SSL certificate. + // + //

+ // + // ); + // } function renderTab(tab: string) { - // TODO: split for FeeBumpTx - const _tx = transaction as Transaction, Operation[]>; - switch (tab) { - case "Summary": { - return ( - OPERATION_TYPES[op.type] || op.type, - )} - /> - ); - } + function renderTabBody() { + // TODO: split for FeeBumpTx + const _tx = transaction as Transaction, Operation[]>; + switch (tab) { + case "Summary": { + return ( + OPERATION_TYPES[op.type] || op.type, + )} + /> + ); + } - case "Details": { - return ( -
- ); - } + case "Details": { + return ( +
+ ); + } - case "Data": { - return ; - } + case "Data": { + return ; + } - default: - return <>; + default: + return <>; + } } + + return ( +
+ {accountNotFound && accountToSign ? ( +
+ } + title={t("Account not available")} + > + {t("The application is requesting a specific account")} ( + {truncatedPublicKey(accountToSign!)}),{" "} + {t( + "which is not available on Freighter. If you own this account, you can import it into Freighter to complete this request.", + )} + +
+ ) : null} + {flaggedKeyValues.length ? ( + + ) : null} + {!isDomainListedAllowed && !isSubmitDisabled ? ( + + ) : null} + {renderTabBody()} +
+ ); } const needsReviewAuth = @@ -343,80 +372,6 @@ export const SignTransaction = () => {
- - {/* - {!isFeeBump ? ( - , Operation[]>) - .operations[0] as Operation.InvokeHostFunction - } - /> - ) : null} - {isExperimentalModeEnabled ? ( - -

- {t( - "You are interacting with a transaction that may be using untested and changing schemas. Proceed at your own risk.", - )} -

- - ) : null} - {flaggedKeyValues.length ? ( - - ) : null} - {!isDomainListedAllowed && !isSubmitDisabled ? ( - - ) : null} -
- {accountNotFound && accountToSign ? ( -
- } - title={t("Account not available")} - > - {t("The application is requesting a specific account")} ( - {truncatedPublicKey(accountToSign)}),{" "} - {t( - "which is not available on Freighter. If you own this account, you can import it into Freighter to complete this request.", - )} - -
- ) : null} -
- {isFeeBump ? ( -
- -
- ) : ( - - )} - {t("Transaction Info")} - - - */} Date: Tue, 13 Feb 2024 09:41:07 -0700 Subject: [PATCH 10/21] adds warnings back, updates warning style and tweaks dimensions to fit window --- extension/src/popup/views/SignTransaction/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/extension/src/popup/views/SignTransaction/index.tsx b/extension/src/popup/views/SignTransaction/index.tsx index cfb9209675..68f151e718 100644 --- a/extension/src/popup/views/SignTransaction/index.tsx +++ b/extension/src/popup/views/SignTransaction/index.tsx @@ -52,6 +52,7 @@ import { HardwareSign } from "popup/components/hardwareConnect/HardwareSign"; import { KeyIdenticon } from "popup/components/identicons/KeyIdenticon"; import { SlideupModal } from "popup/components/SlideupModal"; // import { View } from "popup/basics/layout/View"; +import { FlaggedKeys } from "types/transactions"; import { VerifyAccount } from "popup/views/VerifyAccount"; import { Tabs } from "popup/components/Tabs"; From ebb973da1058c5950e0cb537ed3e549a24479ab4 Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Tue, 13 Feb 2024 11:21:19 -0700 Subject: [PATCH 11/21] refactors invocation tree renderer to display key vals instead of tree --- .../Operations/KeyVal/index.tsx | 169 ++++++++++-------- .../Operations/KeyVal/styles.scss | 1 + .../src/popup/views/ReviewAuth/index.tsx | 56 +++--- .../src/popup/views/ReviewAuth/styles.scss | 16 +- 4 files changed, 135 insertions(+), 107 deletions(-) diff --git a/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx b/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx index 8f80b8ae9f..33d2cdc454 100644 --- a/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx +++ b/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx @@ -4,6 +4,7 @@ import { Asset, Claimant, LiquidityPoolAsset, + nativeToScVal, Operation, scValToNative, Signer, @@ -14,11 +15,12 @@ import { import { CLAIM_PREDICATES } from "constants/transaction"; import { KeyIdenticon } from "popup/components/identicons/KeyIdenticon"; -import { truncatedPublicKey, truncateString } from "helpers/stellar"; -import { SorobanTokenInterface } from "@shared/constants/soroban/token"; +import { truncatedPublicKey } from "helpers/stellar"; +// import { SorobanTokenInterface } from "@shared/constants/soroban/token"; import { - getArgsForTokenInvocation, + // getArgsForTokenInvocation, buildInvocationTree, + InvocationTree, } from "popup/helpers/soroban"; import "./styles.scss"; @@ -125,28 +127,98 @@ export const KeyValueWithPublicKey = ({ /> ); -export const KeyValueRootInvocation = ({ +const InvocationByType = ({ _invocation }: { _invocation: InvocationTree }) => { + const { t } = useTranslation(); + switch (_invocation.type) { + case "execute": { + return ( + <> + + + + + ); + } + + case "create": { + return ( + <> + + {_invocation.args.wasm && ( + <> + + + + + )} + {_invocation.args.asset && ( + + )} + + ); + } + + default: + return <>; + } +}; + +export const KeyValueInvocation = ({ + invocation, +}: { + invocation: InvocationTree; +}) => ( + <> + + + {invocation.invocations.map((subInvocation) => ( + + ))} + +); + +export const KeyValueAuthEntry = ({ entry, }: { entry: xdr.SorobanAuthorizationEntry; }) => { - const rootJson = buildInvocationTree(entry.rootInvocation()); + const invocation = entry.rootInvocation(); + const invocationTree = buildInvocationTree(invocation); return ( -
-
Invocation Tree:
-
-
- 
-            {JSON.stringify(
-              rootJson,
-              (_, val) => (typeof val === "bigint" ? val.toString() : val),
-              2,
-            )}
-
-
-
-
+ <> + + + {invocationTree.invocations.map((subInvocation) => ( + + ))} + ); }; @@ -430,68 +502,15 @@ export const KeyValueInvokeHostFn = ({ } case xdr.HostFunctionType.hostFunctionTypeInvokeContract(): { - const invocation = hostfn.invokeContract(); - const contractId = StrKey.encodeContract( - invocation.contractAddress().contractId(), - ); - const fnName = invocation.functionName().toString(); - const args = invocation.args(); - const tokenMethods = [ - SorobanTokenInterface.mint, - SorobanTokenInterface.transfer, - ]; - - if (tokenMethods.includes(fnName as SorobanTokenInterface)) { - const invokeParams = getArgsForTokenInvocation(fnName, args); - return ( - <> - - - - - - {fnName === SorobanTokenInterface.transfer && ( - - )} - {authEntries.map((entry) => ( - - ))} - - ); - } return ( <> - - - + {authEntries.map((entry) => ( + + ))} ); } diff --git a/extension/src/popup/components/signTransaction/Operations/KeyVal/styles.scss b/extension/src/popup/components/signTransaction/Operations/KeyVal/styles.scss index 8677241679..92e01aa88c 100644 --- a/extension/src/popup/components/signTransaction/Operations/KeyVal/styles.scss +++ b/extension/src/popup/components/signTransaction/Operations/KeyVal/styles.scss @@ -9,5 +9,6 @@ .Parameter { text-overflow: ellipsis; overflow: hidden; + color: var(--color-gray-60); } } diff --git a/extension/src/popup/views/ReviewAuth/index.tsx b/extension/src/popup/views/ReviewAuth/index.tsx index ec86655466..e200d5777e 100644 --- a/extension/src/popup/views/ReviewAuth/index.tsx +++ b/extension/src/popup/views/ReviewAuth/index.tsx @@ -210,36 +210,40 @@ const AuthDetail = ({ const SignTransaction = ({ tx }: { tx: Transaction }) => { function renderTab(tab: string) { - switch (tab) { - case "Summary": { - return ( - OPERATION_TYPES[op.type] || op.type, - )} - /> - ); - } + function renderTabBody() { + switch (tab) { + case "Summary": { + return ( + OPERATION_TYPES[op.type] || op.type, + )} + /> + ); + } + + case "Details": { + return ( +
+ ); + } - case "Details": { - return ( -
- ); - } + case "Data": { + return ; + } - case "Data": { - return ; + default: + return <>; } - - default: - return <>; } + + return
{renderTabBody()}
; } return ; }; diff --git a/extension/src/popup/views/ReviewAuth/styles.scss b/extension/src/popup/views/ReviewAuth/styles.scss index eacebb74fc..762291626e 100644 --- a/extension/src/popup/views/ReviewAuth/styles.scss +++ b/extension/src/popup/views/ReviewAuth/styles.scss @@ -87,12 +87,6 @@ display: flex; justify-content: space-between; line-height: 1.5rem; - - .OperationParameters { - .Parameter { - color: var(--color-gray-60); - } - } } &--smart-contract { @@ -113,6 +107,16 @@ .Tabs__Body { height: 190px; } + + .BodyWrapper { + width: 100%; + display: flex; + flex-direction: column; + border-radius: 4px; + background-color: var(--color-gray-20); + padding: 1rem; + overflow-y: scroll; + } } &__Actions { From db6950543176ffe457aae3a0fcd934bf3e5f424e Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Tue, 13 Feb 2024 11:22:16 -0700 Subject: [PATCH 12/21] Added translations --- .../src/popup/locales/en/translation.json | 3 ++ .../src/popup/locales/pt/translation.json | 3 ++ .../src/popup/views/SignTransaction/index.tsx | 38 +++++++++---------- 3 files changed, 25 insertions(+), 19 deletions(-) diff --git a/extension/src/popup/locales/en/translation.json b/extension/src/popup/locales/en/translation.json index b8d44d1586..ad21776e5b 100644 --- a/extension/src/popup/locales/en/translation.json +++ b/extension/src/popup/locales/en/translation.json @@ -28,6 +28,7 @@ "Add New Address": "Add New Address", "Add New Token": "Add New Token", "Add Soroban token": "Add Soroban token", + "Address": "Address", "Addresses are uppercase and begin with letters “G“ or “M“": "Addresses are uppercase and begin with letters “G“ or “M“.", "ALL": "ALL", "All Done": "All Done", @@ -52,6 +53,7 @@ "As long as you have your old and new mnemonics phrase, you’ll still be able to control accounts related to your current backup phrase which were not merged": { " For that, you’ll need to import your current backup phrase into Freighter (Freighter supports one backup phrase imported at a time)": "As long as you have your old and new mnemonics phrase, you’ll still be able to control accounts related to your current backup phrase which were not merged. For that, you’ll need to import your current backup phrase into Freighter (Freighter supports one backup phrase imported at a time)." }, + "Asset": "Asset", "Asset A": "Asset A", "Asset B": "Asset B", "Asset Code": "Asset Code", @@ -180,6 +182,7 @@ "Function Name": "Function Name", "Fund with Friendbot": "Fund with Friendbot", "Got it": "Got it", + "Hash": "Hash", "Have a suggestion or bug report? Create an issue on Github": "Have a suggestion or bug report? Create an issue on Github", "Help": "Help", "High Threshold": "High Threshold", diff --git a/extension/src/popup/locales/pt/translation.json b/extension/src/popup/locales/pt/translation.json index b9121d08b1..3a693daab2 100644 --- a/extension/src/popup/locales/pt/translation.json +++ b/extension/src/popup/locales/pt/translation.json @@ -28,6 +28,7 @@ "Add New Address": "Add New Address", "Add New Token": "Add New Token", "Add Soroban token": "Add Soroban token", + "Address": "Address", "Addresses are uppercase and begin with letters “G“ or “M“": "Addresses are uppercase and begin with letters “G“ or “M“.", "ALL": "TUDO", "All Done": "All Done", @@ -52,6 +53,7 @@ "As long as you have your old and new mnemonics phrase, you’ll still be able to control accounts related to your current backup phrase which were not merged": { " For that, you’ll need to import your current backup phrase into Freighter (Freighter supports one backup phrase imported at a time)": "As long as you have your old and new mnemonics phrase, you’ll still be able to control accounts related to your current backup phrase which were not merged. For that, you’ll need to import your current backup phrase into Freighter (Freighter supports one backup phrase imported at a time)." }, + "Asset": "Asset", "Asset A": "Asset A", "Asset B": "Asset B", "Asset Code": "Asset Code", @@ -180,6 +182,7 @@ "Function Name": "Function Name", "Fund with Friendbot": "Fund with Friendbot", "Got it": "Got it", + "Hash": "Hash", "Have a suggestion or bug report? Create an issue on Github": "Have a suggestion or bug report? Create an issue on Github", "Help": "Help", "High Threshold": "High Threshold", diff --git a/extension/src/popup/views/SignTransaction/index.tsx b/extension/src/popup/views/SignTransaction/index.tsx index 68f151e718..5aba18e2f7 100644 --- a/extension/src/popup/views/SignTransaction/index.tsx +++ b/extension/src/popup/views/SignTransaction/index.tsx @@ -201,25 +201,25 @@ export const SignTransaction = () => { ); } - console.log(isHttpsDomain, isExperimentalModeEnabled, Trans); - // if (!isHttpsDomain && !isExperimentalModeEnabled) { - // return ( - // window.close()} - // isActive - // variant={WarningMessageVariant.warning} - // header={t("WEBSITE CONNECTION IS NOT SECURE")} - // > - //

- // - // The website {{ domain }} does not use an SSL - // certificate. For additional safety Freighter only works with - // websites that provide an SSL certificate. - // - //

- // - // ); - // } + + if (!isHttpsDomain && !isExperimentalModeEnabled) { + return ( + window.close()} + isActive + variant={WarningMessageVariant.warning} + header={t("WEBSITE CONNECTION IS NOT SECURE")} + > +

+ + The website {{ domain }} does not use an SSL + certificate. For additional safety Freighter only works with + websites that provide an SSL certificate. + +

+ + ); + } function renderTab(tab: string) { function renderTabBody() { From f2c462d68e6826f3758d177b2a11ad55da4e96b7 Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Tue, 13 Feb 2024 11:25:35 -0700 Subject: [PATCH 13/21] cleans up dupe import --- extension/src/popup/views/SignTransaction/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/extension/src/popup/views/SignTransaction/index.tsx b/extension/src/popup/views/SignTransaction/index.tsx index 5aba18e2f7..0b26bffbdb 100644 --- a/extension/src/popup/views/SignTransaction/index.tsx +++ b/extension/src/popup/views/SignTransaction/index.tsx @@ -59,7 +59,6 @@ import { Tabs } from "popup/components/Tabs"; import { Summary } from "./Preview/Summary"; import { Details } from "./Preview/Details"; import { Data } from "./Preview/Data"; -import { FlaggedKeys } from "types/transactions"; // import { TransactionInfo } from "popup/components/signTransaction/TransactionInfo"; import "./styles.scss"; From e17d2bbf7cb8fd254ea3ee2aa662caa3987cfde4 Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Tue, 13 Feb 2024 13:29:16 -0700 Subject: [PATCH 14/21] accounts for FeeBump tx, and account verification --- .../src/popup/views/ReviewAuth/index.tsx | 38 ++++++++++++++++--- .../src/popup/views/SignTransaction/index.tsx | 4 +- .../popup/views/SignTransaction/styles.scss | 10 ----- 3 files changed, 35 insertions(+), 17 deletions(-) diff --git a/extension/src/popup/views/ReviewAuth/index.tsx b/extension/src/popup/views/ReviewAuth/index.tsx index e200d5777e..883a27907b 100644 --- a/extension/src/popup/views/ReviewAuth/index.tsx +++ b/extension/src/popup/views/ReviewAuth/index.tsx @@ -32,6 +32,7 @@ import { OPERATION_TYPES } from "constants/transaction"; import { Summary } from "../SignTransaction/Preview/Summary"; import { Details } from "../SignTransaction/Preview/Details"; import { Data } from "../SignTransaction/Preview/Data"; +import { VerifyAccount } from "../VerifyAccount"; import "./styles.scss"; export const ReviewAuth = () => { @@ -50,6 +51,8 @@ export const ReviewAuth = () => { params.transactionXdr, networkPassphrase, ) as Transaction; + + const isFeeBump = "innerTransaction" in transaction; const op = transaction.operations[0] as Operation.InvokeHostFunction; const authCount = op.auth ? op.auth.length : 0; @@ -60,6 +63,9 @@ export const ReviewAuth = () => { publicKey, handleApprove, rejectAndClose, + isPasswordRequired, + setIsPasswordRequired, + verifyPasswordThenSign, } = useSetupSigningFlow( rejectTransaction, signTransaction, @@ -67,7 +73,13 @@ export const ReviewAuth = () => { params.accountToSign, ); - return ( + return isPasswordRequired ? ( + setIsPasswordRequired(false)} + customSubmit={verifyPasswordThenSign} + /> + ) : (
@@ -88,7 +100,15 @@ export const ReviewAuth = () => { ) : ( - + )}
@@ -208,7 +228,15 @@ const AuthDetail = ({ ); }; -const SignTransaction = ({ tx }: { tx: Transaction }) => { +const SignTransaction = ({ + tx, + flaggedKeys, + isMemoRequired, +}: { + tx: Transaction; + flaggedKeys: FlaggedKeys; + isMemoRequired: boolean; +}) => { function renderTab(tab: string) { function renderTabBody() { switch (tab) { @@ -228,8 +256,8 @@ const SignTransaction = ({ tx }: { tx: Transaction }) => { return (
); } diff --git a/extension/src/popup/views/SignTransaction/index.tsx b/extension/src/popup/views/SignTransaction/index.tsx index 0b26bffbdb..a36c2d7712 100644 --- a/extension/src/popup/views/SignTransaction/index.tsx +++ b/extension/src/popup/views/SignTransaction/index.tsx @@ -95,12 +95,10 @@ export const SignTransaction = () => { const { fee: _fee, networkPassphrase: _networkPassphrase } = transaction; let isFeeBump = false; - // let _innerTransaction = {}; let _memo = {}; let _sequence = ""; if ("innerTransaction" in transaction) { - // _innerTransaction = transaction.innerTransaction; isFeeBump = true; } else { _sequence = transaction.sequence; @@ -351,6 +349,8 @@ export const SignTransaction = () => { accountToSign, transactionXdr, domain, + flaggedKeys, + isMemoRequired, })}`, ) } diff --git a/extension/src/popup/views/SignTransaction/styles.scss b/extension/src/popup/views/SignTransaction/styles.scss index d51427ed51..c4eb504812 100644 --- a/extension/src/popup/views/SignTransaction/styles.scss +++ b/extension/src/popup/views/SignTransaction/styles.scss @@ -68,16 +68,6 @@ word-wrap: break-word; } - &__inner-transaction { - border: 1px solid var(--color-gray-30); - border-radius: 0.5rem; - height: 10rem; - opacity: 0.7; - overflow: auto; - padding: 1rem 2rem; - zoom: 0.7; - } - &__info { margin-bottom: 2rem; } From 898d06e62e969424c3cedb7eef9411f486ba874f Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Tue, 13 Feb 2024 13:42:25 -0700 Subject: [PATCH 15/21] tweak warning modal container styles --- extension/src/popup/components/WarningMessages/styles.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/extension/src/popup/components/WarningMessages/styles.scss b/extension/src/popup/components/WarningMessages/styles.scss index f85bbed185..bd28a4d9ae 100644 --- a/extension/src/popup/components/WarningMessages/styles.scss +++ b/extension/src/popup/components/WarningMessages/styles.scss @@ -17,6 +17,7 @@ top: 0; width: 100vw; height: 100vh; + overflow-y: auto; } &__activate-button { From 4d695110a4633efe13ce5e7fd444216e47a826f4 Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Tue, 13 Feb 2024 15:29:52 -0700 Subject: [PATCH 16/21] replaces missing icons, tweaks grant domain overflow, cleans up unused imports --- .../src/popup/components/PunycodedDomain/styles.scss | 1 + extension/src/popup/components/WarningMessages/index.tsx | 8 +++++--- .../signTransaction/Operations/KeyVal/index.tsx | 8 ++------ extension/src/popup/views/ReviewAuth/index.tsx | 2 +- extension/src/popup/views/ReviewAuth/styles.scss | 3 +++ extension/src/popup/views/SignTransaction/index.tsx | 4 ---- 6 files changed, 12 insertions(+), 14 deletions(-) diff --git a/extension/src/popup/components/PunycodedDomain/styles.scss b/extension/src/popup/components/PunycodedDomain/styles.scss index 26c5f2b0c3..d5bb2cfefa 100644 --- a/extension/src/popup/components/PunycodedDomain/styles.scss +++ b/extension/src/popup/components/PunycodedDomain/styles.scss @@ -22,6 +22,7 @@ &__title { color: var(--color-gray-60); font-size: 0.875rem; + overflow-wrap: anywhere; } div { diff --git a/extension/src/popup/components/WarningMessages/index.tsx b/extension/src/popup/components/WarningMessages/index.tsx index 662aa1be93..ff84089fa7 100644 --- a/extension/src/popup/components/WarningMessages/index.tsx +++ b/extension/src/popup/components/WarningMessages/index.tsx @@ -762,9 +762,11 @@ const WarningMessageTokenDetails = ({ ) : tokenDetails[transfer.contractId] ? (

Token:{" "} - {`(${tokenDetails[transfer.contractId].symbol}) ${ - tokenDetails[transfer.contractId].name - }`} + {`(${ + tokenDetails[transfer.contractId].name === "native" + ? "XLM" + : tokenDetails[transfer.contractId].symbol + }) ${tokenDetails[transfer.contractId].name}`}

) : (

diff --git a/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx b/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx index 33d2cdc454..ecc07b0332 100644 --- a/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx +++ b/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx @@ -16,12 +16,8 @@ import { import { CLAIM_PREDICATES } from "constants/transaction"; import { KeyIdenticon } from "popup/components/identicons/KeyIdenticon"; import { truncatedPublicKey } from "helpers/stellar"; -// import { SorobanTokenInterface } from "@shared/constants/soroban/token"; -import { - // getArgsForTokenInvocation, - buildInvocationTree, - InvocationTree, -} from "popup/helpers/soroban"; + +import { buildInvocationTree, InvocationTree } from "popup/helpers/soroban"; import "./styles.scss"; const ScValByType = ({ scVal }: { scVal: xdr.ScVal }) => { diff --git a/extension/src/popup/views/ReviewAuth/index.tsx b/extension/src/popup/views/ReviewAuth/index.tsx index 883a27907b..7e435e0af5 100644 --- a/extension/src/popup/views/ReviewAuth/index.tsx +++ b/extension/src/popup/views/ReviewAuth/index.tsx @@ -208,7 +208,7 @@ const AuthDetail = ({ {details.map((detail) => (

- +
Invocation
diff --git a/extension/src/popup/views/ReviewAuth/styles.scss b/extension/src/popup/views/ReviewAuth/styles.scss index 762291626e..790340272e 100644 --- a/extension/src/popup/views/ReviewAuth/styles.scss +++ b/extension/src/popup/views/ReviewAuth/styles.scss @@ -48,8 +48,11 @@ width: 100%; flex-grow: 1; height: 230px; + display: flex; + flex-direction: column; .AuthDetail { + flex-grow: 1; height: 230px; overflow-y: auto; border-radius: 4px; diff --git a/extension/src/popup/views/SignTransaction/index.tsx b/extension/src/popup/views/SignTransaction/index.tsx index a36c2d7712..5e359545a2 100644 --- a/extension/src/popup/views/SignTransaction/index.tsx +++ b/extension/src/popup/views/SignTransaction/index.tsx @@ -34,7 +34,6 @@ import { } from "helpers/stellar"; import { decodeMemo } from "popup/helpers/parseTransaction"; import { useSetupSigningFlow } from "popup/helpers/useSetupSigningFlow"; -// import { TransactionHeading } from "popup/basics/TransactionHeading"; import { navigateTo } from "popup/helpers/navigate"; import { ROUTES } from "popup/constants/routes"; import { METRIC_NAMES } from "popup/constants/metricsNames"; @@ -47,11 +46,9 @@ import { FirstTimeWarningMessage, FlaggedWarningMessage, } from "popup/components/WarningMessages"; -// import { Transaction as SignTxTransaction } from "popup/components/signTransaction/Transaction"; import { HardwareSign } from "popup/components/hardwareConnect/HardwareSign"; import { KeyIdenticon } from "popup/components/identicons/KeyIdenticon"; import { SlideupModal } from "popup/components/SlideupModal"; -// import { View } from "popup/basics/layout/View"; import { FlaggedKeys } from "types/transactions"; import { VerifyAccount } from "popup/views/VerifyAccount"; @@ -59,7 +56,6 @@ import { Tabs } from "popup/components/Tabs"; import { Summary } from "./Preview/Summary"; import { Details } from "./Preview/Details"; import { Data } from "./Preview/Data"; -// import { TransactionInfo } from "popup/components/signTransaction/TransactionInfo"; import "./styles.scss"; From cdb0e62a831736e5ab3c11f913c5c009ce00655b Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Tue, 13 Feb 2024 16:18:08 -0700 Subject: [PATCH 17/21] fixes import order in preview tabs, adds memo into summary --- .../src/popup/views/ReviewAuth/index.tsx | 5 ++++ .../SignTransaction/Preview/Data/index.tsx | 2 +- .../SignTransaction/Preview/Summary/index.tsx | 24 ++++++++++++++++++- .../src/popup/views/SignTransaction/index.tsx | 3 ++- 4 files changed, 31 insertions(+), 3 deletions(-) diff --git a/extension/src/popup/views/ReviewAuth/index.tsx b/extension/src/popup/views/ReviewAuth/index.tsx index 7e435e0af5..59bdb27e7f 100644 --- a/extension/src/popup/views/ReviewAuth/index.tsx +++ b/extension/src/popup/views/ReviewAuth/index.tsx @@ -1,6 +1,7 @@ import React from "react"; import { useLocation } from "react-router-dom"; import { + MemoType, Operation, StrKey, Transaction, @@ -108,6 +109,7 @@ export const ReviewAuth = () => { } flaggedKeys={params.flaggedKeys} isMemoRequired={params.isMemoRequired} + memo={params.memo} /> )}
@@ -232,10 +234,12 @@ const SignTransaction = ({ tx, flaggedKeys, isMemoRequired, + memo, }: { tx: Transaction; flaggedKeys: FlaggedKeys; isMemoRequired: boolean; + memo?: { value: string; type: MemoType }; }) => { function renderTab(tab: string) { function renderTabBody() { @@ -245,6 +249,7 @@ const SignTransaction = ({ OPERATION_TYPES[op.type] || op.type, )} diff --git a/extension/src/popup/views/SignTransaction/Preview/Data/index.tsx b/extension/src/popup/views/SignTransaction/Preview/Data/index.tsx index ef6abcb79d..e1790dd182 100644 --- a/extension/src/popup/views/SignTransaction/Preview/Data/index.tsx +++ b/extension/src/popup/views/SignTransaction/Preview/Data/index.tsx @@ -1,7 +1,7 @@ import React from "react"; +import { CopyText, Icon } from "@stellar/design-system"; import "./styles.scss"; -import { CopyText, Icon } from "@stellar/design-system"; interface DataProps { xdr: string; diff --git a/extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx b/extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx index 46560a30e4..b9ab177388 100644 --- a/extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx +++ b/extension/src/popup/views/SignTransaction/Preview/Summary/index.tsx @@ -1,13 +1,24 @@ import React from "react"; -import "./styles.scss"; import { Icon } from "@stellar/design-system"; import { stroopToXlm } from "helpers/stellar"; +import { MemoType } from "stellar-sdk"; + +import "./styles.scss"; + +const mapMemoLabel: any = { + id: "MEMO_ID", + hash: "MEMO_HASH", + text: "MEMO_TEXT", + return: "MEMO_RETURN", + none: "MEMO_NONE", +}; interface SummaryProps { operationNames: string[]; fee: string; sequenceNumber: string; + memo?: { value: string; type: MemoType }; } export const Summary = (props: SummaryProps) => ( @@ -46,6 +57,17 @@ export const Summary = (props: SummaryProps) => (

{props.sequenceNumber}

+ {props.memo && props.memo.value && ( +
+
+ +

Memo

+
+

{`${props.memo.value} (${ + mapMemoLabel[props.memo.type] + })`}

+
+ )}
); diff --git a/extension/src/popup/views/SignTransaction/index.tsx b/extension/src/popup/views/SignTransaction/index.tsx index 5e359545a2..72d9bc8869 100644 --- a/extension/src/popup/views/SignTransaction/index.tsx +++ b/extension/src/popup/views/SignTransaction/index.tsx @@ -216,7 +216,6 @@ export const SignTransaction = () => { function renderTab(tab: string) { function renderTabBody() { - // TODO: split for FeeBumpTx const _tx = transaction as Transaction, Operation[]>; switch (tab) { case "Summary": { @@ -224,6 +223,7 @@ export const SignTransaction = () => { OPERATION_TYPES[op.type] || op.type, )} @@ -347,6 +347,7 @@ export const SignTransaction = () => { domain, flaggedKeys, isMemoRequired, + memo: decodedMemo, })}`, ) } From 8041d265966551a6ca88a86f4b04c85291a8f304 Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Wed, 14 Feb 2024 09:09:06 -0700 Subject: [PATCH 18/21] removes unused TransactionInfo component, uses pubkey KeyVal in some missing spots, adds better predicate renderer for claimants --- .../Operations/KeyVal/index.tsx | 101 +++++++++++++++-- .../signTransaction/Operations/index.tsx | 18 +-- .../signTransaction/TransactionInfo/index.tsx | 104 ------------------ .../TransactionInfo/styles.scss | 15 --- 4 files changed, 97 insertions(+), 141 deletions(-) delete mode 100644 extension/src/popup/components/signTransaction/TransactionInfo/index.tsx delete mode 100644 extension/src/popup/components/signTransaction/TransactionInfo/styles.scss diff --git a/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx b/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx index ecc07b0332..3b5e22b6da 100644 --- a/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx +++ b/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx @@ -15,7 +15,7 @@ import { import { CLAIM_PREDICATES } from "constants/transaction"; import { KeyIdenticon } from "popup/components/identicons/KeyIdenticon"; -import { truncatedPublicKey } from "helpers/stellar"; +import { truncatedPublicKey, truncateString } from "helpers/stellar"; import { buildInvocationTree, InvocationTree } from "popup/helpers/soroban"; import "./styles.scss"; @@ -224,7 +224,7 @@ export const KeyValueSigner = ({ signer }: { signer: Signer }) => { function renderSignerType() { if ("ed25519PublicKey" in signer) { return ( - @@ -253,7 +253,7 @@ export const KeyValueSigner = ({ signer }: { signer: Signer }) => { return ( ); } @@ -299,6 +299,96 @@ export const KeyValueLine = ({ export const KeyValueClaimants = ({ claimants }: { claimants: Claimant[] }) => { const { t } = useTranslation(); + + function claimPredicateValue( + predicate: xdr.ClaimPredicate, + hideKey: boolean = false, + ): React.ReactNode { + switch (predicate.switch().name) { + case "claimPredicateUnconditional": { + return ( + + ); + } + + case "claimPredicateAnd": { + return ( + <> + + {predicate.andPredicates().map((p) => claimPredicateValue(p, true))} + + ); + } + + case "claimPredicateBeforeAbsoluteTime": { + return ( + <> + + + + ); + } + + case "claimPredicateBeforeRelativeTime": { + return ( + <> + + + + ); + } + + case "claimPredicateNot": { + const not = predicate.notPredicate(); + if (not) { + return ( + <> + + {claimPredicateValue(not, true)} + + ); + } + return <>; + } + + case "claimPredicateOr": { + return ( + <> + + {predicate.orPredicates().map((p) => claimPredicateValue(p, true))} + + ); + } + + default: { + return <>; + } + } + } return ( <> {claimants.map((claimant, i) => ( @@ -309,10 +399,7 @@ export const KeyValueClaimants = ({ claimants }: { claimants: Claimant[] }) => { operationKey={t(`Destination #${i + 1}`)} operationValue={claimant.destination} /> - + {claimPredicateValue(claimant.predicate)} ))} diff --git a/extension/src/popup/components/signTransaction/Operations/index.tsx b/extension/src/popup/components/signTransaction/Operations/index.tsx index 6ba6a7f31d..1899551568 100644 --- a/extension/src/popup/components/signTransaction/Operations/index.tsx +++ b/extension/src/popup/components/signTransaction/Operations/index.tsx @@ -384,15 +384,9 @@ export const Operations = ({ } case "changeTrust": { - const { source, type, limit, line } = op; + const { type, limit, line } = op; return ( <> - {source && ( - - )} @@ -404,7 +398,7 @@ export const Operations = ({ const { trustor, assetCode, authorize } = op; return ( <> - @@ -494,15 +488,9 @@ export const Operations = ({ } case "endSponsoringFutureReserves": { - const { source, type } = op; + const { type } = op; return ( <> - {source && ( - - )} ); diff --git a/extension/src/popup/components/signTransaction/TransactionInfo/index.tsx b/extension/src/popup/components/signTransaction/TransactionInfo/index.tsx deleted file mode 100644 index 3d066ef478..0000000000 --- a/extension/src/popup/components/signTransaction/TransactionInfo/index.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import React from "react"; -import { MemoType } from "stellar-sdk"; -import { Icon, IconButton } from "@stellar/design-system"; -import { useTranslation } from "react-i18next"; - -import { stroopToXlm } from "helpers/stellar"; - -import "./styles.scss"; - -const MemoDisplay = ({ - memo, - isMemoRequired, -}: { - memo: { value: string; type: MemoType }; - isMemoRequired: boolean; -}) => { - const { t } = useTranslation(); - - const mapMemoLabel: any = { - id: "MEMO_ID", - hash: "MEMO_HASH", - text: "MEMO_TEXT", - return: "MEMO_RETURN", - none: "MEMO_NONE", - }; - - if (isMemoRequired) { - return ( - } - variant="error" - /> - ); - } - - if (memo) { - return ( - {`${memo.value} (${ - mapMemoLabel[memo.type] - })`} - ); - } - - return null; -}; - -interface TransactionInfoProps { - _fee: string; - _sequence?: string; - isFeeBump?: boolean; - isMemoRequired: boolean; - memo?: { value: string; type: MemoType }; -} - -export const TransactionInfo = ({ - _fee, - _sequence, - isFeeBump, - isMemoRequired, - memo, -}: TransactionInfoProps) => { - const { t } = useTranslation(); - - return ( -
- {_fee ? ( -
-
- {t("Base fee")} -
-
{stroopToXlm(_fee).toString()} XLM
-
- ) : null} - {memo ? ( -
-
- {t("Memo")} -
-
- -
-
- ) : null} - - {_sequence ? ( -
-
- {t("Transaction sequence number")} -
-
{_sequence}
-
- ) : null} - {isFeeBump ? ( -
-
- {t("Inner Transaction")} -
-
- ) : null} -
- ); -}; diff --git a/extension/src/popup/components/signTransaction/TransactionInfo/styles.scss b/extension/src/popup/components/signTransaction/TransactionInfo/styles.scss deleted file mode 100644 index d74e0c8342..0000000000 --- a/extension/src/popup/components/signTransaction/TransactionInfo/styles.scss +++ /dev/null @@ -1,15 +0,0 @@ -.TransactionInfo { - display: flex; - flex-direction: column; - gap: 1rem; - - & > div { - color: var(--color-gray-60); - line-height: 1.5rem; - - & > :nth-child(2) { - color: var(--color-gray-90); - margin-top: 0.25rem; - } - } -} From b56c37d4c0b0adc4cbab9fc53aa5aa51096507ef Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Wed, 14 Feb 2024 09:10:01 -0700 Subject: [PATCH 19/21] Added translations --- extension/src/popup/locales/en/translation.json | 4 ---- extension/src/popup/locales/pt/translation.json | 4 ---- 2 files changed, 8 deletions(-) diff --git a/extension/src/popup/locales/en/translation.json b/extension/src/popup/locales/en/translation.json index ad21776e5b..c215841b5b 100644 --- a/extension/src/popup/locales/en/translation.json +++ b/extension/src/popup/locales/en/translation.json @@ -74,7 +74,6 @@ "Awesome, you passed the test! Pin the extension in your browser to access it easily": "Awesome, you passed the test! Pin the extension in your browser to access it easily.", "Back": "Back", "Balance ID": "Balance ID", - "Base fee": "Base fee", "Before we start with migration, please read": "Before we start with migration, please read", "Before You Add This Asset": "Before You Add This Asset", "Block malicious or unsafe addresses and domains": "Block malicious or unsafe addresses and domains", @@ -211,7 +210,6 @@ "In this process, Freighter will create a new backup phrase for you and migrate your lumens, trustlines, and assets to the new account": "In this process, Freighter will create a new backup phrase for you and migrate your lumens, trustlines, and assets to the new account.", "Include a custom memo to this transaction": "Include a custom memo to this transaction", "Inflation Destination": "Inflation Destination", - "Inner Transaction": "Inner Transaction", "Insufficient Balance": "Insufficient Balance", "Insufficient Fee": "Insufficient Fee", "invalid federation address": "invalid federation address", @@ -297,7 +295,6 @@ "no path found": "no path found", "No transactions to show": "No transactions to show", "None": "None", - "Not defined": "Not defined", "Not enough lumens": "Not enough lumens", "Not funded": "Not funded", "Not migrated": "Not migrated", @@ -452,7 +449,6 @@ "Transaction": "Transaction", "Transaction failed": "Transaction failed", "Transaction fee": "Transaction fee", - "Transaction sequence number": "Transaction sequence number", "Transactions": "Transactions", "Trustline Error": "Trustline Error", "trustlines": "trustlines", diff --git a/extension/src/popup/locales/pt/translation.json b/extension/src/popup/locales/pt/translation.json index 3a693daab2..7135609de4 100644 --- a/extension/src/popup/locales/pt/translation.json +++ b/extension/src/popup/locales/pt/translation.json @@ -74,7 +74,6 @@ "Awesome, you passed the test! Pin the extension in your browser to access it easily": "Awesome, you passed the test! Pin the extension in your browser to access it easily.", "Back": "Back", "Balance ID": "Balance ID", - "Base fee": "Base fee", "Before we start with migration, please read": "Before we start with migration, please read", "Before You Add This Asset": "Before You Add This Asset", "Block malicious or unsafe addresses and domains": "Block malicious or unsafe addresses and domains", @@ -211,7 +210,6 @@ "In this process, Freighter will create a new backup phrase for you and migrate your lumens, trustlines, and assets to the new account": "In this process, Freighter will create a new backup phrase for you and migrate your lumens, trustlines, and assets to the new account.", "Include a custom memo to this transaction": "Include a custom memo to this transaction", "Inflation Destination": "Inflation Destination", - "Inner Transaction": "Inner Transaction", "Insufficient Balance": "Insufficient Balance", "Insufficient Fee": "Insufficient Fee", "invalid federation address": "invalid federation address", @@ -297,7 +295,6 @@ "no path found": "no path found", "No transactions to show": "No transactions to show", "None": "None", - "Not defined": "Not defined", "Not enough lumens": "Not enough lumens", "Not funded": "Not funded", "Not migrated": "Not migrated", @@ -452,7 +449,6 @@ "Transaction": "Transaction", "Transaction failed": "Transaction failed", "Transaction fee": "Transaction fee", - "Transaction sequence number": "Transaction sequence number", "Transactions": "Transactions", "Trustline Error": "Trustline Error", "trustlines": "trustlines", From eb742c5d449f02ad6dc088dbe4497b799674681a Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Wed, 14 Feb 2024 12:16:45 -0700 Subject: [PATCH 20/21] use correct logic to step through auth entry review --- extension/src/popup/views/ReviewAuth/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/extension/src/popup/views/ReviewAuth/index.tsx b/extension/src/popup/views/ReviewAuth/index.tsx index 59bdb27e7f..f75e777b8d 100644 --- a/extension/src/popup/views/ReviewAuth/index.tsx +++ b/extension/src/popup/views/ReviewAuth/index.tsx @@ -144,9 +144,9 @@ export const ReviewAuth = () => { size="md" isLoading={isConfirming} onClick={() => - activeAuthEntryIndex === op.auth?.length - ? setActiveAuthEntryIndex(activeAuthEntryIndex + 1) - : setHasConfirmedAuth(true) + activeAuthEntryIndex + 1 === op.auth?.length + ? setHasConfirmedAuth(true) + : setActiveAuthEntryIndex(activeAuthEntryIndex + 1) } > {t("Approve and review next")} From c1b90305d13fbab2cca7b8f49e82fe4b8f07d93b Mon Sep 17 00:00:00 2001 From: Aristides Staffieri Date: Wed, 14 Feb 2024 13:59:52 -0700 Subject: [PATCH 21/21] show root invocation in details instead of stacked auth entry invocations --- .../Operations/KeyVal/index.tsx | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx b/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx index 3b5e22b6da..0f7a71ddf2 100644 --- a/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx +++ b/extension/src/popup/components/signTransaction/Operations/KeyVal/index.tsx @@ -470,7 +470,6 @@ export const KeyValueInvokeHostFn = ({ op: Operation.InvokeHostFunction; }) => { const { t } = useTranslation(); - const authEntries = op.auth || []; const hostfn = op.func; function renderDetails() { @@ -585,15 +584,28 @@ export const KeyValueInvokeHostFn = ({ } case xdr.HostFunctionType.hostFunctionTypeInvokeContract(): { + const invocation = hostfn.invokeContract(); + const contractId = StrKey.encodeContract( + invocation.contractAddress().contractId(), + ); + const fnName = invocation.functionName().toString(); + const args = invocation.args(); + return ( <> - {authEntries.map((entry) => ( - - ))} + + + ); }