feat: init side-panel (#1501)

* feat: init side-panel

* fix: lock file

* fix: rpc error

* feat: version

* fix: unit text

* fix: async

* fix: horizontal style

* fix: vertical style

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: mosshqq

.yarn/versions/4070ef7a.yml

@@ -0,0 +1,209 @@
+releases:
+  "@fluent-wallet/account": patch
+  "@fluent-wallet/addr-by-network": patch
+  "@fluent-wallet/base32-address": patch
+  "@fluent-wallet/cfx_accounts": patch
+  "@fluent-wallet/cfx_call": patch
+  "@fluent-wallet/cfx_chain-id": patch
+  "@fluent-wallet/cfx_check-balance-against-transaction": patch
+  "@fluent-wallet/cfx_client-version": patch
+  "@fluent-wallet/cfx_epoch-number": patch
+  "@fluent-wallet/cfx_estimate-1559-fee": patch
+  "@fluent-wallet/cfx_estimate-gas-and-collateral": patch
+  "@fluent-wallet/cfx_fee-history": patch
+  "@fluent-wallet/cfx_gas-price": patch
+  "@fluent-wallet/cfx_get-account": patch
+  "@fluent-wallet/cfx_get-account-pending-info": patch
+  "@fluent-wallet/cfx_get-account-pending-transactions": patch
+  "@fluent-wallet/cfx_get-accumulate-interest-rate": patch
+  "@fluent-wallet/cfx_get-admin": patch
+  "@fluent-wallet/cfx_get-balance": patch
+  "@fluent-wallet/cfx_get-best-block-hash": patch
+  "@fluent-wallet/cfx_get-block-by-block-number": patch
+  "@fluent-wallet/cfx_get-block-by-epoch-number": patch
+  "@fluent-wallet/cfx_get-block-by-hash": patch
+  "@fluent-wallet/cfx_get-block-by-hash-with-pivot-assumption": patch
+  "@fluent-wallet/cfx_get-block-reward-info": patch
+  "@fluent-wallet/cfx_get-blocks-by-epoch": patch
+  "@fluent-wallet/cfx_get-code": patch
+  "@fluent-wallet/cfx_get-collateral-for-storage": patch
+  "@fluent-wallet/cfx_get-confirmation-risk-by-hash": patch
+  "@fluent-wallet/cfx_get-deposit-list": patch
+  "@fluent-wallet/cfx_get-fee-burnt": patch
+  "@fluent-wallet/cfx_get-interest-rate": patch
+  "@fluent-wallet/cfx_get-logs": patch
+  "@fluent-wallet/cfx_get-max-gas-limit": patch
+  "@fluent-wallet/cfx_get-next-nonce": patch
+  "@fluent-wallet/cfx_get-next-usable-nonce": patch
+  "@fluent-wallet/cfx_get-pos-economics": patch
+  "@fluent-wallet/cfx_get-pos-reward-by-epoch": patch
+  "@fluent-wallet/cfx_get-skipped-blocks-by-epoch": patch
+  "@fluent-wallet/cfx_get-sponsor-info": patch
+  "@fluent-wallet/cfx_get-staking-balance": patch
+  "@fluent-wallet/cfx_get-status": patch
+  "@fluent-wallet/cfx_get-storage-at": patch
+  "@fluent-wallet/cfx_get-storage-root": patch
+  "@fluent-wallet/cfx_get-supply-info": patch
+  "@fluent-wallet/cfx_get-transaction-by-hash": patch
+  "@fluent-wallet/cfx_get-transaction-receipt": patch
+  "@fluent-wallet/cfx_get-vote-list": patch
+  "@fluent-wallet/cfx_max-priority-fee-per-gas": patch
+  "@fluent-wallet/cfx_net-version": patch
+  "@fluent-wallet/cfx_opened-method-groups": patch
+  "@fluent-wallet/cfx_request-accounts": patch
+  "@fluent-wallet/cfx_send-raw-transaction": patch
+  "@fluent-wallet/cfx_send-transaction": patch
+  "@fluent-wallet/cfx_sign-transaction": patch
+  "@fluent-wallet/cfx_sign-tx-with-ledger-nano-s": patch
+  "@fluent-wallet/cfx_sign-typed-data_v4": patch
+  "@fluent-wallet/component-alert": patch
+  "@fluent-wallet/component-checkbox": patch
+  "@fluent-wallet/component-dropdown": patch
+  "@fluent-wallet/component-icons": patch
+  "@fluent-wallet/component-loading": patch
+  "@fluent-wallet/component-menu": patch
+  "@fluent-wallet/component-message": patch
+  "@fluent-wallet/component-modal": patch
+  "@fluent-wallet/component-notification": patch
+  "@fluent-wallet/component-tag": patch
+  "@fluent-wallet/consts": patch
+  "@fluent-wallet/contract-method-name": patch
+  "@fluent-wallet/db": patch
+  "@fluent-wallet/detect-address-type": patch
+  "@fluent-wallet/did": patch
+  "@fluent-wallet/estimate-tx": patch
+  "@fluent-wallet/eth_accounts": patch
+  "@fluent-wallet/eth_block-number": patch
+  "@fluent-wallet/eth_call": patch
+  "@fluent-wallet/eth_chain-id": patch
+  "@fluent-wallet/eth_estimate-1559-fee": patch
+  "@fluent-wallet/eth_estimate-gas": patch
+  "@fluent-wallet/eth_fee-history": patch
+  "@fluent-wallet/eth_gas-price": patch
+  "@fluent-wallet/eth_get-balance": patch
+  "@fluent-wallet/eth_get-block-by-hash": patch
+  "@fluent-wallet/eth_get-block-by-number": patch
+  "@fluent-wallet/eth_get-code": patch
+  "@fluent-wallet/eth_get-logs": patch
+  "@fluent-wallet/eth_get-transaction-by-hash": patch
+  "@fluent-wallet/eth_get-transaction-count": patch
+  "@fluent-wallet/eth_get-transaction-receipt": patch
+  "@fluent-wallet/eth_max-priority-fee-per-gas": patch
+  "@fluent-wallet/eth_request-accounts": patch
+  "@fluent-wallet/eth_send-raw-transaction": patch
+  "@fluent-wallet/eth_send-transaction": patch
+  "@fluent-wallet/eth_sign-transaction": patch
+  "@fluent-wallet/eth_sign-tx-with-ledger-nano-s": patch
+  "@fluent-wallet/eth_sign-typed-data_v4": patch
+  "@fluent-wallet/ledger": patch
+  "@fluent-wallet/net_version": patch
+  "@fluent-wallet/personal_sign": patch
+  "@fluent-wallet/rpc-engine": patch
+  "@fluent-wallet/shorten-address": patch
+  "@fluent-wallet/signature": patch
+  "@fluent-wallet/single-call-balance-tracker": patch
+  "@fluent-wallet/spec": patch
+  "@fluent-wallet/tx-history-checker": patch
+  "@fluent-wallet/txpool_next-nonce": patch
+  "@fluent-wallet/wallet_accounts": patch
+  "@fluent-wallet/wallet_add-conflux-chain": patch
+  "@fluent-wallet/wallet_add-ethereum-chain": patch
+  "@fluent-wallet/wallet_add-hd-path": patch
+  "@fluent-wallet/wallet_add-network": patch
+  "@fluent-wallet/wallet_add-pending-user-auth-request": patch
+  "@fluent-wallet/wallet_add-vault": patch
+  "@fluent-wallet/wallet_after-unlock": patch
+  "@fluent-wallet/wallet_chain-id": patch
+  "@fluent-wallet/wallet_cleanup-tx": patch
+  "@fluent-wallet/wallet_create-account": patch
+  "@fluent-wallet/wallet_create-address": patch
+  "@fluent-wallet/wallet_db-query": patch
+  "@fluent-wallet/wallet_delete-account": patch
+  "@fluent-wallet/wallet_delete-account-group": patch
+  "@fluent-wallet/wallet_delete-app": patch
+  "@fluent-wallet/wallet_delete-memo": patch
+  "@fluent-wallet/wallet_delete-network": patch
+  "@fluent-wallet/wallet_detect-address-type": patch
+  "@fluent-wallet/wallet_detect-network-type": patch
+  "@fluent-wallet/wallet_discover-accounts": patch
+  "@fluent-wallet/wallet_enrich-conflux-tx": patch
+  "@fluent-wallet/wallet_enrich-ethereum-tx": patch
+  "@fluent-wallet/wallet_enrich-txs": patch
+  "@fluent-wallet/wallet_export-account": patch
+  "@fluent-wallet/wallet_export-account-group": patch
+  "@fluent-wallet/wallet_export-all": patch
+  "@fluent-wallet/wallet_generate-address": patch
+  "@fluent-wallet/wallet_generate-private-key": patch
+  "@fluent-wallet/wallet_get-account-address-by-network": patch
+  "@fluent-wallet/wallet_get-account-group": patch
+  "@fluent-wallet/wallet_get-account-group-vault-value": patch
+  "@fluent-wallet/wallet_get-address-private-key": patch
+  "@fluent-wallet/wallet_get-balance": patch
+  "@fluent-wallet/wallet_get-block-or-epoch-number": patch
+  "@fluent-wallet/wallet_get-block-time": patch
+  "@fluent-wallet/wallet_get-blockchain-explorer-url": patch
+  "@fluent-wallet/wallet_get-current-account": patch
+  "@fluent-wallet/wallet_get-current-network": patch
+  "@fluent-wallet/wallet_get-current-viewing-app": patch
+  "@fluent-wallet/wallet_get-fluent-metadata": patch
+  "@fluent-wallet/wallet_get-import-hardware-wallet-info": patch
+  "@fluent-wallet/wallet_get-network": patch
+  "@fluent-wallet/wallet_get-next-nonce": patch
+  "@fluent-wallet/wallet_get-next-usable-nonce": patch
+  "@fluent-wallet/wallet_get-pending-auth-request": patch
+  "@fluent-wallet/wallet_get-permissions": patch
+  "@fluent-wallet/wallet_get-preferences": patch
+  "@fluent-wallet/wallet_get-side-panel-enabled": patch
+  "@fluent-wallet/wallet_get-side-panel-supported": patch
+  "@fluent-wallet/wallet_handle-unfinished-cfx-tx": patch
+  "@fluent-wallet/wallet_handle-unfinished-eth-tx": patch
+  "@fluent-wallet/wallet_handle-unfinished-txs": patch
+  "@fluent-wallet/wallet_import-address": patch
+  "@fluent-wallet/wallet_import-all": patch
+  "@fluent-wallet/wallet_import-hardware-wallet-account-group-or-account": patch
+  "@fluent-wallet/wallet_import-mnemonic": patch
+  "@fluent-wallet/wallet_import-private-key": patch
+  "@fluent-wallet/wallet_metadata-for-popup": patch
+  "@fluent-wallet/wallet_network1559compatible": patch
+  "@fluent-wallet/wallet_refetch-balance": patch
+  "@fluent-wallet/wallet_refetch-token-list": patch
+  "@fluent-wallet/wallet_refetch-tx-list": patch
+  "@fluent-wallet/wallet_register-site-metadata": patch
+  "@fluent-wallet/wallet_request-accounts": patch
+  "@fluent-wallet/wallet_request-permissions": patch
+  "@fluent-wallet/wallet_request-unlock-ui": patch
+  "@fluent-wallet/wallet_send-transaction": patch
+  "@fluent-wallet/wallet_send-transaction-with-action": patch
+  "@fluent-wallet/wallet_set-app-current-account": patch
+  "@fluent-wallet/wallet_set-app-current-network": patch
+  "@fluent-wallet/wallet_set-current-account": patch
+  "@fluent-wallet/wallet_set-current-network": patch
+  "@fluent-wallet/wallet_set-preferences": patch
+  "@fluent-wallet/wallet_set-side-panel-behavior": patch
+  "@fluent-wallet/wallet_set-side-panel-enabled": patch
+  "@fluent-wallet/wallet_switch-conflux-chain": patch
+  "@fluent-wallet/wallet_switch-ethereum-chain": patch
+  "@fluent-wallet/wallet_unlock": patch
+  "@fluent-wallet/wallet_unwatch-asset": patch
+  "@fluent-wallet/wallet_update-account": patch
+  "@fluent-wallet/wallet_update-account-group": patch
+  "@fluent-wallet/wallet_update-network": patch
+  "@fluent-wallet/wallet_update-token-list": patch
+  "@fluent-wallet/wallet_upsert-memo": patch
+  "@fluent-wallet/wallet_user-approved-auth-request": patch
+  "@fluent-wallet/wallet_user-rejected-auth-request": patch
+  "@fluent-wallet/wallet_validate-app-permissions": patch
+  "@fluent-wallet/wallet_validate-mnemonic": patch
+  "@fluent-wallet/wallet_validate-password": patch
+  "@fluent-wallet/wallet_validate-private-key": patch
+  "@fluent-wallet/wallet_validate20token": patch
+  "@fluent-wallet/wallet_watch-asset": patch
+  "@fluent-wallet/wallet_zero-account-group": patch
+  browser-extension: patch
+  helios-background: patch
+  helios-popup: patch
+  workspace-tools: patch
+
+declined:
+  - helios
+  - doc

packages/background/package.json

@@ -133,6 +133,8 @@
     "@fluent-wallet/wallet_get-pending-auth-request": "workspace:packages/rpcs/wallet_getPendingAuthRequest",
     "@fluent-wallet/wallet_get-permissions": "workspace:packages/rpcs/wallet_getPermissions",
     "@fluent-wallet/wallet_get-preferences": "workspace:*",
+    "@fluent-wallet/wallet_get-side-panel-enabled": "workspace:*",
+    "@fluent-wallet/wallet_get-side-panel-supported": "workspace:*",
     "@fluent-wallet/wallet_handle-unfinished-cfx-tx": "workspace:*",
     "@fluent-wallet/wallet_handle-unfinished-eth-tx": "workspace:*",
     "@fluent-wallet/wallet_handle-unfinished-txs": "workspace:*",
@@ -158,6 +160,8 @@
     "@fluent-wallet/wallet_set-current-account": "workspace:packages/rpcs/wallet_setCurrentAccount",
     "@fluent-wallet/wallet_set-current-network": "workspace:packages/rpcs/wallet_setCurrentNetwork",
     "@fluent-wallet/wallet_set-preferences": "workspace:*",
+    "@fluent-wallet/wallet_set-side-panel-behavior": "workspace:*",
+    "@fluent-wallet/wallet_set-side-panel-enabled": "workspace:*",
     "@fluent-wallet/wallet_unlock": "workspace:packages/rpcs/wallet_unlock",
     "@fluent-wallet/wallet_unwatch-asset": "workspace:packages/rpcs/wallet_unwatchAsset",
     "@fluent-wallet/wallet_update-account": "workspace:packages/rpcs/wallet_updateAccount",

packages/background/src/rpc-engine-opts.js

@@ -31,6 +31,10 @@ import * as ethGetBlockByHash from '@fluent-wallet/eth_get-block-by-hash'
 import * as ethGetBlockByNumber from '@fluent-wallet/eth_get-block-by-number'
 import * as walletSetPreferences from '@fluent-wallet/wallet_set-preferences'
 import * as walletGetPreferences from '@fluent-wallet/wallet_get-preferences'
+import * as walletSetSidePanelBehavior from '@fluent-wallet/wallet_set-side-panel-behavior'
+import * as walletSetSidePanelEnabled from '@fluent-wallet/wallet_set-side-panel-enabled'
+import * as walletGetSidePanelEnabled from '@fluent-wallet/wallet_get-side-panel-enabled'
+import * as walletGetSidePanelSupported from '@fluent-wallet/wallet_get-side-panel-supported'
 import * as walletUpdateNetwork from '@fluent-wallet/wallet_update-network'
 import * as cfxGetMaxGasLimit from '@fluent-wallet/cfx_get-max-gas-limit'
 import * as walletMetadataForPopup from '@fluent-wallet/wallet_metadata-for-popup'
@@ -367,6 +371,10 @@ export const rpcEngineOpts = {
     walletGetFluentMetadata,
     walletGetPreferences,
     walletSetPreferences,
+    walletGetSidePanelEnabled,
+    walletGetSidePanelSupported,
+    walletSetSidePanelBehavior,
+    walletSetSidePanelEnabled,
     walletUpsertMemo,
     walletDeleteMemo,
     walletGetBlockTime,

packages/background/src/service-worker.js

@@ -137,6 +137,8 @@ async function initApp() {
       () => request({method: 'wallet_cleanupTx', _rpcStack: ['frombg']}),
       1000 * 60 * 60,
     )
+    // set panel behavior
+    request({method: 'wallet_setSidePanelBehavior', _rpcStack: ['frombg']})
   }
 
   if (isManifestV3) {

packages/consts/index.js

@@ -8,6 +8,7 @@ export const TESTNET = 'testnet'
 export const LOCALHOST = 'localhost'
 export const CUSTOM = 'custom'
 export const EXT_STORAGE = 'ext-storage'
+export const SIDE_PANEL_KEY = 'side-panel'
 export const NULL_HEX_ADDRESS = '0x0000000000000000000000000000000000000000'
 export const ADMINE_CONTROL_HEX_ADDRESS =
   '0x0888000000000000000000000000000000000000'

packages/manifest/manifestv3.json

@@ -62,6 +62,9 @@
     "default_title": "Fluent",
     "default_popup": "popup.html"
   },
+  "side_panel": {
+    "default_path": "sidePanel.html"
+  },
   "content_scripts": [
     {
       "matches": ["file://*/*", "http://*/*", "https://*/*"],
@@ -80,6 +83,7 @@
     "tabs",
     "scripting",
     "activeTab",
+    "sidePanel",
     "notifications"
   ],
   "host_permissions": [

packages/popup/src/App.js

@@ -57,6 +57,7 @@ import AdvancedSettings from './pages/AdvancedSettings'
 import AddressBook from './pages/AddressBook'
 import Contacts from './pages/Contacts'
 import ResendTransaction from './pages/ResendTransaction'
+import {isRunningInSidePanel} from './utils/side-panel'
 
 const {
   HOME,
@@ -263,8 +264,9 @@ const AppRoutes = withRouter(
     return (
       <div
         id="router"
-        className={`m-auto light relative overflow-hidden ${
-          FULL_WINDOW_ROUTES.includes(location.pathname)
+        className={`mx-auto light relative overflow-hidden ${
+          FULL_WINDOW_ROUTES.includes(location.pathname) ||
+          isRunningInSidePanel()
             ? 'h-screen w-full'
             : 'h-150 w-93'
         } ${formatLocalizationLang(i18n.language) === 'zh' ? 'font-zh' : ''}`}

packages/popup/src/components/SlideCard.js

@@ -3,6 +3,7 @@ import {useClickAway} from 'react-use'
 import {CloseCircleFilled} from '@fluent-wallet/component-icons'
 import {useRef} from 'react'
 import {useSlideAnimation} from '../hooks'
+import {isRunningInSidePanel} from '../utils/side-panel'
 
 function SlideCard({
   onClose,
@@ -16,12 +17,15 @@ function SlideCard({
   id = '',
   containerClassName = '',
   cardClassName = '',
-  width = 'w-93',
-  height = 'h-125',
+  width,
+  height,
   backgroundColor = 'bg-bg',
   direction = 'vertical',
 }) {
   const animateStyle = useSlideAnimation(open, direction, needAnimation)
+  const inSidePanel = isRunningInSidePanel()
+  width = width ?? (inSidePanel ? 'w-full' : 'w-93')
+  height = height ?? (inSidePanel ? 'h-125 max-h-[80%]' : 'h-125')
   const ref = useRef(null)
 
   useClickAway(ref, e => {

packages/popup/src/constants/rpcMethods.js

@@ -72,6 +72,9 @@ export const WALLET_GET_FLUENT_METADATA = 'wallet_getFluentMetadata'
 export const CFX_GET_MAX_GAS_LIMIT = 'cfx_getMaxGasLimit'
 export const WALLET_SET_PREFERENCES = 'wallet_setPreferences'
 export const WALLET_GET_PREFERENCES = 'wallet_getPreferences'
+export const WALLET_SET_SIDE_PANEL_ENABLED = 'wallet_setSidePanelEnabled'
+export const WALLET_GET_SIDE_PANEL_ENABLED = 'wallet_getSidePanelEnabled'
+export const WALLET_GET_SIDE_PANEL_SUPPORTED = 'wallet_getSidePanelSupported'
 export const WALLET_UPDATE_ACCOUNT_GROUP = 'wallet_updateAccountGroup'
 export const WALLET_UPDATE_NETWORK = 'wallet_updateNetwork'
 export const WALLET_SEND_TRANSACTION = 'wallet_sendTransaction'

packages/popup/src/hooks/useApi.js

@@ -37,6 +37,8 @@ const {
   WALLET_GET_FLUENT_METADATA,
   CFX_GET_MAX_GAS_LIMIT,
   WALLET_GET_PREFERENCES,
+  WALLET_GET_SIDE_PANEL_ENABLED,
+  WALLET_GET_SIDE_PANEL_SUPPORTED,
   WALLET_QUERY_MEMO,
   WALLET_QUERY_RECENT_TRADING_ADDRESS,
   WALLET_NETWORK1559COMPATIBLE,
@@ -695,6 +697,23 @@ export const usePreferences = (stop = false) => {
   return {data, mutate}
 }
 
+export const useSidePanel = () => {
+  const {data: enabled} = useRPC([WALLET_GET_SIDE_PANEL_ENABLED], undefined, {
+    refreshInterval: 0,
+  })
+  const {data: isSupported} = useRPC(
+    [WALLET_GET_SIDE_PANEL_SUPPORTED],
+    undefined,
+    {
+      refreshInterval: 0,
+    },
+  )
+  return {
+    enabled,
+    isSupported,
+  }
+}
+
 export const useCurrentNetworkAddressMemo = (params = {}, stopSend = false) => {
   const {
     data: {

packages/popup/src/index.js

@@ -6,10 +6,22 @@ import './i18n.js'
 import {SWRConfig} from 'swr'
 import {ROUTES} from './constants'
 import {IS_PROD_MODE, PACKAGE_VERSION} from '@fluent-wallet/inner-utils'
+import {isRunningInSidePanel} from './utils/side-panel'
 
 const {ERROR, WALLET_UNLOCK} = ROUTES
 // import reportWebVitals from './reportWebVitals'
 
+if (isRunningInSidePanel()) {
+  const sidePanelSheet = new CSSStyleSheet()
+  sidePanelSheet.insertRule(`
+    html, body {
+      width: 100%;
+      overflow: hidden;
+    }
+  `)
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sidePanelSheet]
+}
+
 // Fix chrome extension render problem in external screen
 if (
   // From testing the following conditions seem to indicate that the popup was opened on a secondary monitor