RabbyHub · passabilities · Aug 29, 2024 · Sep 3, 2024 · Oct 10, 2024 · Nov 7, 2024
diff --git a/_raw/sw.js b/_raw/sw.js
@@ -98,3 +98,35 @@ if (navigator?.usb) {
     console.log('USB device disconnected', device);
   });
 }
+
+chrome.sidePanel
+  .setPanelBehavior({ openPanelOnActionClick: true })
+  .catch((err) => console.error(err));
+
+/**
+ * Function to send active tab info to the React app
+ * @param tabId {number}
+ */
+const sendActiveTabInfo = (tabId) => {
+  chrome.tabs.get(tabId, (tab) => {
+    if (tab) {
+      chrome.windows.get(tab.windowId, (window) => {
+        if (window.type === 'normal') {
+          chrome.runtime.sendMessage({ type: 'TAB_UPDATED', tab });
+        }
+      })
+    }
+  });
+};
+
+// Listen for tab activation
+chrome.tabs.onActivated.addListener((activeInfo) => {
+  sendActiveTabInfo(activeInfo.tabId);
+});
+
+// Listen for tab URL updates
+chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
+  if (changeInfo.status === 'complete') {
+    sendActiveTabInfo(tabId);
+  }
+});
diff --git a/src/manifest/mv3/manifest.json b/src/manifest/mv3/manifest.json
@@ -23,8 +23,10 @@
       "48": "images/icon-48.png",
       "128": "images/icon-128.png"
     },
