mui implementation and new app header

.github/workflows/ci.yaml

@@ -17,11 +17,12 @@ jobs:
     timeout-minutes: 5
     runs-on: ubuntu-latest
     strategy:
+      fail-fast: false
       matrix:
         app: [main, loan, lend]
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
           cache: yarn
@@ -32,3 +33,9 @@ jobs:
         working-directory: apps/${{ matrix.app }}
       - run: yarn run cy:run:e2e:${{ matrix.app }}
         working-directory: tests
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-${{ matrix.app }}
+          path: tests/cypress

.github/workflows/storybook.yaml

@@ -0,0 +1,42 @@
+name: Storybook
+description: Builds and deploys Storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+
+      - name: 'Build'
+        working-directory: packages/curve-ui-kit
+        run: |
+          yarn install --immutable
+          yarn build:storybook
+
+      - name: 'upload'
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: packages/curve-ui-kit/storybook-static
+          name: 'github-pages'
+
+      - id: deploy
+        name: Deploy to GitHub Pages
+        uses: actions/deploy-pages@v4
+        with:
+          token: ${{ github.token }}

.gitignore

@@ -61,3 +61,7 @@ report.*.json
 
 # hardhat
 tests/cache
+
+# storybook
+storybook-static
+*storybook.log

.vercel/storybook-branch-filtering.sh

@@ -2,7 +2,7 @@
 
 echo "VERCEL_GIT_COMMIT_REF: $VERCEL_GIT_COMMIT_REF"
 
-if [[ "$VERCEL_GIT_COMMIT_REF" == "develop"  ]] ; then
+if [[ "$VERCEL_GIT_COMMIT_REF" == "develop" || "$VERCEL_GIT_COMMIT_REF" == "feat/develop/connect-wallet" ]] ; then
   # Proceed with the build
   echo "✅ - Build can proceed"
   exit 1;
@@ -11,4 +11,4 @@ else
   # Don't build
   echo "🛑 - Build cancelled"
   exit 0;
-fi
+fi

apps/lend/package.json

@@ -33,7 +33,7 @@
     "curve-common": "*",
     "curve-lib": "*",
     "dayjs": "^1.11.7",
-    "ethers": "^6.10.0",
+    "ethers": "^6.11.0",
     "external-rewards": "*",
     "focus-visible": "5.2.0",
     "fuse.js": "^6.6.2",

apps/lend/src/components/AlertLoanSummary/index.tsx

@@ -10,9 +10,9 @@ import SummaryPartial from '@/components/AlertLoanSummary/components/SummaryPart
 import SummarySelfLiquidate from '@/components/AlertLoanSummary/components/SummarySelfLiquidate'
 import SummaryChange from '@/components/AlertLoanSummary/components/SummaryChange'
 
