Small tweaks

.eslintrc.json

@@ -39,6 +39,12 @@
     "react/react-in-jsx-scope": "off",
     "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }],
     "react/jsx-props-no-spreading": "off",
+    "react/require-default-props": [
+      "error",
+      {
+        "functions": "defaultArguments"
+      }
+    ],
     "linebreak-style": "off",
     "eol-last": "off",
     "max-len": ["warn", { "code": 80 }],

Roadmap.md

@@ -3,6 +3,7 @@
 1. [X] Create wallet
    1. [X] Show mnemonics
    2. [X] Ask to confirm
+      - [X] Click on tag to place a word
    3. [X] Ask display name and password
 
 2. [X] Recover from mnemonics
@@ -74,23 +75,33 @@
 
 --
 
-Z. [X] Lock wallet when idle for some time
+Features
 
-Y. [X] Update wallet format to allow adding other account types, view-only accounts, etc
+- [X] Lock wallet when idle for some time
 
-X. [X] Publish changed @spacemesh/ed25519-bip32
-   0. [X] Make it work well for smapp-lite
-   1. [X] Make it works without breaking change...
-   2. [ ] Open PR (to sdk repo)
-   3. [X] Publish to NPM
-   4. [X] Update smapp-lite/package.json
+- [X] Update wallet format to allow adding other account types, view-only accounts, etc
 
-W. [X] Add VirtualScroll on WalletScreen
+- [X] Publish changed @spacemesh/ed25519-bip32
+  0. [X] Make it work well for smapp-lite
+  1. [X] Make it works without breaking change...
+  2. [ ] Open PR (to sdk repo)
+  3. [X] Publish to NPM
+  4. [X] Update smapp-lite/package.json
 
-V. [X] Auto-fetch data on switching account / network
+- [X] Add VirtualScroll on WalletScreen
 
-U. [ ] Add cache (service worker) for static resources (to allow working offline)
+- [X] Auto-fetch data on switching account / network
 
-T. [ ] Add cache for API requests (if possible to replace POST with GET on API side)
+- [ ] Add cache (service worker) for static resources (to allow working offline)
 
-S. [X] Auto-fetch transactions and rewards periodically
+- [ ] Add cache for API requests (if possible to replace POST with GET on API side)
+
+- [X] Auto-fetch transactions and rewards periodically
+
+- [ ] Add SMH/Smidge Inputs
+
+- [ ] Add QR Code scanner
+
+- [ ] Load more transactions / rewards (now it is limited to latest 1000)
+
+- [ ] Session stickiness

package.json

@@ -75,7 +75,7 @@
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-simple-import-sort": "^9.0.0",
     "husky": "^8.0.3",

src/__tests__/txUtils.test.ts

@@ -1,5 +1,7 @@
 import { bech32 } from 'bech32';
 
+import { StdMethods } from '@spacemesh/sm-codec';
+
 import { Transaction } from '../types/tx';
 import { MethodName, TemplateName } from '../utils/templates';
 import { collectTxIdsByAddress } from '../utils/tx';
