Basin UI - (2) design tweaks

projects/dex-ui/src/breakpoints.ts

@@ -1,3 +1,38 @@
 export const size = {
-    mobile: '769px',
-}
+  mobile: "769px",
+  tablet: "1024px"
+};
+
+const mediaSizes = {
+  mobile: 769,
+  tablet: 1024,
+  desktop: 1200
+};
+
+/// we add 1px to the mobile and tablet sizes so that the media queries don't overlap
+export const mediaQuery = {
+  sm: {
+    // 769px & above
+    up: `@media (min-width: ${mediaSizes.mobile}px)`,
+    // 768px & below
+    only: `@media (max-width: ${mediaSizes.mobile - 1}px)`
+  },
+  md: {
+    // 1024px & above
+    up: `@media (min-width: ${mediaSizes.tablet}px)`,
+    // between 769px & 1024px
+    only: `@media (min-width: ${mediaSizes.mobile}px) and (max-width: ${mediaSizes.tablet - 1}px)`,
+    // 1024px & below
+    down: `@media (max-width: ${mediaSizes.tablet}px)`
+  },
+  lg: {
+    // 1200px & below
+    down: `@media (max-width: ${mediaSizes.desktop}px)`,
+    // 1200px & above
+    only: `@media (min-width: ${mediaSizes.desktop}px)`
+  },
+  between: {
+    // between 769px & 1200px
+    smAndLg: `@media (min-width: ${mediaSizes.mobile}px) and (max-width: ${mediaSizes.desktop - 1}px)`
+  }
+};

projects/dex-ui/src/components/Frame/ContractInfoMarquee.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+
+import styled, { keyframes } from "styled-components";
+
+type ContractMarqueeInfo = Record<string, { display: string; to?: string; url?: string }[]>;
+
+const CarouselData: ContractMarqueeInfo = {
+  ADDRESS: [
+    {
+      display: "0x1584B668643617D18321a0BEc6EF3786F4b8Eb7B",
+      url: "https://etherscan.io/address/0xBA51AAAA95aeEFc1292515b36D86C51dC7877773"
+    }
+  ],
+  AUDIT: [
+    { display: "HALBORN", url: "/halborn-basin-audit.pdf" },
+    { display: "CYFRIN", url: "/cyfrin-basin-audit.pdf" },
+    { display: "CODE4RENA", url: "https://code4rena.com/reports/2023-07-basin" }
+  ],
+  V1: [{ display: "WHITEPAPER", url: "/basin.pdf" }]
+};
+
+const speedPerItem = 16; // approx same speed as TokenMarquee
+const itemGap = 24;
+const numItems = 4;
+const singleItemWidth = 1107.44;
+
+export const ContractInfoMarquee = () => {
+  const data = Object.entries(CarouselData);
+
+  const totalItemWidth = numItems * singleItemWidth;
+  const totalGapWidth = numItems * itemGap;
+
+  const totalWidth = totalItemWidth + totalGapWidth;
+
+  const repeatableWidth = totalWidth / numItems;
+  const animationDuration = numItems * speedPerItem;
+
+  return (
+    <Scroller x={repeatableWidth} duration={animationDuration}>
+      <CarouselRow style={{ justifyContent: "flex-start" }}>
+        <>
+          {Array(numItems)
+            .fill(null)
+            .map((_, idx) => (
+              <Container key={`single-item-${idx}`}>
+                {data.map(([key, data], idx) => (
+                  <RowContainer key={`${key}-${idx}`}>
+                    <InfoRow>
+                      <InfoText>{key.toUpperCase()}:</InfoText>
+                      {data.map(({ display, url }, i) => (
+                        <TextLink href={url} target="_blank" rel="noopener noreferrer" key={`${display}-${i}`}>
+                          {display}
+                          <span>{data.length > 1 && i + 1 < data.length ? <>{","}</> : ""}</span>
+                        </TextLink>
+                      ))}
+                    </InfoRow>
+                    <InfoText>/</InfoText>
+                  </RowContainer>
+                ))}
+              </Container>
+            ))}
+        </>
+      </CarouselRow>
+    </Scroller>
+  );
+};
+
+const Scroller = styled.div<{ x: number; duration: number }>`
+  background: #fff;
+  padding: 16px 48px;
+  box-sizing: border-box;
+  border-top: 1px solid #000;
+
+  animation-name: ${(props) => marquee(props.x)};
+  animation-duration: ${(props) => props.duration}s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+`;
+
+const marquee = (x: number) => keyframes` 
+    0% { transform: translateX(0px); }
+    100% { transform: translateX(-${x}px);}
+`;
+
+const CarouselRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 24px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+`;
+
+const RowContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+`;
+
+const InfoRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  white-space: nowrap;
+`;
+
+const InfoText = styled.div`
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+`;
+
+const TextLink = styled.a`
+  color: #46b955;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.32px;
+  text-decoration-line: underline;
+`;

projects/dex-ui/src/components/Frame/Footer.tsx

@@ -1,24 +1,24 @@
 import React from "react";
 import styled from "styled-components";
 import { BeanstalkLogoBlack, Discord, Github, Twitter } from "../Icons";
-import { size } from "src/breakpoints";
+import { mediaQuery, size } from "src/breakpoints";
 
 export const Footer = () => (
   <Container>
     <Box href="https://docs.basin.exchange" rel="noopener noreferrer" target="_blank">
-      <div>
+      <InfoText>
         <span role="img" aria-label="Documentation">
           📃 Protocol Documentation
         </span>
-      </div>
+      </InfoText>
       <StyledLink>Visit the Docs →</StyledLink>
     </Box>
     <Box href="https://immunefi.com/bounty/beanstalk/" rel="noopener noreferrer" target="_blank">
-      <div>
+      <InfoText>
         <span role="img" aria-label="Bug Bounty">
           👾 Basin Bug Bounty Program
         </span>
-      </div>
+      </InfoText>
       <StyledLink>Learn More →</StyledLink>
     </Box>
     <SmallBox href="https://basin.exchange/discord" rel="noopener noreferrer" target="_blank">
@@ -54,7 +54,7 @@ const Container = styled.footer`
 
 const Box = styled.a`
   display: flex;
-  flex: 1;
+  flex: 2;
   border-left: 1px solid black;
   justify-content: center;
   align-items: center;
@@ -67,6 +67,16 @@ const Box = styled.a`
   :first-child {
     border-left: none;
   }
