Merge pull request #56 from compolabs/fix/752

[752] Fix bugs on mobile and desktop version
compolabs · Feb 16, 2024 · b9cd36f · b9cd36f
2 parents 8617e44 + d2341fd
commit b9cd36f
Show file tree

Hide file tree

Showing 13 changed files with 173 additions and 137 deletions.
diff --git a/spark-frontend/src/components/Select.tsx b/spark-frontend/src/components/Select.tsx
@@ -22,32 +22,44 @@ interface IProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
 }
 
 const Select: React.FC<IProps> = ({ options, selected, onSelect, label, ...rest }) => {
-  const [focused, setFocused] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
   const selectedOption = options.find(({ key }) => selected === key);
+
+  const handleSelectClick = (v: IOption, index: number) => {
+    onSelect(v, index);
+    setIsVisible(false);
+  };
+
   return (
     <Tooltip
       config={{
         placement: "bottom-start",
         trigger: "click",
-        onVisibleChange: setFocused,
+        visible: isVisible,
+        onVisibleChange: setIsVisible,
       }}
       content={
         <Column crossAxisSize="max">
           {options.map((v, index) => {
             const active = selected === v.key;
             return (
-              <Option key={v.key + "_option"} active={active} disabled={v.disabled} onClick={() => onSelect(v, index)}>
+              <Option
+                key={v.key + "_option"}
+                active={active}
+                disabled={v.disabled}
+                onClick={() => handleSelectClick(v, index)}
+              >
                 {v.title}
               </Option>
             );
           })}
         </Column>
       }
     >
-      <Wrap focused={focused}>
+      <Wrap focused={isVisible}>
         <Text>{label}</Text>
         <SizedBox height={2} />
-        <Root onBlur={() => setFocused(false)} onClick={() => setFocused(true)} {...rest}>
+        <Root onBlur={() => setIsVisible(false)} onClick={() => setIsVisible(true)} {...rest}>
           {selectedOption?.title ?? options[0]?.title}
           {/*<SizedBox width={10}/>*/}
           <img alt="arrow" className="menu-arrow" src={arrowIcon} />

diff --git a/spark-frontend/src/components/Sheet.tsx b/spark-frontend/src/components/Sheet.tsx
@@ -9,7 +9,7 @@ const Sheet: React.FC<SheetProps> = ({ children, detent = "content-height", ...r
         <SheetModal.Header />
         <SheetModal.Content>{children}</SheetModal.Content>
       </SheetModal.Container>
-      <SheetModal.Backdrop />
+      <SheetModal.Backdrop onTap={rest.onClose} />
     </SheetModal>
   );
 };

diff --git a/spark-frontend/src/screens/Faucet/MintButtons.tsx b/spark-frontend/src/screens/Faucet/MintButtons.tsx
@@ -3,16 +3,15 @@ import { observer } from "mobx-react-lite";
 
 import Button from "@components/Button";
 import { Row } from "@components/Flex";
-import { TOKENS_BY_ASSET_ID } from "@src/constants";
 import { useStores } from "@stores";
 
 interface IProps {
   assetId: string;
 }
 
 const MintButtons: React.FC<IProps> = observer(({ assetId }) => {
-  const { accountStore, faucetStore } = useStores();
-  const token = TOKENS_BY_ASSET_ID[assetId];
+  const { faucetStore } = useStores();
+
   if (!faucetStore.initialized) {
     return (
       <Row justifyContent="flex-end" style={{ flex: 1 }}>
@@ -22,12 +21,14 @@ const MintButtons: React.FC<IProps> = observer(({ assetId }) => {
       </Row>
     );
   }
-  const handleClick = () => {
-    faucetStore.handleClick(assetId);
-  };
+
   return (
     <Row justifyContent="flex-end" style={{ flex: 1 }}>
-      <Button disabled={faucetStore.disabled(assetId)} style={{ width: 120 }} onClick={handleClick}>
+      <Button
+        disabled={faucetStore.disabled(assetId)}
+        style={{ width: 120 }}
+        onClick={() => faucetStore.mintByAssetId(assetId)}
+      >
         {faucetStore.loading && faucetStore.actionTokenAssetId === assetId ? "Loading..." : "Mint"}
       </Button>
     </Row>

diff --git a/spark-frontend/src/screens/Faucet/TokensFaucetTable.tsx b/spark-frontend/src/screens/Faucet/TokensFaucetTable.tsx
@@ -12,6 +12,40 @@ import MintButtons from "./MintButtons";
 
 interface IProps {}
 
+const TokensFaucetTable: React.FC<IProps> = observer((assetId) => {
+  const { faucetStore } = useStores();
+  return (
+    <Root>
+      <StyledTableRow>
+        <TableTitle>Asset</TableTitle>
+        <TableTitle>Mint amount</TableTitle>
+        <TableTitle>My balance</TableTitle>
+        <TableTitle>
+          <Row justifyContent="flex-end">{/*<Button style={{ width: 120 }}>Mint all</Button>*/}</Row>
+        </TableTitle>
+      </StyledTableRow>
+      <TableBody>
+        {faucetStore.faucetTokens.map((token) => (
+          <StyledTableRow key={token.assetId}>
+            <TableText type={TEXT_TYPES.BUTTON_SECONDARY} primary>
+              {token.name}
+            </TableText>
+            <TableText type={TEXT_TYPES.BUTTON_SECONDARY} primary>
+              {token.mintAmount.toSignificant(3)} &nbsp;<Chip>{token.symbol}</Chip>
+            </TableText>
+            <TableText type={TEXT_TYPES.BUTTON_SECONDARY} primary>
+              {token.formatBalance?.toSignificant(3)} &nbsp;<Chip>{token.symbol}</Chip>
+            </TableText>
+            <MintButtons assetId={token.assetId} />
+          </StyledTableRow>
+        ))}
+      </TableBody>
+    </Root>
+  );
+});
+
+export default TokensFaucetTable;
+
 const Root = styled.div`
   background: ${({ theme }) => theme.colors.bgSecondary};
   display: flex;
@@ -54,36 +88,3 @@ const TableBody = styled(Column)`
   width: 100%;
   box-sizing: border-box;
 `;
-
-const TokensFaucetTable: React.FC<IProps> = observer((assetId) => {
-  const { accountStore, faucetStore } = useStores();
-  return (
-    <Root>
-      <StyledTableRow>
-        <TableTitle>Asset</TableTitle>
-        <TableTitle>Mint amount</TableTitle>
-        <TableTitle>My balance</TableTitle>
-        <TableTitle>
-          <Row justifyContent="flex-end">{/*<Button style={{ width: 120 }}>Mint all</Button>*/}</Row>
-        </TableTitle>
-      </StyledTableRow>
-      <TableBody>
-        {faucetStore.faucetTokens.map((token) => (
-          <StyledTableRow key={token.assetId}>
-            <TableText type={TEXT_TYPES.BUTTON_SECONDARY} primary>
-              {token.name}
-            </TableText>
-            <TableText type={TEXT_TYPES.BUTTON_SECONDARY} primary>
-              {token.mintAmount.toSignificant(3)} &nbsp;<Chip>{token.symbol}</Chip>
-            </TableText>
-            <TableText type={TEXT_TYPES.BUTTON_SECONDARY} primary>
-              {token.formatBalance?.toSignificant(3)} &nbsp;<Chip>{token.symbol}</Chip>
-            </TableText>
-            <MintButtons assetId={token.assetId} />
-          </StyledTableRow>
-        ))}
-      </TableBody>
-    </Root>
-  );
-});
-export default TokensFaucetTable;
diff --git a/...eens/TradeScreen/BottomTables/BottomTablesInterfaceSpot/BottomTablesInterfaceSpotImpl.tsx b/...eens/TradeScreen/BottomTables/BottomTablesInterfaceSpot/BottomTablesInterfaceSpotImpl.tsx
@@ -252,7 +252,7 @@ const BottomTablesInterfaceSpotImpl: React.FC<IProps> = observer(() => {
       .map(([assetId, balance], i) => {
         const token = TOKENS_BY_ASSET_ID[assetId];
         return (
-          <MobileTableBalanceRow key={i + "mobile-row"}>
+          <MobileTableOrderRow key={i + "mobile-row"}>
             <MobileTableRowColumn>
               <Text type={TEXT_TYPES.SUPPORTING}>Token</Text>
               <SmartFlex center="y" gap="4px">
@@ -262,11 +262,16 @@ const BottomTablesInterfaceSpotImpl: React.FC<IProps> = observer(() => {
                 </Text>
               </SmartFlex>
             </MobileTableRowColumn>
-            <MobileTableRowColumnBalance>
+            <MobileTableRowColumn>
               <Text type={TEXT_TYPES.SUPPORTING}>Balance</Text>
               <Text color={theme.colors.textPrimary}>{BN.formatUnits(balance, token.decimals).toSignificant(2)}</Text>
-            </MobileTableRowColumnBalance>
-          </MobileTableBalanceRow>
+            </MobileTableRowColumn>
+            <MobileTableRowColumn>
+              <CancelButton onClick={() => faucetStore.mintByAssetId(assetId)}>
+                {faucetStore.loading && faucetStore.actionTokenAssetId === assetId ? "Loading..." : "Mint"}
+              </CancelButton>
+            </MobileTableRowColumn>
+          </MobileTableOrderRow>
         );
       });
 
@@ -363,7 +368,7 @@ const BottomTablesInterfaceSpotImpl: React.FC<IProps> = observer(() => {
         </TabContainer>
         <TableContainer>{renderTable()}</TableContainer>
       </TableRoot>
-      {!!vm.myOrders.length && <CancelAllButton>Cancel all orders</CancelAllButton>}
+      {!!vm.myOrders.length && tabIndex === 0 && <CancelAllButton>Cancel all orders</CancelAllButton>}
     </Root>
   );
 });
@@ -493,10 +498,6 @@ const MobileTableOrderRow = styled(SmartFlex)`
   }
 `;
 
-const MobileTableBalanceRow = styled(MobileTableOrderRow)`
-  grid-template-columns: repeat(2, 1fr);
-`;
-
 const MobileTableRowColumn = styled(SmartFlex)`
   flex-direction: column;
   gap: 7px;
@@ -506,12 +507,6 @@ const MobileTableRowColumn = styled(SmartFlex)`
   }
 `;
 
-const MobileTableRowColumnBalance = styled(MobileTableRowColumn)`
-  &:last-of-type {
-    align-items: initial;
-  }
-`;
-
 const TokenBadge = styled(SmartFlex)`
   padding: 4px 8px;
   background: ${({ theme }) => theme.colors.bgSecondary};

diff --git a/...creens/TradeScreen/BottomTables/BottomTablesInterfaceSpot/BottomTablesInterfaceSpotVM.tsx b/...creens/TradeScreen/BottomTables/BottomTablesInterfaceSpot/BottomTablesInterfaceSpotVM.tsx
@@ -7,6 +7,7 @@ import { CONTRACT_ADDRESSES } from "@src/constants";
 import { SpotMarketOrder } from "@src/entity";
 import useVM from "@src/hooks/useVM";
 import { fetchOrders } from "@src/services/SpotMarketService";
+import { handleEvmErrors } from "@src/utils/handleEvmErrors";
 import { RootStore, useStores } from "@stores";
 
 const ctx = React.createContext<BottomTablesInterfaceSpotVM | null>(null);
@@ -49,7 +50,7 @@ class BottomTablesInterfaceSpotVM {
   }
 
   cancelOrder = async (orderId: string) => {
-    const { accountStore } = this.rootStore;
+    const { accountStore, notificationStore } = this.rootStore;
 
     if (!accountStore.signer || !this.rootStore.tradeStore.market) return;
 
@@ -60,7 +61,7 @@ class BottomTablesInterfaceSpotVM {
       const transaction = await contract.removeOrder(orderId);
       await transaction.wait();
     } catch (error) {
-      console.error(error);
+      handleEvmErrors(notificationStore, error, "We were unable to cancel your order at this time");
     }
 
     this.isOrderCancelling = false;

diff --git a/spark-frontend/src/screens/TradeScreen/Chart/Chart.tsx b/spark-frontend/src/screens/TradeScreen/Chart/Chart.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import styled from "@emotion/styled";
 
 import { ChartVMProvider } from "@screens/TradeScreen/Chart/ChartVm";
+import { media } from "@src/themes/breakpoints";
 
 import TradingViewWidget from "./TradingViewWidget";
 
@@ -14,7 +15,11 @@ const Root = styled.div`
   justify-content: center;
   width: 100%;
   flex: 3;
-  box-sizing: border-box;
+
+  ${media.mobile} {
+    min-height: 412px;
+    max-height: 412px;
+  }
 
   & > * {
     width: 100%;

diff --git a/spark-frontend/src/screens/TradeScreen/LeftBlock/CreateOrderSpot/CreateOrderSpot.tsx b/spark-frontend/src/screens/TradeScreen/LeftBlock/CreateOrderSpot/CreateOrderSpot.tsx
@@ -21,8 +21,8 @@ import { useStores } from "@stores";
 interface IProps extends ComponentProps<any> {}
 
 const orderTypes = [
-  { title: "Market", key: "market", disabled: true },
-  { title: "Limit", key: "limit" },
+  { title: "Market", key: "market" },
+  { title: "Limit", key: "limit", disabled: true },
   { title: "Stop Market", key: "stopmarket", disabled: true },
   { title: "Stop Limit", key: "stoplimit", disabled: true },
   { title: "Take Profit", key: "takeprofit", disabled: true },
@@ -69,7 +69,7 @@ const CreateOrderSpot: React.FC<IProps> = observer(({ ...rest }) => {
       <SizedBox height={16} />
       <Row>
         <Column crossAxisSize="max">
-          <Select label="Order type" options={orderTypes} selected={orderTypes[1].key} onSelect={() => null} />
+          <Select label="Order type" options={orderTypes} selected={orderTypes[0].key} onSelect={() => null} />
           <SizedBox height={2} />
           <Row alignItems="center">
             <StyledInfoIcon />

diff --git a/spark-frontend/src/screens/TradeScreen/LeftBlock/CreateOrderSpot/CreateOrderSpotVM.tsx b/spark-frontend/src/screens/TradeScreen/LeftBlock/CreateOrderSpot/CreateOrderSpotVM.tsx
@@ -7,6 +7,7 @@ import Toast from "@src/components/Toast";
 import { CONTRACT_ADDRESSES, DEFAULT_DECIMALS, TOKENS_BY_SYMBOL } from "@src/constants";
 import useVM from "@src/hooks/useVM";
 import BN from "@src/utils/BN";
+import { handleEvmErrors } from "@src/utils/handleEvmErrors";
 import { RootStore, useStores } from "@stores";
 
 const ctx = React.createContext<CreateOrderSpotVM | null>(null);
@@ -183,8 +184,8 @@ class CreateOrderSpotVM {
       );
       await openOrderTransaction.wait();
       notificationStore.toast(<Toast hash={openOrderTransaction.hash} text="Order Created" />);
-    } catch (error) {
-      notificationStore.toast("We were unable to process your order at this time", { type: "warning" });
+    } catch (error: any) {
+      handleEvmErrors(notificationStore, error, "We were unable to process your order at this time");
     }
 
     await balanceStore.update();

diff --git a/spark-frontend/src/screens/TradeScreen/LeftBlock/MarketSelection/MarketSelection.tsx b/spark-frontend/src/screens/TradeScreen/LeftBlock/MarketSelection/MarketSelection.tsx
@@ -26,7 +26,6 @@ const MarketSelection: React.FC<IProps> = observer(() => {
   const spotMarketsFiltered = useMemo(
     () =>
       tradeStore.spotMarkets.filter((market) => {
-        console.log(searchValue, market.symbol!);
         return searchValue.length ? market.symbol.includes(searchValue) : true;
       }),
     [tradeStore.spotMarkets, searchValue],