-    "default_title": "Rabby",
-    "default_popup": "popup.html"
+    "default_title": "Rabby"
+  },
+  "side_panel": {
+    "default_path": "popup.html"
   },
   "author": "https://rabby.io/",
   "background": {
@@ -62,10 +64,12 @@
     "storage",
     "unlimitedStorage",
     "alarms",
+    "tabs",
     "activeTab",
     "notifications",
     "offscreen",
-    "contextMenus"
+    "contextMenus",
+    "sidePanel"
   ],
   "host_permissions": [
     "<all_urls>"

diff --git a/src/ui/component/AccountSelectDrawer/index.tsx b/src/ui/component/AccountSelectDrawer/index.tsx
@@ -170,7 +170,7 @@ const AccountSelectDrawer = ({
 
   return (
     <Drawer
-      height={440}
+      height="60%"
       className="account-select is-support-darkmode"
       visible={visible}
       placement="bottom"

diff --git a/src/ui/component/ChainSelector/Modal.tsx b/src/ui/component/ChainSelector/Modal.tsx
@@ -41,7 +41,7 @@ interface ChainSelectorModalProps {
   hideTestnetTab?: boolean;
   hideMainnetTab?: boolean;
   showRPCStatus?: boolean;
-  height?: number;
+  height?: string | number;
   zIndex?: number;
 }
 
@@ -138,7 +138,7 @@ const ChainSelectorModal = ({
   hideTestnetTab = false,
   hideMainnetTab = false,
   showRPCStatus = false,
-  height = 494,
+  height = '70%',
   zIndex,
 }: ChainSelectorModalProps) => {
   const handleCancel = () => {

diff --git a/src/ui/component/ChainSelector/style.less b/src/ui/component/ChainSelector/style.less
@@ -45,7 +45,7 @@
 .chain-selector__modal.chain-selector__modal {
   .ant-drawer-content-wrapper {
     max-height: calc(100vh - 40px);
-    height: 494px !important;
+    //height: 494px !important;
   }
   header {
     padding-top: 8px;

diff --git a/src/ui/component/TokenSelector/index.tsx b/src/ui/component/TokenSelector/index.tsx
@@ -213,7 +213,7 @@ const TokenSelector = ({
   return (
     <Drawer
       className="token-selector custom-popup is-support-darkmode"
-      height="580px"
+      height="75%"
       placement="bottom"
       visible={visible}
       onClose={onCancel}

diff --git a/src/ui/popup.html b/src/ui/popup.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html translate="no" class="notranslate overflow-hidden w-[400px] h-[599px]">
+<html translate="no" class="notranslate overflow-hidden">
 
 <head>
   <meta charset="UTF-8" />
@@ -24,7 +24,7 @@
   </style>
 </head>
 
-<body class="h-full w-[400px] h-[599px]">
+<body class="h-full w-full">
   <div id="root" class="h-full overflow-x-hidden"></div>
 </body>
 

diff --git a/src/ui/utils/WalletContext.tsx b/src/ui/utils/WalletContext.tsx
@@ -35,7 +35,7 @@ const useCommonPopupViewState = () => {
   >();
   const [visible, setVisible] = useState(false);
   const [title, setTitle] = useState<React.ReactNode>('Sign');
-  const [height, setHeight] = useState(360);
+  const [height, setHeight] = useState<string | number>(360);
   const [className, setClassName] = useState<'isConnectView' | undefined>();
   const [account, setAccount] = useState<{
     address: string;

diff --git a/src/ui/views/Approval/components/Popup/ApprovalPopupContainer.tsx b/src/ui/views/Approval/components/Popup/ApprovalPopupContainer.tsx
@@ -102,7 +102,7 @@ export const ApprovalPopupContainer: React.FC<Props> = ({
     }
   }, [status]);
 
-  const lastNormalHeight = React.useRef(0);
+  const lastNormalHeight = React.useRef<string | number>(0);
 
   React.useEffect(() => {
     if (

diff --git a/src/ui/views/Bridge/Component/BridgeHistory.tsx b/src/ui/views/Bridge/Component/BridgeHistory.tsx
@@ -261,7 +261,7 @@ export const BridgeTxHistory = ({
     <Popup
       visible={visible}
       title={t('page.bridge.history')}
-      height={494}
+      height="70%"
       onClose={onClose}
       closable
       bodyStyle={{

diff --git a/src/ui/views/Bridge/Component/BridgeTokenPair.tsx b/src/ui/views/Bridge/Component/BridgeTokenPair.tsx
@@ -38,7 +38,7 @@ const TokenPairDrawer = (
   return (
     <Drawer
       className="token-selector custom-popup is-support-darkmode"
-      height={440}
+      height="60%"
       placement="bottom"
       {...props}
     >

diff --git a/src/ui/views/CommonPopup/AssetList/AssetList.tsx b/src/ui/views/CommonPopup/AssetList/AssetList.tsx
@@ -39,7 +39,7 @@ export const AssetList = ({
   const { isShowTestnet, selectedTab, onTabChange } = useSwitchNetTab();
 
   React.useEffect(() => {
-    setHeight(488);
+    setHeight('65%');
   }, []);
 
   React.useEffect(() => {

diff --git a/src/ui/views/CommonPopup/AssetList/CustomAssetList/AddCustomTokenPopup.tsx b/src/ui/views/CommonPopup/AssetList/CustomAssetList/AddCustomTokenPopup.tsx
@@ -252,7 +252,7 @@ export const AddCustomTokenPopup = ({ visible, onClose, onConfirm }: Props) => {
       <Popup
         visible={visible}
         closable={false}
-        height={494}
+        height="70%"
         onClose={onClose}
         className="add-custom-token-popup"
         push={false}

diff --git a/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/AddCustomTestnetTokenPopup.tsx b/src/ui/views/CommonPopup/AssetList/CustomTestnetAssetList/AddCustomTestnetTokenPopup.tsx
@@ -196,7 +196,7 @@ export const AddCustomTestnetTokenPopup = ({
       <Popup
         visible={visible}
         closable={false}
-        height={494}
+        height="70%"
         onClose={onClose}
         className="add-custom-token-popup"
         push={false}

diff --git a/...ui/views/CommonPopup/AssetList/CustomTestnetAssetList/CustomTestnetAssetListContainer.tsx b/...ui/views/CommonPopup/AssetList/CustomTestnetAssetList/CustomTestnetAssetListContainer.tsx
@@ -217,7 +217,7 @@ export const CustomTestnetAssetListContainer: React.FC<Props> = ({
           setIsShowAddTestnetModal(false);
           refreshAsync();
         }}
-        height={488}
+        height="65%"
         maskStyle={
           isDarkTheme
             ? {

diff --git a/src/ui/views/CommonPopup/AssetList/CustomTestnetTokenDetailPopup/index.tsx b/src/ui/views/CommonPopup/AssetList/CustomTestnetTokenDetailPopup/index.tsx
@@ -56,7 +56,7 @@ export const CustomTestnetTokenDetailPopup = ({
     <Popup
       visible={visible}
       closable={true}
-      height={494}
+      height="70%"
       onClose={onClose}
       className="custom-testnet-token-detail-popup"
       push={false}

diff --git a/src/ui/views/CommonPopup/AssetList/TokenLowValueItem.tsx b/src/ui/views/CommonPopup/AssetList/TokenLowValueItem.tsx
@@ -62,7 +62,7 @@ export const TokenLowValueItem: React.FC<Props> = ({ className, list }) => {
             })}
           </div>
         }
-        height={494}
+        height="70%"
         visible={visible}
         closable
         push={false}

diff --git a/src/ui/views/CommonPopup/AssetList/components/TokenButton.tsx b/src/ui/views/CommonPopup/AssetList/components/TokenButton.tsx
@@ -39,7 +39,7 @@ export function SpecialTokenListPopup({
 
   return (
     <Popup
-      height={494}
+      height="70%"
       visible={visible}
       closable
       push={false}

diff --git a/src/ui/views/CustomRPC/components/EditRPCModal.tsx b/src/ui/views/CustomRPC/components/EditRPCModal.tsx
@@ -133,7 +133,7 @@ const EditRPCModal = ({
 
   return (
     <Popup
-      height={440}
+      height="60%"
       visible={visible}
       onCancel={onCancel}
       bodyStyle={{

diff --git a/src/ui/views/CustomTestnet/components/EditTestnetModal.tsx b/src/ui/views/CustomTestnet/components/EditTestnetModal.tsx
@@ -58,7 +58,7 @@ export const EditCustomTestnetModal = ({
   onConfirm(values: TestnetChain): void;
   onChange?: (values: Partial<TestnetChainBase>) => void;
   zIndex?: number;
-  height?: number;
+  height?: string | number;
   maskStyle?: React.CSSProperties;
   ctx?: {
     ga?: {
@@ -127,7 +127,7 @@ export const EditCustomTestnetModal = ({
 
   return (
     <Popup
-      height={height || 520}
+      height={height}
       visible={visible}
       onCancel={onCancel}
       bodyStyle={{

diff --git a/src/ui/views/Dashboard/components/BalanceView/CurveView.tsx b/src/ui/views/Dashboard/components/BalanceView/CurveView.tsx
@@ -1,7 +1,14 @@
 import dayjs from 'dayjs';
 import React from 'react';
 import { useMemo, useState, useRef, useEffect } from 'react';
-import { AreaChart, YAxis, Area, XAxis, Tooltip } from 'recharts';
+import {
+  AreaChart,
+  YAxis,
+  Area,
+  XAxis,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts';
 import styled, { createGlobalStyle } from 'styled-components';
 
 export type CurvePoint = {
@@ -53,67 +60,78 @@ export const CurveThumbnail = ({
   }, [data]);
   const divRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState(92);
+  const [width, setWidth] = useState<number>();
 
   useEffect(() => {
     if (divRef.current) {
       setHeight(divRef.current.clientHeight);
     }
   }, []);
+  useEffect(() => {
+    if (divRef.current) {
+      setWidth(divRef.current.clientWidth);
+    }
+  }, [divRef.current?.getBoundingClientRect()]);
 
   const isEmpty = !data;
 
   return (
     <CurveWrapper ref={divRef} className={className}>
       <CurveGlobalStyle />
       {isEmpty ? null : (
-        <AreaChart
-          data={data?.list}
-          width={380}
-          height={height}
-          style={{ position: 'absolute', left: 0, cursor: 'pointer' }}
-          margin={{ top: 5, right: 0, left: 0, bottom: 5 }}
-          onMouseMove={(val) => {
-            if (val?.activePayload) {
-              onHover(val.activePayload[0].payload);
-            }
-          }}
-          onMouseLeave={() => onHover(undefined)}
-        >
-          <defs>
-            <linearGradient id="curveThumbnail" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0%" stopColor={color} stopOpacity={0.2} />
-              <stop offset="100%" stopColor={color} stopOpacity={0} />
-            </linearGradient>
-          </defs>
-          <XAxis
-            dataKey="timestamp"
-            hide
-            type="number"
-            domain={['dataMin', 'dataMax']}
-          />
-          <YAxis
-            hide
-            domain={[(dataMin) => dataMin * 0.98, (dataMax) => dataMax * 1.005]}
-          />
-          {isHover && (
-            <Tooltip
-              cursor={{ strokeDasharray: '2 2', strokeWidth: 0.6 }}
-              content={({ label }) => {
-                return <div>{dayjs(label * 1000).format('HH:mm')}</div>;
-              }}
+        <ResponsiveContainer>
+          <AreaChart
+            data={data?.list}
+            width={width}
+            height={height}
+            style={{ position: 'absolute', left: 0, cursor: 'pointer' }}
+            margin={{ top: 5, right: 0, left: 0, bottom: 5 }}
+            onMouseMove={(val) => {
+              if (val?.activePayload) {
+                onHover(val.activePayload[0].payload);
+              }
+            }}
+            onMouseLeave={() => onHover(undefined)}
+          >
+            <defs>
+              <linearGradient id="curveThumbnail" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor={color} stopOpacity={0.2} />
+                <stop offset="100%" stopColor={color} stopOpacity={0} />
+              </linearGradient>
+            </defs>
+            <XAxis
+              dataKey="timestamp"
+              hide
+              type="number"
+              domain={['dataMin', 'dataMax']}
+            />
+            <YAxis
+              hide
+              domain={[
+                (dataMin) => dataMin * 0.98,
+                (dataMax) => dataMax * 1.005,
+              ]}
+            />
+            {isHover && (
+              <Tooltip
+                cursor={{ strokeDasharray: '2 2', strokeWidth: 0.6 }}
+                content={({ label }) => {
+                  return <div>{dayjs(label * 1000).format('HH:mm')}</div>;
+                }}
+              />
+            )}
+            <Area
+              type="linear"
+              dataKey="value"
+              stroke={color}
+              strokeOpacity={isHover ? 1 : 0.7}
+              strokeWidth={2}
+              fill="url(#curveThumbnail)"
+              animationDuration={0}
+              fillOpacity={0.8}
             />
-          )}
-          <Area
-            type="linear"
-            dataKey="value"
-            stroke={color}
-            strokeOpacity={isHover ? 1 : 0.7}
-            strokeWidth={2}
-            fill="url(#curveThumbnail)"
-            animationDuration={0}
-            fillOpacity={0.8}
-          />
-        </AreaChart>
+          </AreaChart>
+        </ResponsiveContainer>
       )}
     </CurveWrapper>
   );