819-4 wails improvement: execute SC, refactor (#833)

* wails: rename CallSC directory * wails: add FromTo component * wails: refactor import using alias * wails: wording * wails: execute SC warnings
massalabs · Nov 8, 2023 · f9e6aa6 · f9e6aa6
1 parent 11994a0
commit f9e6aa6
Show file tree

Hide file tree

Showing 10 changed files with 156 additions and 87 deletions.
diff --git a/wails-frontend/src/i18n/en_US.json b/wails-frontend/src/i18n/en_US.json
@@ -51,16 +51,18 @@
       "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.",
       "edit-fees": "edit fees",
       "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
@@ -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/...s/PasswordPromptHandler/SignSC/CallSc.tsx → ...s/PasswordPromptHandler/CallSC/CallSc.tsx b/...s/PasswordPromptHandler/SignSC/CallSc.tsx → ...s/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 (
     <div className="flex flex-col items-center gap-4 mas-menu-default w-[326px]">
-      <div className="flex w-full items-center justify-between">
-        <div className="flex flex-col">
-          <div className="flex gap-2">
-            <p className="mas-menu-active">
-              {Intl.t('password-prompt.sign.from')}
-            </p>
-            <p className="mas-menu-default">{maskNickname(Nickname)}</p>
-          </div>
-          <p className="mas-caption">{maskAddress(WalletAddress)}</p>
-        </div>
-        <div className="h-8 w-8 rounded-full flex items-center justify-center bg-neutral">
-          <FiArrowRight size={24} className="text-primary" />
-        </div>
-        <div className="flex flex-col">
-          <p className="mas-menu-active">
-            {Intl.t('password-prompt.sign.contract')}
-          </p>
-          <p className="mas-caption">{maskAddress(Address)}</p>
-        </div>
-      </div>
+      <FromTo
+        fromNickname={Nickname}
+        fromAddress={WalletAddress}
+        toAddress={Address}
+        label="password-prompt.sign.contract"
+      />
 
       <hr className="h-0.25 bg-neutral opacity-40 w-full" />
 

diff --git 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
@@ -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,27 +17,72 @@ export function ExecuteSC(props: SignBodyProps) {
   } = props;
 
   return (
-    <div className="flex flex-col items-center gap-4 mas-menu-default">
+    <div className="flex flex-col items-center gap-4">
       <From nickname={Nickname} walletAddress={WalletAddress} />
 
       <hr className="h-0.25 bg-neutral opacity-40 w-full" />
 
       <div className="flex w-full items-center justify-between">
         <p>{Intl.t('password-prompt.sign.operation-type')}</p>
-        <p>{Intl.t(`password-prompt.sign.operation-types.${OperationType}`)}</p>
+        <div className="flex items-center">
+          <p>
+            {Intl.t(`password-prompt.sign.operation-types.${OperationType}`)}
+          </p>
+          <Tooltip
+            icon={<FiInfo size={16} />}
+            customClass="mas-caption !w-7/12 left-0  !ml-28"
+            content={
+              <>
+                {Intl.t('password-prompt.sign.execute-sc-tooltip.1')}
+                <br />
+                {Intl.t('password-prompt.sign.execute-sc-tooltip.2')}
+                <br />
+                <br />
+                {Intl.t('password-prompt.sign.execute-sc-tooltip.3')}
+              </>
+            }
+          />
+        </div>
       </div>
 
-      <div className="flex w-full items-center justify-between">
-        <p>{Intl.t('password-prompt.sign.max-coins')} </p>
-        <p>
-          {formatStandard(MaxCoins, Unit.NanoMAS)} {masToken}
+      <div className="flex w-full items-center">
+        <FiAlertTriangle
+          size={42}
+          className="text-s-warning pr-2"
+          strokeWidth="2"
+        />
+        <p className="mas-caption">
+          {Intl.t('password-prompt.sign.execute-sc-warning.1')}
+          <br />
+          {Intl.t('password-prompt.sign.execute-sc-warning.2')}
         </p>
       </div>
 
       <hr className="h-0.25 bg-neutral opacity-40 w-full" />
 
       <Description description={description} />
 
+      <div className="flex w-full items-center justify-between pb-2">
+        <div className="flex items-center">
+          <Tooltip
+            icon={<FiInfo size={18} />}
+            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')}
+                <br />
+                {Intl.t('password-prompt.sign.execute-sc-max-coins-tooltip.2')}
+              </>
+            }
+          />
+          <p>{Intl.t('password-prompt.sign.max-coins')}</p>
+        </div>
+        <p>
+          {formatStandard(MaxCoins, Unit.NanoMAS)} {masToken}
+        </p>
+      </div>
+
       {children}
     </div>
   );

diff --git 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
@@ -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
@@ -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 (
+    <div className="flex w-full items-center justify-between">
+      <div className="flex flex-col">
+        <div className="flex gap-2">
+          <p className="mas-menu-active">
+            {Intl.t('password-prompt.sign.from')}
+          </p>
+          <p className="mas-menu-default">{maskNickname(nickname)}</p>
+        </div>
+        <p className="mas-caption">{maskAddress(walletAddress)}</p>
+      </div>
+      <div className="h-8 w-8 rounded-full flex items-center justify-center bg-neutral">
+        <FiArrowRight size={24} className="text-primary" />
+      </div>
+      <div className="flex flex-col">
+        <div className="flex gap-2">
+          <p className="mas-menu-active">{Intl.t(label)}</p>
+          {recipientNickname ? (
+            <p className="mas-menu-default">
+              {maskNickname(recipientNickname)}
+            </p>
+          ) : null}
+        </div>
+        <p className="mas-caption">{maskAddress(recipientAddress)}</p>
+      </div>
+    </div>
+  );
+}
diff --git 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={<FiInfo size={16} />}
                     content={
                       <>
-                        {Intl.t('password-prompt.sign.fees-tooltip')}
+                        {Intl.t('password-prompt.sign.fees-tooltip.1')}
                         <br />
-                        {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
@@ -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 (
     <div className="flex flex-col items-center gap-4 mas-menu-default">
-      <div className="flex w-full items-center justify-between">
-        <div className="flex flex-col">
-          <div className="flex gap-2">
-            <p className="mas-menu-active">
-              {Intl.t('password-prompt.sign.from')}
-            </p>
-            <p className="mas-menu-default">{maskNickname(Nickname)}</p>
-          </div>
-          <p className="mas-caption">{maskAddress(WalletAddress)}</p>
-        </div>
-        <div className="h-8 w-8 rounded-full flex items-center justify-center bg-neutral">
-          <FiArrowRight size={24} className="text-primary" />
-        </div>
-        <div className="flex flex-col">
-          <div className="flex gap-2">
-            <p className="mas-menu-active">
-              {Intl.t('password-prompt.sign.to')}
-            </p>
-            {RecipientAddress ? (
-              <p className="mas-menu-default">
-                {maskNickname(RecipientNickname)}
-              </p>
-            ) : null}
-          </div>
-          <p className="mas-caption">{maskAddress(RecipientAddress)}</p>
-        </div>
-      </div>
+      <FromTo
+        fromNickname={Nickname}
+        fromAddress={WalletAddress}
+        toNickname={RecipientNickname}
+        toAddress={RecipientAddress}
+        label="password-prompt.sign.to"
+      />
 
       <hr className="h-0.25 bg-neutral opacity-40 w-full" />