node-real · aiden-cao · Oct 12, 2023 · Oct 12, 2023
@@ -55,6 +55,7 @@ export const QuotaItem = memo<QuotaItemProps>(function QuotaItem({
   quotaUpdateAt,
 }) {
   const dispatch = useAppDispatch();
+  const [_, forceUpdate] = useState(0);
   const percent = valueToPercent(value);
   const title = formatByGB(value * G_BYTES).replace(' ', '');
   const originPercent = valueToPercent(current || 0);
@@ -87,7 +88,7 @@ export const QuotaItem = memo<QuotaItemProps>(function QuotaItem({
     onChange(percentToValue(percent));
   };
 
-  const onDragStart = (e: React.MouseEvent<HTMLDivElement>) => {
+  const onDragStart = () => {
     const container = document.getElementById('buy-quota-progress-bar')!;
     const movingClass = 'indicator-moving';
 
@@ -109,6 +110,7 @@ export const QuotaItem = memo<QuotaItemProps>(function QuotaItem({
       container.classList.remove(movingClass);
       document.removeEventListener('mousemove', mousemove);
       document.removeEventListener('mouseup', mouseup);
+      forceUpdate((v) => v + 1);
     };
     document.addEventListener('mousemove', mousemove);
     document.addEventListener('mouseup', mouseup);
@@ -233,6 +235,7 @@ const Indicator = styled(Box)`
   right: -7px;
   top: -3px;
   cursor: pointer;
+
   .indicator-moving & {
     background: #009e2c;
   }
@@ -244,6 +247,7 @@ const Progress = styled(Box)`
   position: absolute;
   left: 0;
   top: 0;
+
   .indicator-moving & {
     background: #009e2c;
   }

@@ -11,7 +11,12 @@ import {
 import { USER_REJECT_STATUS_NUM } from '@/utils/constant';
 import { Tips } from '@/components/common/Tips';
 import { DCButton } from '@/components/common/DCButton';
-import { addDeletedObject, setStatusDetail, TStatusDetail } from '@/store/slices/object';
+import {
+  addDeletedObject,
+  setSelectedRowKeys,
+  setStatusDetail,
+  TStatusDetail,
+} from '@/store/slices/object';
 import { useAppDispatch, useAppSelector } from '@/store';
 import { useAsyncEffect } from 'ahooks';
 import { queryLockFee } from '@/facade/object';
@@ -32,6 +37,7 @@ import {
 import { getClient } from '@/facade';
 import { signTypedDataCallback } from '@/facade/wallet';
 import { Animates } from '@/components/AnimatePng';
+import { without } from 'lodash-es';
 
 export const renderFee = (
   key: string,
@@ -99,7 +105,7 @@ export const CancelObjectOperation = memo<CancelObjectOperationProps>(
     const {
       bnb: { price: bnbPrice },
     } = useAppSelector((root) => root.global);
-    const { bucketName } = useAppSelector((root) => root.object);
+    const { bucketName, selectedRowKeys } = useAppSelector((root) => root.object);
     const availableBalance = useAppSelector(selectAvailableBalance(bucket?.PaymentAddress));
     const exchangeRate = +bnbPrice ?? 0;
     const [loading, setLoading] = useState(false);
@@ -263,6 +269,8 @@ export const CancelObjectOperation = memo<CancelObjectOperationProps>(
                       ts: Date.now(),
                     }),
                   );
+                  // unselected
+                  dispatch(setSelectedRowKeys(without(selectedRowKeys, objectInfo.ObjectName)));
                   refetch();
                   dispatch(setupBucketQuota(bucketName));
                 } else {

@@ -15,6 +15,7 @@ import { useAppDispatch, useAppSelector } from '@/store';
 import {
   addDeletedObject,
   setObjectList,
+  setSelectedRowKeys,
   setStatusDetail,
   TStatusDetail,
 } from '@/store/slices/object';
@@ -40,6 +41,7 @@ import { signTypedDataCallback } from '@/facade/wallet';
 import { reportEvent } from '@/utils/gtag';
 import { Animates } from '@/components/AnimatePng';
 import { TotalFees } from '@/modules/object/components/TotalFees';
+import { without } from 'lodash-es';
 
 interface DeleteObjectOperationProps {
   selectObjectInfo: ObjectMeta;
@@ -66,7 +68,7 @@ export const DeleteObjectOperation = memo<DeleteObjectOperationProps>(
     const { loginAccount } = useAppSelector((root) => root.persist);
     // Since reserveTime rarely change, we can optimize performance by using global data.
     const { reserveTime } = useAppSelector(selectStoreFeeParams);
-    const { bucketName, path } = useAppSelector((root) => root.object);
+    const { bucketName, path, selectedRowKeys } = useAppSelector((root) => root.object);
     const [balanceEnough, setBalanceEnough] = useState(true);
     const [loading, setLoading] = useState(false);
     const [buttonDisabled, setButtonDisabled] = useState(false);
@@ -295,6 +297,8 @@ export const DeleteObjectOperation = memo<DeleteObjectOperationProps>(
                       ts: Date.now(),
                     }),
                   );
+                  // unselected
+                  dispatch(setSelectedRowKeys(without(selectedRowKeys, objectInfo.ObjectName)));
                 } else {
                   toast.error({ description: 'Object deletion failed.' });
                 }

@@ -106,13 +106,12 @@ const renderAddressWithLink = (
 };
 
 const renderUrlWithLink = (
-  text: string,
+  encodedText: string,
   needSlim = true,
   reservedNumber = 32,
   gaClickName?: string,
   gaCopyClickName?: string,
 ) => {
-  const encodedText = encodeURI(text);
   const finalText = needSlim ? encodedText.substring(0, reservedNumber) + '...' : encodedText;
   return (
     <CopyText value={encodedText} justifyContent="flex-end" gaClickName={gaCopyClickName}>

@@ -23,7 +23,7 @@ import {
 } from '@bnb-chain/greenfield-js-sdk';
 import { useAsyncEffect, useMount, useUnmount } from 'ahooks';
 import { selectGroupList, setMemberListPage, setupGroups } from '@/store/slices/group';
-import { without } from 'lodash-es';
+import { uniq, without } from 'lodash-es';
 import { RenderItem } from '@/components/common/DCComboBox/RenderItem';
 import { useTableNav } from '@/components/common/DCTable/useTableNav';
 import { ObjectMeta, PolicyMeta } from '@bnb-chain/greenfield-js-sdk/dist/esm/types/sp/Common';
@@ -40,6 +40,7 @@ import { MenuOption } from '@/components/common/DCMenuList';
 
 const MAX_COUNT = 20;
 const MEMBER_SIZE = 20;
+const MAX_GROUP = 10;
 
 const menus: MenuOption[] = [
   { label: 'Viewer', value: 'viewer' },
@@ -113,7 +114,11 @@ export const ViewerList = memo<ViewerListProps>(function ViewerList({ selectObje
     dispatch(setObjectPoliciesPage(0));
   };
 
-  const invalid = !!error || !!invalidIds.length;
+  const groups = uniq(
+    values.concat(memberList.map((l) => l.PrincipalValue)).filter((v) => v.match(GROUP_ID)),
+  );
+
+  const invalid = !!error || !!invalidIds.length || groups.length > MAX_GROUP;
 
   const onError = (type: string) => {
     switch (type) {
@@ -399,7 +404,11 @@ export const ViewerList = memo<ViewerListProps>(function ViewerList({ selectObje
         </Flex>
         {invalid && (
           <Text color="#EE3911">
-            {!invalidIds.length ? error : 'Invalid addresses or group IDs.\n'}
+            {!invalidIds.length
+              ? groups.length > MAX_GROUP
+                ? `Exceed the group limit (${MAX_GROUP})`
+                : error
+              : 'Invalid addresses or group IDs.\n'}
           </Text>
         )}
         <Box my={8}>

@@ -44,7 +44,7 @@ import {
   UPLOADING_STATUSES,
   WaitFile,
 } from '@/store/slices/global';
-import { useAsyncEffect, useScroll, useUnmount, useWhyDidYouUpdate } from 'ahooks';
+import { useAsyncEffect, useScroll } from 'ahooks';
 import { VisibilityType } from '@bnb-chain/greenfield-cosmos-types/greenfield/storage/common';
 import { OBJECT_ERROR_TYPES, ObjectErrorType } from '../object/ObjectError';
 import { isEmpty, round } from 'lodash-es';