From af8f470f883614019fb9ae95d1b9fdd5a73c4404 Mon Sep 17 00:00:00 2001 From: Katty Barroso <51223655+kattylucy@users.noreply.github.com> Date: Thu, 14 Nov 2024 17:38:14 +0100 Subject: [PATCH] Assets page fixes & wallet button new design (#2536) * Assets page fixes * Add new design for wallet menu * Redesign dialog * Readd select functionality * Modify wallet button * Fix total assets * Fix wallet title * Add skeleton loader * Add border radius * remove alias from storybook * Fix linter * Add alias back to btn * Hide skeleton --- .../Charts/PoolPerformanceChart.tsx | 2 +- .../src/components/LayoutBase/styles.tsx | 2 +- centrifuge-app/src/components/LoanList.tsx | 10 +- .../src/components/PoolOverview/Cashflows.tsx | 2 +- .../src/components/Report/AssetList.tsx | 2 +- .../src/components/Report/DataFilter.tsx | 2 +- .../components/Skeletons/LoanListSkeleton.tsx | 71 +++++ .../components/Skeletons/SkeletonTable.tsx | 68 +++++ .../src/pages/Loan/ExternalFinanceForm.tsx | 4 +- .../src/pages/Loan/ExternalRepayForm.tsx | 8 +- centrifuge-app/src/pages/Loan/FinanceForm.tsx | 26 +- centrifuge-app/src/pages/Loan/RepayForm.tsx | 6 +- .../src/pages/Loan/SourceSelect.tsx | 2 +- centrifuge-app/src/pages/Loan/index.tsx | 2 +- .../src/pages/Pool/Assets/OffchainMenu.tsx | 19 +- .../src/pages/Pool/Assets/index.tsx | 11 +- .../src/utils/useAverageMaturity.ts | 2 +- centrifuge-app/src/utils/useLoans.ts | 6 +- centrifuge-app/src/utils/usePools.ts | 6 +- .../components/WalletMenu/ConnectButton.tsx | 8 +- .../src/components/WalletMenu/WalletMenu.tsx | 192 ++++++------- .../WalletProvider/SelectButton.tsx | 10 +- .../WalletProvider/SelectionStep.tsx | 71 ++--- .../WalletProvider/WalletDialog.tsx | 270 +++++++----------- .../src/components/WalletProvider/utils.ts | 6 +- .../src/hooks/useCentrifugeQuery.ts | 12 +- .../src/components/Button/Button.stories.tsx | 4 +- fabric/src/components/Button/IconAction.tsx | 19 +- fabric/src/components/Button/WalletButton.tsx | 10 +- fabric/src/components/Dialog/index.tsx | 14 +- fabric/src/components/Menu/index.tsx | 4 +- fabric/src/icon-svg/icon-centrifuge.svg | 17 +- fabric/src/icon-svg/icon-copy.svg | 5 +- fabric/src/icon-svg/icon-crosschair.svg | 3 + 34 files changed, 511 insertions(+), 385 deletions(-) create mode 100644 centrifuge-app/src/components/Skeletons/LoanListSkeleton.tsx create mode 100644 centrifuge-app/src/components/Skeletons/SkeletonTable.tsx create mode 100644 fabric/src/icon-svg/icon-crosschair.svg diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx index b4a7b07ab1..18a06b1cef 100644 --- a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx +++ b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx @@ -98,7 +98,7 @@ function PoolPerformanceChart() { const { poolStates } = useDailyPoolStates(poolId) || {} const pool = usePool(poolId) const poolAge = pool.createdAt ? daysBetween(pool.createdAt, new Date()) : 0 - const loans = useLoans(poolId) + const { data: loans } = useLoans(poolId) const firstOriginationDate = loans?.reduce((acc, cur) => { if ('originationDate' in cur) { diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx index e51f59ff7a..9faef617e6 100644 --- a/centrifuge-app/src/components/LayoutBase/styles.tsx +++ b/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: 250px; @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) { justify-content: flex-end; diff --git a/centrifuge-app/src/components/LoanList.tsx b/centrifuge-app/src/components/LoanList.tsx index 18be9bec1a..75670e5992 100644 --- a/centrifuge-app/src/components/LoanList.tsx +++ b/centrifuge-app/src/components/LoanList.tsx @@ -1,5 +1,5 @@ import { useBasePath } from '@centrifuge/centrifuge-app/src/utils/useBasePath' -import { CurrencyBalance, Loan, Pool, TinlakeLoan } from '@centrifuge/centrifuge-js' +import { AssetSnapshot, CurrencyBalance, Loan, Pool, TinlakeLoan } from '@centrifuge/centrifuge-js' import { AnchorButton, Box, @@ -26,7 +26,7 @@ import { formatBalance, formatPercentage } from '../utils/formatting' import { useFilters } from '../utils/useFilters' import { useMetadata } from '../utils/useMetadata' import { useCentNFT } from '../utils/useNFTs' -import { useAllPoolAssetSnapshots, usePool, usePoolMetadata } from '../utils/usePools' +import { usePool, usePoolMetadata } from '../utils/usePools' import { Column, DataTable, SortableTableHeader } from './DataTable' import { LoadBoundary } from './LoadBoundary' import { prefetchRoute } from './Root' @@ -45,9 +45,10 @@ type Row = (Loan | TinlakeLoan) & { type Props = { loans: Loan[] | TinlakeLoan[] + snapshots: AssetSnapshot[] } -export function LoanList({ loans }: Props) { +export function LoanList({ loans, snapshots }: Props) { const { pid: poolId } = useParams<{ pid: string }>() if (!poolId) throw new Error('Pool not found') @@ -55,7 +56,6 @@ export function LoanList({ loans }: Props) { const pool = usePool(poolId) const isTinlakePool = poolId?.startsWith('0x') const basePath = useBasePath() - const snapshots = useAllPoolAssetSnapshots(pool.id, new Date().toString()) const loansData = isTinlakePool ? loans : (loans ?? []).filter((loan) => 'valuationMethod' in loan.pricing && loan.pricing.valuationMethod !== 'cash') @@ -267,7 +267,7 @@ export function LoanList({ loans }: Props) { return ( <> - {filters.data.map((loan) => loan.status === 'Active').length} ongoing assets + {rows.filter((row) => !row.marketValue?.isZero()).length} ongoing assets )} diff --git a/centrifuge-app/src/pages/Pool/Assets/OffchainMenu.tsx b/centrifuge-app/src/pages/Pool/Assets/OffchainMenu.tsx index 9b4d574087..33657ad528 100644 --- a/centrifuge-app/src/pages/Pool/Assets/OffchainMenu.tsx +++ b/centrifuge-app/src/pages/Pool/Assets/OffchainMenu.tsx @@ -1,4 +1,5 @@ import { Loan } from '@centrifuge/centrifuge-js' +import { formatBalance } from '@centrifuge/centrifuge-react' import { Box, IconChevronDown, @@ -49,14 +50,18 @@ const LoanOption = ({ loan }: LoanOptionProps) => { navigate(`${location.pathname}/${id}`) } + const getLabel = () => { + return ( + + {formatBalance('presentValue' in loan ? loan.presentValue : 0)} (USD) + + + ) + } + return ( - } - onClick={() => handleNavigate(loan.id)} - /> + handleNavigate(loan.id)} /> ) } @@ -74,7 +79,7 @@ export const OffchainMenu = ({ value, loans }: Props) => { )} renderContent={(props, ref) => ( - + {loans.map((loan) => ( diff --git a/centrifuge-app/src/pages/Pool/Assets/index.tsx b/centrifuge-app/src/pages/Pool/Assets/index.tsx index 41c735f452..b9ebfc843e 100644 --- a/centrifuge-app/src/pages/Pool/Assets/index.tsx +++ b/centrifuge-app/src/pages/Pool/Assets/index.tsx @@ -14,7 +14,7 @@ import { Dec } from '../../../utils/Decimal' import { formatBalance } from '../../../utils/formatting' import { useLoans } from '../../../utils/useLoans' import { useSuitableAccounts } from '../../../utils/usePermissions' -import { usePool } from '../../../utils/usePools' +import { useAllPoolAssetSnapshots, usePool } from '../../../utils/usePools' import { PoolDetailHeader } from '../Header' import { OffchainMenu } from './OffchainMenu' @@ -44,7 +44,8 @@ export function PoolDetailAssets() { if (!poolId) throw new Error('Pool not found') const pool = usePool(poolId) - const loans = useLoans(poolId) + const { data: loans, isLoading } = useLoans(poolId) + const { isLoading: isLoadingSnapshots, data: snapshots } = useAllPoolAssetSnapshots(poolId, new Date().toString()) const isTinlakePool = poolId.startsWith('0x') const basePath = useBasePath() const cashLoans = (loans ?? []).filter( @@ -107,7 +108,7 @@ export function PoolDetailAssets() { ...(!isTinlakePool && cashLoans.length ? [ { - label: , + label: , value: , heading: false, }, @@ -118,7 +119,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, }, ] @@ -131,7 +132,7 @@ export function PoolDetailAssets() { - + ) diff --git a/centrifuge-app/src/utils/useAverageMaturity.ts b/centrifuge-app/src/utils/useAverageMaturity.ts index c46083abee..76ef24d653 100644 --- a/centrifuge-app/src/utils/useAverageMaturity.ts +++ b/centrifuge-app/src/utils/useAverageMaturity.ts @@ -5,7 +5,7 @@ import { formatAge } from './date' import { useLoans } from './useLoans' export const useAverageMaturity = (poolId: string) => { - const loans = useLoans(poolId) + const { data: loans } = useLoans(poolId) const avgMaturity = React.useMemo(() => { const assets = (loans && [...loans].filter((asset) => asset.status === 'Active')) as ActiveLoan[] diff --git a/centrifuge-app/src/utils/useLoans.ts b/centrifuge-app/src/utils/useLoans.ts index 41d43443a6..61536a9db3 100644 --- a/centrifuge-app/src/utils/useLoans.ts +++ b/centrifuge-app/src/utils/useLoans.ts @@ -4,18 +4,18 @@ import { useTinlakeLoans } from './tinlake/useTinlakePools' export function useLoans(poolId: string) { const isTinlakePool = poolId?.startsWith('0x') - const [centLoans] = useCentrifugeQuery(['loans', poolId], (cent) => cent.pools.getLoans([poolId]), { + const [centLoans, isLoading] = useCentrifugeQuery(['loans', poolId], (cent) => cent.pools.getLoans([poolId]), { suspense: true, enabled: !isTinlakePool, }) const { data: tinlakeLoans } = useTinlakeLoans(poolId) - return isTinlakePool ? tinlakeLoans : centLoans + return { data: isTinlakePool ? tinlakeLoans : centLoans, isLoading } } export function useLoan(poolId: string, assetId: string | undefined) { - const loans = useLoans(poolId || '') + const { data: loans } = useLoans(poolId || '') return loans?.find((loan) => loan.id === assetId) } diff --git a/centrifuge-app/src/utils/usePools.ts b/centrifuge-app/src/utils/usePools.ts index 3ae1bdb757..db14ee0145 100644 --- a/centrifuge-app/src/utils/usePools.ts +++ b/centrifuge-app/src/utils/usePools.ts @@ -161,7 +161,7 @@ export function useAssetSnapshots(poolId: string, loanId: string, from?: Date, t } export function useAllPoolAssetSnapshots(poolId: string, date: string) { - const [result] = useCentrifugeQuery( + const [result, isLoading] = useCentrifugeQuery( ['allAssetSnapshots', poolId, date], (cent) => cent.pools.getAllPoolAssetSnapshots([poolId, new Date(date)]), { @@ -169,7 +169,7 @@ export function useAllPoolAssetSnapshots(poolId: string, date: string) { } ) - return result + return { data: result, isLoading } } export function usePoolFees(poolId: string) { @@ -204,7 +204,7 @@ export function useOracleTransactions(from?: Date, to?: Date) { export function useAverageAmount(poolId: string) { const pool = usePool(poolId) - const loans = useLoans(poolId) + const { data: loans } = useLoans(poolId) if (!loans?.length || !pool) return new BN(0) diff --git a/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx b/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx index 4cb6592e25..7cc939d4a8 100644 --- a/centrifuge-react/src/components/WalletMenu/ConnectButton.tsx +++ b/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 ( diff --git a/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx b/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx index f1b3b6fc15..84089d5914 100644 --- a/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx +++ b/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx @@ -1,5 +1,7 @@ import { Box, + Button, + Card, IconAnchor, IconButton, IconCopy, @@ -7,7 +9,6 @@ import { 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,8 +86,6 @@ function ConnectedMenu({ menuItems }: WalletMenuProps) { )} renderContent={(props, ref, state) => ( - - + + - {!isEvmOnSubstrate && ( - - - - - {truncateAddress(formattedAddress)} - - - - - copyToClipboard(formattedAddress)} title="Copy address to clipboard"> - - - {subScanUrl && ( - - - - )} - + + + + {truncateAddress(formattedAddress)} - - )} - - + + copyToClipboard(formattedAddress)} + title="Copy address to clipboard" + > + + + {subScanUrl && ( + + + + )} + + + + + + + Balance - state.close()}> - - {balance && formatBalanceAbbreviated(balance, symbol)} - - + + state.close()}> + {balance && formatBalanceAbbreviated(balance)} + + + {symbol} + + {!!menuItems?.length && menuItems.map((item, index) => {item})} - - - - Network - - - - {connectedNetworkName} - - - - - - {wallet && ( - - - Wallet + + + + + Network - - {wallet.title} + + {connectedNetworkName} - )} - {connectedType === 'substrate' || (evm.accounts && evm.accounts.length > 1) ? ( - } - minHeight={0} - onClick={() => { - state.close() - showAccounts() - }} - /> - ) : ( - } - minHeight={0} + + + + {wallet && ( + + + Wallet + + + + {wallet.title} + + + )} + + + + + + + )} /> ) } - -const BalanceLink = styled(Text)` - &:hover { - color: ${({ theme }) => theme.colors.textInteractive}; - } -` diff --git a/centrifuge-react/src/components/WalletProvider/SelectButton.tsx b/centrifuge-react/src/components/WalletProvider/SelectButton.tsx index de61d16aca..0353f2d5f1 100644 --- a/centrifuge-react/src/components/WalletProvider/SelectButton.tsx +++ b/centrifuge-react/src/components/WalletProvider/SelectButton.tsx @@ -16,13 +16,16 @@ type SelectButtonProps = { iconRight?: React.ReactNode } -const Root = styled(Box)<{ disabled: boolean; muted?: boolean }>` +const Root = styled(Box)<{ disabled: boolean; muted?: boolean; active?: boolean }>` display: flex; flex-direction: column; align-items: center; gap: 10px; appearance: none; outline: none; + padding: 12px 8px; + height: 86px; + border: ${({ theme, active }) => `1px solid ${active ? theme.colors.textPrimary : theme.colors.borderPrimary}`}; opacity: ${({ disabled, muted }) => (disabled || muted ? 0.2 : 1)}; cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')}; @@ -36,6 +39,10 @@ const Root = styled(Box)<{ disabled: boolean; muted?: boolean }>` &:focus-visible:not(:disabled) { outline: ${({ theme }) => `solid ${theme.colors.borderSelected}`}; } + + & > span { + font-weight: ${({ active }) => `${active ? 700 : 500}`}; + } ` export function SelectButton({ @@ -58,6 +65,7 @@ export function SelectButton({ backgroundColor={active ? 'backgroundSecondary' : 'backgroundPrimary'} muted={muted} position="relative" + active={active} > diff --git a/centrifuge-react/src/components/WalletProvider/SelectionStep.tsx b/centrifuge-react/src/components/WalletProvider/SelectionStep.tsx index 93d583164b..36c60a3f96 100644 --- a/centrifuge-react/src/components/WalletProvider/SelectionStep.tsx +++ b/centrifuge-react/src/components/WalletProvider/SelectionStep.tsx @@ -1,55 +1,56 @@ -import { Box, Flex, IconCheck, IconInfoFilled, Shelf, Stack, Text, Tooltip } from '@centrifuge/fabric' +import { + Box, + IconButton, + IconCheckInCircle, + IconChevronDown, + IconChevronUp, + IconCrosschair, + IconInfoFilled, + Shelf, + Stack, + Text, + Tooltip, +} from '@centrifuge/fabric' import * as React from 'react' -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' import { Network } from './types' import { useGetNetworkName } from './utils' type SelectionStepProps = { - step: number title: string - expanded?: boolean children?: React.ReactNode tooltip?: React.ReactNode - titleElement?: React.ReactNode - rightElement?: React.ReactNode + done: boolean + expanded: boolean + toggleExpanded: () => void } -const Marker = styled(Flex)<{ $done: boolean }>` - border-radius: 50%; - background-color: ${({ theme, $done }) => ($done ? theme.colors.accentPrimary : theme.colors.textPrimary)}; -` - -export function SelectionStep({ - step, - title, - titleElement, - expanded = true, - children, - tooltip, - rightElement, -}: SelectionStepProps) { +export function SelectionStep({ title, children, tooltip, done, toggleExpanded, expanded }: SelectionStepProps) { + const theme = useTheme() return ( - + - - {expanded ? ( - - {step} - - ) : ( - - )} - - - + + {done ? : } + {title} {tooltip} - {!expanded && titleElement} - + - {rightElement} + + + {expanded ? : } + + {expanded && children} diff --git a/centrifuge-react/src/components/WalletProvider/WalletDialog.tsx b/centrifuge-react/src/components/WalletProvider/WalletDialog.tsx index 569c0622ed..1ac34029e9 100644 --- a/centrifuge-react/src/components/WalletProvider/WalletDialog.tsx +++ b/centrifuge-react/src/components/WalletProvider/WalletDialog.tsx @@ -1,31 +1,16 @@ import { getSupportedBrowser } from '@centrifuge/centrifuge-app/src/utils/getSupportedBrowser' -import { - Button, - Card, - Dialog, - Divider, - Grid, - IconAlertCircle, - IconDownload, - IconEdit, - IconExternalLink, - MenuItemGroup, - Shelf, - Stack, - Text, -} from '@centrifuge/fabric' +import { Box, Card, Dialog, Grid, IconAlertCircle, IconDownload, MenuItemGroup, Stack, Text } from '@centrifuge/fabric' import centrifugeLogo from '@centrifuge/fabric/assets/logos/centrifuge.svg' import { Wallet } from '@subwallet/wallet-connect/types' -import { MetaMask } from '@web3-react/metamask' import * as React from 'react' +import { useTheme } from 'styled-components' import { Network } from '.' import { AccountButton, AccountIcon, AccountName } from './AccountButton' -import { Logo, NetworkIcon, SelectAnchor, SelectButton } from './SelectButton' +import { Logo, SelectAnchor, SelectButton } from './SelectButton' import { SelectionStep, SelectionStepTooltip } from './SelectionStep' import { useCentEvmChainId, useWallet, wallets } from './WalletProvider' import { EvmChains, getChainInfo } from './evm/chains' import { EvmConnectorMeta } from './evm/connectors' -import { isSubWallet, isTalismanWallet } from './evm/utils' import { sortCentrifugeWallets, sortEvmWallets, useGetNetworkName } from './utils' type Props = { @@ -66,6 +51,7 @@ const getAdjustedInstallUrl = (wallet: WalletFn): string => { } export function WalletDialog({ evmChains: allEvmChains, showAdvancedAccounts, showTestNets, showFinoa }: Props) { + const [step, setStep] = React.useState(1) const evmChains = Object.keys(allEvmChains) .filter((chainId) => (!showTestNets ? !(allEvmChains as any)[chainId].isTestnet : true)) .reduce((obj, chainId) => { @@ -79,12 +65,11 @@ export function WalletDialog({ evmChains: allEvmChains, showAdvancedAccounts, sh pendingConnect: { isConnecting, wallet: pendingWallet, isError: isConnectError }, walletDialog: { view, network: selectedNetwork, wallet: selectedWallet }, dispatch, - showNetworks, showWallets, connect: doConnect, evm, scopedNetworks, - substrate: { evmChainId }, + substrate: { evmChainId, selectedAddress }, } = ctx const getNetworkName = useGetNetworkName() @@ -126,36 +111,25 @@ export function WalletDialog({ evmChains: allEvmChains, showAdvancedAccounts, sh title={view ? title[view] : undefined} isOpen={!!view} onClose={close} - subtitle={view === 'networks' ? 'Choose your network and wallet to connect with Centrifuge' : undefined} + subtitle="Choose your network and wallet to connect with Centrifuge" > } - expanded={view === 'networks'} - titleElement={ - selectedNetwork && ( - - - {getNetworkName(selectedNetwork)} - - ) - } - rightElement={ - view !== 'networks' && ( - - ) - } + done={!!selectedNetwork} + expanded={step === 1} + toggleExpanded={() => setStep(step === 1 ? 0 : 1)} > {/* ethereum mainnet */} : undefined} - onClick={() => showWallets(1)} + onClick={() => { + showWallets(1) + setStep(2) + }} active={selectedNetwork === 1} muted={isMuted(1)} > @@ -164,7 +138,10 @@ export function WalletDialog({ evmChains: allEvmChains, showAdvancedAccounts, sh } - onClick={() => showWallets('centrifuge')} + onClick={() => { + showWallets('centrifuge') + setStep(2) + }} active={isCentChainSelected} muted={isMuted('centrifuge')} > @@ -183,7 +160,10 @@ export function WalletDialog({ evmChains: allEvmChains, showAdvancedAccounts, sh : undefined} - onClick={() => showWallets(chainId)} + onClick={() => { + showWallets(chainId) + setStep(2) + }} active={selectedNetwork === chainId} muted={isMuted(chainId)} > @@ -194,107 +174,64 @@ export function WalletDialog({ evmChains: allEvmChains, showAdvancedAccounts, sh - {(!!selectedWallet || view === 'wallets' || view === 'accounts') && ( - <> - - - - {selectedWallet.title} - - ) - } - rightElement={ - view === 'accounts' && ( - - ) - } - > - - {shownWallets.map((wallet) => { - return wallet.installed ? ( - } - iconRight={ - selectedWallet && isConnectError && selectedWallet === wallet ? ( - - ) : undefined - } - onClick={() => { - showWallets(selectedNetwork, wallet) - connect(wallet) - }} - loading={isConnecting && wallet === pendingWallet} - active={selectedWallet === wallet} - muted={isMuted(selectedNetwork!)} - > - {wallet.title} - - ) : ( - } - iconRight={} - muted={isMuted(selectedNetwork!)} - > - {wallet.title} - - ) - })} - - - - )} + setStep(step === 2 ? 0 : 2)} + > + + {shownWallets.map((wallet) => { + return wallet.installed ? ( + } + iconRight={ + selectedWallet && isConnectError && selectedWallet === wallet ? ( + + ) : undefined + } + onClick={() => { + showWallets(selectedNetwork, wallet) + connect(wallet) + setStep(3) + }} + loading={isConnecting && wallet === pendingWallet} + active={selectedWallet === wallet} + muted={isMuted(selectedNetwork!)} + > + {wallet.title} + + ) : ( + } + iconRight={} + muted={isMuted(selectedNetwork!)} + > + {wallet.title} + + ) + })} + + {view === 'accounts' && ( - <> - - } - rightElement={ - selectedWallet && - 'extensionName' in selectedWallet && - ((selectedWallet.extensionName === 'subwallet-js' && isSubWallet()) || - (selectedWallet.extensionName === 'talisman' && isTalismanWallet())) && ( - - ) - } - > - {connectedType === 'substrate' ? ( - - ) : null} - - + setStep(step === 3 ? 0 : 3)} + title="Step 3: Choose account" + tooltip={scopedNetworks && } + done={!!selectedAddress} + > + {connectedType === 'substrate' ? ( + + ) : null} + )} - + Need help connecting a wallet?{' '} void; showAdvancedAccounts?: boolean }) { + const theme = useTheme() const { substrate: { combinedAccounts, selectAccount, selectedCombinedAccount, selectedAddress }, } = useWallet() @@ -330,37 +268,39 @@ function SubstrateAccounts({ onClose, showAdvancedAccounts }: { onClose: () => v return ( <> - + {combinedAccounts .filter((acc) => showAdvancedAccounts || (!acc.proxies && !acc.multisig)) .map((acc, index) => { const actingAddress = acc.proxies?.at(-1)?.delegator || acc.multisig?.address || acc.signingAccount.address return ( - - } - label={} - onClick={() => { - onClose() - selectAccount( - acc.signingAccount.address, - acc.proxies?.map((p) => p.delegator), - acc.multisig?.address - ) - }} - selected={ - acc === selectedCombinedAccount || - (!selectedCombinedAccount && - selectedAddress === acc.signingAccount.address && - !acc.multisig && - !acc.proxies) - } - proxyRights={acc.proxies?.[0].types - .map((type) => (PROXY_TYPE_LABELS as any)[type] ?? type) - .join(' / ')} - multisig={acc.multisig} - /> + + + } + label={} + onClick={() => { + onClose() + selectAccount( + acc.signingAccount.address, + acc.proxies?.map((p) => p.delegator), + acc.multisig?.address + ) + }} + selected={ + acc === selectedCombinedAccount || + (!selectedCombinedAccount && + selectedAddress === acc.signingAccount.address && + !acc.multisig && + !acc.proxies) + } + proxyRights={acc.proxies?.[0].types + .map((type) => (PROXY_TYPE_LABELS as any)[type] ?? type) + .join(' / ')} + multisig={acc.multisig} + /> + ) })} diff --git a/centrifuge-react/src/components/WalletProvider/utils.ts b/centrifuge-react/src/components/WalletProvider/utils.ts index 7dd17ce59f..e35cf9c9ca 100644 --- a/centrifuge-react/src/components/WalletProvider/utils.ts +++ b/centrifuge-react/src/components/WalletProvider/utils.ts @@ -1,11 +1,11 @@ -import centrifugeLogo from '@centrifuge/fabric/assets/logos/centrifuge.svg' +import { IconCentrifuge } from '@centrifuge/fabric' import { Wallet } from '@subwallet/wallet-connect/types' import * as React from 'react' import { CentrifugeContext, useCentrifugeUtils } from '../CentrifugeProvider/CentrifugeProvider' +import { useWallet } from './WalletProvider' import { EvmChains, getChainInfo } from './evm/chains' import { EvmConnectorMeta } from './evm/connectors' import { Network } from './types' -import { useWallet } from './WalletProvider' export function getNetworkName( network: Network, @@ -37,7 +37,7 @@ export function useGetNetworkIcon() { substrate: { evmChainId }, } = useWallet() return (network: Network) => - network === 'centrifuge' || network === evmChainId ? centrifugeLogo : (evm.chains as any)[network]?.iconUrl ?? '' + network === 'centrifuge' || network === evmChainId ? IconCentrifuge : (evm.chains as any)[network]?.iconUrl ?? '' } export function useNetworkIcon(network: Network) { diff --git a/centrifuge-react/src/hooks/useCentrifugeQuery.ts b/centrifuge-react/src/hooks/useCentrifugeQuery.ts index c7cd5d7b07..5549e5e993 100644 --- a/centrifuge-react/src/hooks/useCentrifugeQuery.ts +++ b/centrifuge-react/src/hooks/useCentrifugeQuery.ts @@ -2,12 +2,12 @@ import Centrifuge from '@centrifuge/centrifuge-js' import * as React from 'react' import { useQuery, useQueryClient } from 'react-query' import { - catchError, - firstValueFrom, MonoTypeOperatorFunction, Observable, - of, ReplaySubject, + catchError, + firstValueFrom, + of, retry, share, timer, @@ -25,7 +25,7 @@ export function useCentrifugeQuery( key: readonly unknown[], queryCallback: (cent: Centrifuge) => Observable, options?: CentrifugeQueryOptions -): [T | null | undefined, Observable | undefined] { +): [T | null | undefined, boolean] { const { suspense, enabled = true } = options || {} const cent = useCentrifuge() const centKey = useCentrifugeKey() @@ -42,7 +42,7 @@ export function useCentrifugeQuery( } ) - const { data: queryData } = useQuery( + const { data: queryData, isLoading } = useQuery( ['queryData', centKey, ...key, !!$source], () => ($source ? firstValueFrom($source) : null), { @@ -73,7 +73,7 @@ export function useCentrifugeQuery( } }, [$source]) - return [queryData, $source] + return [queryData, isLoading] } export function getQuerySource( diff --git a/fabric/src/components/Button/Button.stories.tsx b/fabric/src/components/Button/Button.stories.tsx index 92bbaed450..44dd1a642e 100644 --- a/fabric/src/components/Button/Button.stories.tsx +++ b/fabric/src/components/Button/Button.stories.tsx @@ -68,13 +68,13 @@ AnchorButton.args = { export const WalletButton: WalletButtonStory = (args) => ( - + ) WalletButton.args = { diff --git a/fabric/src/components/Button/IconAction.tsx b/fabric/src/components/Button/IconAction.tsx index 524e851865..a18168615c 100644 --- a/fabric/src/components/Button/IconAction.tsx +++ b/fabric/src/components/Button/IconAction.tsx @@ -1,7 +1,11 @@ import styled, { css } from 'styled-components' +interface IconActionProps { + size?: string +} -export const iconActionStyles = css` - --size: 22px; +export const iconActionStyles = css` + --size: ${({ size }) => size || '22px'}; + --icon-size: calc(var(--size) - 4px); appearance: none; display: block; @@ -16,18 +20,18 @@ export const iconActionStyles = css` cursor: pointer; svg { - display: block; - width: 100%; - height: 100%; + width: var(--icon-size); + height: var(--icon-size); stroke: currentColor; } &:focus-visible, &:hover { - background-color: ${({ theme }) => theme.colors.blueScale[100]}; - color: ${({ theme }) => theme.colors.accentPrimary}; + background-color: ${({ theme }) => theme.colors.yellowScale[50]}; + color: ${({ theme }) => theme.colors.textPrimary}; } ` + export const IconAnchor = styled.a` ${iconActionStyles} ` @@ -37,4 +41,5 @@ export const IconButton = styled.button` ` IconButton.defaultProps = { type: 'button', + size: '22px', } diff --git a/fabric/src/components/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx index 2ced79aab2..bc6a7fe3e7 100644 --- a/fabric/src/components/Button/WalletButton.tsx +++ b/fabric/src/components/Button/WalletButton.tsx @@ -12,10 +12,10 @@ export type WalletButtonProps = Omit< VisualButtonProps & React.ComponentPropsWithoutRef<'button'>, 'variant' | 'iconRight' | 'type' | 'children' | 'icon' > & { + alias?: string connectLabel?: string address?: string displayAddress?: string - alias?: string balance?: string icon?: IconTheme | React.ReactElement } @@ -39,6 +39,7 @@ const IdenticonWrapper = styled(Flex)({ }) export function WalletButton({ + alias, icon = 'polkadot', small = true, disabled, @@ -48,7 +49,6 @@ export function WalletButton({ connectLabel = 'Connect wallet', address, displayAddress = address, - alias, balance, ...buttonProps }: WalletButtonProps) { @@ -69,7 +69,7 @@ export function WalletButton({ loadingMessage={loadingMessage} active={active} > - {address && alias ? ( + {alias ? ( - {displayAddress ? truncate(displayAddress) : connectLabel} + {alias || connectLabel} )} - {address && balance && ( + {alias && balance && ( {balance} diff --git a/fabric/src/components/Dialog/index.tsx b/fabric/src/components/Dialog/index.tsx index d90f24b316..734cf807fd 100644 --- a/fabric/src/components/Dialog/index.tsx +++ b/fabric/src/components/Dialog/index.tsx @@ -70,11 +70,21 @@ function DialogInner({ children, isOpen, onClose, width = 'dialog', icon: IconCo {IconComp && (isComponent(IconComp) ? : IconComp)} - {typeof title === 'string' ? {title} : title} + {typeof title === 'string' ? ( + + {title} + + ) : ( + title + )}