Add alias back to btn

centrifuge · Nov 14, 2024 · 3aab71e · 3aab71e
1 parent c31d50c
commit 3aab71e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx b/centrifuge-react/src/components/WalletMenu/WalletMenu.tsx
@@ -55,6 +55,7 @@ function ConnectedMenu({ menuItems }: WalletMenuProps) {
   const {
     evm,
     connectedType,
+    substrate,
     disconnect,
     showWallets,
     showAccounts,
@@ -85,7 +86,13 @@ function ConnectedMenu({ menuItems }: WalletMenuProps) {
         <Stack ref={ref} width="100%" alignItems="stretch">
           <WalletButton
             active={state.isOpen}
-            title={wallet?.title || ''}
+            alias={
+              connectedType === 'evm'
+                ? ensName ?? undefined
+                : !substrate.selectedProxies
+                ? substrate.selectedAccount?.name
+                : undefined
+            }
             address={address}
             balance={balance ? formatBalanceAbbreviated(balance, symbol) : undefined}
             icon={

diff --git a/fabric/src/components/Button/Button.stories.tsx b/fabric/src/components/Button/Button.stories.tsx
@@ -68,7 +68,12 @@ AnchorButton.args = {
 export const WalletButton: WalletButtonStory = (args) => (
   <Grid columns={3} gap={3} justifyItems="stretch" equalColumns>
     <WalletButtonComp {...args} />
-    <WalletButtonComp {...args} address="kAMx1vYzEvumnpGcd6a5JL6RPE2oerbr6pZszKPFPZby2gLLF" balance="100 kUSD" />
+    <WalletButtonComp
+      {...args}
+      address="kAMx1vYzEvumnpGcd6a5JL6RPE2oerbr6pZszKPFPZby2gLLF"
+      balance="100 kUSD"
+      alias="Alice"
+    />
     <WalletButtonComp {...args} address="kAMx1vYzEvumnpGcd6a5JL6RPE2oerbr6pZszKPFPZby2gLLF" balance="100 kUSD" />
   </Grid>
 )

diff --git a/fabric/src/components/Button/WalletButton.tsx b/fabric/src/components/Button/WalletButton.tsx
@@ -12,6 +12,7 @@ export type WalletButtonProps = Omit<
   VisualButtonProps & React.ComponentPropsWithoutRef<'button'>,
   'variant' | 'iconRight' | 'type' | 'children' | 'icon'
 > & {
+  alias?: string
   connectLabel?: string
   address?: string
   displayAddress?: string
@@ -38,6 +39,7 @@ const IdenticonWrapper = styled(Flex)({
 })
 
 export function WalletButton({
+  alias,
   icon = 'polkadot',
   small = true,
   disabled,
@@ -48,7 +50,6 @@ export function WalletButton({
   address,
   displayAddress = address,
   balance,
-  title,
   ...buttonProps
 }: WalletButtonProps) {
   return (
@@ -68,7 +69,7 @@ export function WalletButton({
         loadingMessage={loadingMessage}
         active={active}
       >
-        {title ? (
+        {alias ? (
           <Box position="relative" flex="1 1 auto">
             <Shelf position="absolute" top="0" bottom="0" left="0" width="100%" m="auto" height="30px">
               <Text
@@ -80,7 +81,7 @@ export function WalletButton({
                   textOverflow: 'ellipsis',
                 }}
               >
-                {title}
+                {alias}
               </Text>
             </Shelf>
           </Box>
@@ -91,10 +92,10 @@ export function WalletButton({
             fontWeight={500}
             style={{ margin: address ? 0 : 'auto' }}
           >
-            {title || connectLabel}
+            {alias || connectLabel}
           </Text>
         )}
-        {title && balance && (
+        {alias && balance && (
           <Text variant="body3" color="textInverted" style={{ marginLeft: 'auto' }}>
             {balance}
           </Text>