Basin UI (1) - QOL Fixes

projects/dex-ui/codegen.ts

@@ -2,7 +2,11 @@ import { CodegenConfig } from "@graphql-codegen/cli";
 
 const config: CodegenConfig = {
   overwrite: true,
-  schema: "graphql.schema.json",
+  schema: [
+    "graphql.schema.json",
+    // beanstalk subgraph
+    "https://graph.node.bean.money/subgraphs/name/beanstalk"
+  ],
   documents: "src/**/*.graphql",
   ignoreNoDocuments: true,
   generates: {

projects/dex-ui/src/abi/MULTI_PUMP_ABI.json

@@ -0,0 +1,115 @@
+[
+  {
+    "inputs": [
+      { "internalType": "bytes16", "name": "_maxPercentIncrease", "type": "bytes16" },
+      { "internalType": "bytes16", "name": "_maxPercentDecrease", "type": "bytes16" },
+      { "internalType": "uint256", "name": "_capInterval", "type": "uint256" },
+      { "internalType": "bytes16", "name": "_alpha", "type": "bytes16" }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  { "inputs": [], "name": "NoTimePassed", "type": "error" },
+  { "inputs": [], "name": "NotInitialized", "type": "error" },
+  {
+    "inputs": [],
+    "name": "ALPHA",
+    "outputs": [{ "internalType": "bytes16", "name": "", "type": "bytes16" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "CAP_INTERVAL",
+    "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "LOG_MAX_DECREASE",
+    "outputs": [{ "internalType": "bytes16", "name": "", "type": "bytes16" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "LOG_MAX_INCREASE",
+    "outputs": [{ "internalType": "bytes16", "name": "", "type": "bytes16" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "address", "name": "well", "type": "address" }],
+    "name": "readCappedReserves",
+    "outputs": [{ "internalType": "uint256[]", "name": "cappedReserves", "type": "uint256[]" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      { "internalType": "address", "name": "well", "type": "address" },
+      { "internalType": "bytes", "name": "", "type": "bytes" }
+    ],
+    "name": "readCumulativeReserves",
+    "outputs": [{ "internalType": "bytes", "name": "cumulativeReserves", "type": "bytes" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      { "internalType": "address", "name": "well", "type": "address" },
+      { "internalType": "bytes", "name": "", "type": "bytes" }
+    ],
+    "name": "readInstantaneousReserves",
+    "outputs": [{ "internalType": "uint256[]", "name": "emaReserves", "type": "uint256[]" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "address", "name": "well", "type": "address" }],
+    "name": "readLastCappedReserves",
+    "outputs": [{ "internalType": "uint256[]", "name": "lastCappedReserves", "type": "uint256[]" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "address", "name": "well", "type": "address" }],
+    "name": "readLastCumulativeReserves",
+    "outputs": [{ "internalType": "bytes16[]", "name": "cumulativeReserves", "type": "bytes16[]" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "internalType": "address", "name": "well", "type": "address" }],
+    "name": "readLastInstantaneousReserves",
+    "outputs": [{ "internalType": "uint256[]", "name": "emaReserves", "type": "uint256[]" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      { "internalType": "address", "name": "well", "type": "address" },
+      { "internalType": "bytes", "name": "startCumulativeReserves", "type": "bytes" },
+      { "internalType": "uint256", "name": "startTimestamp", "type": "uint256" },
+      { "internalType": "bytes", "name": "", "type": "bytes" }
+    ],
+    "name": "readTwaReserves",
+    "outputs": [
+      { "internalType": "uint256[]", "name": "twaReserves", "type": "uint256[]" },
+      { "internalType": "bytes", "name": "cumulativeReserves", "type": "bytes" }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      { "internalType": "uint256[]", "name": "reserves", "type": "uint256[]" },
+      { "internalType": "bytes", "name": "", "type": "bytes" }
+    ],
+    "name": "update",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  }
+]

projects/dex-ui/src/breakpoints.ts

@@ -1,3 +1,40 @@
 export const size = {
-    mobile: '769px',
-}
+  mobile: "769px",
+  tablet: "1024px"
+};
+
+const mediaSizes = {
+  mobile: 769,
+  tablet: 1024,
+  desktop: 1200
+};
+
+const BP_GAP = 0.05;
+
+/// we subtract 0.05px to some queries to prevent overlapping
+export const mediaQuery = {
+  sm: {
+    // 769px & above
+    up: `@media (min-width: ${mediaSizes.mobile}px)`,
+    // 768.95px & below
+    only: `@media (max-width: ${mediaSizes.mobile - BP_GAP}px)`
+  },
+  md: {
+    // 1024px & above
+    up: `@media (min-width: ${mediaSizes.tablet}px)`,
+    // between 769px & 1023.95px
+    only: `@media (min-width: ${mediaSizes.mobile}px) and (max-width: ${mediaSizes.tablet - BP_GAP}px)`,
+    // 1024px & below
+    down: `@media (max-width: ${mediaSizes.tablet - BP_GAP}px)`
+  },
+  lg: {
+    // 1200px & below
+    down: `@media (max-width: ${mediaSizes.desktop - BP_GAP}px)`,
+    // 1200px & above
+    only: `@media (min-width: ${mediaSizes.desktop}px)`
+  },
+  between: {
+    // between 769px & 1199.95px
+    smAndLg: `@media (min-width: ${mediaSizes.mobile}px) and (max-width: ${mediaSizes.desktop - BP_GAP}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: "0xBA51AAAA95aeEFc1292515b36D86C51dC7877773",
+      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 TokenMarque
+const itemGap = 24;
+const numItems = 4;
+const singleItemWidth = 1112.06;
+
+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;
+`;