OETH Dapp, curve swap support for stETH, WETH, rETH, and frxETH (#1538)

* Add in curve routes * Remove console log * Set node engine to 16 * Run prettier on the fileset * Add different approvals for oeth to LSD and oeth to eth pool * Fix approval route * Fix reth
OriginProtocol · May 26, 2023 · 066e740 · 066e740
1 parent 85a2b8b
commit 066e740
Show file tree

Hide file tree

Showing 21 changed files with 624 additions and 779 deletions.
diff --git a/dapp-oeth/abis/CurveRegistryExchange.json b/dapp-oeth/abis/CurveRegistryExchange.json
diff --git a/dapp-oeth/next.config.js b/dapp-oeth/next.config.js
@@ -59,7 +59,7 @@ const config = {
 
     if (!isServer) {
       config.resolve.alias['@sentry/node'] = '@sentry/browser'
-    }  
+    }
 
     return config
   },
@@ -71,22 +71,22 @@ const config = {
       {
         source: '/swap',
         destination: '/',
-        permanent: true
+        permanent: true,
       },
       {
         source: '/dapp',
         destination: '/',
-        permanent: true
+        permanent: true,
       },
       {
         source: '/mint',
         destination: '/',
-        permanent: true
+        permanent: true,
       },
       {
         source: '/stake',
         destination: '/earn',
-        permanent: true
+        permanent: true,
       },
     ]
   },
@@ -112,7 +112,7 @@ const config = {
           },
           {
             key: 'Content-Security-Policy',
-            value: "frame-ancestors https://*.ledger.com",
+            value: 'frame-ancestors https://*.ledger.com',
           },
         ],
       },

