feat: migrate DetailInfo to mui (custom components)

apps/main/src/dex/components/PagePool/components/ContractComp.tsx

@@ -1,103 +1,52 @@
-import { ReactNode } from 'react'
+import { ComponentProps, ReactNode } from 'react'
 import { styled } from 'styled-components'
 import { StyledIconButton } from '@/dex/components/PagePool/PoolDetails/PoolStats/styles'
 import useStore from '@/dex/store/useStore'
 import { ChainId } from '@/dex/types/main.types'
-import Box from '@ui/Box'
 import Icon from '@ui/Icon'
 import ExternalLink from '@ui/Link/ExternalLink'
-import { copyToClipboard, shortenAddress } from '@ui-kit/utils'
+import { useReleaseChannel } from '@ui-kit/hooks/useLocalStorage'
+import { AddressActionInfo } from '@ui-kit/shared/ui/AddressActionInfo'
+import { copyToClipboard, ReleaseChannel, shortenAddress } from '@ui-kit/utils'
 
 const ContractComp = ({
   address,
   rChainId,
-  isLargeNumber,
   label,
   showBottomBorder,
-  action,
 }: {
   address: string
   rChainId: ChainId
-  isLargeNumber?: boolean
   label: ReactNode
   showBottomBorder: boolean
-  action?: ReactNode
 }) => {
   const network = useStore((state) => state.networks.networks[rChainId])
-
   return (
-    <Wrapper haveAction={!!action}>
-      <InnerWrapper isBorderBottom={showBottomBorder} haveAction={!!action}>
-        {isLargeNumber ? (
-          <LabelWrapper flex flexDirection="row">
-            <Box flex flexDirection="column">
-              {label}
-              <StyledExternalLink href={network.scanAddressPath(address)}>
-                {shortenAddress(address)}
-                <Icon name="Launch" size={16} />
-              </StyledExternalLink>
-            </Box>
-            <StyledIconButton size="medium" onClick={() => copyToClipboard(address)}>
-              <Icon name="Copy" size={16} />
-            </StyledIconButton>
-          </LabelWrapper>
-        ) : (
-          <>
-            <Label>{label}</Label>
-            <span>
-              <StyledExternalLink href={network.scanAddressPath(address)}>
-                {shortenAddress(address)}
-                <Icon name="Launch" size={16} />
-              </StyledExternalLink>
-              <StyledIconButton size="medium" onClick={() => copyToClipboard(address)}>
-                <Icon name="Copy" size={16} />
-              </StyledIconButton>
-            </span>
-          </>
-        )}
+    <div>
+      <InnerWrapper isBorderBottom={showBottomBorder}>
+        <Label>{label}</Label>
+        <span>
+          <StyledExternalLink href={network.scanAddressPath(address)}>
+            {shortenAddress(address)}
+            <Icon name="Launch" size={16} />
+          </StyledExternalLink>
+          <StyledIconButton size="medium" onClick={() => copyToClipboard(address)}>
+            <Icon name="Copy" size={16} />
+          </StyledIconButton>
+        </span>
       </InnerWrapper>
-
-      {action}
-    </Wrapper>
+    </div>
   )
 }
 
