Add okx wallet (#546)

* add okx wallet

* fix okx wallet issue

* block in portfolio page

* update Panel name

* recover orderly tip

* update

package.json

@@ -114,14 +114,15 @@
     "@near-wallet-selector/ledger": "^8.9.7",
     "@near-wallet-selector/math-wallet": "^8.9.7",
     "@near-wallet-selector/meteor-wallet": "8.5.4",
+    "@near-wallet-selector/mintbase-wallet": "^8.9.7",
     "@near-wallet-selector/modal-ui": "^8.9.7",
     "@near-wallet-selector/my-near-wallet": "^8.9.7",
     "@near-wallet-selector/near-mobile-wallet": "^8.9.7",
     "@near-wallet-selector/neth": "^7.9.1",
     "@near-wallet-selector/nightly": "^8.9.7",
+    "@near-wallet-selector/okx-wallet": "^8.9.10",
     "@near-wallet-selector/sender": "^8.9.7",
     "@near-wallet-selector/wallet-connect": "^7.9.1",
-    "@near-wallet-selector/mintbase-wallet": "^8.9.7",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v4.7.1/react-icons-all-files-4.7.1.tgz",
     "@transak/transak-sdk": "1.2.2",
     "@walletconnect/client": "^2.0.0-beta.26",

src/components/forms/SlippageSelector.tsx

@@ -218,6 +218,7 @@ export default function SlippageSelector({
   const trisDisbaled =
     selectedWalletId === 'near-snap' ||
     selectedWalletId === 'near-mobile-wallet' ||
+    selectedWalletId === 'okx-wallet' ||
     selectedWalletId === 'mintbase-wallet';
   useEffect(() => {
     if (trisDisbaled) {

src/components/overview/OrderlyPanel.tsx

@@ -45,7 +45,8 @@ import {
   useOrderlyPortfolioAssets,
 } from '../../pages/Orderly/components/AssetModal/state';
 import { usePerpData } from '../../pages/Orderly/components/UserBoardPerp/state';
-export default function OrderlyPanel() {
+import { OrderlyUnderMaintainIcon } from '../../pages/Orderly/components/Common/Icons';
+function OrderlyPanel() {
   const {
     tokenPriceList,
     isSignedIn,
@@ -247,3 +248,29 @@ function validContract() {
     return true;
   }
 }
+export default function OrderlyPanelContainer() {
+  const { is_mobile } = useContext(OverviewData);
+  const disbaledWallet = ['okx-wallet'];
+  const selectedWalletId = window.selector?.store?.getState()?.selectedWalletId;
+  const isBlock = disbaledWallet.includes(selectedWalletId);
+  if (isBlock)
+    return (
+      <div
+        className={`flex flex-col justify-between bg-swapCardGradient rounded-2xl px-5 py-4 w-1 xsm:w-full flex-grow overflow-hidden relative xsm:mb-3`}
+        style={{ height: is_mobile ? '115px' : '176px' }}
+      >
+        <span className="text-base text-overviewPurpleColor gotham_bold">
+          Orderly
+        </span>
+        <div className="flex flex-col items-center justify-center relative -top-5 xsm:-top-14">
+          <div className="transform scale-75 xsm:scale-50">
+            <OrderlyUnderMaintainIcon removeText={true} />
+          </div>
+          <div className="text-white text-xs gotham_bold text-center -mt-6 xsm:-mt-12">
+            This wallet doesn't support Orderbook.
+          </div>
+        </div>
+      </div>
+    );
+  return <OrderlyPanel />;
+}

src/components/portfolio/AccessKeyModal.tsx

@@ -145,7 +145,7 @@ function AuthorizedApps({
   const [clear_loading, set_clear_loading] = useState<boolean>(false);
   const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set([]));
   const { allKeys } = useWalletSelector();
-  const disbaledWallet = ['sender', 'neth', 'keypom'];
+  const disbaledWallet = ['sender', 'neth', 'keypom', 'okx-wallet'];
   const selectedWalletId = window.selector?.store?.getState()?.selectedWalletId;
   const functionCallKeys = useMemo(() => {
     return allKeys.filter((key) => key.access_key.permission !== 'FullAccess');

src/context/WalletSelectorContext.tsx

@@ -19,6 +19,7 @@ import { setupNightly } from '@near-wallet-selector/nightly';
 import getConfig from '../services/config';
 import { setupWalletConnect } from '@near-wallet-selector/wallet-connect';
 import { setupNearMobileWallet } from '@near-wallet-selector/near-mobile-wallet';
+import { setupOKXWallet } from '@near-wallet-selector/okx-wallet';
 import { setupMintbaseWallet } from '@near-wallet-selector/mintbase-wallet';
 
 import '@near-wallet-selector/modal-ui/styles.css';
@@ -192,6 +193,7 @@ export const WalletSelectorContextProvider: React.FC<any> = ({ children }) => {
           contractId: CONTRACT_ID,
           deprecated: false,
         }),
+        setupOKXWallet({}),
       ],
     });
     const _modal = setupModal(_selector, {

src/pages/Orderly/BlockOrderBookTip.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+import { OrderlyUnderMaintainIcon } from './components/Common/Icons';
+export default function BlockOrderBookTip() {
+  return (
+    <div
+      className="flex flex-col items-center justify-center"
+      style={{ marginTop: 'calc(100% - 90%)' }}
+    >
+      <OrderlyUnderMaintainIcon removeText={true}></OrderlyUnderMaintainIcon>
+      <div className="text-white text-base gotham_bold text-center">
+        This wallet doesn't support Orderbook.
+      </div>
+    </div>
+  );
+}

src/pages/Orderly/OrderlyPerpetual.tsx

@@ -48,6 +48,7 @@ import PositionsTable from './components/AllOrders/PositionsTable';
 import { CheckBox } from './components/Common';
 import { parseSymbol } from './components/RecentTrade';
 import { NewUserTip } from './components/Common/NewUserTip';
+import BlockOrderBookTip from './BlockOrderBookTip';
 
 export const REF_ORDERLY_PERP_TIP_SIG = 'REF_ORDERLY_PERP_TIP_SIGN9';
 
@@ -391,7 +392,7 @@ function OrderlyUnderMaintain() {
   );
 }
 
-export default function OrderlyPerpetual() {
+function OrderlyPerpetual() {
   const priKeyPath = get_orderly_private_key_path();
 
   const pubKeyPath = get_orderly_public_key_path();
@@ -426,3 +427,10 @@ export default function OrderlyPerpetual() {
     </>
   );
 }
+export default function OrderBookPerp() {
+  const disbaledWallet = ['okx-wallet'];
+  const selectedWalletId = window.selector?.store?.getState()?.selectedWalletId;
+  const isBlock = disbaledWallet.includes(selectedWalletId);
+  if (isBlock) return <BlockOrderBookTip />;
+  return <OrderlyPerpetual />;
+}

src/pages/Orderly/OrderlyTradingBoard.tsx

@@ -31,6 +31,7 @@ import { useOrderlyContext } from './orderly/OrderlyContext';
 import { PerpOrSpot } from './utiles';
 import { FormattedMessage } from 'react-intl';
 import { NewUserTip } from './components/Common/NewUserTip';
+import BlockOrderBookTip from './BlockOrderBookTip';
 import { PerpOrderlyTip, PerpOrderlyTipMobile } from './components/PerpHeader';
 
 function TradingBoard() {
@@ -265,15 +266,20 @@ function OrderlyTradingBoard() {
     <>
       <div className="mx-auto relative xs:bottom-6 bottom-9">
         {/* todo  */}
-        {!isMobile && <PerpOrderlyTip />}
+        {/* {!isMobile && <PerpOrderlyTip />} */}
         {!isMobile && <TradingBoard></TradingBoard>}
 
         {isMobile && <MobileTradingBoard></MobileTradingBoard>}
       </div>
       {/* todo  */}
-      {isMobile && <PerpOrderlyTipMobile></PerpOrderlyTipMobile>}
+      {/* {isMobile && <PerpOrderlyTipMobile></PerpOrderlyTipMobile>} */}
     </>
   );
 }
-
-export default OrderlyTradingBoard;
+export default function OrderBookSpot() {
+  const disbaledWallet = ['okx-wallet'];
+  const selectedWalletId = window.selector?.store?.getState()?.selectedWalletId;
+  const isBlock = disbaledWallet.includes(selectedWalletId);
+  if (isBlock) return <BlockOrderBookTip />;
+  return <OrderlyTradingBoard />;
+}

src/pages/Orderly/PorfolioOrderly.tsx

@@ -58,6 +58,7 @@ const configV2 = getConfigV2();
 import CustomTooltip from 'src/components/customTooltip/customTooltip';
 import { constOrderlyPageSize } from 'src/pages/Orderly/orderly/constant';
 import { MobileView, PCView } from 'src/components/deviceView/deviceView';
+import BlockOrderBookTip from './BlockOrderBookTip';
 export const PortfolioOrderlyData = createContext(null);
 const is_mobile = isMobile();
 
@@ -822,5 +823,27 @@ function PortfolioOrderly() {
     </PortfolioOrderlyData.Provider>
   );
 }
-
-export default PortfolioOrderly;
+export default function OrderBookPortfolio() {
+  const disbaledWallet = ['okx-wallet'];
+  const selectedWalletId = window.selector?.store?.getState()?.selectedWalletId;
+  const isBlock = disbaledWallet.includes(selectedWalletId);
+  if (isBlock)
+    return (
+      <div className="flex items-stretch  pb-20 md:pb-0 lg:pb-0 w-full h-full lg:-mt-12">
+        {/* Navigation */}
+        <div
+          style={{ width: '280px' }}
+          className="pl-5 py-4 pr-4 flex-shrink-0 hidden md:block lg:block"
+        >
+          <Navigation />
+        </div>
+        <div
+          className="flex justify-center "
+          style={{ width: isMobile() ? '100%' : 'calc(100% - 280px)' }}
+        >
+          <BlockOrderBookTip />
+        </div>
+      </div>
+    );
+  return <PortfolioOrderly />;
+}