feat: support pin connected site

RabbyHub · Apr 23, 2024 · 4428210 · 4428210
1 parent 8464f8c
commit 4428210
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 28 deletions.
diff --git a/_raw/locales/en/messages.json b/_raw/locales/en/messages.json
@@ -914,7 +914,8 @@
         "disconnectRecentlyUsed": {
           "title_one": "Disconnect <strong>{{count}}</strong> connected Dapp",
           "title_other": "Disconnect <strong>{{count}}</strong> connected Dapps",
-          "description": "Pinned DApps will remain connected"
+          "description": "Pinned DApps will remain connected",
+          "title": "Disconnect recently used <strong>{{count}}</strong> DApps"
         },
         "title": "Connected Dapp",
         "pinned": "Pinned",

diff --git a/src/background/controller/wallet.ts b/src/background/controller/wallet.ts
@@ -1335,7 +1335,9 @@ export class WalletController extends BaseController {
   };
   addConnectedSiteV2 = permissionService.addConnectedSiteV2;
   removeAllRecentConnectedSites = () => {
-    const sites = permissionService.getRecentConnectedSites();
+    const sites = permissionService
+      .getRecentConnectedSites()
+      .filter((item) => !item.isTop);
     sites.forEach((item) => {
       this.removeConnectedSite(item.origin);
     });

diff --git a/src/background/service/permission.ts b/src/background/service/permission.ts
@@ -13,9 +13,6 @@ export interface ConnectedSite {
   chain: CHAINS_ENUM;
   e?: number;
   isSigned: boolean;
-  /**
-   * @deprecated
-   */
   isTop: boolean;
   order?: number;
   isConnected: boolean;

diff --git a/src/ui/models/permission.ts b/src/ui/models/permission.ts
@@ -44,6 +44,14 @@ export const permission = createModel<RootModel>()({
       await store.app.wallet.unFavoriteWebsite(origin);
       await dispatch.permission.getWebsites();
     },
+    async pinWebsite(origin: string, store) {
+      await store.app.wallet.topConnectedSite(origin);
+      await dispatch.permission.getWebsites();
+    },
+    async unpinWebsite(origin: string, store) {
+      await store.app.wallet.unpinConnectedSite(origin);
+      await dispatch.permission.getWebsites();
+    },
     async clearAll(_: void, store) {
       await store.app.wallet.removeAllRecentConnectedSites();
       await dispatch.permission.getWebsites();

diff --git a/src/ui/views/Dashboard/components/RecentConnections/ConnectionItem.tsx b/src/ui/views/Dashboard/components/RecentConnections/ConnectionItem.tsx
@@ -6,12 +6,15 @@ import { findChainByEnum } from '@/utils/chain';
 import clsx from 'clsx';
 import React, { forwardRef, memo } from 'react';
 import { ReactComponent as RcIconDisconnect } from 'ui/assets/icon-disconnect.svg';
+import { ReactComponent as RcIconPinned } from 'ui/assets/icon-pinned.svg';
+import { ReactComponent as RcIconPinnedFill } from 'ui/assets/icon-pinned-fill.svg';
 
 interface ConnectionItemProps {
   className?: string;
   item: ConnectedSite;
   onClick?(): void;
   onRemove?(origin: string): void;
+  onPin?(item: ConnectedSite): void;
 }
 
 export const Item = memo(
@@ -21,6 +24,7 @@ export const Item = memo(
         item,
         onClick,
         onRemove,
+        onPin,
         className,
         ...rest
       }: ConnectionItemProps & Record<string, any>,
@@ -54,7 +58,21 @@ export const Item = memo(
               />
             </TooltipWithMagnetArrow>
           </div>
-          <span className="item-content">{item.origin}</span>
+          <div className="flex items-center gap-[4px] min-w-0">
+            <div className="item-content flex-1 truncate">{item.origin}</div>
+            <div
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onPin?.(item);
+              }}
+            >
+              <ThemeIcon
+                src={item.isTop ? RcIconPinnedFill : RcIconPinned}
+                className={clsx('pin-website', item.isTop && 'is-active')}
+              />
+            </div>
+          </div>
           <div
             className="item-extra"
             onClick={(e) => {

diff --git a/src/ui/views/Dashboard/components/RecentConnections/ConnectionList.tsx b/src/ui/views/Dashboard/components/RecentConnections/ConnectionList.tsx
@@ -9,17 +9,29 @@ interface ConnectionProps {
   data?: ConnectedSite[];
   onClick?(item: ConnectedSite): void;
   onRemove?(origin: string): void;
+  onPin?(item: ConnectedSite): void;
 }
 
 const ConnectionList = memo(
-  ({ className, data = [], onClick, onRemove, empty }: ConnectionProps) => {
+  ({
+    className,
+    data = [],
+    onClick,
+    onRemove,
+    empty,
+    onPin,
+  }: ConnectionProps) => {
     const [visible, setVisible] = useState(false);
 
     useEffect(() => {
       setTimeout(() => {
         setVisible(true);
       });
     }, []);
+
+    if (!data?.length) {
+      return null;
+    }
     return (
       <div className={clsx('list', className)}>
         {visible && data && data.length > 0 ? (
@@ -31,6 +43,7 @@ const ConnectionList = memo(
                   item={item}
                   key={item?.origin || index}
                   onClick={() => onClick && onClick(item)}
+                  onPin={onPin}
                 />
               ))}
             </>

diff --git a/src/ui/views/Dashboard/components/RecentConnections/index.tsx b/src/ui/views/Dashboard/components/RecentConnections/index.tsx
@@ -28,6 +28,16 @@ const RecentConnections = ({
     return connections.sort((a, b) => (a.order || 0) - (b.order || 0));
   }, [connections]);
 
+  const pinnedList = useMemo(() => {
+    return connections
+      .filter((item) => item && item.isTop)
+      .sort((a, b) => (a.order || 0) - (b.order || 0));
+  }, [connections]);
+
+  const recentList = useMemo(() => {
+    return connections.filter((item) => item && !item.isTop);
+  }, [connections]);
+
   const handleClick = (connection: ConnectedSite) => {
     matomoRequestEvent({
       category: 'Dapps',
@@ -39,21 +49,11 @@ const RecentConnections = ({
     openInTab(connection.origin);
   };
 
-  const handleFavoriteChange = (item: ConnectedSite) => {
+  const handlePinChange = (item: ConnectedSite) => {
     if (item.isTop) {
-      dispatch.permission.unFavoriteWebsite(item.origin);
-      matomoRequestEvent({
-        category: 'Dapps',
-        action: 'unfavoriteDapp',
-        label: item.origin,
-      });
+      dispatch.permission.unpinWebsite(item.origin);
     } else {
-      dispatch.permission.favoriteWebsite(item.origin);
-      matomoRequestEvent({
-        category: 'Dapps',
-        action: 'favoriteDapp',
-        label: item.origin,
-      });
+      dispatch.permission.pinWebsite(item.origin);
     }
   };
   const handleRemove = async (origin: string) => {
@@ -109,7 +109,7 @@ const RecentConnections = ({
         <div>
           <div className="title">
             <Trans
-              count={list.length}
+              count={recentList.length}
               i18nKey="page.dashboard.recentConnection.disconnectRecentlyUsed.title"
             ></Trans>
           </div>
@@ -156,7 +156,14 @@ const RecentConnections = ({
             <ConnectionList
               onRemove={handleRemove}
               onClick={handleClick}
-              data={list}
+              onPin={handlePinChange}
+              data={pinnedList}
+            ></ConnectionList>
+            <ConnectionList
+              onRemove={handleRemove}
+              onClick={handleClick}
+              onPin={handlePinChange}
+              data={recentList}
             ></ConnectionList>
           </div>
           <footer

diff --git a/src/ui/views/Dashboard/components/RecentConnections/style.less b/src/ui/views/Dashboard/components/RecentConnections/style.less
@@ -15,7 +15,7 @@
 
   .list {
     &:not(:last-child) {
-      margin-bottom: 16px;
+      margin-bottom: 28px;
     }
     &-header {
       display: flex;
@@ -66,7 +66,7 @@
       display: flex;
       align-items: center;
       column-gap: 12px;
-      padding: 13px 15px;
+      padding: 11px 15px;
       border-radius: 6px;
       border: 1px solid transparent;
       background: var(--r-neutral-card2, #f2f4f7);
@@ -98,8 +98,8 @@
       &-content {
         font-weight: 500;
         color: var(--r-neutral-title1, #192945);
-        font-size: 15px;
-        line-height: 18px;
+        font-size: 13px;
+        line-height: 15px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -312,8 +312,8 @@
     justify-content: center;
 
     .ant-btn {
-      height: 40px;
-      width: 160px;
+      height: 48px;
+      width: 200px;
     }
   }
 }