Merge pull request #101 from spacemeshos/tweak-gui

Small GUI tweaks: spawning account and button labels

src/components/AccountActionHints.tsx

@@ -0,0 +1,139 @@
+import QRCode from 'react-qr-code';
+
+import { Box, Card, CardBody, Flex, Spinner, Text } from '@chakra-ui/react';
+import { O, pipe } from '@mobily/ts-belt';
+
+import {
+  useCurrentGenesisID,
+  useCurrentHRP,
+  useCurrentNetwork,
+} from '../hooks/useNetworkSelectors';
+import { useCurrentAccount } from '../hooks/useWalletSelectors';
+import useAccountData from '../store/useAccountData';
+import { MethodSelectors } from '../utils/templates';
+
+function AccountActionHints(): JSX.Element | null {
+  const hrp = useCurrentHRP();
+  const genesisID = useCurrentGenesisID();
+  const currentAccount = useCurrentAccount(hrp);
+  const network = useCurrentNetwork();
+  const { isSpawnedAccount, getAccountData } = useAccountData();
+
+  const data = pipe(
+    O.zip(genesisID, currentAccount),
+    O.flatMap(([genID, acc]) =>
+      O.zip(
+        getAccountData(genID, acc.address),
+        O.Some(isSpawnedAccount(genID, acc.address))
+      )
+    )
+  );
+
+  if (O.isNone(data) || !network) return null;
+  const [account, isSpawned] = data;
+  if (isSpawned) return null;
+
+  const renderContents = () => {
+    // No balance
+    if (
+      account.state.current.balance === '0' ||
+      BigInt(account.state.current.balance) < 105000n
+    ) {
+      return (
+        <Flex direction={{ base: 'column', md: 'row' }} w="100%">
+          <Box flexGrow={1}>
+            <Text fontSize="md" fontWeight="bold" mb={2}>
+              Spawn the account first
+            </Text>
+            <Text fontSize="sm" mb={2}>
+              Accounts have to be spawned before they can send funds.
+            </Text>
+            <Text fontSize="sm" mb={2}>
+              To spawn the account, send some SMH to your address, and once
+              received, you&apos;ll be able to perform this step.
+            </Text>
+            <Text fontSize="sm" mb={2}>
+              It is also possible to spawn the account using another already
+              spawned one.
+            </Text>
+          </Box>
+          <Box
+            w={{ base: '100%', md: '50%' }}
+            ml={{ base: 0, md: 4 }}
+            mt={{ base: 4, md: 0 }}
+          >
+            <QRCode
+              bgColor="var(--chakra-colors-brand-lightGray)"
+              fgColor="var(--chakra-colors-brand-darkGreen)"
+              style={{
+                height: 'auto',
+                maxWidth: '200px',
+                width: '100%',
+                marginLeft: 'auto',
+                marginRight: 'auto',
+              }}
+              value={account.address}
+            />
+          </Box>
+        </Flex>
+      );
+    }
+
+    // Spawn transaction is not applied yet
+    const hasSpawnTx = account.transactions.some(
+      (tx) => tx.template.method === MethodSelectors.Spawn
+    );
+    if (hasSpawnTx) {
+      return (
+        <Flex w="100%" direction={{ base: 'column-reverse', md: 'row' }}>
+          <Box flexGrow={1}>
+            <Text fontSize="md" fontWeight="bold" mb={2}>
+              Wait for the Spawn transaction&nbsp;to&nbsp;be&nbsp;applied
+            </Text>
+            <Text fontSize="sm" mb={2}>
+              It may take up to {Math.ceil(network.layerDuration / 60)} minutes.
+            </Text>
+            <Text fontSize="sm">
+              Then you will be able to publish any other transactions.
+            </Text>
+          </Box>
+          <Spinner
+            size="xl"
+            speed="1s"
+            ml={{ base: 0, md: 2 }}
+            mb={{ base: 4, md: 0 }}
+            color="brand.green"
+          />
+        </Flex>
+      );
+    }
+
+    // No spawn transaction
+    return (
+      <Box w="100%">
+        <Text fontSize="md" fontWeight="bold" mb={2}>
+          Spawn the account first
+        </Text>
+        <Text fontSize="sm">
+          Now you can spawn the account.
+          <br />
+          Click the &quot;Send&quot; button above, then click next and
+          &quot;Sign &amp; Publish&quot;.
+        </Text>
+      </Box>
+    );
+  };
+
+  return (
+    <Card
+      my={4}
+      variant="outline"
+      borderColor="brand.green"
+      maxW={{ base: '100%', md: '600px' }}
+    >
+      <CardBody>{renderContents()}</CardBody>
+    </Card>
+  );
+}
+
+export default AccountActionHints;

src/components/CreateAccountModal.tsx

