Merge pull request #26 from perpetual-protocol/main

Merge from main

.gitignore

@@ -24,3 +24,4 @@ yarn-error.log*
 
 /src/types
 /script/tmp
+/.nova

src/component/UserAgreementModal/index.tsx

@@ -51,7 +51,7 @@ function UserAgreementModal() {
                         >
                              Docs 
                         </ExternalLink>
-                        to know more
+                        to know more.
                     </Text>
                     <br />
                     <Text>

src/page/Home/component/Trade/Leverage.tsx

@@ -36,7 +36,7 @@ function Leverage() {
     return useMemo(
         () => (
             <FormControl id="leverages">
-                <SmallFormLabel>Leverages</SmallFormLabel>
+                <SmallFormLabel>Leverage</SmallFormLabel>
                 <Box px={10} pt={4} pb={8} bg="blackAlpha.50" borderRadius="xl">
                     <Slider
                         onChange={handleOnChange}

src/page/Home/component/Trade/Slippage.tsx

@@ -6,8 +6,10 @@ import {
     NumberInput,
     NumberInputField,
     NumberInputStepper,
+    InputRightElement,
+    Text,
 } from "@chakra-ui/react"
-import { useCallback, useMemo } from "react"
+import React, { useCallback, useMemo } from "react"
 
 import SmallFormLabel from "component/SmallFormLabel"
 import { Trade } from "container/trade"
@@ -23,27 +25,40 @@ function Slippage() {
         },
         [setSlippage],
     )
-
     return useMemo(
         () => (
             <FormControl id="slippage">
                 <SmallFormLabel>Slippage (%)</SmallFormLabel>
                 <NumberInput
                     allowMouseWheel
-                    value={slippage}
                     min={0}
                     step={0.1}
+                    max={100}
                     clampValueOnBlur={false}
                     onChange={handleOnChange}
+                    value={slippage}
+                    focusInputOnChange={true}
                 >
                     <NumberInputField />
                     <NumberInputStepper>
                         <NumberIncrementStepper />
                         <NumberDecrementStepper />
                     </NumberInputStepper>
+                    <InputRightElement w="54px" mr={4}>
+                        <Text
+                            w="100%"
+                            textAlign="center"
+                            fontWeight="bold"
+                            fontSize="xs"
+                            color="gray.500"
+                            textTransform="uppercase"
+                        >
+                            %
+                        </Text>
+                    </InputRightElement>
                 </NumberInput>
                 <FormHelperText>
-                    To use custom slippage please input manually. It also apply to closing position and margin
+                    To use custom slippage, please input manually. It also applies to closing position and margin
                     adjustment.
                 </FormHelperText>
             </FormControl>

src/page/Home/index.tsx

@@ -1,11 +1,23 @@
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react"
-import { useState } from "react"
+import { useEffect, useState } from "react"
+
+import { Connection } from "container/connection"
 import GetStarted from "./component/GetStarted"
 import Position from "./component/Position"
 import TradeComponent from "./component/Trade"
 
 const Home = () => {
+    // NOTE: Focus the trade tab once wallet is connected.
     const [tabIndex, setTabIndex] = useState(0)
+    const { account } = Connection.useContainer()
+    useEffect(() => {
+        if (account) {
+            setTabIndex(1)
+        } else {
+            setTabIndex(0)
+        }
+    }, [account])
+
     return (
         <>
             {/* Tabs */}