diff --git a/wails-frontend/src/i18n/en_US.json b/wails-frontend/src/i18n/en_US.json index f1dbbbac4..4c51fe824 100644 --- a/wails-frontend/src/i18n/en_US.json +++ b/wails-frontend/src/i18n/en_US.json @@ -51,8 +51,10 @@ "message-format": "Message format: ", "function-called": "Function called", "fees": "Fees ", - "fees-tooltip": "The compensation paid to", - "fees-tooltip-2": "validators for computational work.", + "fees-tooltip": { + "1": "The compensation paid to", + "2": "validators for computational work." + }, "coins": "Coins ", "coins-tooltip": "The amount of coins locked for", "coins-tooltip-2": "storage space on the ledger.", @@ -60,7 +62,7 @@ "confirm-fees": "confirm change", "reset-fees": "reset to default", "sending-amount": "Sending amount ", - "max-coins": "Max coins", + "max-coins": "Max. spendable MAS", "roll-amount": "Roll amount", "amount-to-send": "Amount to send", "spend-amount": "Spend amount", @@ -71,6 +73,19 @@ "2": "Roll sell", "3": "Execute SC", "4": "Call SC" + }, + "execute-sc-tooltip": { + "1": "ExecuteSC operation is a powerful functionality on Massa. It enables the execution of smart contracts directly, instead of storing them on-chain.", + "2": "As it is a smart contract which is executing certain functions, coins and tokens can be spent from your account.", + "3": "Proceed only if it originates from a trusted source." + }, + "execute-sc-warning": { + "1": "Proceed only if it originates from a trusted source.", + "2": "This operation is like a smart contract and can spend coins and tokens from your account." + }, + "execute-sc-max-coins-tooltip": { + "1": "Most similar concept is Giving Allowance on EVM chains.", + "2": "In ExecuteSC sense, it is the maximal amount of MAS that can be spent in this operation." } } }, diff --git a/wails-frontend/src/pages/PasswordPromptHandler/BuySellRoll/BuySellRoll.tsx b/wails-frontend/src/pages/PasswordPromptHandler/BuySellRoll/BuySellRoll.tsx index 892807513..ca9a26804 100644 --- a/wails-frontend/src/pages/PasswordPromptHandler/BuySellRoll/BuySellRoll.tsx +++ b/wails-frontend/src/pages/PasswordPromptHandler/BuySellRoll/BuySellRoll.tsx @@ -1,8 +1,8 @@ -import { SignBodyProps } from '../Sign'; -import { Description } from '../SignComponentUtils/Description'; -import { From } from '../SignComponentUtils/From'; import { OPER_BUY_ROLL } from '@/const/operations'; import Intl from '@/i18n/i18n'; +import { SignBodyProps } from '@/pages/PasswordPromptHandler/Sign'; +import { Description } from '@/pages/PasswordPromptHandler/SignComponentUtils/Description'; +import { From } from '@/pages/PasswordPromptHandler/SignComponentUtils/From'; import { formatStandard, masToken } from '@/utils'; export function BuySellRoll(props: SignBodyProps) { diff --git a/wails-frontend/src/pages/PasswordPromptHandler/SignSC/CallSc.tsx b/wails-frontend/src/pages/PasswordPromptHandler/CallSC/CallSc.tsx similarity index 53% rename from wails-frontend/src/pages/PasswordPromptHandler/SignSC/CallSc.tsx rename to wails-frontend/src/pages/PasswordPromptHandler/CallSC/CallSc.tsx index 51fa9f7a3..980c550f7 100644 --- a/wails-frontend/src/pages/PasswordPromptHandler/SignSC/CallSc.tsx +++ b/wails-frontend/src/pages/PasswordPromptHandler/CallSC/CallSc.tsx @@ -1,9 +1,7 @@ -import { FiArrowRight } from 'react-icons/fi'; - -import { Description } from '../SignComponentUtils/Description'; import Intl from '@/i18n/i18n'; import { SignBodyProps } from '@/pages/PasswordPromptHandler/Sign'; -import { maskAddress, maskNickname } from '@/utils'; +import { Description } from '@/pages/PasswordPromptHandler/SignComponentUtils/Description'; +import { FromTo } from '@/pages/PasswordPromptHandler/SignComponentUtils/FromTo'; export function CallSc(props: SignBodyProps) { const { @@ -18,26 +16,12 @@ export function CallSc(props: SignBodyProps) { return (
-
-
-
-

- {Intl.t('password-prompt.sign.from')} -

-

{maskNickname(Nickname)}

-
-

{maskAddress(WalletAddress)}

-
-
- -
-
-

- {Intl.t('password-prompt.sign.contract')} -

-

{maskAddress(Address)}

-
-
+
diff --git a/wails-frontend/src/pages/PasswordPromptHandler/Delete.tsx b/wails-frontend/src/pages/PasswordPromptHandler/Delete.tsx index 6cce378d2..f7e185cd8 100644 --- a/wails-frontend/src/pages/PasswordPromptHandler/Delete.tsx +++ b/wails-frontend/src/pages/PasswordPromptHandler/Delete.tsx @@ -6,11 +6,11 @@ import { EventsOnce } from '@wailsjs/runtime/runtime'; import { FiTrash2 } from 'react-icons/fi'; import { useLocation, useNavigate } from 'react-router-dom'; -import { validate } from './Default'; -import { PromptRequestDeleteData } from './PasswordPromptHandler'; import { events, promptRequest, promptResult } from '@/events/events'; import Intl from '@/i18n/i18n'; import { Layout } from '@/layouts/Layout/Layout'; +import { validate } from '@/pages/PasswordPromptHandler/Default'; +import { PromptRequestDeleteData } from '@/pages/PasswordPromptHandler/PasswordPromptHandler'; import { ErrorCode, IErrorObject, diff --git a/wails-frontend/src/pages/PasswordPromptHandler/ExecuteSC.tsx/ExecuteSc.tsx b/wails-frontend/src/pages/PasswordPromptHandler/ExecuteSC.tsx/ExecuteSc.tsx index f4f073f8d..5f4650bdf 100644 --- a/wails-frontend/src/pages/PasswordPromptHandler/ExecuteSC.tsx/ExecuteSc.tsx +++ b/wails-frontend/src/pages/PasswordPromptHandler/ExecuteSC.tsx/ExecuteSc.tsx @@ -1,9 +1,11 @@ -import { SignBodyProps } from '../Sign'; -import { Description } from '../SignComponentUtils/Description'; -import { From } from '../SignComponentUtils/From'; -import Intl from '@/i18n/i18n'; -import { formatStandard, masToken, Unit } from '@/utils'; +import { Tooltip } from '@massalabs/react-ui-kit'; +import { FiAlertTriangle, FiInfo } from 'react-icons/fi'; +import Intl from '@/i18n/i18n'; +import { SignBodyProps } from '@/pages/PasswordPromptHandler/Sign'; +import { Description } from '@/pages/PasswordPromptHandler/SignComponentUtils/Description'; +import { From } from '@/pages/PasswordPromptHandler/SignComponentUtils/From'; +import { Unit, formatStandard, masToken } from '@/utils'; export function ExecuteSC(props: SignBodyProps) { const { MaxCoins, @@ -15,20 +17,44 @@ export function ExecuteSC(props: SignBodyProps) { } = props; return ( -
+

{Intl.t('password-prompt.sign.operation-type')}

-

{Intl.t(`password-prompt.sign.operation-types.${OperationType}`)}

+
+

+ {Intl.t(`password-prompt.sign.operation-types.${OperationType}`)} +

+ } + customClass="mas-caption !w-7/12 left-0 !ml-28" + content={ + <> + {Intl.t('password-prompt.sign.execute-sc-tooltip.1')} +
+ {Intl.t('password-prompt.sign.execute-sc-tooltip.2')} +
+
+ {Intl.t('password-prompt.sign.execute-sc-tooltip.3')} + + } + /> +
-
-

{Intl.t('password-prompt.sign.max-coins')}

-

- {formatStandard(MaxCoins, Unit.NanoMAS)} {masToken} +

+ +

+ {Intl.t('password-prompt.sign.execute-sc-warning.1')} +
+ {Intl.t('password-prompt.sign.execute-sc-warning.2')}

@@ -36,6 +62,27 @@ export function ExecuteSC(props: SignBodyProps) { +
+
+ } + className="w-fit pl-0 pr-2 hover:cursor-pointer" + customClass="mas-caption !w-7/12" + content={ + <> + {Intl.t('password-prompt.sign.execute-sc-max-coins-tooltip.1')} +
+ {Intl.t('password-prompt.sign.execute-sc-max-coins-tooltip.2')} + + } + /> +

{Intl.t('password-prompt.sign.max-coins')}

+
+

+ {formatStandard(MaxCoins, Unit.NanoMAS)} {masToken} +

+
+ {children}
); diff --git a/wails-frontend/src/pages/PasswordPromptHandler/PlainText/PlainText.tsx b/wails-frontend/src/pages/PasswordPromptHandler/PlainText/PlainText.tsx index dce79e794..4e3d88ece 100644 --- a/wails-frontend/src/pages/PasswordPromptHandler/PlainText/PlainText.tsx +++ b/wails-frontend/src/pages/PasswordPromptHandler/PlainText/PlainText.tsx @@ -2,9 +2,9 @@ import { AccordionCategory, AccordionContent } from '@massalabs/react-ui-kit'; import { WindowSetSize } from '@wailsjs/runtime/runtime'; import { FiChevronDown, FiChevronUp, FiInfo } from 'react-icons/fi'; -import { SignBodyProps } from '../Sign'; -import { From } from '../SignComponentUtils/From'; import Intl from '@/i18n/i18n'; +import { SignBodyProps } from '@/pages/PasswordPromptHandler/Sign'; +import { From } from '@/pages/PasswordPromptHandler/SignComponentUtils/From'; export function PlainText(props: SignBodyProps) { const { PlainText, DisplayData, WalletAddress, Description, Nickname } = diff --git a/wails-frontend/src/pages/PasswordPromptHandler/Sign.tsx b/wails-frontend/src/pages/PasswordPromptHandler/Sign.tsx index f9741ea6e..42ed6451a 100644 --- a/wails-frontend/src/pages/PasswordPromptHandler/Sign.tsx +++ b/wails-frontend/src/pages/PasswordPromptHandler/Sign.tsx @@ -8,11 +8,11 @@ import { FiLock } from 'react-icons/fi'; import { useLocation, useNavigate } from 'react-router-dom'; import { BuySellRoll } from './BuySellRoll/BuySellRoll'; +import { CallSc } from './CallSC/CallSc'; import { validate } from './Default'; import { ExecuteSC } from './ExecuteSC.tsx/ExecuteSc'; import { PlainText } from './PlainText/PlainText'; import { OperationCost } from './SignComponentUtils/OperationCost'; -import { CallSc } from './SignSC/CallSc'; import { Transaction } from './Transaction/Transaction'; import { OPER_BUY_ROLL, diff --git a/wails-frontend/src/pages/PasswordPromptHandler/SignComponentUtils/FromTo.tsx b/wails-frontend/src/pages/PasswordPromptHandler/SignComponentUtils/FromTo.tsx new file mode 100644 index 000000000..144b8453e --- /dev/null +++ b/wails-frontend/src/pages/PasswordPromptHandler/SignComponentUtils/FromTo.tsx @@ -0,0 +1,50 @@ +import { FiArrowRight } from 'react-icons/fi'; + +import Intl from '@/i18n/i18n'; +import { maskAddress, maskNickname } from '@/utils'; + +interface FromToProps { + fromNickname: string; + fromAddress: string; + toNickname?: string; + toAddress: string; + label: string; +} + +export function FromTo(props: FromToProps) { + const { + fromNickname: nickname, + fromAddress: walletAddress, + toNickname: recipientNickname, + toAddress: recipientAddress, + label, + } = props; + + return ( +
+
+
+

+ {Intl.t('password-prompt.sign.from')} +

+

{maskNickname(nickname)}

+
+

{maskAddress(walletAddress)}

+
+
+ +
+
+
+

{Intl.t(label)}

+ {recipientNickname ? ( +

+ {maskNickname(recipientNickname)} +

+ ) : null} +
+

{maskAddress(recipientAddress)}

+
+
+ ); +} diff --git a/wails-frontend/src/pages/PasswordPromptHandler/SignComponentUtils/OperationCost.tsx b/wails-frontend/src/pages/PasswordPromptHandler/SignComponentUtils/OperationCost.tsx index e7fe00e49..9bdf7bfc4 100644 --- a/wails-frontend/src/pages/PasswordPromptHandler/SignComponentUtils/OperationCost.tsx +++ b/wails-frontend/src/pages/PasswordPromptHandler/SignComponentUtils/OperationCost.tsx @@ -125,9 +125,9 @@ export function OperationCost(props: OperationCostProps) { icon={} content={ <> - {Intl.t('password-prompt.sign.fees-tooltip')} + {Intl.t('password-prompt.sign.fees-tooltip.1')}
- {Intl.t('password-prompt.sign.fees-tooltip-2')} + {Intl.t('password-prompt.sign.fees-tooltip.2')} } /> diff --git a/wails-frontend/src/pages/PasswordPromptHandler/Transaction/Transaction.tsx b/wails-frontend/src/pages/PasswordPromptHandler/Transaction/Transaction.tsx index 059c03cce..2a32c5e32 100644 --- a/wails-frontend/src/pages/PasswordPromptHandler/Transaction/Transaction.tsx +++ b/wails-frontend/src/pages/PasswordPromptHandler/Transaction/Transaction.tsx @@ -1,21 +1,14 @@ -import { FiArrowRight } from 'react-icons/fi'; - -import { SignBodyProps } from '../Sign'; -import { Description } from '../SignComponentUtils/Description'; import Intl from '@/i18n/i18n'; -import { - formatStandard, - masToken, - maskAddress, - Unit, - maskNickname, -} from '@/utils'; +import { SignBodyProps } from '@/pages/PasswordPromptHandler/Sign'; +import { Description } from '@/pages/PasswordPromptHandler/SignComponentUtils/Description'; +import { FromTo } from '@/pages/PasswordPromptHandler/SignComponentUtils/FromTo'; +import { formatStandard, masToken, Unit } from '@/utils'; export function Transaction(props: SignBodyProps) { const { WalletAddress, RecipientAddress, - RecipientNickname, + RecipientNickname = '', OperationType, Amount, Description: description, @@ -25,33 +18,13 @@ export function Transaction(props: SignBodyProps) { return (
-
-
-
-

- {Intl.t('password-prompt.sign.from')} -

-

{maskNickname(Nickname)}

-
-

{maskAddress(WalletAddress)}

-
-
- -
-
-
-

- {Intl.t('password-prompt.sign.to')} -

- {RecipientAddress ? ( -

- {maskNickname(RecipientNickname)} -

- ) : null} -
-

{maskAddress(RecipientAddress)}

-
-
+