-const Wrapper = styled.div<{ haveAction: boolean }>`
-  ${({ haveAction }) => {
-    if (haveAction) {
-      return `
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 0.5rem;
-        width: 100%;
-      `
-    }
-  }}
-`
-
-const InnerWrapper = styled.div<{ isBorderBottom?: boolean; haveAction: boolean }>`
-  ${({ haveAction }) => {
-    if (!haveAction) {
-      return `
-        align-items: center;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-      `
-    }
-  }}
-
+const InnerWrapper = styled.div<{ isBorderBottom?: boolean }>`
   ${({ isBorderBottom }) => {
     if (isBorderBottom) {
       return 'border-bottom: 1px solid var(--border-600);'
     }
   }}
 `
 
-const LabelWrapper = styled(Box)`
-  width: 100%;
-`
-
 const Label = styled.span`
   margin-right: 0.5rem;
 `
@@ -113,4 +62,17 @@ const StyledExternalLink = styled(ExternalLink)`
   }
 `
 
-export default ContractComp
+export default function DetailInfoAddressLookup({
+  rChainId,
+  showBottomBorder,
+  label,
+  address,
+}: ComponentProps<typeof ContractComp>) {
+  const [releaseChannel] = useReleaseChannel()
+  const network = useStore((state) => state.networks.networks[rChainId])
+  return releaseChannel === ReleaseChannel.Beta ? (
+    <AddressActionInfo network={network} title={label} isBorderBottom={showBottomBorder} address={address} />
+  ) : (
+    <ContractComp rChainId={rChainId} showBottomBorder={showBottomBorder} label={label} address={address} />
+  )
+}

apps/main/src/dex/components/PagePool/components/DetailInfoSlippageTolerance.tsx

@@ -3,9 +3,11 @@ import DetailInfo from '@ui/DetailInfo'
 import Icon from '@ui/Icon'
 import IconButton from '@ui/IconButton/IconButton'
 import { formatNumber } from '@ui/utils'
-import { SlippageSettings } from '@ui-kit/features/slippage-settings'
 import { useUserProfileStore } from '@ui-kit/features/user-profile'
+import { useReleaseChannel } from '@ui-kit/hooks/useLocalStorage'
 import { t } from '@ui-kit/lib/i18n'
+import { decimal, ReleaseChannel } from '@ui-kit/utils'
+import { SlippageSettings, SlippageToleranceActionInfo } from '@ui-kit/widgets/SlippageSettings'
 
 type Props = {
   maxSlippage: string
@@ -15,11 +17,17 @@ type Props = {
 
 const DetailInfoSlippageTolerance = ({ maxSlippage, stateKey, customLabel }: Props) => {
   const setMaxSlippage = useUserProfileStore((state) => state.setMaxSlippage)
+  const [releaseChannel] = useReleaseChannel()
+  const value = decimal(maxSlippage)!
+
+  if (releaseChannel === ReleaseChannel.Beta) {
+    return <SlippageToleranceActionInfo maxSlippage={value} onSave={setMaxSlippage} />
+  }
 
   return (
     <StyledDetailInfo label={customLabel || t`Slippage tolerance:`}>
       <SlippageSettings
-        maxSlippage={maxSlippage}
+        maxSlippage={value}
         button={({ onClick }) => (
           <IconButton onClick={onClick}>
             {formatNumber(maxSlippage, { style: 'percent', defaultValue: '-' })} <Icon name="Settings" size={16} />

apps/main/src/dex/components/PageRouterSwap/components/DetailInfoExchangeRate.tsx

@@ -9,14 +9,12 @@ import { t } from '@ui-kit/lib/i18n'
 const DetailInfoExchangeRate = ({
   exchangeRates,
   loading,
-  ...rest
 }: {
   exchangeRates?: ExchangeRate[] | null
   loading: boolean
-  isMultiLine?: boolean
 }) => (
   <StyledDetailInfo
-    {...rest}
+    isMultiLine={exchangeRates != null && exchangeRates.length > 1}
     label={
       <>
         {t`Exchange rate`} <Chip size="xs">{t`(incl. fees):`}</Chip>

apps/main/src/dex/components/PageRouterSwap/components/DetailInfoTradeRoute.tsx

@@ -1,13 +1,24 @@
+import { ComponentProps } from 'react'
 import { styled } from 'styled-components'
 import DetailInfoTradeRouteRoute from '@/dex/components/PageRouterSwap/components/DetailInfoTradeRouteRoute'
 import type { Route } from '@/dex/components/PageRouterSwap/types'
 import { type NetworkUrlParams, TokensNameMapper } from '@/dex/types/main.types'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import Stack from '@mui/material/Stack'
 import Box from '@ui/Box'
 import { RCCircle } from '@ui/images'
 import Loader from '@ui/Loader'
+import { useReleaseChannel } from '@ui-kit/hooks/useLocalStorage'
 import { t } from '@ui-kit/lib/i18n'
+import ActionInfo from '@ui-kit/shared/ui/ActionInfo'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { ReleaseChannel } from '@ui-kit/utils'
+import { RouteTrack } from '@ui-kit/widgets/RouteTrack'
 
-const DetailInfoTradeRoute = ({
+const { Spacing } = SizesAndSpaces
+
+const OldDetailInfoTradeRoute = ({
   params,
   loading,
   routes,
@@ -33,7 +44,7 @@ const DetailInfoTradeRoute = ({
         padding={isMultiRoutes ? '0 0 0 var(--spacing-1)' : ''}
       >
         {loading ? (
-          <Loader skeleton={[130, 22.6 * (routesLength || 1)]} />
+          <Loader skeleton={[180, 22.6 * (routesLength || 1)]} />
         ) : routesLength > 0 ? (
           <Box grid gridAutoFlow="column" gridColumnGap="1" flexJustifyContent={detailRowJustifyContent}>
             {routesLength > 1 && (
@@ -66,6 +77,43 @@ const DetailInfoTradeRoute = ({
   )
 }
 
+export const NewDetailInfoTradeRoute = ({
+  params,
+  loading,
+  routes,
+  tokensNameMapper,
+}: ComponentProps<typeof OldDetailInfoTradeRoute>) => (
+  <ActionInfo
+    label={t`Trade routed through:`}
+    value={
+      routes?.length ? (
+        <Stack direction="row" gap={Spacing.sm}>
+          {routes.length > 1 && <RouteTrack />}
+          <List sx={{ paddingTop: 0, ...(routes.length <= 1 && { paddingBottom: 0 }) }}>
+            {routes.map((route) => (
+              <ListItem
+                key={`${route.poolId}-${route.outputCoinAddress}`}
+                sx={(t) => ({ whiteSpace: 'nowrap', padding: 0, ...t.typography.bodySRegular })}
+              >
+                <DetailInfoTradeRouteRoute
+                  params={params}
+                  route={route}
+                  routesLength={routes.length}
+                  tokensNameMapper={tokensNameMapper}
+                />
+              </ListItem>
+            ))}
+          </List>
+        </Stack>
+      ) : (
+        '-'
+      )
+    }
+    {...(routes && routes.length > 1 && { flexWrap: 'wrap', alignItems: 'start' })}
+    loading={loading && [180, 24]}
+  />
+)
+
 const Item = styled.li`
   white-space: nowrap;
   text-align: left;