@@ -21,6 +23,7 @@ describe('collectTxIdsByAddress', () => {
       template: {
         name: TemplateName.SingleSig,
         methodName: MethodName.Spend,
+        method: StdMethods.Spend,
       },
       parsed: {
         Destination: bech32.fromWords(bech32.decode(destination).words),

src/api/requests/tx.ts

@@ -30,7 +30,7 @@ export const fetchTransactionsChunk = async (
   fetch(`${rpc}/spacemesh.v2alpha1.TransactionService/List`, {
     method: 'POST',
     body: JSON.stringify({
-      principal: address,
+      address,
       include_state: true,
       include_result: true,
       limit,

src/components/AddNetworkDrawer.tsx

@@ -18,6 +18,7 @@ import {
 
 import { fetchNetworkInfo } from '../api/requests/netinfo';
 import useNetworks from '../store/useNetworks';
+import { normalizeURL } from '../utils/url';
 
 import FormInput from './FormInput';
 
@@ -93,6 +94,7 @@ function AddNetworkDrawer({ isOpen, onClose }: Props): JSX.Element {
               register={register('api', {
                 value: 'https://',
                 required: 'JSON API URL is required',
+                setValueAs: normalizeURL,
                 pattern: {
                   value: /^https?:\/\/.+/,
                   message: 'URL must start with http:// or https://',
@@ -101,7 +103,9 @@ function AddNetworkDrawer({ isOpen, onClose }: Props): JSX.Element {
                   setApiError('');
                   setApiLoading(true);
                   try {
-                    const info = await fetchNetworkInfo(e.target.value);
+                    const info = await fetchNetworkInfo(
+                      normalizeURL(e.target.value)
+                    );
                     if (!info) {
                       throw new Error('Cannot fetch network info');
                     }
@@ -143,6 +147,8 @@ function AddNetworkDrawer({ isOpen, onClose }: Props): JSX.Element {
                   value: /^https?:\/\/.+/,
                   message: 'URL must start with http:// or https://',
                 },
+                value: 'https://explorer.spacemesh.io',
+                setValueAs: normalizeURL,
               })}
               errors={errors}
               isSubmitted={isSubmitted}

src/components/BackButton.tsx

@@ -3,20 +3,20 @@ import { useNavigate } from 'react-router-dom';
 import { Button } from '@chakra-ui/react';
 import { IconArrowNarrowLeft } from '@tabler/icons-react';
 
+import { noop } from '../utils/func';
+
 type Props = {
   onClick?: () => void;
 };
 
-function BackButton({ onClick }: Props): JSX.Element {
+function BackButton({ onClick = noop }: Props): JSX.Element {
   const navigate = useNavigate();
 
   return (
     <Button
       leftIcon={<IconArrowNarrowLeft />}
       onClick={() => {
-        if (onClick) {
-          onClick();
-        }
+        onClick();
         navigate(-1);
       }}
     >
@@ -25,8 +25,4 @@ function BackButton({ onClick }: Props): JSX.Element {
   );
 }
 
-BackButton.defaultProps = {
-  onClick: null,
-};
-
 export default BackButton;

src/components/ExplorerButton.tsx

@@ -18,10 +18,10 @@ interface ExplorerButtonProps extends ButtonProps {
 function ExplorerButton({
   dataType,
   value,
-  iconSize,
-  label,
-  full,
-  v2,
+  iconSize = 14,
+  label = 'Open in Explorer',
+  full = false,
+  v2 = false,
   ...buttonProps
 }: ExplorerButtonProps): JSX.Element {
   const { getCurrentNetwork } = useNetworks();
@@ -59,11 +59,4 @@ function ExplorerButton({
   );
 }
 
-ExplorerButton.defaultProps = {
-  v2: false,
-  full: false,
-  iconSize: 14,
-  label: 'Open in Explorer',
-};
-
 export default ExplorerButton;

src/components/FormAddressSelect.tsx

@@ -47,9 +47,9 @@ function FormAddressSelect<T extends FieldValues, FieldName extends Path<T>>({
   register,
   unregister,
   errors,
-  isSubmitted,
-  isRequired,
-  children,
+  isSubmitted = false,
+  isRequired = false,
+  children = '',
 }: Props<T, FieldName>): JSX.Element {
   const [origin, setOrigin] = useState(Origin.Local);
   useEffect(() => () => unregister(fieldName), [unregister, fieldName, origin]);
@@ -121,10 +121,4 @@ function FormAddressSelect<T extends FieldValues, FieldName extends Path<T>>({
   );
 }
 
-FormAddressSelect.defaultProps = {
-  isSubmitted: false,
-  isRequired: false,
-  children: '',
-};
-
 export default FormAddressSelect;

src/components/FormInput.tsx

@@ -27,10 +27,10 @@ function FormInput<T extends FieldValues>({
   label,
   register,
   errors,
-  isSubmitted,
-  children,
-  inputAddon,
-  inputProps,
+  isSubmitted = false,
+  children = '',
+  inputAddon = null,
+  inputProps = {},
 }: Props<T>): JSX.Element {
   const isRequired = !!register.required;
   const error = errors[register.name];
@@ -56,10 +56,4 @@ function FormInput<T extends FieldValues>({
   );
 }
 
-FormInput.defaultProps = {
-  isSubmitted: false,
-  inputAddon: null,
-  inputProps: {},
-};
-
 export default FormInput;

src/components/FormInputViewOnly.tsx

@@ -17,9 +17,9 @@ type Props = PropsWithChildren<{
 
 function FormInputViewOnly({
   label,
-  children,
-  inputAddon,
-  inputProps,
+  children = '',
+  inputAddon = null,
+  inputProps = {},
   value,
 }: Props): JSX.Element {
   return (
@@ -36,9 +36,4 @@ function FormInputViewOnly({
   );
 }
 
-FormInputViewOnly.defaultProps = {
-  inputAddon: null,
-  inputProps: {},
-};
-
 export default FormInputViewOnly;

src/components/FormKeySelect.tsx

@@ -48,9 +48,9 @@ function FormKeySelect<T extends FieldValues, FieldName extends Path<T>>({
   register,
   unregister,
   errors,
-  isSubmitted,
-  isRequired,
-  children,
+  isSubmitted = false,
+  isRequired = false,
+  children = '',
 }: Props<T, FieldName>): JSX.Element {
   const [keyType, setKeyType] = useState(KeyType.Local);
   useEffect(
@@ -116,10 +116,4 @@ function FormKeySelect<T extends FieldValues, FieldName extends Path<T>>({
   );
 }
 
-FormKeySelect.defaultProps = {
-  isSubmitted: false,
-  isRequired: false,
-  children: '',
-};
-
 export default FormKeySelect;

src/components/FormMultiKeySelect.tsx

@@ -39,7 +39,7 @@ function FormMultiKeySelect<
   register,
   unregister,
   errors,
-  isSubmitted,
+  isSubmitted = false,
 }: Props<T, FieldName>): JSX.Element {
   const { fields, append, remove } = useFieldArray({
     control,
@@ -92,8 +92,4 @@ function FormMultiKeySelect<
   );
 }
 
-FormMultiKeySelect.defaultProps = {
-  isSubmitted: false,
-};
-
 export default FormMultiKeySelect;

src/components/FormSelect.tsx

@@ -24,13 +24,13 @@ type Props<T extends FieldValues> = PropsWithChildren<{
 }>;
 
 function FormSelect<T extends FieldValues>({
-  label,
+  label = '',
   options,
   register,
   errors,
-  isSubmitted,
-  children,
-  inputProps,
+  isSubmitted = false,
+  children = '',
+  inputProps = {},
 }: Props<T>): JSX.Element {
   const isRequired = !!register.required;
   const error = errors[register.name];
@@ -63,10 +63,4 @@ function FormSelect<T extends FieldValues>({
   );
 }
 
-FormSelect.defaultProps = {
-  label: '',
-  isSubmitted: false,
-  inputProps: {},
-};
-
 export default FormSelect;

src/components/FormTextarea.tsx

@@ -25,9 +25,9 @@ function FormTextarea<T extends FieldValues>({
   label,
   register,
   errors,
-  isSubmitted,
-  children,
-  textareaProps,
+  isSubmitted = false,
+  children = '',
+  textareaProps = { rows: 4 },
 }: Props<T>): JSX.Element {
   const isRequired = !!register.required;
   const error = errors[register.name];
@@ -50,9 +50,4 @@ function FormTextarea<T extends FieldValues>({
   );
 }
 
-FormTextarea.defaultProps = {
-  isSubmitted: false,
-  textareaProps: { rows: 4 },
-};
-
 export default FormTextarea;

src/components/PasswordInput.tsx

@@ -11,11 +11,10 @@ import { IconEye, IconEyeOff } from '@tabler/icons-react';
 
 type Props = {
   placeholder?: string;
-  initialValue?: string;
   register: ReturnType<UseFormRegister<FieldValues>>;
 };
 
-function PasswordInput({ placeholder, register }: Props) {
+function PasswordInput({ placeholder = 'Enter password', register }: Props) {
   const [show, setShow] = useState(false);
 
   const toggleShow = () => setShow(!show);
@@ -41,9 +40,4 @@ function PasswordInput({ placeholder, register }: Props) {
   );
 }
 
-PasswordInput.defaultProps = {
-  placeholder: 'Enter password',
-  initialValue: '',
-};
-
 export default PasswordInput;