Merge remote-tracking branch 'origin/master' into chore/refactor-tooltip-usage

Author: 0xonramp

.vscode/settings.json

@@ -1,7 +1,8 @@
 {
-  "editor.codeActionsOnSave": {
-    "source.organizeImports": "always"
-  },
+  "editor.codeActionsOnSave": [
+    "source.organizeImports",
+    "source.fixAll"
+  ],
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "typescript.preferences.importModuleSpecifier": "non-relative",

next.config.js

@@ -45,6 +45,7 @@ const nextConfig = {
       {
         protocol: 'https',
         hostname: 'raw.githubusercontent.com',
+        pathname: '/trustwallet/assets/master/blockchains/ethereum/assets/**',
       },
     ],
   },

package-lock.json

@@ -29,10 +29,10 @@
     "@heroicons/react": "^2.1.3",
     "@indexcoop/analytics-sdk": "0.29.0",
     "@indexcoop/flash-mint-sdk": "3.24.0",
-    "@indexcoop/tokenlists": "3.11.0",
+    "@indexcoop/tokenlists": "3.11.1",
     "@next/third-parties": "15.1.7",
-    "@reown/appkit": "1.6.5",
-    "@reown/appkit-adapter-wagmi": "1.6.5",
+    "@reown/appkit": "1.6.9",
+    "@reown/appkit-adapter-wagmi": "1.6.9",
     "@safe-global/api-kit": "2.5.4",
     "@safe-global/protocol-kit": "4.0.4",
     "@safe-global/safe-core-sdk-types": "5.0.3",
@@ -54,12 +54,13 @@
     "lodash": "4.17.21",
     "next": "14.2.13",
     "react": "^18.2.0",
+    "react-device-detect": "2.2.3",
     "react-dom": "^18.2.0",
     "react-loading-skeleton": "3.5.0",
     "tailwind-merge": "2.5.2",
     "use-debounce": "^10.0.1",