+
+  ${mediaQuery.md.only} {
+    flex-wrap: wrap;
+    gap: 8px;
+    flex-flow: column;
+  }
+`;
+
+const InfoText = styled.div`
+  whitespace: nowrap;
 `;
 
 const SmallBox = styled.a`
@@ -82,4 +92,5 @@ const SmallBox = styled.a`
 
 const StyledLink = styled.span`
   text-decoration: underline;
+  white-space: nowrap;
 `;

projects/dex-ui/src/components/Liquidity/AddLiquidity.tsx

@@ -16,22 +16,26 @@ import useSdk from "src/utils/sdk/useSdk";
 import { useWellReserves } from "src/wells/useWellReserves";
 import { Checkbox } from "../Checkbox";
 import { size } from "src/breakpoints";
+import { LoadingTemplate } from "src/components/LoadingTemplate";
 
-type AddLiquidityProps = {
-  well: Well;
+type BaseAddLiquidityProps = {
   slippage: number;
   slippageSettingsClickHandler: () => void;
   handleSlippageValueChange: (value: string) => void;
 };
 
+type AddLiquidityProps = {
+  well: Well;
+} & BaseAddLiquidityProps;
+
 export type AddLiquidityQuote = {
   quote: {
     quote: TokenValue[];
   };
   estimate: TokenValue;
 };
 
-export const AddLiquidity = ({ well, slippage, slippageSettingsClickHandler, handleSlippageValueChange }: AddLiquidityProps) => {
+const AddLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, handleSlippageValueChange }: AddLiquidityProps) => {
   const { address } = useAccount();
   const [amounts, setAmounts] = useState<LiquidityAmounts>({});
   const inputs = Object.values(amounts);
@@ -413,6 +417,30 @@ export const AddLiquidity = ({ well, slippage, slippageSettingsClickHandler, han
   );
 };
 
+export const AddLiquidity: React.FC<BaseAddLiquidityProps & { well: Well | undefined; loading: boolean }> = (props) => {
+  if (!props.well || props.loading) {
+    return (
+      <div>
+        <LargeGapContainer>
+          <LoadingTemplate.Flex gap={12}>
+            <LoadingTemplate.Input />
+            <LoadingTemplate.Input />
+          </LoadingTemplate.Flex>
+          <LoadingTemplate.Flex gap={8}>
+            <LoadingTemplate.Item height={20} width={285} />
+            <LoadingTemplate.Item height={20} width={145} />
+          </LoadingTemplate.Flex>
+          <ButtonWrapper>
+            <LoadingTemplate.Button />
+          </ButtonWrapper>
+        </LargeGapContainer>
+      </div>
+    );
+  }
+
+  return <AddLiquidityContent {...props} well={props.well} />;
+};
+
 const LargeGapContainer = styled.div`
   display: flex;
   flex-direction: column;