@@ -103,4 +151,9 @@ const Wrapper = styled(Box)`
   font-size: var(--font-size-2);
 `
 
-export default DetailInfoTradeRoute
+export default function DetailInfoTradeRoute(props: ComponentProps<typeof NewDetailInfoTradeRoute>) {
+  const [releaseChannel] = useReleaseChannel()
+  const DetailInfoTradeRoute =
+    releaseChannel === ReleaseChannel.Beta ? NewDetailInfoTradeRoute : OldDetailInfoTradeRoute
+  return <DetailInfoTradeRoute {...props} />
+}

apps/main/src/dex/components/PageRouterSwap/components/DetailInfoTradeRouteRoute.tsx

@@ -87,7 +87,7 @@ const RouteTokenNames = styled.span`
 
 const RouteName = styled(Link)`
   display: inline-block;
-  max-width: 130px;
+  max-width: 180px;
   color: inherit;
   overflow: hidden;
   text-overflow: ellipsis;

apps/main/src/lend/components/DetailInfoSlippageTolerance.tsx

@@ -3,21 +3,30 @@ import DetailInfo from '@ui/DetailInfo'
 import Icon from '@ui/Icon'
 import IconButton from '@ui/IconButton/IconButton'
 import { formatNumber } from '@ui/utils'
-import { SlippageSettings } from '@ui-kit/features/slippage-settings'
 import { useUserProfileStore } from '@ui-kit/features/user-profile'
