Basin UI (3) - Yield info + misc 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

@@ -9,30 +9,32 @@ const mediaSizes = {
   desktop: 1200
 };
 
-/// we add 1px to the mobile and tablet sizes so that the media queries don't overlap
+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)`,
-    // 768px & below
-    only: `@media (max-width: ${mediaSizes.mobile - 1}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 & 1024px
-    only: `@media (min-width: ${mediaSizes.mobile}px) and (max-width: ${mediaSizes.tablet - 1}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}px)`
+    down: `@media (max-width: ${mediaSizes.tablet - BP_GAP}px)`
   },
   lg: {
     // 1200px & below
-    down: `@media (max-width: ${mediaSizes.desktop}px)`,
+    down: `@media (max-width: ${mediaSizes.desktop - BP_GAP}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)`
+    // 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

@@ -7,7 +7,7 @@ type ContractMarqueeInfo = Record<string, { display: string; to?: string; url?:
 const CarouselData: ContractMarqueeInfo = {
   ADDRESS: [
     {
-      display: "0x1584B668643617D18321a0BEc6EF3786F4b8Eb7B",
+      display: "0xBA51AAAA95aeEFc1292515b36D86C51dC7877773",
       url: "https://etherscan.io/address/0xBA51AAAA95aeEFc1292515b36D86C51dC7877773"
     }
   ],
@@ -19,10 +19,10 @@ const CarouselData: ContractMarqueeInfo = {
   V1: [{ display: "WHITEPAPER", url: "/basin.pdf" }]
 };
 
-const speedPerItem = 16; // approx same speed as TokenMarquee
+const speedPerItem = 16; // approx same speed as TokenMarque
 const itemGap = 24;
 const numItems = 4;
-const singleItemWidth = 1107.44;
+const singleItemWidth = 1112.06;
 
 export const ContractInfoMarquee = () => {
   const data = Object.entries(CarouselData);

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

@@ -22,6 +22,7 @@ import { Checkbox } from "../Checkbox";
 import { size } from "src/breakpoints";
 import { displayTokenSymbol } from "src/utils/format";
 import { LoadingTemplate } from "../LoadingTemplate";
+import { useLPPositionSummary } from "src/tokens/useLPPositionSummary";
 
 type BaseRemoveLiquidityProps = {
   slippage: number;
@@ -42,11 +43,13 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler,
   const [singleTokenIndex, setSingleTokenIndex] = useState<number>(0);
   const [amounts, setAmounts] = useState<TokenValue[]>([]);
   const [prices, setPrices] = useState<(TokenValue | null)[]>();
-  const [hasEnoughBalance, setHasEnoughBalance] = useState(false);
   const [tokenAllowance, setTokenAllowance] = useState<boolean>(false);
 
-  const sdk = useSdk();
+  const { getPositionWithWell } = useLPPositionSummary();
   const { reserves: wellReserves, refetch: refetchWellReserves } = useWellReserves(well);
+  const sdk = useSdk();
+
+  const lpBalance = useMemo(() => getPositionWithWell(well)?.external, [getPositionWithWell, well]);
 
   useEffect(() => {
     const run = async () => {
@@ -70,6 +73,8 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler,
   const { oneTokenQuote } = oneToken;
   const { customRatioQuote } = custom;
 
+  const hasEnoughBalance = !address || !wellLpToken || !lpTokenAmount || !lpBalance ? false : lpTokenAmount.lte(lpBalance);
+
   useEffect(() => {
     if (well.lpToken) {
       let lpTokenWithMetadata = well.lpToken;
@@ -79,28 +84,6 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler,
     }
   }, [well.lpToken]);
 
-  useEffect(() => {
-    const checkBalances = async () => {
-      if (!address || !wellLpToken || !lpTokenAmount) {
-        setHasEnoughBalance(false);
-        return;
-      }
-
-      let insufficientBalances = false;
-
-      if (lpTokenAmount.gt(TokenValue.ZERO)) {
-        const balance = await wellLpToken.getBalance(address);
-        if (lpTokenAmount.gt(balance)) {
-          insufficientBalances = true;
-        }
-      }
-
-      setHasEnoughBalance(!insufficientBalances);
-    };
-
-    checkBalances();
-  }, [address, lpTokenAmount, wellLpToken]);
-
   useEffect(() => {
     if (customRatioQuote) {
       setLpTokenAmount(customRatioQuote.quote);
@@ -318,6 +301,7 @@ const RemoveLiquidityContent = ({ well, slippage, slippageSettingsClickHandler,
               canChangeValue={removeLiquidityMode !== REMOVE_LIQUIDITY_MODE.Custom}
               showBalance={true}
               loading={false}
+              clamp
             />
           </TokenContainer>
           <MediumGapContainer>

projects/dex-ui/src/components/Swap/BasicInput.tsx

@@ -13,6 +13,7 @@ type Props = {
   onFocus?: FocusEventHandler<HTMLInputElement>;
   onBlur?: FocusEventHandler<HTMLInputElement>;
   canChangeValue?: boolean;
+  max?: TokenValue;
 };
 
 export const BasicInput: FC<Props> = ({
@@ -24,7 +25,8 @@ export const BasicInput: FC<Props> = ({
   onFocus,
   onBlur,
   inputRef,
-  canChangeValue = true
+  canChangeValue = true,
+  max
 }) => {
   const [id, _] = useState(_id ?? Math.random().toString(36).substring(2, 7));
   const [displayValue, setDisplayValue] = useState(value);
@@ -42,6 +44,15 @@ export const BasicInput: FC<Props> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
+  const maxNum = max && parseFloat(max.toHuman());
+  const clamp = useCallback(
+    (amount: string) => {
+      if (amount === "" || amount === ".") return amount;
+      return maxNum !== undefined ? Math.min(parseFloat(amount), maxNum).toString() : amount;
+    },
+    [maxNum]
+  );
+
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       let rawValue = e.target.value;
@@ -55,10 +66,10 @@ export const BasicInput: FC<Props> = ({
         rawValue = `0${rawValue}`;
       }
 
-      setDisplayValue(rawValue);
-      onChange?.(cleanValue);
+      setDisplayValue(clamp(rawValue));
+      onChange?.(clamp(cleanValue));
     },
-    [onChange]
+    [onChange, clamp]
   );
 
   const filterKeyDown = useCallback(

projects/dex-ui/src/components/Swap/TokenInput.tsx

@@ -29,6 +29,7 @@ type TokenInput = {
   onTokenChange?: (t: Token) => void;
   canChangeValue?: boolean;
   debounceTime?: number;
+  clamp?: boolean;
 };
 
 export const TokenInput: FC<TokenInput> = ({
@@ -44,7 +45,8 @@ export const TokenInput: FC<TokenInput> = ({
   loading = false,
   allowNegative = false,
   canChangeValue = true,
-  debounceTime = 500
+  debounceTime = 500,
+  clamp = false
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -97,6 +99,7 @@ export const TokenInput: FC<TokenInput> = ({
           inputRef={inputRef}
           allowNegative={allowNegative}
           canChangeValue={!!canChangeValue}
+          max={clamp ? balance?.[token.symbol] : undefined}
         />
         <TokenPicker token={token} editable={canChangeToken} onChange={handleTokenChange} connectorFor={id} />
       </TopRow>