Update examples for new v3-sdk version

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "bracketSameLine": true
+}

.vscode/settings.json

@@ -2,8 +2,5 @@
   "editor.codeActionsOnSave": {
     "source.fixAll": true
   },
-  "cSpell.words": [
-    "bips",
-    "exponentiate"
-  ],
-}
+  "cSpell.words": ["bips", "exponentiate"],
+}

v3-sdk/collecting-fees/package.json

@@ -1,13 +1,13 @@
 {
   "name": "collecting-fees",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
-    "@uniswap/sdk-core": "^3.1.0",
-    "@uniswap/v3-sdk": "^3.9.0",
+    "@uniswap/sdk-core": "npm:@uniswapfoundation/sdk-core@^5.0.0",
+    "@uniswap/v3-sdk": "npm:@uniswapfoundation/v3-sdk@^4.0.2",
     "ethers": "^5.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -19,7 +19,7 @@
     "build": "react-scripts build",
     "lint": "yarn eslint .",
     "install:chain": "curl -L https://foundry.paradigm.xyz | bash && clear && echo $0 | exec && foundryup",
-    "start:chain": "anvil --chain-id 1337 --fork-url"
+    "start:chain": "anvil --chain-id 1 --fork-url"
   },
   "eslintConfig": {
     "extends": [

v3-sdk/collecting-fees/src/config.ts

@@ -1,4 +1,4 @@
-import { Token } from '@uniswap/sdk-core'
+import { Fraction, Token } from '@uniswap/sdk-core'
 import { FeeAmount } from '@uniswap/v3-sdk'
 import { DAI_TOKEN, USDC_TOKEN } from './libs/constants'
 
@@ -26,8 +26,7 @@ export interface ExampleConfig {
     token1: Token
     token1Amount: number
     poolFee: FeeAmount
-    token0AmountToCollect: number
-    token1AmountToCollect: number
+    feePercentage: Fraction
   }
 }
 
@@ -50,7 +49,6 @@ export const CurrentConfig: ExampleConfig = {
     token1: DAI_TOKEN,
     token1Amount: 1000,
     poolFee: FeeAmount.LOW,
-    token0AmountToCollect: 10,
-    token1AmountToCollect: 10,
+    feePercentage: new Fraction(1),
   },
 }

v3-sdk/collecting-fees/src/example/Example.tsx

@@ -8,13 +8,9 @@ import {
   TransactionState,
   getWalletAddress,
 } from '../libs/providers'