-    "viem": "2.22.21",
-    "wagmi": "2.14.9"
+    "viem": "2.23.6",
+    "wagmi": "2.14.12"
   },
   "devDependencies": {
     "@jest/globals": "^29.5.0",

package.json

@@ -17,10 +17,12 @@ import { WarningType } from '@/components/swap/components/warning'
 import { TradeButtonState } from '@/components/swap/hooks/use-trade-button-state'
 import { TokenDisplay } from '@/components/token-display'
 import { useDisclosure } from '@/lib/hooks/use-disclosure'
+import { useGasData } from '@/lib/hooks/use-gas-data'
 import { useSupportedNetworks } from '@/lib/hooks/use-network'
 import { useWallet } from '@/lib/hooks/use-wallet'
 import { useSlippage } from '@/lib/providers/slippage'
 import { formatWei } from '@/lib/utils'
+import { getMaxBalance } from '@/lib/utils/max-balance'
 
 import { useFormattedEarnData } from '../../use-formatted-data'
 
@@ -29,6 +31,7 @@ import './styles.css'
 const hiddenLeverageWarnings = [WarningType.flashbots]
 
 export function EarnWidget() {
+  const gasData = useGasData()
   const isSupportedNetwork = useSupportedNetworks(supportedNetworks)
   const { queryParams } = useQueryParams()
   const { address } = useWallet()
@@ -86,8 +89,9 @@ export function EarnWidget() {
 
   const onClickBalance = useCallback(() => {
     if (!inputBalance) return
-    onChangeInputTokenAmount(formatWei(inputBalance, inputToken.decimals))
-  }, [inputBalance, inputToken, onChangeInputTokenAmount])
+    const maxBalance = getMaxBalance(inputToken, inputBalance, gasData)
+    onChangeInputTokenAmount(formatWei(maxBalance, inputToken.decimals))
+  }, [gasData, inputBalance, inputToken, onChangeInputTokenAmount])
 
   useEffect(() => {
     setSlippageForToken(isMinting ? outputToken.symbol : inputToken.symbol)

public/assets/powered-by-morpho.png

@@ -8,16 +8,21 @@ function createToken(chainId: number, symbol: string): Token {
   return { ...token, image: token.logoURI }
 }
 
-export function getCurrencyTokens(chainId: number): Token[] {
+export function getCurrencyTokens(
+  chainId: number,
+  isIcETh: boolean = false,
+): Token[] {
   switch (chainId) {
     case mainnet.id:
-      return [
-        { ...ETH, chainId: mainnet.id },
-        createToken(mainnet.id, 'WETH'),
-        createToken(mainnet.id, 'WBTC'),
-        createToken(mainnet.id, 'USDC'),
-        createToken(mainnet.id, 'USDT'),
-      ]
+      return isIcETh
+        ? [{ ...ETH, chainId: mainnet.id }, createToken(mainnet.id, 'WETH')]
+        : [
+            { ...ETH, chainId: mainnet.id },
+            createToken(mainnet.id, 'WETH'),
+            createToken(mainnet.id, 'WBTC'),
+            createToken(mainnet.id, 'USDC'),
+            createToken(mainnet.id, 'USDT'),
+          ]
     case arbitrum.id:
       return [
         { ...ETH, chainId: arbitrum.id },
@@ -31,6 +36,7 @@ export function getCurrencyTokens(chainId: number): Token[] {
         { ...ETH, chainId: base.id },
         createToken(base.id, 'WETH'),
         createToken(base.id, 'USDC'),
+        createToken(base.id, 'wstETH'),
       ]
     default:
       return []
@@ -43,6 +49,8 @@ export function getTagline(indexTokenSymbol: string): string {
       return 'The highest ETH-denominated yields on Ethereum Mainnet.'
     case 'iceth':
       return 'ETH staking returns using a leveraged liquid staking strategy.'
+    case 'wsteth15x':
+      return '15x ETH Smart Loop using a delta-neutral leveraged yield strategy.'
     default:
       return ''
   }
@@ -51,6 +59,7 @@ export function getTagline(indexTokenSymbol: string): string {
 // Uncomment bridged L2 tokens only when price feeds are available
 const yieldTokens = [
   getTokenByChainAndSymbol(mainnet.id, 'hyETH'),
+  getTokenByChainAndSymbol(base.id, 'wstETH15x'),
   // getTokenByChainAndSymbol(arbitrum.id, 'hyETH'),
   // getTokenByChainAndSymbol(base.id, 'hyETH'),
   getTokenByChainAndSymbol(mainnet.id, 'icETH'),
@@ -66,4 +75,4 @@ export function getYieldTokens(): Token[] {
   return tokens
 }
 
-export const supportedNetworks = [mainnet.id]
+export const supportedNetworks = [mainnet.id, base.id]

src/app/earn/components/earn-widget/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { getTokenByChainAndSymbol } from '@indexcoop/tokenlists'
+import { getTokenByChainAndSymbol, isAddressEqual } from '@indexcoop/tokenlists'
 import { useQuery } from '@tanstack/react-query'
 import {
   createContext,
@@ -33,6 +33,7 @@ import { getCurrencyTokens, getYieldTokens } from './constants'
 
 const hyEthTokenlist = getTokenByChainAndSymbol(1, 'hyETH')
 const hyETH = { ...hyEthTokenlist, image: hyEthTokenlist.logoURI }
+const icETH = getTokenByChainAndSymbol(1, 'icETH')
 
 interface Context {
   inputValue: string
@@ -138,14 +139,16 @@ export function EarnProvider(props: { children: any }) {
   )
 
   const inputTokens = useMemo(() => {
-    if (isMinting) return getCurrencyTokens(chainId)
+    const isIcEth = isAddressEqual(indexToken.address, icETH.address)
+    if (isMinting) return getCurrencyTokens(chainId, isIcEth)
     return indexTokens
-  }, [chainId, indexTokens, isMinting])
+  }, [chainId, indexTokens, indexToken, isMinting])
 
   const outputTokens = useMemo(() => {
-    if (!isMinting) return getCurrencyTokens(chainId)
+    const isIcEth = isAddressEqual(indexToken.address, icETH.address)
+    if (!isMinting) return getCurrencyTokens(chainId, isIcEth)
     return indexTokens
-  }, [chainId, indexTokens, isMinting])
+  }, [chainId, indexTokens, indexToken, isMinting])
 
   const inputTokenAmount = useMemo(
     () =>

src/app/earn/constants.ts

@@ -3,3 +3,70 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@keyframes smoothBg {
+  0% {
+    transform: scale(1) rotate(0deg);
+    background-position:
+      50% 50%,
+      50% 50%;
+  }
+  50% {
+    transform: scale(1.5) rotate(180deg);
+  }
+  100% {
+    transform: scale(1) rotate(360deg);
+    background-position:
+      350% 50%,
+      350% 50%;
+  }
+}
+
+.light-effect {
+  width: 200%;
+  height: 100%;
+  min-height: 100vh;
+  position: fixed;
+  top: 0;
+  left: -50%;
+  display: flex;
+  place-content: center;
+  place-items: center;
+  --stripes: repeating-linear-gradient(
+    100deg,
+    #0f1717 0%,
+    #0f1717 7%,
+    transparent 10%,
+    transparent 12%,
+    #0f1717 16%
+  );
+
+  --rainbow: repeating-linear-gradient(
+    100deg,
+    rgba(0, 74, 80, 1) 25%,
+    rgba(58, 122, 192, 0.7) 10%,
+    rgba(7, 122, 82, 0.7) 15%,
+    rgba(92, 179, 179, 0.7) 15%
+  );
+  background-image: var(--stripes), var(--rainbow);
+  background-size: 400%, 00%;
+  background-position:
+    50% 50%,
+    50% 50%;
+  filter: blur(20px);
+  mix-blend-mode: difference;
+  mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
+}
+
+.light-effect::after {
+  content: '';
+  position: absolute;
+  will-change: transform;
+  inset: 0;
+  background-image: var(--stripes), var(--rainbow);
+  background-size: 250%, 250%;
+  animation: smoothBg 420s alternate infinite;
+  background-attachment: fixed;
+  mix-blend-mode: difference;
+  filter: blur(10px) opacity(50%) saturate(200%);
+}

src/app/earn/provider.tsx

@@ -19,7 +19,6 @@ import { QuoteType } from '@/lib/hooks/use-best-quote/types'
 import { useDisclosure } from '@/lib/hooks/use-disclosure'
 import { useSupportedNetworks } from '@/lib/hooks/use-network'
 import { useWallet } from '@/lib/hooks/use-wallet'
-import { useSignTerms } from '@/lib/providers/sign-terms-provider'
 import { formatWei } from '@/lib/utils'
 
 import { useRedeem } from '../../providers/redeem-provider'
@@ -37,7 +36,6 @@ export function RedeemWidget() {
     POLYGON.chainId,
   ])
   const { open } = useAppKit()
-  const { signTermsOfService } = useSignTerms()
   const { address } = useWallet()
   const {
     inputTokenList,
@@ -129,11 +127,6 @@ export function RedeemWidget() {
       return
     }
 
-    if (buttonState === TradeButtonState.signTerms) {
-      await signTermsOfService()
-      return
-    }
-
     if (buttonState === TradeButtonState.wrongNetwork) {
       open({ view: 'Networks' })
 
@@ -159,7 +152,6 @@ export function RedeemWidget() {
     buttonState,
     isApproved,
     onApprove,
-    signTermsOfService,
     onOpenTransactionReview,
     open,