projects/dex-ui/src/components/Liquidity/QuoteDetails.tsx

@@ -8,7 +8,7 @@ import SlippagePanel from "./SlippagePanel";
 import { ChevronDown, Info } from "../Icons";
 import { ImageButton } from "../ImageButton";
 import { Tooltip } from "../Tooltip";
-import { BodyXS } from "../Typography";
+import { BodyS } from "../Typography";
 import { size } from "src/breakpoints";
 import { displayTokenSymbol } from "src/utils/format";
 
@@ -343,6 +343,6 @@ const QuoteContainer = styled.div`
   display: flex;
   flex-direction: column;
   @media (max-width: ${size.mobile}) {
-    ${BodyXS}
+    ${BodyS}
   }
 `;

projects/dex-ui/src/components/Liquidity/RemoveLiquidity.tsx

@@ -21,15 +21,19 @@ import { useWellReserves } from "src/wells/useWellReserves";
 import { Checkbox } from "../Checkbox";
 import { size } from "src/breakpoints";
 import { displayTokenSymbol } from "src/utils/format";
+import { LoadingTemplate } from "../LoadingTemplate";
 
-type RemoveLiquidityProps = {
-  well: Well;
+type BaseRemoveLiquidityProps = {
   slippage: number;
   slippageSettingsClickHandler: () => void;
   handleSlippageValueChange: (value: string) => void;
 };
 
-export const RemoveLiquidity = ({ well, slippage, slippageSettingsClickHandler, handleSlippageValueChange }: RemoveLiquidityProps) => {
+type RemoveLiquidityProps = {
+  well: Well;
+} & BaseRemoveLiquidityProps;
+
+const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler, handleSlippageValueChange }: RemoveLiquidityProps) => {
   const { address } = useAccount();
 
   const [wellLpToken, setWellLpToken] = useState<Token | null>(null);
@@ -443,6 +447,39 @@ export const RemoveLiquidity = ({ well, slippage, slippageSettingsClickHandler,
   );
 };
 
+export const RemoveLiquidity: React.FC<{ well: Well | undefined; loading: boolean } & BaseRemoveLiquidityProps> = (props) => {
+  if (!props.well || props.loading) {
+    return (
+      <LargeGapContainer>
+        <TokenContainer>
+          <LoadingTemplate.Input />
+        </TokenContainer>
+        <MediumGapContainer>
+          <OutputModeSelectorContainer>
+            <LoadingTemplate.Item width={100} height={20} margin={{ bottom: 4 }} />
+            <LoadingTemplate.Flex row gap={8}>
+              <LoadingTemplate.Button />
+              <LoadingTemplate.Button />
+            </LoadingTemplate.Flex>
+          </OutputModeSelectorContainer>
+          <TokenContainer>
+            <LoadingTemplate.Input />
+          </TokenContainer>
+          <TokenContainer>
+            <LoadingTemplate.Input />
+          </TokenContainer>
+        </MediumGapContainer>
+        <LoadingTemplate.Item width={185} />
+        <ButtonWrapper>
+          <LoadingTemplate.Button />
+        </ButtonWrapper>
+      </LargeGapContainer>
+    );
+  }
+
+  return <RemoveLiquidityContent {...props} well={props.well} />;
+};
+
 type ReadOnlyRowProps = {
   selected?: boolean;
 };
@@ -452,7 +489,7 @@ const LargeGapContainer = styled.div`
   flex-direction: column;
   gap: 24px;
   @media (max-width: ${size.mobile}) {
-    margin-bottom: 40px;
+    margin-bottom: 64px;
   }
 `;