Merge branch 'wells-integration' into bean-ui-wells-integration

BeanstalkFarms · Aug 30, 2023 · 137c617 · 137c617
2 parents 23cf9d2 + 638daa1
commit 137c617
Show file tree

Hide file tree

Showing 35 changed files with 647 additions and 16,469 deletions.
diff --git a/projects/dex-ui/public/basin.pdf b/projects/dex-ui/public/basin.pdf
diff --git a/projects/dex-ui/public/multi-flow-pump.pdf b/projects/dex-ui/public/multi-flow-pump.pdf
diff --git a/projects/dex-ui/src/components/Checkbox.tsx b/projects/dex-ui/src/components/Checkbox.tsx
@@ -12,14 +12,25 @@ type Props = {
   onClick?: () => void;
 };
 
-export const Checkbox: FC<Props> = ({ label, checked = false, mode, checkboxColor, onClick = () => {} }) => {
+export const Checkbox: FC<Props> = ({ label, checked = false, mode, checkboxColor = "black", onClick = () => {} }) => {
   return (
     <StyledCheckbox>
       <HiddenCheckbox type="checkbox" role={"checkbox"} checked={checked} readOnly />
       <HoverContainer>
         <StyledCheckboxContainer checked={checked} onClick={onClick} mode={mode} checkboxColor={checkboxColor}>
-          <HoverCheckmark checked={checked} checkboxColor={checkboxColor} />
-          <Checkmark checked={checked} checkboxColor={checkboxColor} />
+          {checked && (
+            <CheckMark xmlns="http://www.w3.org/2000/svg" width={13} viewBox="0 0 179 129">
+              <path
+                fill="none"
+                fillRule="evenodd"
+                stroke={checkboxColor}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={31}
+                d="m15.515 61.76 51.253 51.253 96.623-96.623"
+              />
+            </CheckMark>
+          )}
         </StyledCheckboxContainer>
         {label && (
           <CheckboxText checked={checked} onClick={onClick}>
@@ -58,7 +69,6 @@ const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
 
 const StyledCheckboxContainer = styled.div<CheckboxProps>`
   border: 1px solid ${(props) => (props.checkboxColor && props.checked ? props.checkboxColor : "#000")};
-  border-radius: 1em;
   width: 16px;
   height: 16px;
   position: ${(props) => (props.mode === "checkOnly" ? "relative" : "absolute")};
@@ -70,57 +80,16 @@ const StyledCheckboxContainer = styled.div<CheckboxProps>`
   }
 `;
 
-const Checkmark = styled.div<CheckboxProps>`
-  border: 1px solid ${(props) => (props.checkboxColor ? props.checkboxColor : "#FFF")};
-  border-radius: 1em;
-  width: 8px;
-  height: 8px;
-  position: ${(props) => (props.mode === "checkOnly" ? "relative" : "absolute")};
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: ${(props) => (props.checkboxColor ? props.checkboxColor : "#FFF")};
-  filter: ${(props) => (props.checkboxColor ? "brightness(100%);" : "brightness(0%);")}
-  opacity: ${(props) => (props.checked ? "1" : "0")};
-  z-index: 2;
-  @media (max-width: ${size.mobile}) {
-    width: 7px;
-    height: 7px;
-  }
-`;
-
-const HoverCheckmark = styled.div<CheckboxProps>`
-  border: 1px solid transparent;
-  border-radius: 1em;
-  width: 8px;
-  height: 8px;
-  position: ${(props) => (props.mode === "checkOnly" ? "relative" : "absolute")};
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: transparent;
-  ${HoverContainer}:hover & {
-    border: 1px solid ${(props) => (props.checkboxColor ? props.checkboxColor : "#FFF")};
-    background: ${(props) => (props.checkboxColor ? props.checkboxColor : "#FFF")};
-    filter: brightness(50%);
-  }
-  z-index: 1;
-  @media (max-width: ${size.mobile}) {
-    width: 7px;
-    height: 7px;
-  }
+const CheckMark = styled.svg`
+  display: flex;
+  margin-top: 3px;
+  margin-left: 2px;
 `;
 
 const CheckboxText = styled.div<CheckboxProps>`
   margin-left: 1.5em;
   font-weight: ${(props) => (props.checked ? "600" : "normal")};
   cursor: pointer;
-  :hover {
-    font-weight: 600;
-  }
-  ${HoverContainer}:hover & {
-    font-weight: 600;
-  }
   user-select: none;
   @media (max-width: ${size.mobile}) {
     ${BodyXS}

diff --git a/projects/dex-ui/src/components/Error.tsx b/projects/dex-ui/src/components/Error.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { Footer } from "src/components/Frame/Footer";
+import { Frame } from "src/components/Frame/Frame";
+import styled from "styled-components";
+
+type ErrorProps = {
+  message: string;
+  errorOnly?: boolean;
+}
+
+export const Error = ({ message, errorOnly }: ErrorProps) => {
+  return (
+    <>
+      {!errorOnly && <Frame />}
+        <ErrorContainer>
+            <LargeText>
+                Oops!
+            </LargeText>
+            <SmallText>
+                {"Something went wrong :("}
+            </SmallText>
+            <ErrorBox>
+                {message}
+            </ErrorBox>
+        </ErrorContainer>
+      {!errorOnly && <Footer />}
+    </>
+  );
+};
+
+const ErrorContainer = styled.div`
+  display: grid;
+  gap: 12px;
+  justify-items: center;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`
+
+const LargeText = styled.div`
+  font-size: 100px;
+  line-height: 90px;
+`
+
+const SmallText = styled.div`
+  font-size: 24px;
+  margin-left: 2px;
+`
+
+const ErrorBox = styled.div`
+  width: 95vw;
+  text-align: center;
+`
diff --git a/projects/dex-ui/src/components/Frame/Footer.tsx b/projects/dex-ui/src/components/Frame/Footer.tsx
@@ -5,10 +5,14 @@ import { size } from "src/breakpoints";
 
 export const Footer = () => (
   <Container>
-    <Box href="https://github.com/BeanstalkFarms/Beanstalk/tree/master/projects/dex-ui" rel="noopener noreferrer" target="_blank">
-      We are open source. Contribute to this site →
+    <Box href="https://docs.basin.exchange" rel="noopener noreferrer" target="_blank">
+      <div><span role="img" aria-label="Documentation">📃 Protocol Documentation</span></div> 
+      <StyledLink>Visit the Docs →</StyledLink>
+    </Box>
+    <Box href="https://immunefi.com/bounty/beanstalk/" rel="noopener noreferrer" target="_blank">
+      <div><span role="img" aria-label="Bug Bounty">👾 Basin Bug Bounty Program</span></div>
+      <StyledLink>Learn More →</StyledLink>
     </Box>
-    <Box>Join the discussion</Box>
     <SmallBox href="https://basin.exchange/discord" rel="noopener noreferrer" target="_blank">
       <Discord width={20} />
     </SmallBox>
@@ -45,13 +49,25 @@ const Box = styled.a`
   align-items: center;
   text-decoration: none;
   color: black;
+  gap: 16px;
+  :hover {
+    background-color: #f0fdf4;
+  }
   :first-child {
     border-left: none;
   }
 `;
+
 const SmallBox = styled.a`
   display: flex;
   width: 64px;
   border-left: 1px solid black;
   justify-content: center;
+  :hover {
+    background-color: #f0fdf4;
+  }
 `;
+
+const StyledLink = styled.span`
+  text-decoration: underline;
+`
diff --git a/projects/dex-ui/src/components/Frame/Frame.tsx b/projects/dex-ui/src/components/Frame/Frame.tsx
@@ -93,12 +93,12 @@ export const Frame: FC<{}> = ({ children }) => {
                 <Github width={20} />
               </Box>
             </MobileLargeNavRow>
-            <MobileNavLink to="/build" onClick={() => setMobileMenuOpen(false)}>
+            <MobileNavRow href="https://immunefi.com/bounty/beanstalk/" rel="noopener noreferrer" target="_blank" onClick={() => setMobileMenuOpen(false)}>
               Bug Bounty Program
-            </MobileNavLink>
-            <MobileNavLink to="/build" onClick={() => setMobileMenuOpen(false)}>
+            </MobileNavRow>
+            <MobileNavRow href="https://docs.basin.exchange/" rel="noopener noreferrer" target="_blank" onClick={() => setMobileMenuOpen(false)}>
               Documentation
-            </MobileNavLink>
+            </MobileNavRow>
           </MobileNavLinkContainer>
           <MobileConnectContainer>
             <BasinConnectButton />
@@ -319,6 +319,17 @@ const MobileNavLink = styled(Link)<{ $bold?: boolean }>`
   ${(props) => props.$bold && `letter-spacing: 0.96px;`}
 `;
 
+const MobileNavRow = styled.a<{ $bold?: boolean }>`
+  width: 100%;
+  border-bottom: 0.5px solid black;
+  padding: 16px;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: black;
+  font-weight: ${(props) => (props.$bold ? `600` : `normal`)};
+  ${(props) => props.$bold && `letter-spacing: 0.96px;`}
+`;
+
 const MobileLargeNavRow = styled.div`
   display: flex;
   flex-direction: row;