From fe4d546b8e16c60dd66f48c6695fdf8013609c6f Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Wed, 21 Aug 2024 11:21:21 -0500
Subject: [PATCH] Fix TS errors

---
 .../src/pages/IssuerPool/Investors/LiquidityPools.tsx  |  2 +-
 .../src/components/WalletProvider/AccountButton.tsx    |  8 ++++++--
 fabric/src/components/Text/index.tsx                   | 10 +++++++---
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/centrifuge-app/src/pages/IssuerPool/Investors/LiquidityPools.tsx b/centrifuge-app/src/pages/IssuerPool/Investors/LiquidityPools.tsx
index c3bef66568..1bb0bae16c 100644
--- a/centrifuge-app/src/pages/IssuerPool/Investors/LiquidityPools.tsx
+++ b/centrifuge-app/src/pages/IssuerPool/Investors/LiquidityPools.tsx
@@ -175,7 +175,7 @@ function PoolDomain({ poolId, domain, refetch }: { poolId: string; domain: Domai
           </ConnectionGuard>
         ) : (
           pool.tranches.map((tranche) => (
-            <a href={explorer.address(domain.trancheTokens[tranche.id])} target="_blank">
+            <a href={explorer.address(domain.trancheTokens[tranche.id])} target="_blank" rel="noreferrer">
               <Button variant="secondary" small style={{ width: '100%' }}>
                 <Shelf gap={1}>
                   <span>View {tranche.currency.symbol} token</span>
diff --git a/centrifuge-react/src/components/WalletProvider/AccountButton.tsx b/centrifuge-react/src/components/WalletProvider/AccountButton.tsx
index 34b47a82c0..162a8bc822 100644
--- a/centrifuge-react/src/components/WalletProvider/AccountButton.tsx
+++ b/centrifuge-react/src/components/WalletProvider/AccountButton.tsx
@@ -22,6 +22,10 @@ type AccountButtonProps = {
   multisig?: ComputedMultisig
 }
 
+const StyledText = styled(Text)`
+  display: block;
+`
+
 const Root = styled(Shelf)<{ selected: boolean }>`
   cursor: pointer;
   border: none;
@@ -138,7 +142,7 @@ export function AccountIcon({ id, theme = 'polkadot' }: { id: string; theme?: Ic
 export function AccountName({ account, proxies }: { account: WalletAccount; proxies?: Proxy[] }) {
   const utils = useCentrifugeUtils()
   return (
-    <Text as="span" variant="body2" fontWeight={300} style={{ display: 'block' }}>
+    <StyledText as="span" variant="body2" fontWeight={300}>
       {account.name && (
         <>
           <Text as="span" fontWeight={500}>
@@ -154,6 +158,6 @@ export function AccountName({ account, proxies }: { account: WalletAccount; prox
           {truncateAddress(utils.formatAddress(p.delegator))}{' '}
         </span>
       ))}
-    </Text>
+    </StyledText>
   )
 }
diff --git a/fabric/src/components/Text/index.tsx b/fabric/src/components/Text/index.tsx
index 38fe35132b..ed521a68b6 100644
--- a/fabric/src/components/Text/index.tsx
+++ b/fabric/src/components/Text/index.tsx
@@ -35,6 +35,7 @@ interface SystemProps extends TypographySystemProps, ColorProps, TypographyProps
 interface StyledTextProps extends SystemProps {
   as?: keyof JSX.IntrinsicElements | React.ComponentType<any>
 }
+
 const StyledText = styled('span').withConfig({
   shouldForwardProp: (prop) => shouldForwardProp(prop),
 })<StyledTextProps>({ margin: 0 }, compose(typographySystem, typography, color))
@@ -45,14 +46,17 @@ function useTextContext(): React.ContextType<typeof TextContext> {
   return React.useContext(TextContext)
 }
 
-interface TextProps extends StyledTextProps {
+type AnchorProps = React.ComponentPropsWithoutRef<'a'>
+
+interface TextProps extends StyledTextProps, Omit<AnchorProps, keyof StyledTextProps> {
   variant?: keyof DefaultTheme['typography']
   textOverflow?: 'ellipsis'
   as?: keyof JSX.IntrinsicElements | React.ComponentType<any>
   children?: React.ReactNode
   htmlFor?: string
 }
-const Text = React.forwardRef<HTMLDivElement | HTMLSpanElement, TextProps>((props, ref) => {
+
+const Text = React.forwardRef<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement, TextProps>((props, ref) => {
   const isInText = useTextContext()
   const theme = useTheme()
 
@@ -78,7 +82,7 @@ const Text = React.forwardRef<HTMLDivElement | HTMLSpanElement, TextProps>((prop
     <TextContext.Provider value>
       <StyledText
         as={as}
-        ref={ref as React.Ref<HTMLDivElement | HTMLSpanElement>}
+        ref={ref as React.Ref<HTMLDivElement | HTMLSpanElement | HTMLAnchorElement>}
         color={color}
         fontSize={fontSize}
         fontWeight={fontWeight}