From fb322e917fa59f3e389a36acb65df469339a619e Mon Sep 17 00:00:00 2001
From: uncoolzero <107518216+uncoolzero@users.noreply.github.com>
Date: Wed, 23 Aug 2023 16:35:34 -0300
Subject: [PATCH 1/2] Basin UI - Removed loading screen

---
 projects/dex-ui/src/pages/Liquidity.tsx      | 5 +++--
 projects/dex-ui/src/pages/Wells.tsx          | 8 +++++---
 projects/dex-ui/src/tokens/TokenProvider.tsx | 1 -
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/projects/dex-ui/src/pages/Liquidity.tsx b/projects/dex-ui/src/pages/Liquidity.tsx
index e0423a3a0e..06a94563cb 100644
--- 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
index c89a4d453b..e6810944e4 100644
--- 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
index befa1ff5fb..f34e188a1b 100644
--- 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}`);
   }

From a28aa1a4f2f067281e3f402f8e843c658a23a8d1 Mon Sep 17 00:00:00 2001
From: uncoolzero <107518216+uncoolzero@users.noreply.github.com>
Date: Wed, 23 Aug 2023 16:44:05 -0300
Subject: [PATCH 2/2] Basin UI - Hover behavior

---
 projects/dex-ui/src/components/Frame/Footer.tsx |  6 ++++++
 projects/dex-ui/src/pages/Home.tsx              | 16 +++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/projects/dex-ui/src/components/Frame/Footer.tsx b/projects/dex-ui/src/components/Frame/Footer.tsx
index 4053aa6440..49ec96083e 100644
--- 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
index 601fb38bda..0d3482ff32 100644
--- 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;