Fix TS errors

centrifuge · Aug 21, 2024 · c0a7232 · c0a7232
1 parent 1d663b2
commit c0a7232
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 9 deletions.
diff --git 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
@@ -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/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx
@@ -92,7 +92,12 @@ export function WalletButton({
             </Shelf>
           </Box>
         ) : (
-          <StyledBodyText fontSize={small ? 14 : 16} color="textInteractive" fontWeight={500}>
+          <StyledBodyText
+            margin={address ? 0 : 'auto'}
+            fontSize={small ? 14 : 16}
+            color="textInteractive"
+            fontWeight={500}
+          >
             {displayAddress ? truncate(displayAddress) : connectLabel}
           </StyledBodyText>
         )}

diff --git a/fabric/src/components/Text/index.tsx b/fabric/src/components/Text/index.tsx
@@ -5,9 +5,11 @@ import styled, { DefaultTheme, useTheme } from 'styled-components'
 import {
   ColorProps,
   ResponsiveValue,
+  SpaceProps,
   TypographyProps as TypographySystemProps,
   color,
   compose,
+  space,
   system,
   typography as typographySystem,
 } from 'styled-system'
@@ -30,29 +32,33 @@ const typography = system({
   },
 })
 
-interface SystemProps extends TypographySystemProps, ColorProps, TypographyProps {}
+interface SystemProps extends TypographySystemProps, ColorProps, SpaceProps, 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))
+})<StyledTextProps>({ margin: 0 }, compose(typographySystem, typography, color, space))
 
 const TextContext = React.createContext(false)
 
 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()
 
@@ -69,6 +75,7 @@ const Text = React.forwardRef<HTMLDivElement | HTMLSpanElement, TextProps>((prop
     fontWeight = isInText ? 'inherit' : 400,
     lineHeight = isInText ? 'inherit' : 1.5,
     fontFamily = isInText ? 'inherit' : 'standard',
+    margin,
     ...rest
   } = textProps
 
@@ -78,7 +85,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}