PE-7246: feat(logo)

lib/app_shell.dart

@@ -2,6 +2,7 @@ import 'package:ardrive/blocs/prompt_to_snapshot/prompt_to_snapshot_bloc.dart';
 import 'package:ardrive/blocs/prompt_to_snapshot/prompt_to_snapshot_event.dart';
 import 'package:ardrive/components/profile_card.dart';
 import 'package:ardrive/components/side_bar.dart';
+import 'package:ardrive/components/topbar/help_button.dart';
 import 'package:ardrive/drive_explorer/multi_thumbnail_creation/multi_thumbnail_creation_warn_modal.dart';
 import 'package:ardrive/misc/misc.dart';
 import 'package:ardrive/pages/drive_detail/components/hover_widget.dart';
@@ -371,15 +372,13 @@ class MobileAppBar extends StatelessWidget implements PreferredSizeWidget {
             const GlobalHideToggleButton(),
             const SizedBox(width: 8),
             const SyncButton(),
+            const SizedBox(width: 8),
+            if (AppPlatform.isMobileWeb()) ...[
+              const HelpButtonTopBar(),
+            ],
             const SizedBox(
               width: 24,
             ),
-            if (AppPlatform.isMobileWeb()) ...[
-              const HelpButton(),
-              const SizedBox(
-                width: 24,
-              ),
-            ],
             const Padding(
               padding: EdgeInsets.only(right: 12.0),
               child: ProfileCard(),

lib/arns/domain/arns_repository.dart

@@ -32,7 +32,8 @@ abstract class ARNSRepository {
   Future<void> saveAllFilesWithAssignedNames();
   Future<List<ArnsRecord>> getActiveARNSRecordsForFile(String fileId);
   Future<void> waitForARNSRecordsToUpdate();
-  Future<String> getPrimaryName(String address, {bool update = false});
+  Future<PrimaryNameDetails> getPrimaryName(String address,
+      {bool update = false});
 
   factory ARNSRepository({
     required ArioSDK sdk,
@@ -89,7 +90,7 @@ class _ARNSRepository implements ARNSRepository {
   }
 
   final Map<String, Map<String, ARNSUndername>> _cachedUndernames = {};
-  String? _cachedPrimaryName;
+  PrimaryNameDetails? _cachedPrimaryName;
 
   @override
   Future<void> setUndernamesToFile({
@@ -375,14 +376,15 @@ class _ARNSRepository implements ARNSRepository {
   }
 
   @override
-  Future<String> getPrimaryName(String address, {bool update = false}) async {
+  Future<PrimaryNameDetails> getPrimaryName(String address,
+      {bool update = false}) async {
     logger.d('Getting primary name for address: $address');
 
     if (!update && _cachedPrimaryName != null) {
       return _cachedPrimaryName!;
     }
 
-    final primaryName = await _sdk.getPrimaryName(address);
+    final primaryName = await _sdk.getPrimaryNameDetails(address);
 
     logger.d('Primary name: $primaryName');
 

lib/components/app_top_bar.dart

@@ -149,9 +149,7 @@ class SyncButton extends StatelessWidget {
             ),
           ),
         ],
-        child: ArDriveIcons.refresh(
-          color: colorTokens.textMid,
-        ),
+        child: ArDriveIcons.refresh(color: colorTokens.textMid),
       ),
     );
   }

lib/components/profile_card.dart

@@ -548,47 +548,12 @@ class _ProfileCardState extends State<ProfileCard> {
   }
 
   Widget _buildProfileCardHeader(BuildContext context, String walletAddress) {
-    final typography = ArDriveTypographyNew.of(context);
-    return BlocBuilder<ProfileNameBloc, ProfileNameState>(
-      builder: (context, state) {
-        final primaryName = state is ProfileNameLoaded
-            ? state.primaryName
-            : truncateString(walletAddress, offsetStart: 2, offsetEnd: 2);
-        double maxWidth = 100;
-
-        if (state is ProfileNameLoaded) {
-          maxWidth = primaryName.length * 15;
-
-          if (maxWidth < 100) {
-            maxWidth = 100;
-          }
-
-          if (maxWidth > 200) {
-            maxWidth = 200;
-          }
-        }
-
-        String? tooltipMessage;
-
-        if (primaryName.length > 20) {
-          tooltipMessage = primaryName;
-        }
-
-        return ArDriveTooltip(
-          message: tooltipMessage ?? '',
-          child: ArDriveButtonNew(
-            text: primaryName,
-            typography: typography,
-            variant: ButtonVariant.outline,
-            maxWidth: maxWidth,
-            maxHeight: 40,
-            onPressed: () {
-              setState(() {
-                _showProfileCard = !_showProfileCard;
-              });
-            },
-          ),
-        );
+    return ProfileCardHeader(
+      walletAddress: walletAddress,
+      onPressed: () {
+        setState(() {
+          _showProfileCard = !_showProfileCard;
+        });
       },
     );
   }
@@ -695,3 +660,149 @@ class _ProfileMenuAccordionItem extends StatelessWidget {
     );
   }
 }
+
+class ProfileCardHeader extends StatelessWidget {
+  final String walletAddress;
+  final VoidCallback onPressed;
+
+  const ProfileCardHeader({
+    super.key,
+    required this.walletAddress,
+    required this.onPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final typography = ArDriveTypographyNew.of(context);
+
+    return BlocBuilder<ProfileNameBloc, ProfileNameState>(
+      builder: (context, state) {
+        final primaryName = _getPrimaryName(state, walletAddress);
+        final maxWidth = _calculateMaxWidth(primaryName, state);
+        final truncatedWalletAddress =
+            _getTruncatedWalletAddress(primaryName, walletAddress);
+        final tooltipMessage = primaryName.length > 20 ? primaryName : null;
+
+        return ArDriveTooltip(
+          message: tooltipMessage ?? '',
+          child: ArDriveButtonNew(
+            text: primaryName,
+            typography: typography,
+            variant: ButtonVariant.outline,
+            content: state is ProfileNameLoaded
+                ? _buildLoadedContent(context, state, primaryName,
+                    truncatedWalletAddress, maxWidth)
+                : null,
+            maxWidth: maxWidth,
+            maxHeight: state is ProfileNameLoaded ? 60 : 46,
+            onPressed: onPressed,
+          ),
+        );
+      },
+    );
+  }
+
+  String _getPrimaryName(ProfileNameState state, String walletAddress) {
+    if (state is ProfileNameLoaded) {
+      return state.primaryNameDetails.primaryName;
+    }
+    return truncateString(walletAddress, offsetStart: 2, offsetEnd: 2);
+  }
+
+  double _calculateMaxWidth(String primaryName, ProfileNameState state) {
+    if (state is! ProfileNameLoaded) {
+      return 100;
+    }
+
+    double width = primaryName.length * 15;
+    return width.clamp(110, 220);
+  }
+
+  String _getTruncatedWalletAddress(String primaryName, String walletAddress) {
+    if (primaryName.length > 20) {
+      return truncateString(walletAddress, offsetStart: 10, offsetEnd: 10);
+    }
+    return truncateString(
+      walletAddress,
+      offsetStart: primaryName.length ~/ 2,
+      offsetEnd: primaryName.length ~/ 2,
+    );
+  }
+
+  Widget? _buildProfileIcon(ProfileNameLoaded state) {
+    if (state.primaryNameDetails.logo == null) {
+      return null;
+    }
+
+    return Padding(
+      padding: const EdgeInsets.only(right: 8.0),
+      child: 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 _buildLoadedContent(
+    BuildContext context,
+    ProfileNameLoaded state,
+    String primaryName,
+    String truncatedWalletAddress,
+    double maxWidth,
+  ) {
+    final typography = ArDriveTypographyNew.of(context);
+    final colorTokens = ArDriveTheme.of(context).themeData.colorTokens;
+    final icon = _buildProfileIcon(state);
+
+    return SizedBox(
+      height: 46,
+      width: maxWidth,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        mainAxisSize: MainAxisSize.max,
+        children: [
+          if (icon != null) icon,
+          Expanded(
+            child: SizedBox(
+              height: 46,
+              width: maxWidth,
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                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,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/components/side_bar.dart

@@ -518,21 +518,6 @@ class DriveListTile extends StatelessWidget {
   }
 }
 
-class HelpButton extends StatelessWidget {
-  const HelpButton({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    return ArDriveIconButton(
-      tooltip: appLocalizationsOf(context).help,
-      icon: ArDriveIcons.question(),
-      onPressed: () {
-        openUrl(url: Resources.helpLink);
-      },
-    );
-  }
-}
-
 Future<void> shareLogs({
   required BuildContext context,
 }) async {

lib/components/topbar/help_button.dart

@@ -14,6 +14,7 @@ class HelpButtonTopBar extends StatelessWidget {
   Widget build(BuildContext context) {
     final colorTokens = ArDriveTheme.of(context).themeData.colorTokens;
     return HoverWidget(
+      tooltip: appLocalizationsOf(context).help,
       child: ArDriveDropdown(
         anchor: const Aligned(
           follower: Alignment.topRight,
@@ -53,13 +54,7 @@ class HelpButtonTopBar extends StatelessWidget {
             ),
           ),
         ],
-        child: ArDriveIconButton(
-          icon: ArDriveIcons.question(
-            size: 20,
-            color: colorTokens.textMid,
-          ),
-          tooltip: appLocalizationsOf(context).help,
-        ),
+        child: ArDriveIcons.question(color: colorTokens.textMid),
       ),
     );
   }

lib/user/name/presentation/bloc/profile_name_bloc.dart

@@ -44,6 +44,13 @@ class ProfileNameBloc extends Bloc<ProfileNameEvent, ProfileNameState> {
       final primaryName =
           await _arnsRepository.getPrimaryName(walletAddress, update: refresh);
 
+      if (_auth.currentUser.walletAddress != walletAddress) {
+        // A user can load profile name and log out while fetching this request. Then log in again. We should not emit a profile name loaded state in this case.
+        logger.d('User logged out while fetching profile name');
+
+        return;
+      }
+
       emit(ProfileNameLoaded(primaryName, walletAddress));
     } catch (e) {
       if (e is PrimaryNameNotFoundException) {

lib/user/name/presentation/bloc/profile_name_state.dart

@@ -24,15 +24,15 @@ final class ProfileNameLoading extends ProfileNameState {
 }
 
 final class ProfileNameLoaded extends ProfileNameState {
-  final String primaryName;
+  final PrimaryNameDetails primaryNameDetails;
 
-  const ProfileNameLoaded(this.primaryName, this.walletAddress);
+  const ProfileNameLoaded(this.primaryNameDetails, this.walletAddress);
 
   @override
   final String walletAddress;
 
   @override
-  List<Object> get props => [primaryName, walletAddress];
+  List<Object> get props => [primaryNameDetails, walletAddress];
 }
 
 // if fails to load primary name, show current wallet address