feat: integrate Unifold Perps deposits

.env.example

@@ -24,6 +24,9 @@ EXT_SENTRY_DSN=
 # runtime: covanlant API token
 COVALENT_KEY=
 
+# Unifold web SDK (publishable)
+UNIFOLD_PUBLISHABLE_KEY=
+
 # Jpush
 JPUSH_KEY=
 JPUSH_CHANNEL=

development/envExposedToClient.js

@@ -24,6 +24,7 @@ function buildEnvExposedToClientDangerously({ platform }) {
     'WORKFLOW_GITHUB_SHA',
     'STORYBOOK_ENABLED',
     'WALLETCONNECT_PROJECT_ID',
+    'UNIFOLD_PUBLISHABLE_KEY',
     'SENTRY_DSN_EXT',
     'SENTRY_DSN_DESKTOP',
     'SENTRY_DSN_MAS',

packages/kit/package.json

@@ -5,7 +5,10 @@
   "main": "src/index.tsx",
   "dependencies": {
     "@onekeyhq/components": "*",
+    "@tanstack/react-query": "5.101.2",
     "@types/url-parse": "^1.4.8",
+    "@unifold/core": "0.1.67",
+    "@unifold/ui-react": "0.1.67",
     "date-fns": "2.30.0",
     "expo-camera": "16.1.10",
     "fuse.js": "^7.0.0",

packages/kit/src/views/Perp/components/OrderInfoPanel/PerpOrderInfoPanel.tsx

@@ -5,10 +5,12 @@ import { useIntl } from 'react-intl';
 
 import type { ITabContainerRef } from '@onekeyhq/components';
 import {
+  Button,
   DebugRenderTracker,
   SizableText,
   Tabs,
   XStack,
+  useThemeName,
 } from '@onekeyhq/components';
 import backgroundApiProxy from '@onekeyhq/kit/src/background/instance/backgroundApiProxy';
 import { useHyperliquidActions } from '@onekeyhq/kit/src/states/jotai/contexts/hyperliquid';
@@ -37,6 +39,7 @@ import { isSpotInstrument } from '@onekeyhq/shared/src/utils/perpsUtils';
 import { usePerpsAccountScopedCacheAddress } from '../../hooks/usePerpsAccountScopedCacheAddress';
 import { isHyperLiquidUnifiedAccountMode } from '../../utils';
 import { getPerpsAccountScopedListData } from '../../utils/accountScopedData';
+import { showPerpsUnifoldDepositTracker } from '../TradingPanel/modals/PerpsUnifoldDepositModal';
 
 import { PerpAccountList } from './List/PerpAccountList';
 import { PerpOpenOrdersList } from './List/PerpOpenOrdersList';
@@ -175,6 +178,8 @@ function TabBarItem({
 function PerpOrderInfoPanel() {
   const tabsRef = useRef<ITabContainerRef | null>(null);
   const actions = useHyperliquidActions();
+  const themeName = useThemeName();
+  const [currentUser] = usePerpsActiveAccountAtom();
   const [tradeRouteViewState] = useTradeRouteViewStateAtom();
   const [pendingInfoPanelTab, setPendingInfoPanelTab] =
     usePerpsPendingInfoPanelTabAtom();
@@ -210,6 +215,16 @@ function PerpOrderInfoPanel() {
     tabsRef.current?.jumpToTab('Open Orders');
   };
 
+  const handleOpenDepositTracker = () => {
+    if (!currentUser?.accountId || !currentUser.accountAddress) {
+      return;
+    }
+    showPerpsUnifoldDepositTracker({
+      selectedAccount: currentUser,
+      theme: themeName === 'dark' ? 'dark' : 'light',
+    });
+  };
+
   return (
     <Tabs.Container
       ref={tabsRef as any}
@@ -240,6 +255,24 @@ function PerpOrderInfoPanel() {
             padding: 0,
             cursor: 'default',
           }}
+          renderToolbar={() =>
+            activeTab === 'Account' && platformEnv.isWeb ? (
+              <XStack pr="$3">
+                <Button
+                  testID="perp-account-deposit-tracker"
+                  size="small"
+                  variant="tertiary"
+                  icon="ClockTimeHistoryOutline"
+                  disabled={
+                    !currentUser?.accountId || !currentUser.accountAddress
+                  }
+                  onPress={handleOpenDepositTracker}
+                >
+                  Deposit Tracker
+                </Button>
+              </XStack>
+            ) : null
+          }
         />
       )}
     >

packages/kit/src/views/Perp/components/TradingPanel/modals/PerpsUnifoldDepositModal.tsx

@@ -0,0 +1,22 @@
+// cspell: words unifold Unifold
+import { Toast } from '@onekeyhq/components';
+import type { IPerpsActiveAccountAtom } from '@onekeyhq/kit-bg/src/states/jotai/atoms';
+
+export function showPerpsUnifoldDepositDialog({
+  onOneKeyWalletPress,
+}: {
+  selectedAccount: IPerpsActiveAccountAtom;
+  onOneKeyWalletPress: () => void;
+}) {
+  onOneKeyWalletPress();
+}
+
+export function showPerpsUnifoldDepositTracker(_params: {
+  selectedAccount: IPerpsActiveAccountAtom;
+  theme: 'light' | 'dark';
+}) {
+  Toast.message({
+    title: 'Unifold demo',
+    message: 'Deposit Tracker is available in the web Unifold SDK demo.',
+  });
+}

packages/kit/src/views/Perp/components/TradingPanel/modals/PerpsUnifoldDepositModal.web.css

@@ -0,0 +1,9 @@
+@media (max-width: 639px) {
+  body.perps-unifold-modal-open [role='dialog'].\!uf-h-full {
+    top: 50% !important;
+    height: auto !important;
+    max-height: calc(100vh - 32px) !important;
+    max-height: calc(100dvh - 32px) !important;
+    overflow-y: auto !important;
+  }
+}