feat(dcellar-web-ui): remove TW and add error notification

apps/dcellar-web-ui/CHANGELOG.json

@@ -1,6 +1,18 @@
 {
   "name": "dcellar-web-ui",
   "entries": [
+    {
+      "version": "1.7.4",
+      "tag": "dcellar-web-ui_v1.7.4",
+      "date": "Thu, 19 Sep 2024 07:13:05 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "Temporarily hide TW and add error notifications caused by the Metamask version upgrade"
+          }
+        ]
+      }
+    },
     {
       "version": "1.7.3",
       "tag": "dcellar-web-ui_v1.7.3",

apps/dcellar-web-ui/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Change Log - dcellar-web-ui
 
-This log was last generated on Fri, 06 Sep 2024 07:48:42 GMT and should not be manually modified.
+This log was last generated on Thu, 19 Sep 2024 07:13:05 GMT and should not be manually modified.
+
+## 1.7.4
+Thu, 19 Sep 2024 07:13:05 GMT
+
+### Patches
+
+- Temporarily hide TW and add error notifications caused by the Metamask version upgrade
 
 ## 1.7.3
 Fri, 06 Sep 2024 07:48:42 GMT

apps/dcellar-web-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dcellar-web-ui",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "private": false,
   "scripts": {
     "dev": "node ./scripts/dev.js -p 3200",

apps/dcellar-web-ui/src/components/common/DiscontinueBanner/index.tsx

@@ -20,7 +20,7 @@ export const DiscontinueBanner = ({
 }) => {
   return (
     <Flex
-      height={`${height}px`}
+      minHeight={`${height}px`}
       marginBottom={`${marginBottom}px`}
       alignItems={'center'}
       borderRadius={'4px'}
@@ -33,8 +33,8 @@ export const DiscontinueBanner = ({
         fontSize={'14px'}
         marginLeft={'4px'}
         overflow={'hidden'}
-        textOverflow={'ellipsis'}
-        whiteSpace={'nowrap'}
+        // textOverflow={'ellipsis'}
+        // whiteSpace={'nowrap'}
       >
         {content}
       </Text>

apps/dcellar-web-ui/src/context/WalletConnectContext/components/WalletConnectProvider.tsx

@@ -21,7 +21,11 @@ const config = createConfig(
     /* WC 2.0 requires a project ID (get one here: https://cloud.walletconnect.com/sign-in) */
     walletConnectProjectId: '89848e3205cafe0bf76c91aa1aaa71d0',
     chains: [bscChain, greenFieldChain],
-    connectors: [trustWallet(), metaMask(), walletConnect()],
+    connectors: [
+      // trustWallet(),
+      metaMask(),
+      walletConnect(),
+    ],
   }),
 );
 

apps/dcellar-web-ui/src/modules/bucket/index.tsx

@@ -7,13 +7,15 @@ import { PageTitle } from '@/components/layout/PageTitle';
 import { DiscontinueBanner } from '@/components/common/DiscontinueBanner';
 import { BucketOperations } from '@/modules/bucket/components/BucketOperations';
 import { GAContextProvider } from '@/context/GAContext';
+import { useAccount } from 'wagmi';
 
 export const BucketPage = () => {
   const dispatch = useAppDispatch();
   const loginAccount = useAppSelector((root) => root.persist.loginAccount);
   const hasDiscontinueBucket = useAppSelector(selectHasDiscontinueBucket(loginAccount));
 
   const documentVisibility = useDocumentVisibility();
+  const { connector } = useAccount();
 
   useUpdateEffect(() => {
     if (documentVisibility !== 'visible') return;
@@ -32,6 +34,13 @@ export const BucketPage = () => {
       <PageTitle title={'Buckets'} metaTitle={'Buckets'}>
         <CreateBucket />
       </PageTitle>
+      {connector?.id === 'metaMask' && (
+        <DiscontinueBanner
+          content="Greenfield and the Metamask extension are facing compatibility issues affecting functionalities like bucket creation on Dcellar. The BNB Chain team is working on a hotfix, expected to be released by September 23rd."
+          height={44}
+          marginBottom={16}
+        />
+      )}
       {hasDiscontinueBucket && (
         <DiscontinueBanner
           content="Some items were marked as discontinued and will be deleted by SP soon. Please backup your data in time. "

apps/dcellar-web-ui/src/modules/object/index.tsx

@@ -32,6 +32,7 @@ import { ObjectOperations } from '@/modules/object/components/ObjectOperations';
 import { BucketStatus as BucketStatusEnum } from '@bnb-chain/greenfield-js-sdk';
 import { DiscontinueBanner } from '@/components/common/DiscontinueBanner';
 import { MigratingBucketNoticeBanner } from './components/MigratingBucketNoticeBanner';
+import { useAccount } from 'wagmi';
 
 export const ObjectsPage = () => {
   const dispatch = useAppDispatch();
@@ -43,6 +44,7 @@ export const ObjectsPage = () => {
   const isBucketDiscontinue = useAppSelector((root) => root.bucket.isBucketDiscontinue);
   const isBucketMigrating = useAppSelector((root) => root.bucket.isBucketMigrating);
   const allSpList = useAppSelector((root) => root.sp.allSpList);
+  const { connector } = useAccount();
 
   const { path } = router.query;
   const items = path as string[];
@@ -130,6 +132,13 @@ export const ObjectsPage = () => {
 
         <ObjectFilterItems />
 
+        {connector?.id === 'metaMask' && (
+          <DiscontinueBanner
+            content="Greenfield and the Metamask extension are facing compatibility issues affecting functionalities like bucket creation on Dcellar. The BNB Chain team is working on a hotfix, expected to be released by September 23rd."
+            height={44}
+            marginBottom={16}
+          />
+        )}
         {isBucketOwner ? (
           <InsufficientBalance />
         ) : (