+import { useReleaseChannel } from '@ui-kit/hooks/useLocalStorage'
 import { t } from '@ui-kit/lib/i18n'
+import { decimal, ReleaseChannel } from '@ui-kit/utils'
+import { SlippageToleranceActionInfo } from '@ui-kit/widgets/SlippageSettings'
+import { SlippageSettings } from '@ui-kit/widgets/SlippageSettings'
 
 type Props = {
   maxSlippage: string
 }
 
 const DetailInfoSlippageTolerance = ({ maxSlippage }: Props) => {
   const setMaxSlippage = useUserProfileStore((state) => state.setMaxSlippage)
+  const [releaseChannel] = useReleaseChannel()
+  const value = decimal(maxSlippage)!
+
+  if (releaseChannel === ReleaseChannel.Beta) {
+    return <SlippageToleranceActionInfo maxSlippage={value} onSave={setMaxSlippage} />
+  }
 
   return (
     <StyledDetailInfo label={t`Slippage tolerance:`}>
       <SlippageSettings
-        maxSlippage={maxSlippage}
+        maxSlippage={value}
         button={({ onClick }) => (
           <IconButton onClick={onClick}>
             {formatNumber(maxSlippage, { style: 'percent', defaultValue: '-' })} <Icon name="Settings" size={16} />

apps/main/src/lend/components/DetailsMarket/components/DetailInfoAddressLookup.tsx

@@ -1,21 +1,19 @@
-import { ReactNode } from 'react'
 import { styled } from 'styled-components'
-import type { StatsProps } from '@/lend/components/DetailsMarket/styles'
 import { StyledStats } from '@/lend/components/DetailsMarket/styles'
 import networks from '@/lend/networks'
 import { ChainId } from '@/lend/types/lend.types'
 import Icon from '@ui/Icon'
 import IconButton from '@ui/IconButton'
 import ExternalLink from '@ui/Link/ExternalLink'
-import { copyToClipboard, shortenAddress } from '@ui-kit/utils'
+import { useReleaseChannel } from '@ui-kit/hooks/useLocalStorage'
+import { t } from '@ui-kit/lib/i18n'
+import ActionInfo from '@ui-kit/shared/ui/ActionInfo'
+import { AddressActionInfo, AddressActionInfoProps } from '@ui-kit/shared/ui/AddressActionInfo'
+import { copyToClipboard, ReleaseChannel, shortenAddress } from '@ui-kit/utils'
 
-interface Props extends StatsProps {
-  chainId: ChainId
-  title: ReactNode
-  address: string | undefined
-}
+type Props = Omit<AddressActionInfoProps, 'network'> & { chainId: ChainId }
 
-const DetailInfoAddressLookup = ({ chainId, title, address, ...props }: Props) => {
+const OldDetailInfoAddressLookup = ({ chainId, title, address, ...props }: Props) => {
   const isValidAddress = address ? address !== 'NaN' : true
 
   return (
@@ -92,4 +90,21 @@ const StyledExternalLink = styled(ExternalLink)<{ isValid: boolean }>`
   }}
 `
 
-export default DetailInfoAddressLookup
+const NoGaugeActionInfo = ({ isBorderBottom, title }: Pick<Props, 'isBorderBottom' | 'title'>) => (
+  <ActionInfo
+    label={title}
+    value={t`no gauge`}
+    {...(isBorderBottom && { sx: { borderBottom: (t) => `1px solid ${t.palette.divider}` } })}
+  />
+)
+
+export default function DetailInfoAddressLookup({ chainId, ...props }: Props) {
+  const [releaseChannel] = useReleaseChannel()
+  return releaseChannel !== ReleaseChannel.Beta ? (
+    <OldDetailInfoAddressLookup chainId={chainId} {...props} />
+  ) : props.address === 'NaN' ? (
+    <NoGaugeActionInfo {...props} />
+  ) : (
+    <AddressActionInfo network={networks[chainId]} {...props} />
+  )
+}