translate market details page

packages/app/src/features/easy-borrow/components/form/LoanToValue.tsx

@@ -2,6 +2,7 @@ import { formatPercentage } from '@/domain/common/format'
 import { Percentage } from '@/domain/types/NumericValues'
 import { Typography } from '@/ui/atoms/typography/Typography'
 import { testIds } from '@/ui/utils/testIds'
+import { Trans } from '@lingui/react/macro'
 
 interface LoanToValueProps {
   className?: string
@@ -21,8 +22,12 @@ export function LoanToValue({ className, loanToValue, maxLoanToValue }: LoanToVa
       </div>
 
       <div className="mt-2 flex flex-row justify-between">
-        <Typography variant="prompt">Max LTV</Typography>
-        <Typography variant="prompt">max {formatPercentage(maxLoanToValue)}</Typography>
+        <Typography variant="prompt">
+          <Trans>Max LTV</Trans>
+        </Typography>
+        <Typography variant="prompt">
+          <Trans>max {formatPercentage(maxLoanToValue)}</Trans>
+        </Typography>
       </div>
     </div>
   )

packages/app/src/features/market-details/components/charts/interest-yield/InterestYieldChart.tsx

@@ -8,6 +8,7 @@ import { colors } from '@/ui/charts/colors'
 import { Margins, defaultMargins } from '@/ui/charts/defaults'
 import { Chart } from './components/Chart'
 import { getYields } from './logic/getYields'
+import { Trans } from '@lingui/react/macro'
 
 export interface InterestYieldChartProps {
   optimalUtilizationRate: Percentage
@@ -57,11 +58,15 @@ export function InterestYieldChart({
       <div className="ml-10 flex items-center gap-4">
         <div className="flex items-center gap-1.5">
           <Circle size={4} fill={colors.primary} stroke="0" />
-          <div className="text-white/50 text-xs">Borrow APY</div>
+          <div className="text-white/50 text-xs">
+            <Trans>Borrow APY</Trans>
+          </div>
         </div>
         <div className="flex items-center gap-1.5">
           <Circle size={4} fill={colors.secondary} stroke="0" />
-          <div className="text-white/50 text-xs">Utilization Rate</div>
+          <div className="text-white/50 text-xs">
+            <Trans>Utilization Rate</Trans>
+          </div>
         </div>
       </div>
       <Chart {...chartProps} />

packages/app/src/features/market-details/components/charts/interest-yield/components/Chart.tsx

@@ -17,6 +17,7 @@ import { colors } from '@/ui/charts/colors'
 import { Margins, defaultMargins } from '@/ui/charts/defaults'
 import { formatPercentageTick } from '@/ui/charts/utils'
 import { GraphDataPoint } from '../types'
+import { Trans } from '@lingui/react/macro'
 
 export interface ChartProps {
   width: number
@@ -190,8 +191,12 @@ function TooltipContent({ data }: { data: GraphDataPoint }) {
   return (
     <div className="flex gap-3 rounded-xl border border-slate-700/10 bg-white p-3 shadow">
       <div className="flex flex-col gap-3 text-slate-500 text-xs leading-none">
-        <p>Utilization Rate:</p>
-        <p>Borrow APY:</p>
+        <p>
+          <Trans>Utilization Rate</Trans>
+        </p>
+        <p>
+          <Trans>Borrow APY</Trans>
+        </p>
       </div>
       <div className="flex flex-col gap-3 text-sky-950 text-xs leading-none">
         <p>{formatPercentage(Percentage(data.x))}</p>

packages/app/src/features/market-details/components/charts/market-overview/components/Legend.tsx

@@ -1,6 +1,7 @@
 import { formatPercentage } from '@/domain/common/format'
 import { NormalizedUnitNumber, Percentage } from '@/domain/types/NumericValues'
 import { Token } from '@/domain/types/Token'
+import { Trans } from '@lingui/react/macro'
 
 interface LegendProps {
   token: Token
@@ -12,7 +13,9 @@ interface LegendProps {
 export function Legend({ token, total, utilized, utilizationRate }: LegendProps) {
   return (
     <div className="flex flex-col items-center gap-2">
-      <p className="text-white/50 text-xs leading-none">Utilization rate</p>
+      <p className="text-white/50 text-xs leading-none">
+        <Trans>Utilization rate</Trans>
+      </p>
       <p className="font-normal text-xl leading-none">{formatPercentage(utilizationRate)}</p>
       <p className="text-white/50 text-xs leading-none">
         {token.formatUSD(utilized, { compact: true })} of {token.formatUSD(total, { compact: true })}

packages/app/src/features/market-details/components/market-overview/DaiMarketOverview.tsx

@@ -11,7 +11,7 @@ import { Legend } from '../charts/market-overview/components/Legend'
 import { DetailsGrid } from './components/DetailsGrid'
 import { DetailsGridItem } from './components/DetailsGridItem'
 import { MarketOverviewContent } from './components/MarketOvierviewContent'
-
+import { Trans } from '@lingui/react/macro'
 export interface DaiMarketOverviewProps {
   token: Token
   borrowed: NormalizedUnitNumber
@@ -42,31 +42,43 @@ export function DaiMarketOverview({
   return (
     <Panel.Wrapper>
       <MarketOverviewContent>
-        <h4 className="font-semibold text-base md:text-xl">Market Overview</h4>
+        <h4 className="font-semibold text-base md:text-xl">
+          <Trans>Market Overview</Trans>
+        </h4>
         <MarketOverviewChart data={chartData}>
           <Legend token={token} utilized={borrowed} total={marketSize} utilizationRate={utilizationRate} />
         </MarketOverviewChart>
         <DetailsGrid>
           <DetailsGridItem>
-            <DetailsGridItem.Title variant="blue">Borrowed</DetailsGridItem.Title>
+            <DetailsGridItem.Title variant="blue">
+              <Trans>Borrowed</Trans>
+            </DetailsGridItem.Title>
             <DetailsGridItem.Value>{token.formatUSD(borrowed, { compact: true })}</DetailsGridItem.Value>
           </DetailsGridItem>
           <DetailsGridItem>
-            <DetailsGridItem.Title>Market size</DetailsGridItem.Title>
+            <DetailsGridItem.Title>
+              <Trans>Market size</Trans>
+            </DetailsGridItem.Title>
             <DetailsGridItem.Value>{token.formatUSD(marketSize, { compact: true })}</DetailsGridItem.Value>
           </DetailsGridItem>
           <DetailsGridItem>
-            <DetailsGridItem.Title>Total available</DetailsGridItem.Title>
+            <DetailsGridItem.Title>
+              <Trans>Total available</Trans>
+            </DetailsGridItem.Title>
             <DetailsGridItem.Value>{token.formatUSD(totalAvailable, { compact: true })}</DetailsGridItem.Value>
           </DetailsGridItem>
 
           <DetailsGridItem>
-            <DetailsGridItem.Title>Utilization rate</DetailsGridItem.Title>
+            <DetailsGridItem.Title>
+              <Trans>Utilization rate</Trans>
+            </DetailsGridItem.Title>
             <DetailsGridItem.Value>{formatPercentage(utilizationRate)}</DetailsGridItem.Value>
           </DetailsGridItem>
 
           <DetailsGridItem>
-            <DetailsGridItem.Title variant="green">Instantly available</DetailsGridItem.Title>
+            <DetailsGridItem.Title variant="green">
+              <Trans>Instantly available</Trans>
+            </DetailsGridItem.Title>
             <DetailsGridItem.Value>
               {token.formatUSD(instantlyAvailable, { compact: true })}
 
@@ -77,7 +89,9 @@ export function DaiMarketOverview({
             </DetailsGridItem.Value>
           </DetailsGridItem>
           <DetailsGridItem>
-            <DetailsGridItem.Title variant="orange">Capacity</DetailsGridItem.Title>
+            <DetailsGridItem.Title variant="orange">
+              <Trans>Capacity</Trans>
+            </DetailsGridItem.Title>
             <DetailsGridItem.Value>{token.formatUSD(skyCapacity, { compact: true })}</DetailsGridItem.Value>
           </DetailsGridItem>
         </DetailsGrid>

packages/app/src/features/market-details/components/market-overview/DefaultMarketOverview.tsx

@@ -9,6 +9,7 @@ import { Legend } from '../charts/market-overview/components/Legend'
 import { DetailsGrid } from './components/DetailsGrid'
 import { DetailsGridItem } from './components/DetailsGridItem'
 import { MarketOverviewContent } from './components/MarketOvierviewContent'
+import { Trans } from '@lingui/react/macro'
 
 export interface DefaultMarketOverviewProps {
   token: Token
@@ -33,25 +34,35 @@ export function DefaultMarketOverview({
   return (
     <Panel.Wrapper>
       <MarketOverviewContent>
-        <h4 className="font-normal text-base md:text-xl">Market Overview</h4>
+        <h4 className="font-normal text-base md:text-xl">
+          <Trans>Market Overview</Trans>
+        </h4>
         <MarketOverviewChart data={chartData}>
           <Legend token={token} utilized={borrowed} total={marketSize} utilizationRate={utilizationRate} />
         </MarketOverviewChart>
         <DetailsGrid>
           <DetailsGridItem>
-            <DetailsGridItem.Title>Market size</DetailsGridItem.Title>
+            <DetailsGridItem.Title>
+              <Trans>Market size</Trans>
+            </DetailsGridItem.Title>
             <DetailsGridItem.Value>{token.formatUSD(marketSize, { compact: true })}</DetailsGridItem.Value>
           </DetailsGridItem>
           <DetailsGridItem>
-            <DetailsGridItem.Title>Utilization rate</DetailsGridItem.Title>
+            <DetailsGridItem.Title>
+              <Trans>Utilization rate</Trans>
+            </DetailsGridItem.Title>
             <DetailsGridItem.Value>{formatPercentage(utilizationRate)}</DetailsGridItem.Value>
           </DetailsGridItem>
           <DetailsGridItem>
-            <DetailsGridItem.Title variant="blue">Borrowed</DetailsGridItem.Title>
+            <DetailsGridItem.Title variant="blue">
+              <Trans>Borrowed</Trans>
+            </DetailsGridItem.Title>
             <DetailsGridItem.Value>{token.formatUSD(borrowed, { compact: true })}</DetailsGridItem.Value>
           </DetailsGridItem>
           <DetailsGridItem>
-            <DetailsGridItem.Title variant="green">Available</DetailsGridItem.Title>
+            <DetailsGridItem.Title variant="green">
+              <Trans>Available</Trans>
+            </DetailsGridItem.Title>
             <DetailsGridItem.Value>{token.formatUSD(available, { compact: true })}</DetailsGridItem.Value>
           </DetailsGridItem>
         </DetailsGrid>

packages/app/src/features/market-details/components/my-wallet/MyWallet.tsx

@@ -11,6 +11,7 @@ import { TokenBalance } from './components/TokenBalance'
 import { WalletPanelContent } from './components/WalletPanelContent'
 import { TokenSymbol } from '@/domain/types/TokenSymbol'
 import { withdrawDialogConfig } from '@/features/dialogs/withdraw/WithdrawDialog'
+import { Trans, useLingui } from '@lingui/react/macro'
 
 export interface MyWalletProps {
   token: Token
@@ -46,36 +47,39 @@ export function MyWallet({
   withdraw,
   openDialog,
 }: MyWalletProps) {
+  const { t } = useLingui()
   return (
     <Panel.Wrapper>
       <WalletPanelContent>
-        <h3 className="font-normal text-base md:text-xl">My Wallet</h3>
+        <h3 className="font-normal text-base md:text-xl">
+          <Trans>My Wallet</Trans>
+        </h3>
         <TokenBalance token={token} balance={tokenBalance} isCombinedBalance={isCombinedBalance} />
         {lend && (
           <ActionRow
             token={lend.token}
             value={lend.available}
             onAction={() => openDialog(depositDialogConfig, { token: lend.token })}
-            label="Available to lend"
-            buttonText="Lend"
+            label={t`Available to lend`}
+            buttonText={t`Lend`}
           />
         )}
         {token.symbol !== TokenSymbol('USDXL') && (
           <ActionRow
             token={deposit.token}
             value={deposit.available}
             onAction={() => openDialog(depositDialogConfig, { token: deposit.token })}
-            label={token.symbol === 'DAI' ? 'Deposit DAI as collateral' : 'Available to deposit'}
-            buttonText="Deposit"
+            label={token.symbol === 'DAI' ? t`Deposit DAI as collateral` : t`Available to deposit`}
+            buttonText={t`Deposit`}
           />
         )}
         {withdraw && (
           <ActionRow
             token={withdraw.token}
             value={withdraw.available}
             onAction={() => openDialog(withdrawDialogConfig, { token: withdraw.token })}
-            label="Available to withdraw"
-            buttonText="Withdraw"
+            label={t`Available to withdraw`}
+            buttonText={t`Withdraw`}
           />
         )}
         <BorrowRow

packages/app/src/features/market-details/components/my-wallet/components/BorrowRow.tsx

@@ -3,6 +3,7 @@ import { Token } from '@/domain/types/Token'
 
 import { BorrowEligibilityStatus } from '@/domain/market-info/reserve-status'
 import { ActionRow } from './ActionRow'
+import { Trans, useLingui } from '@lingui/react/macro'
 
 interface BorrowRowProps {
   token: Token
@@ -12,20 +13,30 @@ interface BorrowRowProps {
 }
 
 export function BorrowRow({ token, availableToBorrow, eligibility, onAction }: BorrowRowProps) {
+  const { t } = useLingui()
+
   if (eligibility === 'no') {
-    return <InfoWrapper>Borrowing is not enabled for this asset.</InfoWrapper>
+    return (
+      <InfoWrapper>
+        <Trans>Borrowing is not enabled for this asset.</Trans>
+      </InfoWrapper>
+    )
   }
 
   if (availableToBorrow.isZero()) {
-    return <InfoWrapper>To borrow you need to deposit any other asset first.</InfoWrapper>
+    return (
+      <InfoWrapper>
+        <Trans>To borrow you need to deposit any other asset first.</Trans>
+      </InfoWrapper>
+    )
   }
 
   return (
     <ActionRow
       token={token}
       value={availableToBorrow}
-      label="Available to borrow"
-      buttonText="Borrow"
+      label={t`Available to borrow`}
+      buttonText={t`Borrow`}
       onAction={onAction}
     />
   )

packages/app/src/features/market-details/components/oracle-panel/components/FixedOraclePanel.tsx

@@ -4,30 +4,41 @@ import { Panel } from '@/ui/atoms/panel/Panel'
 import { BlockExplorerAddressLink } from '@/ui/molecules/block-explorer-address-link/BlockExplorerAddressLink'
 import { InfoTile } from '@/ui/molecules/info-tile/InfoTile'
 import { testIds } from '@/ui/utils/testIds'
+import { Trans } from '@lingui/react/macro'
 
 export function FixedOraclePanel({ chainId, price, priceOracleAddress, token }: FixedOracleInfo) {
   return (
     <Panel.Wrapper className="flex flex-col gap-4 p-4 sm:px-8 sm:py-6">
       <div>
-        <div className="mb-1 text-sm text-white/50 leading-none sm:text-xs sm:leading-none">Oracle type</div>
+        <div className="mb-1 text-sm text-white/50 leading-none sm:text-xs sm:leading-none">
+          <Trans>Oracle type</Trans>
+        </div>
         <Panel.Header className="flex items-center gap-2">
-          <Panel.Title className="font-inter text-xl">Fixed Price</Panel.Title>
+          <Panel.Title className="font-inter text-xl">
+            <Trans>Fixed Price</Trans>
+          </Panel.Title>
         </Panel.Header>
       </div>
       <Panel.Content className="flex flex-col gap-4 sm:gap-6">
         <div className="flex flex-col gap-4 sm:flex-row sm:gap-10">
           <InfoTile>
-            <InfoTile.Label>Price</InfoTile.Label>
+            <InfoTile.Label>
+              <Trans>Price</Trans>
+            </InfoTile.Label>
             <InfoTile.Value data-testid={testIds.marketDetails.oraclePanel.price}>
               {USD_MOCK_TOKEN.formatUSD(price)}
             </InfoTile.Value>
           </InfoTile>
           <InfoTile>
-            <InfoTile.Label>Asset</InfoTile.Label>
+            <InfoTile.Label>
+              <Trans>Asset</Trans>
+            </InfoTile.Label>
             <InfoTile.Value data-testid={testIds.marketDetails.oraclePanel.asset}>{token.symbol}</InfoTile.Value>
           </InfoTile>
           <InfoTile>
-            <InfoTile.Label>Contract</InfoTile.Label>
+            <InfoTile.Label>
+              <Trans>Contract</Trans>
+            </InfoTile.Label>
             <InfoTile.Value className="w-full">
               <BlockExplorerAddressLink
                 address={priceOracleAddress}