feat: 關注列表之投資人，快捷鍵使你更快的到達投資組合頁面

src/components/WatchlistUserControls/WatchlistUserControls.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { Button, Tooltip } from '@blueprintjs/core'
+import { useAsyncFn } from 'react-use'
+import { GM } from '@/GM'
+import { stringifyUrl } from 'query-string'
+import { debugAPI } from '@/debugAPI'
+import toast from 'cogo-toast'
+
+export const WatchlistUserControls: React.FunctionComponent<{
+  cid: string
+  traderName: string
+}> = props => {
+  const [equityState, equityQuery] = useAsyncFn(() => {
+    return GM.ajax({
+      method: 'GET',
+      url: stringifyUrl({
+        url:
+          'https://www.etoro.com/sapi/trade-data-real/live/public/portfolios',
+        query: {
+          cid: props.cid,
+        },
+      }),
+    })
+      .then(event => {
+        const model = JSON.parse(
+          /var model = (?<model>{[\s\S]+}),/i.exec(event.responseText)?.groups
+            ?.model || `{}`,
+        ) as {
+          /** 餘額 */
+          CreditByRealizedEquity?: number
+        }
+
+        return model.CreditByRealizedEquity?.toFixed(2)
+      })
+      .catch(error => {
+        return Promise.reject(error)
+      })
+      .finally(() => {
+        debugAPI.log(`獲取 cid=${props.cid} 的餘額`)
+      })
+  }, [])
+
+  return (
+    <span>
+      <Button
+        loading={equityState.loading}
+        icon={'dollar'}
+        onClick={() => {
+          equityQuery()
+        }}
+      >
+        {equityState.value ? `${equityState.value}%` : '餘額'}
+      </Button>
+
+      <Button>
+        <a href={`/people/${props.traderName.toLowerCase()}/portfolio`}>
+          投資組合
+        </a>
+      </Button>
+    </span>
+  )
+}

src/etoro.tsx

@@ -13,6 +13,7 @@ import '@blueprintjs/core/lib/css/blueprint.css'
 import Sidebar from '@/components/Sidebar/Sidebar'
 import { Provider } from 'react-redux'
 import store from '@/store/_store'
+import { WatchlistUserControls } from '@/components/WatchlistUserControls/WatchlistUserControls'
 
 interface $ extends JQueryStatic {}
 globalThis.localStorage.setItem('debug', '*')
@@ -101,13 +102,7 @@ emitter.on(Events.ready, async () => {
 
   GM.addStyle(`
     .user-meta {
-      margin: 0 8px;
-      font-size: 10pt;
-      background: #ffcf76;
-      padding: 4px 8px;
-      border-radius: 4px;
-      cursor: pointer;
-      width: 96px;
+      margin-right: 8px;
     }
   `)
 
@@ -134,40 +129,21 @@ emitter.on(Events.ready, async () => {
           '',
       )?.groups?.cid
 
+      const traderName = $(element)
+        .find('[automation-id="trade-item-name"]')
+        .html()
+
       if (cid && !hasAppended) {
-        userFinder.prepend($(`<button class="user-meta">餘額</button>`))
-
-        const button = userFinder.find('.user-meta')
-
-        button.on('click', () => {
-          const button = userFinder.find('.user-meta')
-          button.html('讀取中')
-
-          GM.ajax({
-            method: 'GET',
-            url: stringifyUrl({
-              url:
-                'https://www.etoro.com/sapi/trade-data-real/live/public/portfolios',
-              query: {
-                cid,
-              },
-            }),
-          })
-            .then(event => {
-              const model = JSON.parse(
-                /var model = (?<model>{[\s\S]+}),/i.exec(event.responseText)
-                  ?.groups?.model || `{}`,
-              ) as {
-                /** 餘額 */
-                CreditByRealizedEquity?: number
-              }
-
-              button.html(`餘額 ${model.CreditByRealizedEquity?.toFixed(2)}%`)
-            })
-            .finally(() => {
-              log(`獲取 cid=${cid} 餘額`)
-            })
-        })
+        userFinder.prepend(
+          $(`<button class="user-meta" id="user-meta-${cid}"></button>`),
+        )
+
+        ReactDOM.render(
+          <Provider store={store}>
+            <WatchlistUserControls cid={cid} traderName={traderName} />
+          </Provider>,
+          globalThis.document.querySelector(`#user-meta-${cid}`),
+        )
       }
     })
   }