Basin UI - Small fixes (#615)

BeanstalkFarms · Aug 23, 2023 · 11ebbf7 · 11ebbf7
2 parents 8b8a46e + a28aa1a
commit 11ebbf7
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 9 deletions.
diff --git a/projects/dex-ui/src/components/Frame/Footer.tsx b/projects/dex-ui/src/components/Frame/Footer.tsx
@@ -50,6 +50,9 @@ const Box = styled.a`
   text-decoration: none;
   color: black;
   gap: 16px;
+  :hover {
+    background-color: #f0fdf4;
+  }
   :first-child {
     border-left: none;
   }
@@ -60,6 +63,9 @@ const SmallBox = styled.a`
   width: 64px;
   border-left: 1px solid black;
   justify-content: center;
+  :hover {
+    background-color: #f0fdf4;
+  }
 `;
 
 const StyledLink = styled.span`

diff --git a/projects/dex-ui/src/pages/Home.tsx b/projects/dex-ui/src/pages/Home.tsx
@@ -2,7 +2,7 @@
 import React from "react";
 import { size } from "src/breakpoints";
 import { Link } from "react-router-dom";
-import { RightArrow, RightArrowCircle } from "src/components/Icons";
+import { RightArrowCircle } from "src/components/Icons";
 import styled from "styled-components";
 
 export const Home = () => {
@@ -24,8 +24,7 @@ export const Home = () => {
           <SubTitle>
             Customizable liquidity pools with shared components. &nbsp;
             <WhitepaperLink href={"/basin.pdf"} target="_blank">
-              Read the whitepaper
-              <RightArrow color="#46B955" />
+              Read the whitepaper →
             </WhitepaperLink>
           </SubTitle>
         </TitleSubtitleContainer>
@@ -144,6 +143,9 @@ const OracleWP = styled.a`
   text-decoration: none;
   display: flex;
   align-items: center;
+  :hover {
+    text-decoration: underline;
+  }
 `;
 
 const WhitepaperLink = styled.a`
@@ -156,6 +158,10 @@ const WhitepaperLink = styled.a`
   display: flex;
   align-items: center;
 
+  :hover {
+    text-decoration: underline;
+  }
+
   @media (min-width: ${size.mobile}) {
     font-size: 20px;
     line-height: 24px;
@@ -198,6 +204,10 @@ const Box = styled(Link)`
   text-decoration: none;
   color: black;
 
+  :hover {
+    background-color: #f0fdf4;
+  }
+
   @media (min-width: ${size.mobile}) {
     padding: 0px;
     font-size: 24px;

diff --git a/projects/dex-ui/src/pages/Liquidity.tsx b/projects/dex-ui/src/pages/Liquidity.tsx
@@ -64,8 +64,9 @@ export const Liquidity = () => {
     run();
   }, [well]);
 
-  if (loading) return <div>loading...</div>;
-  if (error) return <div>{error.message}</div>;
+  if (error) {
+    Log.module("Liquidity").error(`useWell(): ${error.message}`);
+  }
 
   return (
     <Page>

diff --git a/projects/dex-ui/src/pages/Wells.tsx b/projects/dex-ui/src/pages/Wells.tsx
@@ -14,6 +14,7 @@ import { useWells } from "src/wells/useWells";
 import styled from "styled-components";
 import { useAccount } from "wagmi";
 import { size } from "src/breakpoints";
+import { Log } from "src/utils/logger";
 
 export const Wells = () => {
   const { data: wells, isLoading, error } = useWells();
@@ -61,8 +62,9 @@ export const Wells = () => {
     run();
   }, [sdk, wells, address]);
 
-  if (isLoading) return <div>loading...</div>;
-  if (error) return <div>{error.message}</div>;
+  if (error) {
+    Log.module("Wells").error(`useWells(): ${error.message}`);
+  }
 
   function WellRow(well: any, index: any) {
     if (!well) return;
@@ -156,7 +158,7 @@ export const Wells = () => {
     return tab === 0 ? WellRow(well, index) : MyLPsRow(well, index);
   });
 
-  const anyLpPositions = !rows.every((row) => row === undefined);
+  const anyLpPositions = rows ? !rows.every((row) => row === undefined) : false;
 
   return (
     <Page>

diff --git a/projects/dex-ui/src/tokens/TokenProvider.tsx b/projects/dex-ui/src/tokens/TokenProvider.tsx
@@ -12,7 +12,6 @@ const TokenContext = createContext(tokenMap);
 export const TokenProvider = ({ children }: { children: React.ReactNode }) => {
   const { data: tokens, isLoading, error } = useWellTokens();
 
-  if (isLoading) return <div>loading...</div>;
   if (error) {
     Log.module("TokenProvider").error(`useWellTokens(): ${error.message}`);
   }