diff --git a/dapp-oeth/pages/_app.js b/dapp-oeth/pages/_app.js
@@ -43,11 +43,11 @@ function App({ Component, pageProps, err }) {
   ).split('?')[0]
 
   useEffect(() => {
-    router.events.on("routeChangeComplete", pageview);
+    router.events.on('routeChangeComplete', pageview)
     return () => {
-      router.events.off("routeChangeComplete", pageview);
-    };
-  }, [router.events]);
+      router.events.off('routeChangeComplete', pageview)
+    }
+  }, [router.events])
 
   useEffect(() => {
     // Update account info when connection already established

diff --git a/dapp-oeth/src/components/GetOUSD.js b/dapp-oeth/src/components/GetOUSD.js
@@ -59,7 +59,7 @@ const GetOUSD = ({
         style={style}
         onClick={() => {
           if (process.browser) {
-            event({'event': 'connect_click'})
+            event({ event: 'connect_click' })
             if (ledgerLive) {
               activate(ledgerLiveConnector, undefined, true)
             } else {

diff --git a/dapp-oeth/src/components/IPFSDappLink.js b/dapp-oeth/src/components/IPFSDappLink.js
@@ -5,13 +5,11 @@ export default function IPFSDappLink({ css }) {
   const [displayIpfsLink, setDisplayIpfsLink] = useState(false)
 
   useEffect(() => {
-    setDisplayIpfsLink(
-      process.env.DEPLOY_MODE !== 'ipfs'
-    )
+    setDisplayIpfsLink(process.env.DEPLOY_MODE !== 'ipfs')
   }, [])
 
   if (!displayIpfsLink) {
-    return null;
+    return null
   }
 
   return (

diff --git a/dapp-oeth/src/components/Nav.js b/dapp-oeth/src/components/Nav.js
@@ -152,7 +152,7 @@ const TransactionActivityDropdown = () => {
       animationHash.current = setTimeout(() => {
         setTxHashesToAnimate([])
         animationHash.current = null
-      }, 8000)
+      }, 13000)
     }
 
     const sortedTx = [...transactions]

diff --git a/dapp-oeth/src/components/WalletSelectContent.js b/dapp-oeth/src/components/WalletSelectContent.js
@@ -39,8 +39,8 @@ const WalletSelectContent = ({ isMobile }) => {
     if (active) {
       closeWalletSelectModal()
       event({
-        'event': 'connect',
-        'connect_address': account?.slice(2)
+        event: 'connect',
+        connect_address: account?.slice(2),
       })
     }
   }, [active])
@@ -70,8 +70,8 @@ const WalletSelectContent = ({ isMobile }) => {
 
   const onConnect = async (name) => {
     event({
-      'event': 'connect_modal_click',
-      'connect_modal_wallet': name.toLowerCase()
+      event: 'connect_modal_click',
+      connect_modal_wallet: name.toLowerCase(),
     })
 
     setError(null)

diff --git a/dapp-oeth/src/components/buySell/ApproveSwap.js b/dapp-oeth/src/components/buySell/ApproveSwap.js
@@ -12,7 +12,7 @@ import { walletLogin } from 'utils/account'
 import { event } from '../../../lib/gtm'
 
 const ApproveSwap = ({
-  stableCoinToApprove,
+  coinToApprove,
   needsApproval,
   selectedSwap,
   inputAmount,
@@ -36,12 +36,10 @@ const ApproveSwap = ({
   const [isApproving, setIsApproving] = useState({})
   const web3react = useWeb3React()
   const { library, account, activate, active } = web3react
-  const coinApproved = stableCoinToApprove === 'eth' || stage === 'done'
+  const coinApproved = coinToApprove === 'eth' || stage === 'done'
 
   const isWrapped =
-    selectedSwap &&
-    selectedSwap.name === 'woeth' &&
-    stableCoinToApprove === 'oeth'
+    selectedSwap && selectedSwap.name === 'woeth' && coinToApprove === 'oeth'
 
   const approvalNeeded =
     (selectedSwap &&
@@ -59,15 +57,8 @@ const ApproveSwap = ({
 
   const {
     vault,
-    uniV3SwapRouter,
-    uniV2Router,
-    sushiRouter,
-    curveOUSDMetaPool,
     curveOETHPool,
-    usdt,
-    dai,
-    usdc,
-    ousd,
+    curveRegistryExchange,
     weth,
     reth,
     steth,
@@ -78,6 +69,8 @@ const ApproveSwap = ({
     zapper,
   } = useStoreState(ContractStore, (s) => s.contracts || {})
 
+  const curveRegistryCoins = ['steth', 'weth', 'reth', 'frxeth']
+
   const routeConfig = {
     vault: {
       contract: vault,
@@ -93,39 +86,25 @@ const ApproveSwap = ({
         done: 'Zap + Vault',
       },
     },
-    // uniswap: {
-    //   contract: uniV3SwapRouter,
-    //   name: {
-    //     approving: 'Uniswap',
-    //     done: 'Uniswap',
-    //   },
-    // },
     curve: {
-      contract: curveOETHPool,
+      contract:
+        // Use router address for LSDs, and if OETH is going to LSD via curve
+        curveRegistryCoins.includes(coinToApprove) ||
+        (coinToApprove === 'oeth' &&
+          curveRegistryCoins.includes(selectedSwap?.coinToSwap) &&
+          selectedSwap.name === 'curve')
+          ? curveRegistryExchange
+          : curveOETHPool,
       name: {
         approving: 'Curve',
         done: 'Curve',
       },
     },
-    // uniswapV2: {
-    //   contract: uniV2Router,
-    //   name: {
-    //     approving: 'Uniswap',
-    //     done: 'Uniswap',
-    //   },
-    // },
-    // sushiswap: {
-    //   contract: sushiRouter,
-    //   name: {
-    //     approving: 'Sushi Swap',
-    //     done: 'Sushi Swap',
-    //   },
-    // },
     woeth: {
       contract: woeth,
       name: {
-        approving: 'wOETH',
-        done: 'wOETH',
+        approving: 'wOETH contract',
+        done: 'wOETH contract',
       },
     },
   }
@@ -134,26 +113,26 @@ const ApproveSwap = ({
     if (selectedSwap) {
       if (
         isApproving.contract === selectedSwap.name &&
-        isApproving.coin === stableCoinToApprove
+        isApproving.coin === coinToApprove
       ) {
         setStage('waiting-network')
         return
       }
     }
     setStage('approve')
-  }, [selectedSwap])
+  }, [JSON.stringify(selectedSwap), JSON.stringify(isApproving)])
 
   useEffect(() => {
     const coinToContract = { weth, reth, steth, sfrxeth, oeth, frxeth, woeth }
-    if (Object.keys(coinToContract).includes(stableCoinToApprove)) {
-      setContract(coinToContract[stableCoinToApprove])
+    if (Object.keys(coinToContract).includes(coinToApprove)) {
+      setContract(coinToContract[coinToApprove])
     }
-  }, [stableCoinToApprove, reth, weth, steth, oeth, frxeth, woeth])
+  }, [coinToApprove, reth, weth, steth, oeth, frxeth, woeth])
 
   const ApprovalMessage = ({
     stage,
     selectedSwap,
-    stableCoinToApprove,
+    coinToApprove,
     isMobile,
   }) => {
     if (stage === 'waiting-user') {
@@ -182,7 +161,7 @@ const ApproveSwap = ({
 
     const route = `${
       routeConfig[selectedSwap.name].name.approving
-    } to use your ${stableCoinToApprove.toUpperCase()}`
+    } to use your ${coinToApprove.toUpperCase()}`
     const routeMobile = `${routeConfig[selectedSwap.name].name.approving}`
 
     return (
@@ -199,16 +178,14 @@ const ApproveSwap = ({
 
   const SwapMessage = ({
     balanceError,
-    stableCoinToApprove,
+    coinToApprove,
     swapsLoaded,
     selectedSwap,
     swappingGloballyDisabled,
     active,
   }) => {
     const coin =
-      stableCoinToApprove === 'woeth'
-        ? 'wOETH'
-        : stableCoinToApprove.toUpperCase()
+      coinToApprove === 'woeth' ? 'wOETH' : coinToApprove.toUpperCase()
     const noSwapRouteAvailable = swapsLoaded && !selectedSwap
     if (swappingGloballyDisabled) {
       return process.env.NEXT_PUBLIC_DISABLE_SWAP_BUTTON_MESSAGE
@@ -223,7 +200,7 @@ const ApproveSwap = ({
       return fbt('Insufficient liquidity', 'Insufficient liquidity')
     } else if (isWrapped) {
       return fbt('Wrap', 'Wrap')
-    } else if (stableCoinToApprove === 'woeth') {
+    } else if (coinToApprove === 'woeth') {
       return fbt('Unwrap', 'Unwrap')
     } else {
       return fbt('Swap', 'Swap')
@@ -235,7 +212,7 @@ const ApproveSwap = ({
       event({
         event: 'approve_started',
         approval_type: isWrapped ? 'wrap' : 'swap',
-        approval_token: stableCoinToApprove,
+        approval_token: coinToApprove,
       })
       setStage('waiting-user')
       try {
@@ -248,18 +225,18 @@ const ApproveSwap = ({
         storeTransaction(
           result,
           isWrapped ? 'approveWrap' : 'approve',
-          stableCoinToApprove
+          coinToApprove
         )
         setStage('waiting-network')
         setIsApproving({
           contract: needsApproval,
-          coin: stableCoinToApprove,
+          coin: coinToApprove,
         })
         await rpcProvider.waitForTransaction(result.hash)
         event({
           event: 'approve_complete',
           approval_type: isWrapped ? 'wrap' : 'swap',
-          approval_token: stableCoinToApprove,
+          approval_token: coinToApprove,
           approval_address: '',
           approval_tx: '',
         })
@@ -270,19 +247,19 @@ const ApproveSwap = ({
         console.error('Exception happened: ', e)
         setStage('approve')
         if (e.code !== 4001) {
-          await storeTransactionError('approve', stableCoinToApprove)
+          await storeTransactionError('approve', coinToApprove)
           event({
             event: 'approve_failed',
             approval_type: isWrapped ? 'wrap' : 'swap',
-            approval_token: stableCoinToApprove,
+            approval_token: coinToApprove,
             approval_address: '',
             approval_tx: '',
           })
         } else {
           event({
             event: 'approve_rejected',
             approval_type: isWrapped ? 'wrap' : 'swap',
-            approval_token: stableCoinToApprove,
+            approval_token: coinToApprove,
           })
         }
       }
@@ -341,7 +318,7 @@ const ApproveSwap = ({
               <ApprovalMessage
                 stage={stage}
                 selectedSwap={selectedSwap}
-                stableCoinToApprove={stableCoinToApprove}
+                coinToApprove={coinToApprove}
                 isMobile={isMobile}
               />
             )}
@@ -370,7 +347,7 @@ const ApproveSwap = ({
         >
           <SwapMessage
             balanceError={balanceError}
-            stableCoinToApprove={stableCoinToApprove}
+            coinToApprove={coinToApprove}
             swapsLoaded={swapsLoaded}
             selectedSwap={selectedSwap}
             swappingGloballyDisabled={swappingGloballyDisabled}

diff --git a/dapp-oeth/src/components/buySell/SwapCurrencyPill.js b/dapp-oeth/src/components/buySell/SwapCurrencyPill.js
@@ -482,7 +482,7 @@ const SwapCurrencyPill = ({
     'sfrxeth',
   ]
 
-  const coinRedeemOptions = ['mix', 'eth']
+  const coinRedeemOptions = ['mix', 'eth', 'weth', 'steth', 'reth', 'frxeth']
 
   const { active } = useWeb3React()
 

diff --git a/dapp-oeth/src/components/buySell/SwapHomepage.js b/dapp-oeth/src/components/buySell/SwapHomepage.js
@@ -366,7 +366,7 @@ const SwapHomepage = ({
                 ? selectedBuyCoinAmount
                 : selectedRedeemCoinAmount
             }
-            stableCoinToApprove={swapMode === 'mint' ? selectedBuyCoin : 'oeth'}
+            coinToApprove={swapMode === 'mint' ? selectedBuyCoin : 'oeth'}
             needsApproval={needsApproval}
             selectedSwap={selectedSwap}
             swapMetadata={swapMetadata()}

diff --git a/dapp-oeth/src/components/transactionActivity/SidePanelTransactionMessage.js b/dapp-oeth/src/components/transactionActivity/SidePanelTransactionMessage.js
@@ -9,7 +9,7 @@ import { assetRootPath } from 'utils/image'
 
 const CoinImage = ({ coin }) => {
   const coinsToRender =
-    coin === 'mix' ? ['weth', 'reth', 'steth', 'frxeth'] : coin.split(',')
+    coin === 'mix' ? ['weth', 'retFh', 'steth', 'frxeth'] : coin.split(',')
   const size = 24
   return (
     <>

diff --git a/dapp-oeth/src/components/wrap/WrapHomepage.js b/dapp-oeth/src/components/wrap/WrapHomepage.js
@@ -309,7 +309,7 @@ const WrapHomepage = ({
             </div>
           </div>
           <ApproveSwap
-            stableCoinToApprove={swapMode === 'mint' ? 'oeth' : 'woeth'}
+            coinToApprove={swapMode === 'mint' ? 'oeth' : 'woeth'}
             needsApproval={needsApproval}
             selectedSwap={{ name: 'woeth' }}
             inputAmount={inputAmount}