Merge pull request #501 from invariant-labs/usd-tier

Change tiers on USDC/USDT pair + Nightly Connect update
invariant-labs · Oct 28, 2023 · 4feba2e · 4feba2e
2 parents 14561fc + 9350c89
commit 4feba2e
Show file tree

Hide file tree

Showing 11 changed files with 324 additions and 31,218 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/NewPosition/DepositSelector/DepositSelector.stories.tsx b/src/components/NewPosition/DepositSelector/DepositSelector.stories.tsx
@@ -4,6 +4,7 @@ import DepositSelector from './DepositSelector'
 import { SwapToken } from '@selectors/solanaWallet'
 import { BN } from '@project-serum/anchor'
 import { PublicKey } from '@solana/web3.js'
+import { useState } from '@storybook/addons'
 
 const tokens: SwapToken[] = [
   {
@@ -35,37 +36,43 @@ const tokens: SwapToken[] = [
   }
 ]
 
-storiesOf('position/depositSelector', module).add('deposit', () => (
-  <DepositSelector
-    tokens={tokens}
-    setPositionTokens={() => {}}
-    onAddLiquidity={() => {}}
-    tokenAInputState={{
-      value: '0.000001',
-      setValue: () => {},
-      blocked: false,
-      decimalsLimit: 6
-    }}
-    tokenBInputState={{
-      value: '',
-      setValue: () => {},
-      blocked: true,
-      blockerInfo: 'Select a token.',
-      decimalsLimit: 8
-    }}
-    feeTiers={[0.02, 0.04, 0.1, 0.3, 1]}
-    progress='none'
-    onReverseTokens={() => {}}
-    poolIndex={0}
-    canCreateNewPool
-    canCreateNewPosition
-    handleAddToken={() => {}}
-    commonTokens={[
-      new PublicKey('So11111111111111111111111111111111111111112'),
-      new PublicKey('9n4nbM75f5Ui33ZbPYXn59EwSgE8CGsHtAeTH5YFeJ9E'),
-      new PublicKey('EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v')
-    ]}
-    initialHideUnknownTokensValue={false}
-    onHideUnknownTokensChange={() => {}}
-  />
-))
+storiesOf('position/depositSelector', module).add('deposit', () => {
+  const [feeTierIndex, setFeeTierIndex] = useState<number>(0)
+  return (
+    <DepositSelector
+      tokens={tokens}
+      setPositionTokens={(_a, _b, fee) => {
+        setFeeTierIndex(fee)
+      }}
+      onAddLiquidity={() => {}}
+      tokenAInputState={{
+        value: '0.000001',
+        setValue: () => {},
+        blocked: false,
+        decimalsLimit: 6
+      }}
+      tokenBInputState={{
+        value: '',
+        setValue: () => {},
+        blocked: true,
+        blockerInfo: 'Select a token.',
+        decimalsLimit: 8
+      }}
+      feeTiers={[0.02, 0.04, 0.1, 0.3, 1]}
+      progress='none'
+      onReverseTokens={() => {}}
+      poolIndex={0}
+      canCreateNewPool
+      canCreateNewPosition
+      handleAddToken={() => {}}
+      commonTokens={[
+        new PublicKey('So11111111111111111111111111111111111111112'),
+        new PublicKey('9n4nbM75f5Ui33ZbPYXn59EwSgE8CGsHtAeTH5YFeJ9E'),
+        new PublicKey('EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v')
+      ]}
+      initialHideUnknownTokensValue={false}
+      onHideUnknownTokensChange={() => {}}
+      feeTierIndex={feeTierIndex}
+    />
+  )
+})
diff --git a/src/components/NewPosition/DepositSelector/DepositSelector.tsx b/src/components/NewPosition/DepositSelector/DepositSelector.tsx
@@ -53,6 +53,7 @@ export interface IDepositSelector {
   onHideUnknownTokensChange: (val: boolean) => void
   priceALoading?: boolean
   priceBLoading?: boolean
+  feeTierIndex: number
 }
 
 export const DepositSelector: React.FC<IDepositSelector> = ({
@@ -78,13 +79,13 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
   initialHideUnknownTokensValue,
   onHideUnknownTokensChange,
   priceALoading,
-  priceBLoading
+  priceBLoading,
+  feeTierIndex
 }) => {
   const classes = useStyles()
 
   const [tokenAIndex, setTokenAIndex] = useState<number | null>(null)
   const [tokenBIndex, setTokenBIndex] = useState<number | null>(null)
-  const [feeTierIndex, setFeeTierIndex] = useState<number>(0)
 
   const getButtonMessage = useCallback(() => {
     if (tokenAIndex === null || tokenBIndex === null) {
@@ -212,12 +213,12 @@ export const DepositSelector: React.FC<IDepositSelector> = ({
 
         <FeeSwitch
           onSelect={fee => {
-            setFeeTierIndex(fee)
             setPositionTokens(tokenAIndex, tokenBIndex, fee)
           }}
           feeTiers={feeTiers}
           showOnlyPercents
           bestTierIndex={bestTierIndex}
+          currentValue={feeTierIndex}
         />
       </Grid>
 

diff --git a/src/components/NewPosition/FeeSwitch/FeeSwitch.stories.tsx b/src/components/NewPosition/FeeSwitch/FeeSwitch.stories.tsx
@@ -1,9 +1,11 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import FeeSwitch from './FeeSwitch'
+import { useState } from '@storybook/addons'
 
 storiesOf('position/feeSwitch', module)
   .add('default', () => {
+    const [feeTierIndex, setFeeTierIndex] = useState<number>(0)
     return (
       <div
         style={{
@@ -13,14 +15,17 @@ storiesOf('position/feeSwitch', module)
         }}>
         <FeeSwitch
           onSelect={val => {
+            setFeeTierIndex(val)
             console.log(val)
           }}
           feeTiers={[0.05, 0.3, 1]}
+          currentValue={feeTierIndex}
         />
       </div>
     )
   })
   .add('onlyPercents', () => {
+    const [feeTierIndex, setFeeTierIndex] = useState<number>(0)
     return (
       <div
         style={{
@@ -30,10 +35,12 @@ storiesOf('position/feeSwitch', module)
         }}>
         <FeeSwitch
           onSelect={val => {
+            setFeeTierIndex(val)
             console.log(val)
           }}
           feeTiers={[0.02, 0.04, 0.1, 0.3, 1]}
           showOnlyPercents
+          currentValue={feeTierIndex}
         />
       </div>
     )

diff --git a/src/components/NewPosition/FeeSwitch/FeeSwitch.tsx b/src/components/NewPosition/FeeSwitch/FeeSwitch.tsx
@@ -8,25 +8,25 @@ export interface IFeeSwitch {
   showOnlyPercents?: boolean
   feeTiers: number[]
   bestTierIndex?: number
+  currentValue: number
 }
 
 export const FeeSwitch: React.FC<IFeeSwitch> = ({
   onSelect,
   showOnlyPercents = false,
   feeTiers,
-  bestTierIndex
+  bestTierIndex,
+  currentValue
 }) => {
   const classes = useStyles()
 
-  const [current, setCurrent] = useState(0)
   const [blocked, setBlocked] = useState(false)
 
   const tabsClasses = useTabsStyles()
   const singleTabClasses = useSingleTabStyles()
 
   const handleChange = (_: React.ChangeEvent<{}>, newValue: number) => {
     if (!blocked) {
-      setCurrent(newValue)
       onSelect(newValue)
       setBlocked(true)
       setTimeout(() => {
@@ -38,7 +38,7 @@ export const FeeSwitch: React.FC<IFeeSwitch> = ({
   return (
     <Grid className={classes.wrapper}>
       <Tabs
-        value={current}
+        value={currentValue}
         onChange={handleChange}
         variant='scrollable'
         scrollButtons='auto'