Assets page fixes & wallet button new design

centrifuge-app/src/components/LayoutBase/styles.tsx

@@ -142,7 +142,7 @@ export const WalletInner = styled(Stack)`
   height: 80px;
   justify-content: center;
   pointer-events: auto;
-  width: 200px;
+  width: 236px;
 
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
     justify-content: flex-end;

centrifuge-app/src/components/LoanList.tsx

@@ -267,7 +267,7 @@ export function LoanList({ loans }: Props) {
   return (
     <>
       <Box pt={1} pb={2} paddingX={1} display="flex" justifyContent="space-between" alignItems="center">
-        <Text variant="heading4">{filters.data.map((loan) => loan.status === 'Active').length} ongoing assets</Text>
+        <Text variant="heading4">{rows.filter((row) => !row.marketValue?.isZero()).length} ongoing assets</Text>
         <Box display="flex">
           <Button
             variant="inverted"

centrifuge-app/src/pages/Loan/ExternalFinanceForm.tsx

@@ -248,7 +248,7 @@ export function ExternalFinanceForm({
               <AnchorTextLink href={`#/pools/${pool.id}/liquidity`}>Liquidity tab</AnchorTextLink>.
             </ErrorMessage>
 
-            <Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
+            <Stack gap={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
               <Text variant="heading4">Transaction summary</Text>
               <Box padding={2}>
                 <Stack gap={1} mb={3}>

centrifuge-app/src/pages/Loan/ExternalRepayForm.tsx

@@ -323,10 +323,10 @@ export function ExternalRepayForm({
           outstanding interest ({formatBalance(maxInterest, displayCurrency, 2)}).
         </ErrorMessage>
 
-        <Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
+        <Stack gap={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
           <Stack gap={1} mb={2}>
             <Text variant="heading4">Transaction summary</Text>
-            <Box paddingX={2} mt={2}>
+            <Box mt={2}>
               <Shelf justifyContent="space-between">
                 <Tooltips
                   type={maxAvailable === UNLIMITED ? 'repayFormAvailableBalanceUnlimited' : 'repayFormAvailableBalance'}
@@ -350,7 +350,7 @@ export function ExternalRepayForm({
             </Box>
           </Stack>
 
-          <Box paddingX={2}>
+          <Box>
             {destination === 'reserve' ? (
               <InlineFeedback status="default">
                 <Text variant="body2" color="statusDefault">

centrifuge-app/src/pages/Loan/FinanceForm.tsx

@@ -281,9 +281,9 @@ function InternalFinanceForm({
               </Stack>
             </Box>
 
-            <Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
+            <Stack gap={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
               <Text variant="heading4">Transaction summary</Text>
-              <Box padding={2}>
+              <Box>
                 <Stack gap={1} mb={3}>
                   <Shelf justifyContent="space-between">
                     <Tooltip
@@ -302,6 +302,26 @@ function InternalFinanceForm({
                       {maxAvailable === UNLIMITED ? 'No limit' : formatBalance(maxAvailable, displayCurrency, 2)}
                     </Text>
                   </Shelf>
+                </Stack>
+
+                <Stack gap={1}>
+                  <Shelf justifyContent="space-between">
+                    <Tooltip
+                      body={
+                        maxAvailable === UNLIMITED
+                          ? 'Unlimited because this is a virtual accounting process.'
+                          : `Balance of the ${source === 'reserve' ? 'onchain reserve' : 'source asset'}.`
+                      }
+                      style={{ pointerEvents: 'auto' }}
+                    >
+                      <Text variant="body2" color="textSecondary">
+                        Available balance
+                      </Text>
+                    </Tooltip>
+                    <Text variant="heading4">
+                      {maxAvailable === UNLIMITED ? 'No limit' : formatBalance(maxAvailable, displayCurrency, 2)}
+                    </Text>
+                  </Shelf>
 
                   <Stack gap={1}>
                     <Shelf justifyContent="space-between">

centrifuge-app/src/pages/Loan/RepayForm.tsx

@@ -368,9 +368,9 @@ function InternalRepayForm({
             </Stack>
           </Box>
 
-          <Stack gap={2} mt={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
+          <Stack gap={2} border={`1px solid ${theme.colors.borderPrimary}`} px={3} py={2} borderRadius={10}>
             <Text variant="heading4">Transaction summary</Text>
-            <Box paddingX={2} mt={2}>
+            <Box mt={2}>
               <Stack gap={1}>
                 <Shelf justifyContent="space-between">
                   <Tooltips

centrifuge-app/src/pages/Loan/index.tsx

@@ -122,7 +122,7 @@ function ActionButtons({ loan }: { loan: LoanType }) {
           </Button>
         ) : null}
         {loan.outstandingDebt.gtn(0) && (
-          <Button onClick={() => setRepayShown(true)} small variant="inverted">
+          <Button onClick={() => setRepayShown(true)} small variant="secondary">
             {isCashLoan(loan) ? 'Withdraw' : isExternalLoan(loan) ? 'Sell' : 'Repay'}
           </Button>
         )}

centrifuge-app/src/pages/Pool/Assets/index.tsx

@@ -118,7 +118,7 @@ export function PoolDetailAssets() {
           },
           {
             label: `Accrued fees (${pool.currency.symbol})`,
-            value: `-${formatBalance(pool.fees.totalPaid)}`,
+            value: `${pool.fees.totalPaid.isZero() ? '' : '-'}${formatBalance(pool.fees.totalPaid)}`,
             heading: false,
           },
         ]

centrifuge-react/src/components/WalletMenu/ConnectButton.tsx

@@ -1,12 +1,8 @@
-import { WalletButton, WalletButtonProps } from '@centrifuge/fabric'
+import { WalletButton } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useWallet } from '../WalletProvider'
 
-type Props = WalletButtonProps & {
-  label?: string
-}
-
-export function ConnectButton({ label = 'Connect wallet', ...rest }: Props) {
+export function ConnectButton({ label = 'Connect wallet', ...rest }) {
   const { showNetworks, pendingConnect } = useWallet()
 
   return (

centrifuge-react/src/components/WalletMenu/WalletMenu.tsx

@@ -1,13 +1,14 @@
 import {
   Box,
+  Button,
+  Card,
   IconAnchor,
   IconButton,
   IconCopy,
   IconExternalLink,
   IconPower,
   IconSwitch,
   Menu,
-  MenuItem,
   MenuItemGroup,
   Popover,
   Shelf,
@@ -18,7 +19,6 @@ import {
 import { getAddress } from 'ethers'
 import * as React from 'react'
 import { Link } from 'react-router-dom'
-import styled from 'styled-components'
 import { useBalances } from '../../hooks/useBalances'
 import { useEns } from '../../hooks/useEns'
 import { copyToClipboard } from '../../utils/copyToClipboard'
@@ -86,15 +86,15 @@ function ConnectedMenu({ menuItems }: WalletMenuProps) {
         <Stack ref={ref} width="100%" alignItems="stretch">
           <WalletButton
             active={state.isOpen}
-            address={address}
-            displayAddress={formattedAddress}
+            title={wallet?.title || ''}
             alias={
               connectedType === 'evm'
                 ? ensName ?? undefined
                 : !substrate.selectedProxies
                 ? substrate.selectedAccount?.name
                 : undefined
             }
+            address={address}
             balance={balance ? formatBalanceAbbreviated(balance, symbol) : undefined}
             icon={
               avatar ? (
@@ -110,118 +110,119 @@ function ConnectedMenu({ menuItems }: WalletMenuProps) {
         </Stack>
       )}
       renderContent={(props, ref, state) => (
-        <Box {...props} ref={ref} width={220}>
-          <Menu backgroundColor="white">
+        <Box {...props} ref={ref} width={420}>
+          <Menu backgroundColor="white" padding={3}>
             <MenuItemGroup>
-              {!isEvmOnSubstrate && (
-                <Stack pt={2} pb={0} px={2} gap="4px" alignItems="center">
-                  <Shelf gap={1} justifyContent="space-between">
-                    <Shelf gap={1}>
-                      <Text variant="interactive1" fontWeight={400}>
-                        {truncateAddress(formattedAddress)}
-                      </Text>
-                    </Shelf>
-
-                    <Shelf gap="2px">
-                      <IconButton onClick={() => copyToClipboard(formattedAddress)} title="Copy address to clipboard">
-                        <IconCopy />
-                      </IconButton>
-                      {subScanUrl && (
-                        <IconAnchor
-                          href={subScanUrl}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          title={`View account on ${subScanUrl}`}
-                        >
-                          <IconExternalLink />
-                        </IconAnchor>
-                      )}
-                    </Shelf>
+              <Stack py={2}>
+                <Shelf gap={1} justifyContent="space-between">
+                  <Shelf gap={1}>
+                    <Text variant="heading2">{truncateAddress(formattedAddress)}</Text>
                   </Shelf>
-                </Stack>
-              )}
 
-              <Stack gap={0} mt={1} px={2} pb={1}>
-                <Text variant="label2" textAlign="center" color="textPrimary">
+                  <Shelf gap="2px">
+                    <IconButton
+                      size="24px"
+                      onClick={() => copyToClipboard(formattedAddress)}
+                      title="Copy address to clipboard"
+                    >
+                      <IconCopy />
+                    </IconButton>
+                    {subScanUrl && (
+                      <IconAnchor
+                        href={subScanUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        title={`View account on ${subScanUrl}`}
+                      >
+                        <IconExternalLink />
+                      </IconAnchor>
+                    )}
+                  </Shelf>
+                </Shelf>
+              </Stack>
+            </MenuItemGroup>
+            <MenuItemGroup>
+              <Stack gap={0} py={2}>
+                <Text variant="body3" color="textSecondary">
                   Balance
                 </Text>
-                <Link to={`/portfolio?send=${balances?.native.currency.symbol}`} onClick={() => state.close()}>
-                  <BalanceLink fontSize={22} fontWeight={500} textAlign="center">
-                    {balance && formatBalanceAbbreviated(balance, symbol)}
-                  </BalanceLink>
-                </Link>
+                <Box display="flex" alignItems="center">
+                  <Link to={`/portfolio?send=${balances?.native.currency.symbol}`} onClick={() => state.close()}>
+                    <Text variant="heading1">{balance && formatBalanceAbbreviated(balance)}</Text>
+                  </Link>
+                  <Text style={{ marginLeft: 4 }} variant="heading1" fontWeight={400}>
+                    {symbol}
+                  </Text>
+                </Box>
               </Stack>
             </MenuItemGroup>
 
             {!!menuItems?.length && menuItems.map((item, index) => <MenuItemGroup key={index}>{item}</MenuItemGroup>)}
 
-            <MenuItemGroup>
-              <Box px={2} py={1}>
-                <Text variant="label2" color="textPrimary">
-                  Network
-                </Text>
-                <Shelf gap={1}>
-                  <Logo icon={useNetworkIcon(connectedNetwork!)} size="iconSmall" />
-                  <Text variant="interactive1">{connectedNetworkName}</Text>
-                </Shelf>
-              </Box>
-            </MenuItemGroup>
-
-            <MenuItemGroup>
-              {wallet && (
-                <Box px={2} py={1}>
-                  <Text variant="label2" color="textPrimary">
-                    Wallet
+            <Card padding={2}>
+              <MenuItemGroup>
+                <Box py={2} display="flex" justifyContent="space-between">
+                  <Text variant="body2" color="textSecondary">
+                    Network
                   </Text>
                   <Shelf gap={1}>
-                    <Logo icon={wallet.logo.src} size="iconSmall" />
-                    <Text variant="interactive1">{wallet.title}</Text>
+                    <Logo icon={useNetworkIcon(connectedNetwork!)} size={24} />
+                    <Text variant="interactive1">{connectedNetworkName}</Text>
                   </Shelf>
                 </Box>
-              )}
-              {connectedType === 'substrate' || (evm.accounts && evm.accounts.length > 1) ? (
-                <MenuItem
-                  label="Switch account"
-                  icon={<IconSwitch size="iconSmall" />}
-                  minHeight={0}
-                  onClick={() => {
-                    state.close()
-                    showAccounts()
-                  }}
-                />
-              ) : (
-                <MenuItem
-                  label="Switch wallet"
-                  icon={<IconSwitch size="iconSmall" />}
-                  minHeight={0}
+              </MenuItemGroup>
+
+              <MenuItemGroup>
+                {wallet && (
+                  <Box py={2} display="flex" justifyContent="space-between">
+                    <Text variant="body2" color="textSecondary">
+                      Wallet
+                    </Text>
+                    <Shelf gap={1}>
+                      <Logo icon={wallet.logo.src} size={24} />
+                      <Text variant="interactive1">{wallet.title}</Text>
+                    </Shelf>
+                  </Box>
+                )}
+              </MenuItemGroup>
+
+              <Stack gap={2} mt={2}>
+                <Button
+                  icon={<IconSwitch />}
+                  onClick={
+                    connectedType === 'substrate' || (evm.accounts && evm.accounts.length > 1)
+                      ? () => {
+                          state.close()
+                          showAccounts()
+                        }
+                      : () => {
+                          state.close()
+                          showWallets(connectedNetwork, wallet)
+                        }
+                  }
+                  variant="secondary"
+                  small
+                >
+                  {connectedType === 'substrate' || (evm.accounts && evm.accounts.length > 1)
+                    ? 'Switch account'
+                    : 'Switch wallet'}
+                </Button>
+                <Button
+                  icon={<IconPower />}
                   onClick={() => {
                     state.close()
-                    showWallets(connectedNetwork, wallet)
+                    disconnect()
                   }}
-                />
-              )}
-            </MenuItemGroup>
-
-            <MenuItemGroup>
-              <MenuItem
-                label="Disconnect"
-                icon={<IconPower size="iconSmall" />}
-                minHeight={0}
-                onClick={() => {
-                  state.close()
-                  disconnect()
-                }}
-              />
-            </MenuItemGroup>
+                  variant="inverted"
+                  small
+                >
+                  Disconnect
+                </Button>
+              </Stack>
+            </Card>
           </Menu>
         </Box>
       )}
     />
   )
 }
-
-const BalanceLink = styled(Text)`
-  &:hover {
-    color: ${({ theme }) => theme.colors.textInteractive};
-  }
-`