-const AlertLoanSummary = ({ borrowed_token, collateral_token, type, ...props }: AlertSummaryProps) => {
-  const { symbol: collateralSymbol = '' } = collateral_token ?? {}
-  const { symbol: borrowedSymbol = '' } = borrowed_token ?? {}
+const AlertLoanSummary = ({ market, type, ...props }: AlertSummaryProps) => {
+  const { symbol: collateralSymbol = '' } = market?.collateral_token ?? {}
+  const { symbol: borrowedSymbol = '' } = market?.borrowed_token ?? {}
 
   const message = {
     repayAndClose: t`Repay and Close Loan Details:`,

apps/lend/src/components/AlertLoanSummary/types.ts

@@ -1,6 +1,6 @@
 import React from 'react'
 
-export type AlertSummaryProps = Pick<PageContentProps, 'borrowed_token' | 'collateral_token'> & {
+export type AlertSummaryProps = Pick<PageContentProps, 'market'> & {
   pendingMessage: React.ReactNode
   receive: string | undefined
   formValueStateDebt?: string | undefined
@@ -12,7 +12,7 @@ export type AlertSummaryProps = Pick<PageContentProps, 'borrowed_token' | 'colla
   type: 'create' | 'full' | 'partial' | 'self' | 'change'
 }
 
-export type SummaryProps = Omit<AlertSummaryProps, 'borrowed_token' | 'collateral_token' | 'type'> & {
+export type SummaryProps = Omit<AlertSummaryProps, 'market' | 'type'> & {
   title: React.ReactNode
   borrowedSymbol: string
   collateralSymbol: string

apps/lend/src/components/ChartBandBalances/index.tsx

@@ -38,9 +38,8 @@ const ChartBandBalances = ({
   showLiquidationIndicator,
   title,
   setBrushIndex,
-  borrowed_token,
-  collateral_token,
-}: Pick<PageContentProps, 'rChainId' | 'rOwmId' | 'borrowed_token' | 'collateral_token'> & {
+  market,
+}: Pick<PageContentProps, 'rChainId' | 'rOwmId' | 'market'> & {
   brushIndex: BrushStartEndIndex
   data: ParsedBandsBalances[]
   oraclePrice: string | undefined
@@ -49,6 +48,7 @@ const ChartBandBalances = ({
   title: string
   setBrushIndex: React.Dispatch<BrushStartEndIndex>
 }) => {
+  const { borrowed_token, collateral_token } = market ?? {};
   const xAxisDisplayType = useStore((state) => state.chartBands.xAxisDisplayType)
   const statsCapAndAvailable = useStore((state) => state.markets.statsCapAndAvailableMapper[rChainId]?.[rOwmId])
 

apps/lend/src/components/ChartLiquidationRange/index.tsx

@@ -7,7 +7,7 @@ import {
   ResponsiveContainer,
   Tooltip,
   XAxis,
-  YAxis,
+  YAxis
 } from 'recharts'
 import { t } from '@lingui/macro'
 import React from 'react'
@@ -17,14 +17,15 @@ import styled from 'styled-components'
 import { formatNumber } from '@/ui/utils'
 
 import ChartTooltip, { TipContent, TipIcon, TipTitle } from '@/components/ChartTooltip'
+import type { ThemeKey } from 'curve-ui-kit/src/themes/basic-theme'
 
 interface Props {
   data: { name: string; curr: number[]; new: number[]; oraclePrice: string; oraclePriceBand: number | null }[]
   healthColorKey: HeathColorKey | undefined
   height?: number
   isDetailView?: boolean // component not inside the form
   isManage: boolean
-  theme: Theme
+  theme: ThemeKey
 }
 
 const ChartLiquidationRange = ({ height, data, healthColorKey, isManage, isDetailView, theme }: Props) => {

apps/lend/src/components/ChartOhlcWrapper/index.tsx

@@ -15,11 +15,12 @@ import Box from '@/ui/Box'
 import PoolActivity from '@/components/ChartOhlcWrapper/PoolActivity'
 import TextCaption from '@/ui/TextCaption'
 import AlertBox from '@/ui/AlertBox'
+import { useOneWayMarket } from '@/entities/chain'
 
 const ChartOhlcWrapper: React.FC<ChartOhlcWrapperProps> = ({ rChainId, userActiveKey, rOwmId }) => {
+  const market = useOneWayMarket(rChainId, rOwmId).data
   const isAdvanceMode = useStore((state) => state.isAdvanceMode)
   const themeType = useStore((state) => state.themeType)
-  const owm = useStore((state) => state.markets.owmDatasMapper[rChainId]?.[rOwmId]?.owm)
   const borrowMoreActiveKey = useStore((state) => state.loanBorrowMore.activeKey)
   const loanRepayActiveKey = useStore((state) => state.loanRepay.activeKey)
   const loanCollateralAddActiveKey = useStore((state) => state.loanCollateralAdd.activeKey)
@@ -174,26 +175,26 @@ const ChartOhlcWrapper: React.FC<ChartOhlcWrapperProps> = ({ rChainId, userActiv
   ])
 
   const coins: LendingMarketTokens = useMemo(() => {
-    return owm
+    return market
       ? {
           borrowedToken: {
-            symbol: owm?.borrowed_token.symbol,
-            address: owm?.borrowed_token.address,
+            symbol: market?.borrowed_token.symbol,
+            address: market?.borrowed_token.address,
           },
           collateralToken: {
-            symbol: owm?.collateral_token.symbol,
-            address: owm?.collateral_token.address,
+            symbol: market?.collateral_token.symbol,
+            address: market?.collateral_token.address,
           },
         }
       : null
-  }, [owm])
+  }, [market])
 
   const selectChartList = useCallback(() => {
     if (chartOraclePoolOhlc.fetchStatus === 'LOADING') {
       return [{ label: t`Loading` }, { label: t`Loading` }]
     }
 
-    if (owm) {
+    if (market) {
       if (chartOraclePoolOhlc.dataDisabled) {
         return [{ label: t`${coins?.collateralToken.symbol} / ${coins?.borrowedToken.symbol} (LLAMMA)` }]
       }
@@ -216,7 +217,7 @@ const ChartOhlcWrapper: React.FC<ChartOhlcWrapperProps> = ({ rChainId, userActiv
     chartOraclePoolOhlc.fetchStatus,
     coins?.borrowedToken.symbol,
     coins?.collateralToken.symbol,
-    owm,
+    market,
   ])
 
   // set chart selected index to llamma if oracle pool is disabled due to no oracle pools being found for market on the api
@@ -265,51 +266,55 @@ const ChartOhlcWrapper: React.FC<ChartOhlcWrapperProps> = ({ rChainId, userActiv
   }, [timeOption])
 
   const refetchPricesData = useCallback(() => {
-    fetchOraclePoolOhlcData(
-      rChainId,
-      owm?.addresses.controller,
-      chartInterval,
-      timeUnit,
-      chartTimeSettings.start,
-      chartTimeSettings.end
-    )
-    fetchLlammaOhlcData(
-      rChainId,
-      rOwmId,
-      owm?.addresses.amm,
-      chartInterval,
-      timeUnit,
-      chartTimeSettings.start,
-      chartTimeSettings.end
-    )
+    if (market?.addresses.controller) {
+      fetchOraclePoolOhlcData(
+        rChainId,
+        market.addresses.controller,
+        chartInterval,
+        timeUnit,
+        chartTimeSettings.start,
+        chartTimeSettings.end
+      )
+    }
+    if (market?.addresses.amm) {
+      fetchLlammaOhlcData(
+        rChainId,
+        rOwmId,
+        market.addresses.amm,
+        chartInterval,
+        timeUnit,
+        chartTimeSettings.start,
+        chartTimeSettings.end
+      )
+    }
   }, [
     chartInterval,
     chartTimeSettings.end,
     chartTimeSettings.start,
     fetchLlammaOhlcData,
     fetchOraclePoolOhlcData,
-    owm?.addresses.amm,
-    owm?.addresses.controller,
+    market?.addresses.amm,
+    market?.addresses.controller,
     rChainId,
     rOwmId,
     timeUnit,
   ])
 
   // initial fetch
   useEffect(() => {
-    if (owm !== undefined) {
+    if (market !== undefined) {
       fetchLlammaOhlcData(
         rChainId,
         rOwmId,
-        owm?.addresses.amm,
+        market.addresses.amm,
         chartInterval,
         timeUnit,
         chartTimeSettings.start,
         chartTimeSettings.end
       )
       fetchOraclePoolOhlcData(
         rChainId,
-        owm?.addresses.controller,
+        market.addresses.controller,
         chartInterval,
         timeUnit,
         chartTimeSettings.start,
@@ -325,7 +330,7 @@ const ChartOhlcWrapper: React.FC<ChartOhlcWrapperProps> = ({ rChainId, userActiv
     timeUnit,
     fetchLlammaOhlcData,
     fetchOraclePoolOhlcData,
-    owm,
+    market,
     rOwmId,
   ])
 
@@ -334,17 +339,19 @@ const ChartOhlcWrapper: React.FC<ChartOhlcWrapperProps> = ({ rChainId, userActiv
       const endTime = subtractTimeUnit(timeOption, lastFetchEndTime)
       const startTime = getThreeHundredResultsAgo(timeOption, endTime)
 
-      fetchMoreData(
-        rChainId,
-        owm?.addresses.controller,
-        owm?.addresses.amm,
-        chartInterval,
-        timeUnit,
-        startTime,
-        endTime
-      )
+      if (market?.addresses.controller && market?.addresses.amm) {
+        fetchMoreData(
+          rChainId,
+          market?.addresses.controller,
+          market?.addresses.amm,
+          chartInterval,
+          timeUnit,
+          startTime,
+          endTime
+        )
+      }
     },
-    [timeOption, fetchMoreData, rChainId, owm?.addresses.amm, owm?.addresses.controller, chartInterval, timeUnit]
+    [timeOption, fetchMoreData, rChainId, market?.addresses.amm, market?.addresses.controller, chartInterval, timeUnit]
   )
 
   if (ohlcDataUnavailable) {
@@ -391,7 +398,7 @@ const ChartOhlcWrapper: React.FC<ChartOhlcWrapperProps> = ({ rChainId, userActiv
         />
       </Wrapper>
       <LpEventsWrapperExpanded>
-        <PoolActivity poolAddress={owm?.addresses.amm} chainId={rChainId} coins={coins} />
+        {market && <PoolActivity poolAddress={market.addresses.amm} chainId={rChainId} coins={coins} />}
       </LpEventsWrapperExpanded>
     </ExpandedWrapper>
   ) : (
@@ -418,8 +425,8 @@ const ChartOhlcWrapper: React.FC<ChartOhlcWrapperProps> = ({ rChainId, userActiv
           </ExpandButton>
         )}
       </SelectorRow>
-      {poolInfo === 'poolActivity' && (
-        <PoolActivity poolAddress={owm?.addresses.amm} chainId={rChainId} coins={coins} />
+      {poolInfo === 'poolActivity' && market && (
+        <PoolActivity poolAddress={market.addresses.amm} chainId={rChainId} coins={coins} />
       )}
       {poolInfo === 'chart' && (
         <ChartWrapper

apps/lend/src/components/DetailInfoCrvIncentives.tsx

@@ -6,12 +6,12 @@ import styled from 'styled-components'
 import { FORMAT_OPTIONS, formatNumber } from '@/ui/utils'
 import { INVALID_ADDRESS } from '@/constants'
 import useAbiTotalSupply from '@/hooks/useAbiTotalSupply'
-import useStore from '@/store/useStore'
 import useSupplyTotalApr from '@/hooks/useSupplyTotalApr'
 
 import DetailInfo from '@/ui/DetailInfo'
 import Icon from '@/ui/Icon'
 import TooltipIcon from '@/ui/Tooltip/TooltipIcon'
+import { useOneWayMarket } from '@/entities/chain'
 
 type Data = {
   label: string
@@ -32,8 +32,7 @@ const DetailInfoCrvIncentives = ({
   lpTokenAmount: string
 }) => {
   const { tooltipValues } = useSupplyTotalApr(rChainId, rOwmId)
-  const owmData = useStore((state) => state.markets.owmDatasMapper[rChainId]?.[rOwmId])
-  const { gauge: gaugeAddress } = owmData?.owm?.addresses ?? {}
+  const gaugeAddress = useOneWayMarket(rChainId, rOwmId).data?.addresses?.gauge
   const gaugeTotalSupply = useAbiTotalSupply(rChainId, gaugeAddress)
   const isGaugeAddressInvalid = gaugeAddress === INVALID_ADDRESS