update .env (#3)

* update .env * fix bug * fix bugs * fix: fix bugs * remove debounce amount * fix error word * fix bugs * Refactor focus styles in amount input and tabs components * Refactor stake-ring component and update non-transferable note * Refactor focus styles in tab components * Refactor token ID display in deposit and unstake components * Refactor label font size in deposit component * Refactor footer component to update the organization name * Refactor stake and deposit hooks to log stakeRING function calls * Refactor deposit and unstake components to use FormattedNumberTooltip * Refactor deposit component to set minimum deposit amount * Refactor RING_DAO_GOVERNANCE_URL_MAP to RING_DAO_GOVERNANCE_MAP
darwinia-network · Sep 24, 2024 · deb74f1 · deb74f1
1 parent 77f184a
commit deb74f1
Show file tree

Hide file tree

Showing 33 changed files with 223 additions and 181 deletions.
diff --git a/.env b/.env
@@ -2,5 +2,4 @@ VITE_PROJECT_ID = 2719448e2ce94fdd269a3c8587123bcc
 VITE_DEPLOYMENT_MODE = testnet
 VITE_APP_NAME = "Collator Staking - RingDAO"
 VITE_APP_DESCRIPTION = "Elevate your earnings and effortlessly manage your staking positions with the RingDAO collator staking page."
-
 VITE_GRAPHQL_API_URL = "https://indexer.bigdevenergy.link/a15d18a/v1/graphql"
diff --git a/public/images/social/twitter-dark.svg b/public/images/social/twitter-dark.svg
diff --git a/public/images/social/twitter-light.svg b/public/images/social/twitter-light.svg
diff --git a/src/components/amount-input-with-balance.tsx b/src/components/amount-input-with-balance.tsx
@@ -1,9 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
 import { Button, cn } from '@nextui-org/react';
 import { BigNumber } from 'bignumber.js';
-
 import BalanceDescription from './balance-description';
 
+BigNumber.config({
+  EXPONENTIAL_AT: [-1000, 1000],
+  DECIMAL_PLACES: 1000
+});
+
 interface AmountInputWithBalanceProps {
   symbol?: string;
   className?: string;
@@ -39,26 +43,43 @@ const AmountInputWithBalance = ({
     (e: React.ChangeEvent<HTMLInputElement>) => {
       if (isDisabled) return;
       const newValue = e.target.value;
-      const numValue = new BigNumber(newValue);
-
-      if (newValue === '' || numValue.isNaN()) {
-        onChange?.(e);
-      } else {
-        const minValue = new BigNumber(min);
-        const result = BigNumber.max(BigNumber.min(numValue, maxValue), minValue);
-        onChange?.({ target: { value: result.toString() } } as React.ChangeEvent<HTMLInputElement>);
+      // // 允许输入小数点和数字
+      if (newValue === '' || /^[0-9]*\.?[0-9]*$/.test(newValue)) {
+        onChange?.({
+          target: { value: newValue }
+        } as React.ChangeEvent<HTMLInputElement>);
       }
     },
-    [onChange, min, maxValue, isDisabled]
+    [isDisabled, onChange]
   );
 
+  const handleInputBlur = useCallback(() => {
+    if (value === '' || value === '.') {
+      onChange?.({
+        target: { value: '0' }
+      } as React.ChangeEvent<HTMLInputElement>);
+      return;
+    }
+
+    const numValue = new BigNumber(value || '0');
+    const minValue = new BigNumber(min);
+    const result = BigNumber.max(BigNumber.min(numValue, maxValue), minValue);
+    const formattedResult = result.decimalPlaces(18, BigNumber.ROUND_DOWN);
+
+    onChange?.({
+      target: { value: formattedResult?.toString() }
+    } as React.ChangeEvent<HTMLInputElement>);
+  }, [value, onChange, min, maxValue]);
+
   const handleMaxClick = useCallback(() => {
-    onChange?.({ target: { value: balance || '0' } } as React.ChangeEvent<HTMLInputElement>);
-  }, [balance, onChange]);
+    onChange?.({
+      target: { value: maxValue?.toString() }
+    } as React.ChangeEvent<HTMLInputElement>);
+  }, [maxValue, onChange]);
 
   return (
     <div className={cn('flex w-full flex-col gap-[0.31rem]', className)}>
-      <div className="relative flex flex-col gap-[0.69rem] rounded-medium bg-secondary p-[0.62rem] transition-opacity focus-within:outline-none focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 focus-within:ring-offset-secondary hover:opacity-[var(--nextui-hover-opacity)]">
+      <div className="focus-within: relative flex flex-col gap-[0.69rem] rounded-medium bg-secondary p-[0.62rem] transition-opacity focus-within:outline-none focus-within:ring-2 focus-within:ring-[hsl(var(--nextui-focus))] focus-within:ring-offset-2 focus-within:ring-offset-background hover:opacity-[var(--nextui-hover-opacity)]">
         <div className="text-[0.75rem] font-normal text-foreground/50">Amount</div>
         <div className="relative flex h-6 items-center justify-between">
           <input
@@ -67,6 +88,7 @@ const AmountInputWithBalance = ({
             placeholder="0"
             className="w-full appearance-none bg-transparent pr-16 text-[1rem] font-bold text-foreground placeholder:text-[0.875rem] placeholder:font-bold placeholder:text-[#c6c6c6] hover:bg-transparent focus-visible:outline-none"
             onChange={handleInputChange}
+            onBlur={handleInputBlur}
             step="any"
             disabled={isDisabled}
           />

diff --git a/src/components/balance-description.tsx b/src/components/balance-description.tsx
@@ -15,7 +15,7 @@ const BalanceDescription = ({
   balance,
   symbol,
   isLoading,
-  fractionDigits = 2,
+  fractionDigits = 3,
   text = 'Balance'
 }: BalanceDescriptionProps) => {
   const balanceBN = new BigNumber(balance || '0');

diff --git a/src/components/collator/_hooks/collator.ts b/src/components/collator/_hooks/collator.ts
@@ -77,7 +77,7 @@ export const useCreateCollator = ({
     functionName: 'assetsToVotes',
     args: [stakedOf ?? 0n, commission],
     query: {
-      enabled: isEnabled && !!commission && !!stakedOf && enabled
+      enabled: isEnabled && !!stakedOf && enabled
     }
   });
 

diff --git a/src/components/collator/_hooks/update-commission.ts b/src/components/collator/_hooks/update-commission.ts
@@ -27,7 +27,7 @@ const useUpdateCommission = ({
     functionName: 'assetsToVotes',
     args: [totalAssets, newCommission],
     query: {
-      enabled: !!newCommission && !isNil(totalAssets)
+      enabled: !isNil(totalAssets)
     }
   });
 

diff --git a/src/components/collator/collator-tabs.tsx b/src/components/collator/collator-tabs.tsx
@@ -85,7 +85,7 @@ const CollatorTabs = ({ onClose, isOpen }: CollatorTabsProps) => {
               classNames={{
                 tabList: 'gap-6 w-full relative rounded-none p-0 border-b border-divider',
                 cursor: 'w-full bg-foreground font-bold',
-                tab: 'max-w-fit px-0 h-12',
+                tab: 'max-w-fit px-0 h-12 !outline-none',
                 tabContent: 'group-data-[selected=true]:text-foreground  font-bold'
               }}
             >

diff --git a/src/components/deposit-item.tsx b/src/components/deposit-item.tsx
@@ -1,9 +1,8 @@
 import { Checkbox, Progress, Tooltip } from '@nextui-org/react';
-
-import type { DepositInfo } from '@/hooks/useUserDepositDetails';
-import { formatNumericValue } from '@/utils';
-import { formatEther } from 'viem';
 import dayjs from 'dayjs';
+import { formatEther } from 'viem';
+import FormattedNumberTooltip from './formatted-number-tooltip';
+import type { DepositInfo } from '@/hooks/useUserDepositDetails';
 
 interface DepositItemProps {
   item: DepositInfo;
@@ -13,7 +12,7 @@ interface DepositItemProps {
 }
 
 const DepositItem = ({ item, isChecked, symbol, onChange }: DepositItemProps) => {
-  const formattedValue = formatNumericValue(formatEther(item?.value || 0n), 3);
+  const value = formatEther(item?.value || 0n);
   const startAtDate = dayjs(item?.startAt * 1000).format('YYYY-MM-DD');
   const endAtDate = dayjs(item?.endAt * 1000).format('YYYY-MM-DD');
   const now = dayjs().unix();
@@ -46,12 +45,17 @@ const DepositItem = ({ item, isChecked, symbol, onChange }: DepositItemProps) =>
           label={
             <div className="flex w-full items-center justify-between">
               <span className="text-[0.875rem] font-normal text-foreground">
-                ID# {item?.tokenId?.toString()}
+                Token ID [{item?.tokenId?.toString()}]
               </span>
               <div className="flex items-center gap-2">
-                <span className="text-[0.875rem] font-normal text-foreground">
-                  {formattedValue.fixed}
-                </span>
+                <FormattedNumberTooltip value={value}>
+                  {(formattedValue) => (
+                    <span className="text-[0.875rem] font-normal text-foreground">
+                      {formattedValue}
+                    </span>
+                  )}
+                </FormattedNumberTooltip>
+
                 <span className="text-[0.875rem] font-normal text-foreground">{symbol || ''}</span>
               </div>
             </div>

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -8,7 +8,7 @@ const Footer = () => {
     <footer className="flex h-[var(--footer-height)] w-full items-center py-[var(--footer-padding-y)]">
       <div className="max-auto flex w-full items-center justify-center px-[var(--container-padding-x)] md:justify-between">
         <span className="text-[0.875rem] font-normal capitalize text-foreground/50">
-          &copy; {currentYear} Darwinia Network
+          &copy; {currentYear} RingDAO
         </span>
 
         <div className="hidden gap-5 md:flex md:items-center">

diff --git a/src/components/formatted-number-tooltip.tsx b/src/components/formatted-number-tooltip.tsx
@@ -10,7 +10,7 @@ interface FormattedNumberTooltipProps {
 }
 
 const FormattedNumberTooltip = React.forwardRef<HTMLDivElement, FormattedNumberTooltipProps>(
-  ({ value, fractionDigits = 2, className, children }, ref) => {
+  ({ value, fractionDigits = 3, className, children }, ref) => {
     const formattedValue = formatNumericValue(value, fractionDigits);
     const renderContent = children || ((formattedValue: string) => formattedValue);
 

diff --git a/src/components/transaction-status/pending.tsx b/src/components/transaction-status/pending.tsx
@@ -5,7 +5,7 @@ const TransactionPending = () => {
         <div className="rolling-square"></div>
       </div>
       <p className="text-center text-[1.125rem] font-bold text-foreground">
-        Transaction is being processing
+        Transaction is being processed
       </p>
     </div>
   );

diff --git a/src/components/unstake-deposit-item.tsx b/src/components/unstake-deposit-item.tsx
@@ -1,9 +1,9 @@
 import { Checkbox, Progress, Tooltip } from '@nextui-org/react';
-
-import type { StakedDepositInfo } from '@/view/stake/_hooks/staked';
-import { formatNumericValue } from '@/utils';
 import { formatEther } from 'viem';
 import dayjs from 'dayjs';
+import FormattedNumberTooltip from './formatted-number-tooltip';
+
+import type { StakedDepositInfo } from '@/view/stake/_hooks/staked';
 
 interface UnstakeDepositItemProps {
   item: StakedDepositInfo;
@@ -13,7 +13,8 @@ interface UnstakeDepositItemProps {
 }
 
 const UnstakeDepositItem = ({ item, isChecked, symbol, onChange }: UnstakeDepositItemProps) => {
-  const formattedValue = formatNumericValue(formatEther(item?.amount || 0n), 3);
+  const value = formatEther(item?.amount || 0n);
+
   const startAtDate = dayjs(item?.startAt * 1000).format('YYYY-MM-DD');
   const endAtDate = dayjs(item?.endAt * 1000).format('YYYY-MM-DD');
   const now = dayjs().unix();
@@ -46,12 +47,17 @@ const UnstakeDepositItem = ({ item, isChecked, symbol, onChange }: UnstakeDeposi
           label={
             <div className="flex w-full items-center justify-between">
               <span className="text-[0.875rem] font-normal text-foreground">
-                ID# {item?.tokenId?.toString()}
+                Token ID [{item?.tokenId?.toString()}]
               </span>
               <div className="flex items-center gap-2">
-                <span className="text-[0.875rem] font-normal text-foreground">
-                  {formattedValue.fixed}
-                </span>
+                <FormattedNumberTooltip value={value}>
+                  {(formattedValue) => (
+                    <span className="text-[0.875rem] font-normal text-foreground">
+                      {formattedValue}
+                    </span>
+                  )}
+                </FormattedNumberTooltip>
+
                 <span className="text-[0.875rem] font-normal text-foreground">{symbol || ''}</span>
               </div>
             </div>

diff --git a/src/config/chains/index.ts b/src/config/chains/index.ts
@@ -28,10 +28,34 @@ export const KTON_TOKEN_INFO_MAP = new Map<
   ]
 ]);
 
-export const RING_DAO_GOVERNANCE_URL_MAP = new Map<ChainId, string>([
-  [ChainId.CRAB, 'http://crab-vote.ringdao.com'],
-  [ChainId.DARWINIA, 'http://vote.ringdao.com'],
-  [ChainId.KOI, 'http://koi-vote.ringdao.com']
+export const RING_DAO_GOVERNANCE_MAP = new Map<
+  ChainId,
+  {
+    url: string;
+    name: string;
+  }
+>([
+  [
+    ChainId.CRAB,
+    {
+      url: "'http://crab-vote.ringdao.com'",
+      name: 'CrabDAO governance'
+    }
+  ],
+  [
+    ChainId.DARWINIA,
+    {
+      url: "'http://vote.ringdao.com'",
+      name: 'RingDAO governance'
+    }
+  ],
+  [
+    ChainId.KOI,
+    {
+      url: "'http://koi-vote.ringdao.com'",
+      name: 'RingDAO test version governance'
+    }
+  ]
 ]);
 
 export const GRING_TOKEN_ADDRESS_MAP = new Map<

diff --git a/src/config/social.ts b/src/config/social.ts
@@ -15,10 +15,6 @@ function createSocialConfig(name: string, url: string): SocialConfig {
 }
 
 export const socialConfig: SocialConfig[] = [
-  createSocialConfig('Github', 'https://github.com/darwinia-network'),
-  createSocialConfig('Twitter', 'https://twitter.com/DarwiniaNetwork'),
-  createSocialConfig('Medium', 'https://medium.com/darwinianetwork'),
-  createSocialConfig('Telegram', 'https://t.me/DarwiniaNetwork'),
-  createSocialConfig('Discord', 'https://discord.com/invite/VcYFYETrw5'),
-  createSocialConfig('Email', 'mailto:[email protected]')
+  createSocialConfig('Github', 'https://github.com/ringecosystem'),
+  createSocialConfig('Twitter', 'https://x.com/ringecosystem')
 ];
diff --git a/src/config/tabs.ts b/src/config/tabs.ts
@@ -15,7 +15,7 @@ export const defiTabs = [
 
 export const stakeTabs = [
   {
-    label: 'Stake Ring',
+    label: 'Stake RING',
     key: 'stake-ring'
   },
   {

diff --git a/src/hooks/useAssetsToVotes.ts b/src/hooks/useAssetsToVotes.ts
@@ -14,13 +14,14 @@ interface AssetsToVotesProps {
 
 function useAssetsToVotes({ commission, totalAmount, inputAmount, operation }: AssetsToVotesProps) {
   const { isEnabled } = useWalletStatus();
+
   const result = useReadContract({
     abi,
     address,
     functionName: 'assetsToVotes',
     args: [commission, calculateAssets(totalAmount, inputAmount, operation)],
     query: {
-      enabled: isEnabled && !isNil(totalAmount) && !isNil(inputAmount) && !!commission
+      enabled: isEnabled && !isNil(totalAmount) && !isNil(inputAmount)
     }
   });
 

diff --git a/src/hooks/useDebouncedState.ts b/src/hooks/useDebouncedState.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { useDebounce } from 'react-use';
 
 interface UseDebouncedStateProps<T> {
@@ -9,37 +9,44 @@ interface UseDebouncedStateProps<T> {
 interface UseDebouncedStateReturn<T> {
   value: T;
   debouncedValue: T;
+  isLoading: boolean;
   setValue: (value: T) => void;
   handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   reset: () => void;
 }
 
 export function useDebouncedState<T>({
   initialValue,
-  delay = 500
+  delay = 300
 }: UseDebouncedStateProps<T>): UseDebouncedStateReturn<T> {
   const [value, setValue] = useState<T>(initialValue);
   const [debouncedValue, setDebouncedValue] = useState<T>(initialValue);
+  const [isLoading, setIsLoading] = useState(false);
 
-  const [, cancel] = useDebounce(
+  useDebounce(
     () => {
       setDebouncedValue(value);
+      setIsLoading(false);
     },
     delay,
     [value]
   );
 
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      cancel();
-      setValue(e.target.value as unknown as T);
-    },
-    [cancel]
-  );
+  useEffect(() => {
+    if (value !== debouncedValue) {
+      setIsLoading(true);
+    }
+  }, [value, debouncedValue]);
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value as unknown as T);
+  }, []);
 
   const reset = useCallback(() => {
     setValue(initialValue);
     setDebouncedValue(initialValue);
+    setIsLoading(false);
   }, [initialValue]);
-  return { value, debouncedValue, setValue, handleChange, reset };
+
+  return { value, debouncedValue, isLoading, setValue, handleChange, reset };
 }