Convert MUI links to Tailwind

.changelog/2293.trivial.md

@@ -0,0 +1 @@
+Update remaining MUI links and styled links to oasis library Link component.

src/app/components/Account/ConsensusAccountDetailsView.tsx

@@ -12,7 +12,7 @@ import { AccountSizeBadge } from '../AccountSizeBadge'
 import { ConsensusAccountLink } from './ConsensusAccountLink'
 import { CopyToClipboard } from '../CopyToClipboard'
 import { Link as RouterLink } from 'react-router-dom'
-import Link from '@mui/material/Link'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { RouteUtils } from '../../utils/route-utils'
 import { transactionsContainerId } from '../../utils/tabAnchors'
 import { RoundedBalance } from '../RoundedBalance'
@@ -105,8 +105,8 @@ export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> =
       <dt>{t('common.transactions')}</dt>
       <dd>
         {account.stats.num_txns ? (
-          <Link component={RouterLink} to={transactionsAnchor!}>
-            {transactionsLabel}
+          <Link asChild className="font-medium">
+            <RouterLink to={transactionsAnchor!}>{transactionsLabel}</RouterLink>
           </Link>
         ) : (
           transactionsLabel

src/app/components/Account/RuntimeAccountDetailsView.tsx

@@ -8,7 +8,7 @@ import { EvmToken, type RuntimeAccount } from '../../../oasis-nexus/api'
 import { TokenPills } from './TokenPills'
 import { AccountLink } from './AccountLink'
 import { RouteUtils } from '../../utils/route-utils'
-import Link from '@mui/material/Link'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { DashboardLink } from '../../pages/ParatimeDashboardPage/DashboardLink'
 import { AllTokenPrices } from '../../../coin-gecko/api'
 import { ContractCreatorInfo } from './ContractCreatorInfo'
@@ -150,8 +150,8 @@ export const RuntimeAccountDetailsView: FC<RuntimeAccountDetailsViewProps> = ({
       <dt>{t('common.transactions')}</dt>
       <dd>
         {account.stats.num_txns ? (
-          <Link component={RouterLink} to={transactionsAnchor!}>
-            {transactionsLabel}
+          <Link asChild className="font-medium">
+            <RouterLink to={transactionsAnchor!}>{transactionsLabel}</RouterLink>
           </Link>
         ) : (
           transactionsLabel

src/app/components/AnalyticsConsent/AnalyticsIsBlocked.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material/styles'
 import Button from '@mui/material/Button'
-import Link from '@mui/material/Link'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { Trans, useTranslation } from 'react-i18next'
 import { AnalyticsDialogLayout } from './AnalyticsDialogLayout'
 
@@ -20,11 +20,7 @@ export const AnalyticsIsBlocked = (props: { isOpen: boolean; onReload: () => voi
           t={t}
           components={{
             PrivacyPolicyLink: (
-              <Link
-                href={import.meta.env.REACT_APP_PRIVACY_POLICY}
-                target="_blank"
-                sx={{ fontWeight: 400, textDecoration: 'underline' }}
-              />
+              <Link href={import.meta.env.REACT_APP_PRIVACY_POLICY} target="_blank" className="underline" />
             ),
           }}
         />

src/app/components/CoinGeckoReferral/index.tsx

@@ -1,15 +1,12 @@
 import { FC } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import Typography from '@mui/material/Typography'
-import Link from '@mui/material/Link'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { referrals } from '../../utils/externalLinks'
-import { COLORS } from '../../../styles/theme/colors'
-
 export const CoinGeckoReferral: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <Typography component="span" sx={{ fontSize: '12px', color: COLORS.brandExtraDark }}>
+    <span className="text-xs">
       <Trans
         i18nKey="coinGeckoReferral"
         t={t}
@@ -19,11 +16,11 @@ export const CoinGeckoReferral: FC = () => {
               href={referrals.coinGecko}
               rel="noopener noreferrer"
               target="_blank"
-              sx={{ fontWeight: 400, color: 'inherit', textDecoration: 'underline' }}
+              className="underline text-inherit"
             />
           ),
         }}
       />
-    </Typography>
+    </span>
   )
 }

src/app/components/ContractVerificationIcon/AbiPlaygroundLink.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import Link from '@mui/material/Link'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { Layer } from '../../../oasis-nexus/api'
 import { SearchScope } from '../../../types/searchScope'
 import { Network } from '../../../types/network'
@@ -42,7 +42,7 @@ export const AbiPlaygroundLink: FC<{
           t={t}
           i18nKey={'contract.verification.openInAbiPlayground'}
           components={{
-            AbiPlaygroundLink: <Link {...abiPlaygroundLinkProps} />,
+            AbiPlaygroundLink: <Link className="text-inherit" {...abiPlaygroundLinkProps} />,
           }}
         />
       </div>

src/app/components/ContractVerificationIcon/index.tsx

@@ -1,8 +1,6 @@
 import { FC, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { COLORS } from '../../../styles/theme/colors'
-import Link from '@mui/material/Link'
-import Typography from '@mui/material/Typography'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { SearchScope } from '../../../types/searchScope'
 import * as externalLinks from '../../utils/externalLinks'
 import { isLocalnet } from '../../utils/route-utils'
@@ -45,29 +43,29 @@ export const VerificationIcon: FC<{
       </Link>
       {!hideLink &&
         (verificationLevel ? (
-          <Typography component="span" sx={{ fontSize: '12px', color: COLORS.brandExtraDark }}>
+          <span className="text-xs">
             &nbsp; &nbsp;
             <Trans
               t={t}
               i18nKey={'contract.verification.openInSourcify'}
               components={{
-                SourcifyLink: <Link {...sourcifyLinkProps} />,
+                SourcifyLink: <Link className="text-inherit underline" {...sourcifyLinkProps} />,
               }}
             />
             <AbiPlaygroundLink address_eth={address_eth} scope={scope} />
-          </Typography>
+          </span>
         ) : (
-          <Typography component="span" sx={{ fontSize: '12px', color: COLORS.brandExtraDark }}>
+          <span className="text-xs">
             &nbsp; &nbsp;
             <Trans
               t={t}
               i18nKey={'contract.verification.verifyInSourcify'}
               components={{
-                SourcifyLink: <Link {...sourcifyLinkProps} />,
+                SourcifyLink: <Link className="text-inherit underline" {...sourcifyLinkProps} />,
               }}
             />{' '}
             {explainDelay && t('contract.verification.explainVerificationDelay')}
-          </Typography>
+          </span>
         ))}
     </>
   )

src/app/components/LoadMoreButton/index.tsx

@@ -1,5 +1,5 @@
 import { Link as RouterLink } from 'react-router-dom'
-import Link from '@mui/material/Link'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { styled } from '@mui/material/styles'
 import Button from '@mui/material/Button'
 import { COLORS } from '../../../styles/theme/colors'
@@ -20,14 +20,12 @@ export const LoadMoreButton: FC<LoadMoreButtonProps> = ({ isLoading, pagination
   const { t } = useTranslation()
 
   return (
-    <Link
-      component={RouterLink}
-      to={pagination.linkToPage(pagination.selectedPage + 1)}
-      preventScrollReset={true}
-    >
-      <StyledLoadMoreButton color="primary" variant="contained" disabled={isLoading}>
-        {t('common.loadMore')}
-      </StyledLoadMoreButton>
+    <Link asChild>
+      <RouterLink to={pagination.linkToPage(pagination.selectedPage + 1)} preventScrollReset={true}>
+        <StyledLoadMoreButton color="primary" variant="contained" disabled={isLoading}>
+          {t('common.loadMore')}
+        </StyledLoadMoreButton>
+      </RouterLink>
     </Link>
   )
 }

src/app/components/Proposals/ProposalLink.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
-import Link from '@mui/material/Link'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { RouteUtils } from '../../utils/route-utils'
 import { Network } from '../../../types/network'
 
@@ -11,8 +11,8 @@ export const ProposalLink: FC<{
 }> = ({ network, proposalId, label = proposalId }) => {
   const to = RouteUtils.getProposalRoute(network, proposalId)
   return (
-    <Link component={RouterLink} to={to}>
-      {label}
+    <Link asChild className="font-medium">
+      <RouterLink to={to}>{label}</RouterLink>
     </Link>
   )
 }

src/app/components/Table/GoToFirstPageLink.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSearchParams, useHref } from 'react-router-dom'
-import Link from '@mui/material/Link'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 
 /**
  * Link to attempt to jump to the first page (in pagination)
@@ -37,7 +37,7 @@ export const GoToFirstPageLink: FC = () => {
   // Apparently the solution is to umount and rerender the component outside the error boundary.
   // But that's hard to do selectively, so it's easier to just do a full refresh.
   return wantedParamName ? (
-    <Link href={href} sx={{ cursor: 'pointer' }}>
+    <Link href={href} className="text-inherit underline hover:text-inherit">
       {label}
     </Link>
   ) : (

src/app/components/Tokens/TokenLink.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
-import Link from '@mui/material/Link'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 
 import { RouteUtils } from '../../utils/route-utils'
 import { SearchScope } from '../../../types/searchScope'
@@ -12,8 +12,10 @@ export const TokenLink: FC<{
   name: string | undefined
 }> = ({ scope, address, name }) => {
   return (
-    <Link component={RouterLink} to={RouteUtils.getTokenRoute(scope, address)}>
-      {name ? <HighlightedText text={name} /> : address}
+    <Link asChild className="font-medium">
+      <RouterLink to={RouteUtils.getTokenRoute(scope, address)}>
+        {name ? <HighlightedText text={name} /> : address}
+      </RouterLink>
     </Link>
   )
 }

src/app/pages/ConsensusAccountDetailsPage/Staking.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Card, CardContent } from '@oasisprotocol/ui-library/src/components/cards'
-import Link from '@mui/material/Link'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@oasisprotocol/ui-library/src/components/tabs'
 import {
@@ -74,7 +74,7 @@ const ActiveDelegations: FC<DelegationCardProps> = ({ address }) => {
   if (isFetched && !delegationsQuery.data?.data.delegations.length) {
     return (
       <ConsensusAccountCardEmptyState label={t('account.notStaking')}>
-        <Link href={wallet.homepage} rel="noopener noreferrer" target="_blank">
+        <Link className="font-medium" href={wallet.homepage} rel="noopener noreferrer" target="_blank">
           {t('account.startStaking')}
         </Link>
       </ConsensusAccountCardEmptyState>

src/app/pages/NFTInstanceDashboardPage/InstanceImageCard.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { Button } from '@mui/base/Button'
 import { Card, CardContent } from '@oasisprotocol/ui-library/src/components/cards'
 import ContrastIcon from '@mui/icons-material/Contrast'
-import Link from '@mui/material/Link'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
 import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import OpenInFullIcon from '@mui/icons-material/OpenInFull'

src/app/pages/RoflAppDetailsPage/MetaDataCard.tsx

@@ -1,8 +1,7 @@
 import { FC } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { styled } from '@mui/material/styles'
 import { Card, CardContent, CardHeader, CardTitle } from '@oasisprotocol/ui-library/src/components/cards'
-import Link from '@mui/material/Link'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import { RoflAppMetadata } from '../../../oasis-nexus/api'
 import { EmptyStateCard } from './EmptyStateCard'
@@ -13,13 +12,6 @@ import { XProfileWidget } from '../../components/XProfileWidget'
 import { DiscordProfileWidget } from '../../components/DiscordProfileWidget'
 import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 
-export const StyledLink = styled(Link)(() => ({
-  display: 'inline-flex',
-  alignItems: 'center',
-  wordBreak: 'break-all',
-  gap: 5,
-}))
-
 type MetaDataCardProps = {
   isFetched: boolean
   metadata: RoflAppMetadata | undefined
@@ -64,9 +56,14 @@ export const MetaDataCard: FC<MetaDataCardProps> = ({ isFetched, metadata }) =>
               {!homepage ? undefined : (
                 <>
                   {isUrlSafe(homepage) && (
-                    <StyledLink href={homepage} rel="noopener noreferrer" target="_blank">
+                    <Link
+                      className="inline-flex items-center break-all gap-1"
+                      href={homepage}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
                       {homepage} <OpenInNewIcon className="text-base" />
-                    </StyledLink>
+                    </Link>
                   )}
                   {isTwitterHandle(homepage) && <XProfileWidget handle={homepage} />}
                   {isDiscordHandle(homepage) && <DiscordProfileWidget handle={homepage} />}
@@ -87,13 +84,14 @@ export const MetaDataCard: FC<MetaDataCardProps> = ({ isFetched, metadata }) =>
               }
             >
               {isUrlSafe(metadata['net.oasis.rofl.repository']) ? (
-                <StyledLink
+                <Link
+                  className="inline-flex items-center break-all gap-1"
                   href={metadata['net.oasis.rofl.repository']}
                   rel="noopener noreferrer"
                   target="_blank"
                 >
                   {metadata['net.oasis.rofl.repository']} <OpenInNewIcon className="text-base" />
-                </StyledLink>
+                </Link>
               ) : undefined}
             </GridRow>
           </div>

src/app/pages/RuntimeAccountDetailsPage/AccountNFTCollectionCard.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLoaderData, Link as RouterLink, To } from 'react-router-dom'
 import { Card, CardContent } from '@oasisprotocol/ui-library/src/components/cards'
-import Link from '@mui/material/Link'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
 import { ErrorBoundary } from '../../components/ErrorBoundary'
@@ -45,13 +45,13 @@ export const AccountNFTCollectionCard: FC<RuntimeAccountDetailsContext> = ({ sco
                 <BreadcrumbList>
                   <BreadcrumbItem>
                     <Typography variant="h3" className="text-lg font-medium">
-                      <Link
-                        preventScrollReset
-                        component={RouterLink}
-                        to={RouteUtils.getAccountTokensRoute(scope, address, 'ERC721', '')}
-                        className="hover:underline"
-                      >
-                        {t('nft.accountCollection')}
+                      <Link asChild className="hover:underline">
+                        <RouterLink
+                          preventScrollReset
+                          to={RouteUtils.getAccountTokensRoute(scope, address, 'ERC721', '')}
+                        >
+                          {t('nft.accountCollection')}
+                        </RouterLink>
                       </Link>
                     </Typography>
                   </BreadcrumbItem>

src/app/pages/RuntimeAccountDetailsPage/AccountTokensCard.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLocation, Link as RouterLink } from 'react-router-dom'
-import Link from '@mui/material/Link'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { CardEmptyState } from '../../components/CardEmptyState'
 import { Table, TableCellAlign, TableColProps } from '../../components/Table'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
@@ -98,8 +98,10 @@ export const AccountTokensCard: FC<AccountTokensCardProps> = ({ scope, account,
               align: TableCellAlign.Right,
               key: 'link',
               content: (
-                <Link component={RouterLink} to={item.token_contract_addr_eth} preventScrollReset={true}>
-                  {t('common.viewAll')}
+                <Link asChild>
+                  <RouterLink to={item.token_contract_addr_eth} preventScrollReset={true}>
+                    {t('common.viewAll')}
+                  </RouterLink>
                 </Link>
               ),
             },