@@ -120,7 +120,7 @@ function CreateAccountModal({
           extractSpawnArgs(data),
           password
         ),
-      'Create a new Account',
+      'Create an Account',
       // eslint-disable-next-line max-len
       `Please enter the password to create the new account "${
         data.displayName

src/components/CreateKeyPairModal.tsx

@@ -57,7 +57,7 @@ function CreateKeyPairModal({
           await createKeyPair(displayName, path, password, createSingleSig);
           return true;
         },
-        'Create a new Key Pair',
+        'Create a Key Pair',
         // eslint-disable-next-line max-len
         `Please enter the password to create the new key pair "${displayName}" with path "${path}"`
       );

src/components/EditAccountModal.tsx

@@ -142,7 +142,7 @@ function EditAccountModal({
           extractSpawnArgs(data),
           password
         ),
-      'Edit Account',
+      'Save Account',
       // eslint-disable-next-line max-len
       `Please enter the password to save changes in the account "${
         data.displayName
@@ -347,7 +347,8 @@ function EditAccountModal({
               isSubmitted={isSubmitted}
             />
             <Text color="orange" my={4} fontSize="xs" textAlign="center">
-              Any changes to the parameters below will alter the account address.
+              Any changes to the parameters below will alter the account
+              address.
               <br />
               Proceed at your own risk.
             </Text>

src/components/ImportKeyFromLedgerModal.tsx

@@ -73,7 +73,7 @@ function ImportKeyFromLedgerModal({
           );
           return true;
         },
-        'Import PublicKey from Ledger device',
+        'Import Public Key',
         // eslint-disable-next-line max-len
         `Please enter the password to store public key ${publicKey} in the wallet.`
       );

src/components/ImportKeyPairModal.tsx

@@ -64,7 +64,7 @@ function ImportKeyPairModal({
           );
           return true;
         },
-        'Importing the Key Pair',
+        'Import the Key Pair',
         // eslint-disable-next-line max-len
         `Please enter the password to create the new key pair "${displayName}" from the secret key.`
       );

src/components/RenameKeyModal.tsx

@@ -67,7 +67,7 @@ function RenameKeyModal({
         await renameKey(keyIndex, displayName, password);
         return true;
       },
-      'Rename',
+      'Rename Key',
       // eslint-disable-next-line max-len
       `Please enter the password to change the name of key "${key.displayName}" (${key.path}) to "${displayName}":`
     );

src/components/sendTx/SendTxModal.tsx

@@ -612,7 +612,7 @@ function SendTxModal({ isOpen, onClose }: SendTxModalProps): JSX.Element {
 
       return withPassword(
         (password) => signTx(txData.encoded, signWith, password),
-        'Enter password to sign transaction',
+        'Sign Transaction',
         txData.description
       );
     };

src/components/sendTx/SpawnAnotherAccount.tsx

@@ -6,8 +6,11 @@ import {
 } from 'react-hook-form';
 
 import { Flex, FormControl, FormLabel, Select, Text } from '@chakra-ui/react';
+import { O, pipe } from '@mobily/ts-belt';
 import { StdTemplateKeys } from '@spacemesh/sm-codec';
 
+import { useCurrentGenesisID } from '../../hooks/useNetworkSelectors';
+import useAccountData from '../../store/useAccountData';
 import { AccountWithAddress } from '../../types/wallet';
 import {
   isMultiSigAccount,
@@ -35,7 +38,19 @@ function SpawnAnotherAccount({
   unregister,
   setValue,
 }: SpawnAnotherAccount) {
-  const [selectedAddress, setSelectedAddress] = useState(accounts[0]?.address);
+  const genesisID = useCurrentGenesisID();
+  const { isSpawnedAccount } = useAccountData();
+  const isSpawned = (acc: AccountWithAddress<AnySpawnArguments>) =>
+    pipe(
+      genesisID,
+      O.mapWithDefault(false, (genesis) =>
+        isSpawnedAccount(genesis, acc.address)
+      )
+    );
+
+  const [selectedAddress, setSelectedAddress] = useState(
+    accounts.find((x) => !isSpawned(x))?.address
+  );
 
   const selectAccount = useCallback(
     (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -95,7 +110,7 @@ function SpawnAnotherAccount({
 
   return (
     <Flex flexDir="column">
-      <FormControl>
+      <FormControl mb={2}>
         <FormLabel>Please select account to spawn:</FormLabel>
         <Select
           variant="whitePill"
@@ -106,6 +121,7 @@ function SpawnAnotherAccount({
             <option
               key={`${acc.address}_${acc.displayName}`}
               value={acc.address}
+              disabled={isSpawned(acc)}
             >
               {acc.displayName} ({acc.address})
             </option>

src/hooks/useMnemonics.ts

@@ -16,7 +16,7 @@ const useMnemonics = () => {
   const revealMnemonics = async () => {
     const words = await withPassword(
       showMnemonics,
-      'Show mnemonics',
+      'Show Mnemonics',
       // eslint-disable-next-line max-len
       'Please enter your password to read mnemonics from the secret part of your wallet:'
     );

src/hooks/useRevealSecretKey.ts

@@ -23,7 +23,7 @@ const useRevealSecretKey = () => {
   const revealSecretKey = async (key: SafeKey) => {
     const sk = await withPassword(
       (password) => readSecretKey(key.publicKey, password),
-      'Reveal secret key',
+      'Reveal Secret Key',
       // eslint-disable-next-line max-len
       `Please type the password to reveal secret key for account "${key.displayName}"`
     );

src/screens/WalletScreen.tsx

@@ -26,6 +26,7 @@ import {
   IconSend,
 } from '@tabler/icons-react';
 
+import AccountActionHints from '../components/AccountActionHints';
 import AccountSelection from '../components/AccountSelection';
 import ConfirmationAlert from '../components/ConfirmationAlert';
 import CopyButton from '../components/CopyButton';
@@ -240,15 +241,8 @@ function WalletScreen(): JSX.Element {
               <IconQrcode />
               Receive
             </Button>
-            {/* <Button w="25%" h={14} flexDirection="column" p={2}>
-              <IconWritingSign />
-              Sign
-            </Button>
-            <Button w="25%" h={14} flexDirection="column" p={2}>
-              <IconUserScan />
-              Verify
-            </Button> */}
           </ButtonGroup>
+          <AccountActionHints />
           <Tabs
             w="100%"
             display="flex"