-import {
-  collectFees,
-  getPositionIds,
-  getPositionInfo,
-  mintPosition,
-  PositionInfo,
-} from '../libs/liquidity'
+import { collectFees, getPositions, mintPosition } from '../libs/liquidity'
+import { Position } from '@uniswap/v3-sdk'
+import { BigintIsh } from '@uniswap/sdk-core'
 
 const useOnBlockUpdated = (callback: (blockNumber: number) => void) => {
   useEffect(() => {
@@ -28,8 +24,7 @@ const useOnBlockUpdated = (callback: (blockNumber: number) => void) => {
 const Example = () => {
   const [token0Balance, setToken0Balance] = useState<string>()
   const [token1Balance, setToken1Balance] = useState<string>()
-  const [positionIds, setPositionIds] = useState<number[]>([])
-  const [positionsInfo, setPositionsInfo] = useState<PositionInfo[]>([])
+  const [positions, setPositions] = useState<Position[]>([])
   const [txState, setTxState] = useState<TransactionState>(TransactionState.New)
   const [blockNumber, setBlockNumber] = useState<number>(0)
 
@@ -56,9 +51,7 @@ const Example = () => {
     )
 
     // Set Position Info
-    const ids = await getPositionIds()
-    setPositionIds(ids)
-    setPositionsInfo(await Promise.all(ids.map(getPositionInfo)))
+    setPositions(await getPositions())
   }, [])
 
   // Event Handlers
@@ -74,32 +67,37 @@ const Example = () => {
     setTxState(await mintPosition())
   }, [])
 
-  const onCollectFees = useCallback(async (position: number) => {
-    setTxState(TransactionState.Sending)
-    setTxState(await collectFees(position))
-  }, [])
+  const onCollectFees = useCallback(
+    async (positionId: BigintIsh | undefined) => {
+      if (positionId === undefined) {
+        throw new Error('Position not fetched correctly')
+      }
+      setTxState(TransactionState.Sending)
+      setTxState(await collectFees(positionId))
+    },
+    []
+  )
 
   // Formatted Data
 
-  const positionInfoStrings: string[] = useMemo(() => {
-    if (positionIds.length !== positionsInfo.length) {
-      return []
-    }
-
-    return positionIds
-      .map((id, index) => [id, positionsInfo[index]])
-      .map((info) => {
-        const id = info[0]
-        const posInfo = info[1] as PositionInfo
-        return `${id}: ${posInfo.liquidity.toString()} liquidity, owed ${posInfo.tokensOwed0.toString()} and ${posInfo.tokensOwed1.toString()}`
-      })
-  }, [positionIds, positionsInfo])
+  const positionStrings: string[] = useMemo(() => {
+    return positions.map((pos) => {
+      return `${
+        pos.positionId ? pos.positionId : 'No id'
+      }: ${pos.liquidity.toString()} liquidity, owed ${
+        pos.tokensOwed0 ? pos.tokensOwed0.toString() : '0'
+      } and ${pos.tokensOwed1 ? pos.tokensOwed1.toString() : '0'}`
+    })
+  }, [positions])
 
   return (
     <div className="App">
-      {CurrentConfig.rpc.mainnet === '' && (
-        <h2 className="error">Please set your mainnet RPC URL in config.ts</h2>
-      )}
+      {CurrentConfig.rpc.mainnet === '' &&
+        CurrentConfig.env === Environment.PRODUCTION && (
+          <h2 className="error">
+            Please set your mainnet RPC URL in config.ts
+          </h2>
+        )}
       {CurrentConfig.env === Environment.WALLET_EXTENSION &&
         getProvider() === null && (
           <h2 className="error">
@@ -117,7 +115,7 @@ const Example = () => {
       <h3>{`${CurrentConfig.tokens.token1.symbol} Balance: ${token1Balance}`}</h3>
       <div>
         Positions:{' '}
-        {positionInfoStrings.map((s, i) => (
+        {positionStrings.map((s, i) => (
           <p key={i}>{s}</p>
         ))}
       </div>
@@ -127,20 +125,20 @@ const Example = () => {
         disabled={
           txState === TransactionState.Sending ||
           getProvider() === null ||
-          CurrentConfig.rpc.mainnet === ''
+          (CurrentConfig.rpc.mainnet === '' &&
+            CurrentConfig.env === Environment.PRODUCTION)
         }>
         <p>Mint Position</p>
       </button>
       <button
         className="button"
         onClick={() => {
-          onCollectFees(positionIds[positionIds.length - 1])
+          onCollectFees(positions[positions.length - 1].positionId)
         }}
         disabled={
           txState === TransactionState.Sending ||
           getProvider() === null ||
-          CurrentConfig.rpc.mainnet === '' ||
-          positionIds.length < 1
+          positions.length < 1
         }>
         <p>Collect Fees</p>
       </button>

v3-sdk/collecting-fees/src/libs/constants.ts

@@ -1,6 +1,6 @@
 // This file stores web3 related constants such as addresses, token definitions, ETH currency references and ABI's
 
-import { SupportedChainId, Token } from '@uniswap/sdk-core'
+import { ChainId, Token } from '@uniswap/sdk-core'
 
 // Addresses
 
@@ -12,15 +12,15 @@ export const NONFUNGIBLE_POSITION_MANAGER_CONTRACT_ADDRESS =
 // Currencies and Tokens
 
 export const USDC_TOKEN = new Token(
-  SupportedChainId.MAINNET,
+  ChainId.MAINNET,
   '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
   6,
   'USDC',
   'USD//C'
 )
 
 export const DAI_TOKEN = new Token(
-  SupportedChainId.MAINNET,
+  ChainId.MAINNET,
   '0x6B175474E89094C44Da98b954EedeAC495271d0F',
   18,
   'DAI',
@@ -48,12 +48,3 @@ export const ERC20_ABI = [
   // Events
   'event Transfer(address indexed from, address indexed to, uint amount)',
 ]
-
-export const NONFUNGIBLE_POSITION_MANAGER_ABI = [
-  // Read-Only Functions
-  'function balanceOf(address _owner) view returns (uint256)',
-  'function tokenOfOwnerByIndex(address _owner, uint256 _index) view returns (uint256)',
-  'function tokenURI(uint256 tokenId) view returns (string memory)',
-
-  'function positions(uint256 tokenId) external view returns (uint96 nonce, address operator, address token0, address token1, uint24 fee, int24 tickLower, int24 tickUpper, uint128 liquidity, uint256 feeGrowthInside0LastX128, uint256 feeGrowthInside1LastX128, uint128 tokensOwed0, uint128 tokensOwed1)',
-]