Merge branch 'fix/misc-bugs' into 'dev'

fix(watcher-app): misc bugs Closes #67 See merge request ergo/rosen-bridge/ui!67
rosen-bridge · Sep 26, 2023 · 7343839 · 7343839
2 parents 24799ac + 8edc9b2
commit 7343839
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 40 deletions.
diff --git a/apps/watcher/app/(home)/@infoWidgets/page.tsx b/apps/watcher/app/(home)/@infoWidgets/page.tsx
@@ -92,7 +92,7 @@ const InfoWidgets = () => {
         <InfoWidgetCard
           title="ERG"
           value={
-            ergToken?.amount
+            ergToken?.amount !== undefined
               ? getDecimalString(ergToken.amount.toString(), ergToken.decimals)
               : ''
           }
@@ -108,7 +108,7 @@ const InfoWidgets = () => {
         <InfoWidgetCard
           title="RSN"
           value={
-            rsnToken?.amount
+            rsnToken?.amount !== undefined
               ? getDecimalString(rsnToken.amount.toString(), rsnToken.decimals)
               : ''
           }

diff --git a/apps/watcher/app/actions/@form/lock/page.tsx b/apps/watcher/app/actions/@form/lock/page.tsx
@@ -38,7 +38,7 @@ const LockForm = () => {
   >('/permit', mutator);
 
   useEffect(() => {
-    if (!isRsnTokenLoading && !rsnToken) {
+    if (!isRsnTokenLoading && !rsnToken?.amount) {
       setAlertData({
         severity: 'error',
         message: 'RSN token does not exist',
@@ -90,7 +90,7 @@ const LockForm = () => {
     </AlertCard>
   );
 
-  const disabled = isRsnTokenLoading || !rsnToken;
+  const disabled = isRsnTokenLoading || !rsnToken?.amount;
 
   const renderTokenAmountTextField = () => (
     <TokenAmountTextField

diff --git a/apps/watcher/app/actions/@form/unlock/page.tsx b/apps/watcher/app/actions/@form/unlock/page.tsx
@@ -14,11 +14,14 @@ import {
 } from '@rosen-bridge/ui-kit';
 import { fetcher, mutator } from '@rosen-ui/swr-helpers';
 import { TokenInfo } from '@rosen-ui/types';
+import { getNonDecimalString } from '@rosen-ui/utils';
 
 import TokenAmountTextField, {
   TokenAmountCompatibleFormSchema,
 } from '../../TokenAmountTextField';
 
+import useRsnToken from '@/_hooks/useRsnToken';
+
 import {
   ApiInfoResponse,
   ApiPermitRequestBody,
@@ -31,17 +34,20 @@ const UnlockForm = () => {
     fetcher,
   );
 
+  const { rsnToken, isLoading: isRsnTokenLoading } = useRsnToken();
+
   const rwtPartialToken = useMemo<
     Pick<TokenInfo, 'amount' | 'decimals'> | undefined
   >(
     () =>
       info?.permitCount.active
         ? {
             amount: info.permitCount.active,
-            decimals: 0,
+            decimals: rsnToken?.decimals ?? 0,
+            name: rsnToken?.name,
           }
         : undefined,
-    [info?.permitCount],
+    [info, rsnToken],
   );
 
   const [alertData, setAlertData] = useState<{
@@ -63,24 +69,22 @@ const UnlockForm = () => {
   });
   const { handleSubmit } = formMethods;
 
-  const noRwtToken = !!rwtPartialToken && !rwtPartialToken.amount;
-
   useEffect(() => {
-    if (noRwtToken) {
+    if (!isInfoLoading && !rwtPartialToken?.amount) {
       setAlertData({
         severity: 'error',
-        message: 'no Permit',
+        message: "You don't have any permit tokens",
       });
     } else {
       setAlertData(null);
     }
-  }, [noRwtToken]);
+  }, [isInfoLoading, rwtPartialToken?.amount]);
 
   const onSubmit: SubmitHandler<TokenAmountCompatibleFormSchema> = async (
     data,
   ) => {
     try {
-      const count = data.amount;
+      const count = getNonDecimalString(data.amount, rsnToken?.decimals ?? 0);
       const response = await trigger({ count });
 
       if (response?.txId) {
@@ -112,10 +116,13 @@ const UnlockForm = () => {
     </AlertCard>
   );
 
+  const disabled =
+    isInfoLoading || isRsnTokenLoading || !rwtPartialToken?.amount;
+
   const renderTokenAmountTextField = () => (
     <TokenAmountTextField
-      disabled={isInfoLoading || noRwtToken}
-      loading={isInfoLoading}
+      disabled={disabled}
+      loading={isInfoLoading || isRsnTokenLoading}
       token={rwtPartialToken}
     />
   );
@@ -129,7 +136,7 @@ const UnlockForm = () => {
           {renderTokenAmountTextField()}
         </Grid>
 
-        <SubmitButton loading={isUnlockPending} disabled={noRwtToken}>
+        <SubmitButton loading={isUnlockPending} disabled={disabled}>
           Unlock
         </SubmitButton>
       </form>

diff --git a/apps/watcher/app/actions/@form/withdraw/page.tsx b/apps/watcher/app/actions/@form/withdraw/page.tsx
@@ -30,6 +30,8 @@ import TokenAmountTextField, {
   TokenAmountCompatibleFormSchema,
 } from '../../TokenAmountTextField';
 
+import useToken from '@/_hooks/useToken';
+
 import {
   ApiAddressAssetsResponse,
   ApiWithdrawRequestBody,
@@ -43,7 +45,14 @@ interface Form extends TokenAmountCompatibleFormSchema {
 
 const WithdrawForm = () => {
   const { data, isLoading: isTokensListLoading } =
-    useSWR<ApiAddressAssetsResponse>('/address/assets', fetcher);
+    useSWR<ApiAddressAssetsResponse>('/address/assets', fetcher, {});
+
+  const { token: ergToken, isLoading: isErgTokenLoading } = useToken('erg');
+
+  const tokens = useMemo(
+    () => data?.items.filter((token) => !!token.amount),
+    [data],
+  );
 
   const [alertData, setAlertData] = useState<{
     severity: AlertProps['severity'];
@@ -57,30 +66,39 @@ const WithdrawForm = () => {
     ApiWithdrawRequestBody
   >('/withdraw', mutator);
 
+  useEffect(() => {
+    if (!isErgTokenLoading && !ergToken?.amount) {
+      setAlertData({
+        severity: 'error',
+        message: 'Your wallet is empty. There is nothing to withdraw.',
+      });
+    }
+  }, [isErgTokenLoading, ergToken]);
+
   const formMethods = useForm({
     defaultValues: {
       address: '',
-      tokenId: data?.items?.[0].tokenId ?? '',
+      tokenId: tokens?.[0]?.tokenId ?? '',
       amount: '',
     },
   });
-  const { handleSubmit, control, resetField, register, setValue } = formMethods;
+  const { handleSubmit, control, resetField, register } = formMethods;
 
   const { field: tokenIdField } = useController({
     control,
     name: 'tokenId',
   });
 
   const selectedToken = useMemo(
-    () => data?.items?.find((token) => token.tokenId === tokenIdField.value),
-    [data, tokenIdField.value],
+    () => tokens?.find((token) => token.tokenId === tokenIdField.value),
+    [tokens, tokenIdField.value],
   );
 
   useEffect(() => {
-    if (data && !tokenIdField.value) {
-      resetField('tokenId', { defaultValue: data?.items[0].tokenId });
+    if (tokens && !tokenIdField.value) {
+      resetField('tokenId', { defaultValue: tokens?.[0]?.tokenId ?? '' });
     }
-  }, [data, resetField, tokenIdField.value]);
+  }, [tokens, resetField, tokenIdField.value]);
 
   const onSubmit: SubmitHandler<Form> = async (data) => {
     try {
@@ -122,10 +140,14 @@ const WithdrawForm = () => {
     </AlertCard>
   );
 
+  const disabled =
+    isTokensListLoading || isErgTokenLoading || !ergToken?.amount;
+
   const renderAddressTextField = () => (
     <TextField
       autoFocus
       label="Address"
+      disabled={disabled}
       {...register('address', { required: true })}
     />
   );
@@ -134,7 +156,7 @@ const WithdrawForm = () => {
     <TextField
       label="Token"
       select={!isTokensListLoading}
-      disabled={isTokensListLoading}
+      disabled={disabled}
       InputProps={{
         startAdornment: isTokensListLoading && (
           <InputAdornment position="start">
@@ -144,7 +166,7 @@ const WithdrawForm = () => {
       }}
       {...tokenIdField}
     >
-      {data?.items?.map((token) => (
+      {tokens?.map((token) => (
         <MenuItem value={token.tokenId} key={token.tokenId}>
           {token.name ?? TOKEN_NAME_PLACEHOLDER}
           &nbsp;
@@ -159,10 +181,7 @@ const WithdrawForm = () => {
   );
 
   const renderTokenAmountTextField = () => (
-    <TokenAmountTextField
-      disabled={isTokensListLoading}
-      token={selectedToken}
-    />
+    <TokenAmountTextField disabled={disabled} token={selectedToken} />
   );
 
   return (
@@ -183,7 +202,9 @@ const WithdrawForm = () => {
             {renderTokenAmountTextField()}
           </Grid>
         </Grid>
-        <SubmitButton loading={isWithdrawPending}>Withdraw</SubmitButton>
+        <SubmitButton disabled={disabled} loading={isWithdrawPending}>
+          Withdraw
+        </SubmitButton>
       </form>
     </FormProvider>
   );

diff --git a/apps/watcher/app/actions/TokenAmountTextField.tsx b/apps/watcher/app/actions/TokenAmountTextField.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { MouseEventHandler, useEffect } from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 
 import {
@@ -18,7 +18,7 @@ export interface TokenAmountCompatibleFormSchema {
 interface TokenAmountTextFieldProps {
   disabled: boolean;
   loading?: boolean;
-  token: Pick<TokenInfo, 'amount' | 'decimals'> | undefined;
+  token: Pick<TokenInfo, 'amount' | 'decimals' | 'name'> | undefined;
 }
 /**
  * render a react-hook-form compatible text field for token amount input,
@@ -58,8 +58,11 @@ const TokenAmountTextField = ({
   const getMaxAvailableTokenAmount = () =>
     getDecimalString(token!.amount.toString(), token!.decimals);
 
-  const setAmountToMaxAvailable = () =>
+  const setAmountToMaxAvailable: MouseEventHandler = (event) => {
+    event.preventDefault();
+
     setAmountFieldValue(getMaxAvailableTokenAmount());
+  };
 
   return (
     <TextField
@@ -96,14 +99,18 @@ const TokenAmountTextField = ({
             <Link component="button" onClick={setAmountToMaxAvailable}>
               {getMaxAvailableTokenAmount()}
             </Link>{' '}
-            available
+            {token.name} available
           </>
         )
       }
       InputProps={{
         endAdornment: token && (
           <InputAdornment position="end">
-            <Button size="small" onClick={setAmountToMaxAvailable}>
+            <Button
+              size="small"
+              onClick={setAmountToMaxAvailable}
+              disabled={disabled}
+            >
               Max
             </Button>
           </InputAdornment>

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/utils/package.json b/packages/utils/package.json
@@ -12,11 +12,15 @@
     "type-check": "tsc --noEmit"
   },
   "devDependencies": {
+    "@types/lodash-es": "^4.17.9",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.26.0",
     "eslint": "^8.16.0",
     "eslint-config-prettier": "^9.0.0",
     "prettier": "^3.0.2",
     "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "lodash-es": "^4.17.21"
   }
 }
diff --git a/packages/utils/src/decimals.ts b/packages/utils/src/decimals.ts
@@ -1,21 +1,25 @@
+import { trimEnd } from 'lodash-es';
+
 /**
  * convert a raw value to a string representation of the same value but
- * considering decimals
+ * considering decimals (removing any leading redundant zeros)
  *
  * @param value
  * @param decimals
  *
  * @example
  * getDecimalString('123', 2) === '1.23' // true
+ * getDecimalString('1230', 2) === '12.3' // true
  */
 export const getDecimalString = (value: string, decimals: number) => {
   if (!decimals) return value;
 
-  if (value.length > decimals) {
-    return `${value.slice(0, -1 * decimals)}.${value.slice(-1 * decimals)}`;
-  }
+  const untrimmedResult =
+    value.length > decimals
+      ? `${value.slice(0, -decimals)}.${value.slice(-decimals)}`
+      : `0.${value.padStart(decimals, '0')}`;
 
-  return `0.${'0'.repeat(decimals - value.length)}${value}`;
+  return trimEnd(trimEnd(untrimmedResult, '0'), '.') || '0';
 };
 
 /**