Merge pull request #38 from spacemeshos/tweak-gui

Tweak GUI

src/components/FormInput.tsx

@@ -24,7 +24,7 @@ type Props<T extends FieldValues> = PropsWithChildren<{
   isSubmitted?: boolean;
   inputAddon?: ReactNode;
   inputProps?: InputProps;
-  hint?: string;
+  hint?: ReactNode;
 }>;
 
 function FormInput<T extends FieldValues>({

src/components/TxListItem.tsx

@@ -1,13 +1,15 @@
 import { CheckCircleIcon } from '@chakra-ui/icons';
-import { Box, Card, CardBody, Flex, Text } from '@chakra-ui/react';
+import { Box, Card, CardBody, Flex, Icon, Text } from '@chakra-ui/react';
+import { StdMethods } from '@spacemesh/sm-codec';
+import { IconArrowBigDownFilled, IconArrowBigLeftFilled, IconArrowBigLeftLinesFilled, IconArrowBigRightFilled, IconQuestionMark } from '@tabler/icons-react';
 
 import { Bech32Address } from '../types/common';
 import { Transaction } from '../types/tx';
 import { getAbbreviatedHexString } from '../utils/abbr';
 import { formatTimestamp } from '../utils/datetime';
 import { epochByLayer, timestampByLayer } from '../utils/layers';
 import { formatSmidge } from '../utils/smh';
-import { getStatusColor, getTxBalance } from '../utils/tx';
+import { getStatusColor, getTxBalance, getTxType, TxType } from '../utils/tx';
 
 type TxListItemProps = {
   tx: Transaction;
@@ -18,6 +20,41 @@ type TxListItemProps = {
   layersPerEpoch: number;
 };
 
+function TxIcon({ tx, host }: { tx: Transaction; host: Bech32Address }) {
+  const color = getStatusColor(tx.state);
+  const IconComponent = (() => {
+    switch (tx.template.method) {
+      case StdMethods.Spawn:
+        return IconArrowBigDownFilled;
+      case StdMethods.Spend: {
+        switch (getTxType(tx, host)) {
+          case TxType.Received:
+            return IconArrowBigRightFilled;
+          case TxType.Spent:
+          case TxType.Self:
+          default:
+            return IconArrowBigLeftFilled;
+        }
+      }
+      case StdMethods.Drain:
+        return IconArrowBigLeftLinesFilled;
+      default:
+        return IconQuestionMark;
+    }
+  })();
+
+  return (
+    <Icon
+      as={IconComponent}
+      color={color}
+      mr={2}
+      mb={1}
+      boxSize={4}
+      verticalAlign="bottom"
+    />
+  );
+}
+
 function TxListItem({
   tx,
   host,
@@ -42,11 +79,17 @@ function TxListItem({
         <Flex>
           <Box flex={1}>
             <Text fontSize="sm" mb={1}>
+              <TxIcon tx={tx} host={host} />
               {getAbbreviatedHexString(tx.id)}
-            </Text>
-            <Text>
-              <CheckCircleIcon color={getStatusColor(tx.state)} mr={2} mb={1} />
-              {tx.template.methodName}
+              <Text
+                as="span"
+                fontSize="xx-small"
+                textTransform="uppercase"
+                color="grey"
+                ml={2}
+              >
+                {tx.template.methodName}
+              </Text>
             </Text>
             <Text fontSize="xx-small" color="gray" mt={1}>
               {tx.layer ? (

src/components/sendTx/SendTxModal.tsx

@@ -1153,13 +1153,24 @@ function SendTxModal({ isOpen, onClose }: SendTxModalProps): JSX.Element {
                     errors={errors}
                     isSubmitted={isSubmitted}
                     inputAddon={
-                      <InputRightElement mr={2}>
-                        <Text fontSize="xs">Smidge</Text>
+                      <InputRightElement w="auto" pr={2}>
+                        <Text fontSize="xs">Smidge per unit</Text>
                       </InputRightElement>
                     }
-                    // eslint-disable-next-line max-len
-                    hint="How much to pay for gas: During high network traffic, 
-                    transactions with higher gas fees are prioritized."
+                    hint={
+                      <>
+                        <Text mb={2}>
+                          <strong>How much to pay per gas unit</strong>
+                          <br />
+                          During high network traffic, transactions with higher
+                          gas prices are prioritized.
+                        </Text>
+                        <Text>
+                          Example: transaction costs 25,000 gas units, gas price
+                          is 2 smidges, the total fee will be 50,000 smidges.
+                        </Text>
+                      </>
+                    }
                   />
                 </Box>
                 <Box ml={2} w="50%">
@@ -1178,10 +1189,17 @@ function SendTxModal({ isOpen, onClose }: SendTxModalProps): JSX.Element {
                     })}
                     errors={errors}
                     isSubmitted={isSubmitted}
-                    // eslint-disable-next-line max-len
-                    hint="The number is used only once to ensure each transaction is unique. 
-                    It increments automatically,
-                    but can also be set manually if needed."
+                    hint={
+                      <Text>
+                        <strong>The transaction counter</strong>
+                        <br />
+                        The number is used only to ensure each transaction is
+                        unique.
+                        <br />
+                        It increments automatically, but can be set manually if
+                        needed.
+                      </Text>
+                    }
                   />
                 </Box>
               </Flex>

src/store/useAccountData.ts

@@ -68,6 +68,11 @@ const getAccountRewards = (net: NetworkState, address: Bech32Address) =>
 const getAccountTransactions = (net: NetworkState, address: Bech32Address) =>
   (net.txIds?.[address] || [])
     .map((txId) => net.transactions?.[txId])
+    .sort((a, b) => {
+      if (!a?.layer) return 1;
+      if (!b?.layer) return -1;
+      return a.layer - b.layer;
+    })
     .filter(Boolean) as Transaction[];
 
 // Store