connect wallet button

Author: Tarnadas

app/components/ConnectWalletButton.tsx

@@ -0,0 +1,18 @@
+import { Button } from '@radix-ui/themes';
+import { useConnectWallet } from '@web3-onboard/react';
+import { FC } from 'react';
+
+export const ConnectWalletButton: FC = () => {
+  const [{ wallet }, connectWallet, _] = useConnectWallet();
+
+  return (
+    <Button
+      onClick={async () => {
+        if (wallet) return;
+        await connectWallet();
+      }}
+    >
+      Connect wallet
+    </Button>
+  );
+};

app/components/CreateOrder.tsx

@@ -1,11 +1,12 @@
 import { useOrderEntry, useWithdraw } from '@orderly.network/hooks';
 import { API, OrderEntity, OrderSide, OrderType } from '@orderly.network/types';
 import { Separator } from '@radix-ui/themes';
+import { useConnectWallet } from '@web3-onboard/react';
 import { FC, useState } from 'react';
 import { Controller, FieldError, SubmitHandler, useForm } from 'react-hook-form';
 import { match } from 'ts-pattern';
 
-import { Spinner, TokenInput } from '.';
+import { ConnectWalletButton, Spinner, TokenInput } from '.';
 
 import { getDecimalsFromTick, usdFormatter } from '~/utils';
 
@@ -26,6 +27,7 @@ export const CreateOrder: FC<{
       type: 'Market'
     }
   });
+  const [{ wallet }] = useConnectWallet();
   const { availableWithdraw } = useWithdraw();
   const { onSubmit, helper, maxQty, estLeverage, estLiqPrice } = useOrderEntry(
     {
@@ -184,10 +186,11 @@ export const CreateOrder: FC<{
       <button
         type="submit"
         disabled={loading}
-        className="relative py-2 font-size-5 bg-[var(--accent-9)] hover:bg-[var(--accent-10)] border-rd-1 border-0"
+        className={`relative py-2 font-size-5 bg-[var(--accent-9)] hover:bg-[var(--accent-10)] border-rd-1 border-0 ${wallet == null ? 'hidden' : ''}`}
       >
         {loading && <Spinner overlay={true} />} Create Order
       </button>
+      {wallet == null && <ConnectWalletButton />}
     </form>
   );
 };

app/components/WalletConnection.tsx

@@ -3,9 +3,11 @@ import { Button, DropdownMenu } from '@radix-ui/themes';
 import { useConnectWallet, useSetChain } from '@web3-onboard/react';
 import { FC, useEffect } from 'react';
 
+import { ConnectWalletButton } from './ConnectWalletButton';
+
 export const WalletConnection: FC = () => {
   const { account } = useAccount();
-  const [{ wallet }, connectWallet, disconnectWallet] = useConnectWallet();
+  const [{ wallet }, _, disconnectWallet] = useConnectWallet();
   const [{ connectedChain }, setChain] = useSetChain();
 
   useEffect(() => {
@@ -132,13 +134,6 @@ export const WalletConnection: FC = () => {
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   ) : (
-    <Button
-      onClick={async () => {
-        if (wallet) return;
-        await connectWallet();
-      }}
-    >
-      Connect wallet
-    </Button>
+    <ConnectWalletButton />
   );
 };

app/components/index.ts

@@ -1,8 +1,9 @@
 export * from './AdvancedChart';
 export * from './Assets';
-export * from './LightweightChart';
+export * from './ConnectWalletButton';
 export * from './ClosePosition';
 export * from './CreateOrder';
+export * from './LightweightChart';
 export * from './NavBar';
 export * from './Orderbook';
 export * from './OrderlyConnect';