From 3fc122c4c5ff2f639eb301bb693a6d9672f97c16 Mon Sep 17 00:00:00 2001
From: Thiago Carvalho <32248947+thiagocarvalhodev@users.noreply.github.com>
Date: Tue, 10 Dec 2024 17:55:56 -0300
Subject: [PATCH] Update profile_card.dart

---
 lib/components/profile_card.dart | 82 ++++++++++++++++++++++++--------
 1 file changed, 61 insertions(+), 21 deletions(-)

diff --git a/lib/components/profile_card.dart b/lib/components/profile_card.dart
index 64a7ee181..22dac54e2 100644
--- a/lib/components/profile_card.dart
+++ b/lib/components/profile_card.dart
@@ -559,14 +559,23 @@ class _ProfileCardState extends State<ProfileCard> {
         if (state is ProfileNameLoaded) {
           maxWidth = primaryName.length * 15;
 
-          if (maxWidth < 100) {
-            maxWidth = 100;
+          if (maxWidth < 110) {
+            maxWidth = 110;
           }
 
           if (maxWidth > 200) {
             maxWidth = 200;
           }
         }
+        String truncatedWalletAddress;
+        if (primaryName.length > 20) {
+          truncatedWalletAddress =
+              truncateString(walletAddress, offsetStart: 10, offsetEnd: 10);
+        } else {
+          truncatedWalletAddress = truncateString(walletAddress,
+              offsetStart: primaryName.length ~/ 2,
+              offsetEnd: primaryName.length ~/ 2);
+        }
 
         String? tooltipMessage;
 
@@ -578,33 +587,64 @@ class _ProfileCardState extends State<ProfileCard> {
 
         if (state is ProfileNameLoaded) {
           if (state.primaryNameDetails.logo != null) {
-            icon = ArDriveImage(
-              image: NetworkImage(
-                  'https://arweave.net/${state.primaryNameDetails.logo}'),
-              width: 24,
-              height: 24,
+            icon = ClipOval(
+              child: ArDriveImage(
+                image: NetworkImage(
+                    'https://arweave.net/${state.primaryNameDetails.logo}'),
+                width: 28,
+                height: 28,
+                fit: BoxFit.cover,
+                errorBuilder: (context, error, stackTrace) {
+                  return const SizedBox.shrink();
+                },
+              ),
             );
           }
         }
 
         Widget? content;
 
+        final colorTokens = ArDriveTheme.of(context).themeData.colorTokens;
         if (icon != null) {
-          content = Row(
-            children: [
-              icon,
-              const SizedBox(width: 8),
-              Flexible(
-                child: Text(
-                  primaryName,
-                  overflow: TextOverflow.ellipsis,
-                  maxLines: 1,
-                  style: typography.paragraphLarge(
-                    fontWeight: ArFontWeight.semiBold,
+          content = SizedBox(
+            height: 46,
+            width: maxWidth,
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              mainAxisSize: MainAxisSize.max,
+              children: [
+                icon,
+                Expanded(
+                  child: SizedBox(
+                    height: 46,
+                    width: maxWidth,
+                    child: Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Text(
+                          primaryName,
+                          overflow: TextOverflow.ellipsis,
+                          maxLines: 1,
+                          style: typography.paragraphLarge(
+                            fontWeight: ArFontWeight.semiBold,
+                            color: colorTokens.textHigh,
+                          ),
+                        ),
+                        Text(
+                          truncatedWalletAddress,
+                          overflow: TextOverflow.clip,
+                          maxLines: 1,
+                          style: typography.paragraphSmall(
+                            fontWeight: ArFontWeight.book,
+                            color: colorTokens.textLow,
+                          ),
+                        ),
+                      ],
+                    ),
                   ),
                 ),
-              ),
-            ],
+              ],
+            ),
           );
         }
 
@@ -616,7 +656,7 @@ class _ProfileCardState extends State<ProfileCard> {
             variant: ButtonVariant.outline,
             content: content,
             maxWidth: maxWidth,
-            maxHeight: 40,
+            maxHeight: content != null ? 60 : 46,
             onPressed: () {
               setState(() {
                 _showProfileCard = !_showProfileCard;