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 1/9] 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 { 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 { 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 { variant: ButtonVariant.outline, content: content, maxWidth: maxWidth, - maxHeight: 40, + maxHeight: content != null ? 60 : 46, onPressed: () { setState(() { _showProfileCard = !_showProfileCard; From 6e73593d52e1b100f7cd0181d51a4ef4c7948d5a Mon Sep 17 00:00:00 2001 From: Thiago Carvalho <32248947+thiagocarvalhodev@users.noreply.github.com> Date: Tue, 10 Dec 2024 18:02:13 -0300 Subject: [PATCH 2/9] fix tests --- .../lib/src/models/primary_name_details.dart | 9 +++++++-- test/arns/domain/arns_repository_test.dart | 14 ++++++++------ .../presentation/bloc/profile_name_bloc_test.dart | 8 ++++---- 3 files changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/ario_sdk/lib/src/models/primary_name_details.dart b/packages/ario_sdk/lib/src/models/primary_name_details.dart index b42426184..1372aadc6 100644 --- a/packages/ario_sdk/lib/src/models/primary_name_details.dart +++ b/packages/ario_sdk/lib/src/models/primary_name_details.dart @@ -1,11 +1,16 @@ -class PrimaryNameDetails { +import 'package:equatable/equatable.dart'; + +class PrimaryNameDetails extends Equatable { final String primaryName; final String? logo; final String? recordId; - PrimaryNameDetails({ + const PrimaryNameDetails({ required this.primaryName, this.logo, this.recordId, }); + + @override + List get props => [primaryName, logo, recordId]; } diff --git a/test/arns/domain/arns_repository_test.dart b/test/arns/domain/arns_repository_test.dart index 41c8357d7..5901977ae 100644 --- a/test/arns/domain/arns_repository_test.dart +++ b/test/arns/domain/arns_repository_test.dart @@ -73,7 +73,7 @@ void main() { test('clears cached undernames when user logs out', () async { // Setup initial state with cached primary name when(() => sdk.getPrimaryNameDetails(testAddress)) - .thenAnswer((_) async => PrimaryNameDetails( + .thenAnswer((_) async => const PrimaryNameDetails( primaryName: testPrimaryName, logo: null, )); @@ -101,20 +101,21 @@ void main() { () async { // First call to populate cache when(() => sdk.getPrimaryNameDetails(testAddress)) - .thenAnswer((_) async => PrimaryNameDetails( + .thenAnswer((_) async => const PrimaryNameDetails( primaryName: testPrimaryName, logo: null, + recordId: null, )); final result1 = await arnsRepository.getPrimaryName(testAddress); - expect(result1, equals(testPrimaryName)); + expect(result1, isA()); // Verify SDK was called once verify(() => sdk.getPrimaryNameDetails(testAddress)).called(1); // Second call should use cache final result2 = await arnsRepository.getPrimaryName(testAddress); - expect(result2, equals(testPrimaryName)); + expect(result2, isA()); // Verify SDK wasn't called again verifyNoMoreInteractions(sdk); @@ -122,9 +123,10 @@ void main() { test('bypasses cache when update is true', () async { when(() => sdk.getPrimaryNameDetails(testAddress)) - .thenAnswer((_) async => PrimaryNameDetails( + .thenAnswer((_) async => const PrimaryNameDetails( primaryName: testPrimaryName, logo: null, + recordId: null, )); // First call to populate cache @@ -136,7 +138,7 @@ void main() { update: true, ); - expect(result, equals(testPrimaryName)); + expect(result, isA()); // Verify SDK was called twice verify(() => sdk.getPrimaryNameDetails(testAddress)).called(2); }); diff --git a/test/user/name/presentation/bloc/profile_name_bloc_test.dart b/test/user/name/presentation/bloc/profile_name_bloc_test.dart index 809eaf05c..3cc72e5b8 100644 --- a/test/user/name/presentation/bloc/profile_name_bloc_test.dart +++ b/test/user/name/presentation/bloc/profile_name_bloc_test.dart @@ -35,7 +35,7 @@ void main() { build: () { when(() => arnsRepository.getPrimaryName(testWalletAddress, update: false)) - .thenAnswer((_) async => PrimaryNameDetails( + .thenAnswer((_) async => const PrimaryNameDetails( primaryName: testPrimaryName, logo: null, )); @@ -44,7 +44,7 @@ void main() { act: (bloc) => bloc.add(LoadProfileName()), expect: () => [ const ProfileNameLoading(testWalletAddress), - ProfileNameLoaded( + const ProfileNameLoaded( PrimaryNameDetails( primaryName: testPrimaryName, logo: null, @@ -59,7 +59,7 @@ void main() { build: () { when(() => arnsRepository.getPrimaryName(testWalletAddress, update: true)) - .thenAnswer((_) async => PrimaryNameDetails( + .thenAnswer((_) async => const PrimaryNameDetails( primaryName: testPrimaryName, logo: null, )); @@ -67,7 +67,7 @@ void main() { }, act: (bloc) => bloc.add(RefreshProfileName()), expect: () => [ - ProfileNameLoaded( + const ProfileNameLoaded( PrimaryNameDetails( primaryName: testPrimaryName, logo: null, From 81e7906bbbf4db0c05138101a73600f19f26b544 Mon Sep 17 00:00:00 2001 From: Thiago Carvalho <32248947+thiagocarvalhodev@users.noreply.github.com> Date: Wed, 11 Dec 2024 10:12:23 -0300 Subject: [PATCH 3/9] Update profile_card.dart --- lib/components/profile_card.dart | 55 +++++++++++++++++--------------- 1 file changed, 30 insertions(+), 25 deletions(-) diff --git a/lib/components/profile_card.dart b/lib/components/profile_card.dart index 22dac54e2..9950710ff 100644 --- a/lib/components/profile_card.dart +++ b/lib/components/profile_card.dart @@ -605,7 +605,7 @@ class _ProfileCardState extends State { Widget? content; final colorTokens = ArDriveTheme.of(context).themeData.colorTokens; - if (icon != null) { + if (state is ProfileNameLoaded) { content = SizedBox( height: 46, width: maxWidth, @@ -613,33 +613,38 @@ class _ProfileCardState extends State { mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisSize: MainAxisSize.max, children: [ - icon, + if (icon != null) ...[ + 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, + child: Padding( + padding: const EdgeInsets.only(left: 8.0), + 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, + Text( + truncatedWalletAddress, + overflow: TextOverflow.clip, + maxLines: 1, + style: typography.paragraphSmall( + fontWeight: ArFontWeight.book, + color: colorTokens.textLow, + ), ), - ), - ], + ], + ), ), ), ), From 6d238630cda54041a079349447a9f9c516a7b33d Mon Sep 17 00:00:00 2001 From: Thiago Carvalho <32248947+thiagocarvalhodev@users.noreply.github.com> Date: Wed, 11 Dec 2024 10:15:52 -0300 Subject: [PATCH 4/9] Update profile_card.dart --- lib/components/profile_card.dart | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/components/profile_card.dart b/lib/components/profile_card.dart index 9950710ff..a2d4b4c50 100644 --- a/lib/components/profile_card.dart +++ b/lib/components/profile_card.dart @@ -618,7 +618,9 @@ class _ProfileCardState extends State { ], Expanded( child: Padding( - padding: const EdgeInsets.only(left: 8.0), + padding: icon != null + ? const EdgeInsets.only(left: 8.0) + : const EdgeInsets.all(0), child: SizedBox( height: 46, width: maxWidth, From d841efd6580d6de2f3b2d200e1eebc6489e7f428 Mon Sep 17 00:00:00 2001 From: Thiago Carvalho <32248947+thiagocarvalhodev@users.noreply.github.com> Date: Wed, 11 Dec 2024 10:23:19 -0300 Subject: [PATCH 5/9] Update profile_card.dart --- lib/components/profile_card.dart | 74 ++++++++++++++++---------------- 1 file changed, 36 insertions(+), 38 deletions(-) diff --git a/lib/components/profile_card.dart b/lib/components/profile_card.dart index a2d4b4c50..f86856ab9 100644 --- a/lib/components/profile_card.dart +++ b/lib/components/profile_card.dart @@ -587,16 +587,19 @@ class _ProfileCardState extends State { if (state is ProfileNameLoaded) { if (state.primaryNameDetails.logo != null) { - 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(); - }, + icon = Padding( + padding: const EdgeInsets.only(right: 4.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(); + }, + ), ), ); } @@ -617,36 +620,31 @@ class _ProfileCardState extends State { icon, ], Expanded( - child: Padding( - padding: icon != null - ? const EdgeInsets.only(left: 8.0) - : const EdgeInsets.all(0), - 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, - ), + 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, - ), + ), + Text( + truncatedWalletAddress, + overflow: TextOverflow.clip, + maxLines: 1, + style: typography.paragraphSmall( + fontWeight: ArFontWeight.book, + color: colorTokens.textLow, ), - ], - ), + ), + ], ), ), ), From 61c9873e0c3314245f54c024bde756ed2b665cc9 Mon Sep 17 00:00:00 2001 From: Thiago Carvalho <32248947+thiagocarvalhodev@users.noreply.github.com> Date: Wed, 11 Dec 2024 12:02:01 -0300 Subject: [PATCH 6/9] Update profile_name_bloc.dart --- lib/user/name/presentation/bloc/profile_name_bloc.dart | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/lib/user/name/presentation/bloc/profile_name_bloc.dart b/lib/user/name/presentation/bloc/profile_name_bloc.dart index 3683fcb0b..38b3ec272 100644 --- a/lib/user/name/presentation/bloc/profile_name_bloc.dart +++ b/lib/user/name/presentation/bloc/profile_name_bloc.dart @@ -44,6 +44,13 @@ class ProfileNameBloc extends Bloc { 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) { From 43eef1197a938bbdf44e82829a1b0fdfcef53441 Mon Sep 17 00:00:00 2001 From: Thiago Carvalho <32248947+thiagocarvalhodev@users.noreply.github.com> Date: Wed, 11 Dec 2024 15:35:46 -0300 Subject: [PATCH 7/9] feat(logo) - add new icons - add spacing on profile logo - refactor profile card header component --- lib/app_shell.dart | 11 +- lib/components/app_top_bar.dart | 4 +- lib/components/profile_card.dart | 273 ++++++++++-------- lib/components/side_bar.dart | 15 - lib/components/topbar/help_button.dart | 9 +- .../ardrive_ui/assets/fonts/ArDriveIcons.ttf | Bin 26152 -> 27460 bytes packages/ardrive_ui/assets/fonts/config.json | 112 +++++-- .../styles/icons/ar_drive_icons_icons.dart | 11 +- .../lib/src/styles/icons/icons.dart | 8 +- 9 files changed, 258 insertions(+), 185 deletions(-) diff --git a/lib/app_shell.dart b/lib/app_shell.dart index b759fdc55..438f590f6 100644 --- a/lib/app_shell.dart +++ b/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(), diff --git a/lib/components/app_top_bar.dart b/lib/components/app_top_bar.dart index 17db89793..5743a637d 100644 --- a/lib/components/app_top_bar.dart +++ b/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), ), ); } diff --git a/lib/components/profile_card.dart b/lib/components/profile_card.dart index f86856ab9..5a17ace38 100644 --- a/lib/components/profile_card.dart +++ b/lib/components/profile_card.dart @@ -548,127 +548,12 @@ class _ProfileCardState extends State { } Widget _buildProfileCardHeader(BuildContext context, String walletAddress) { - final typography = ArDriveTypographyNew.of(context); - return BlocBuilder( - builder: (context, state) { - final primaryName = state is ProfileNameLoaded - ? state.primaryNameDetails.primaryName - : truncateString(walletAddress, offsetStart: 2, offsetEnd: 2); - double maxWidth = 100; - - if (state is ProfileNameLoaded) { - maxWidth = primaryName.length * 15; - - 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; - - if (primaryName.length > 20) { - tooltipMessage = primaryName; - } - - Widget? icon; - - if (state is ProfileNameLoaded) { - if (state.primaryNameDetails.logo != null) { - icon = Padding( - padding: const EdgeInsets.only(right: 4.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? content; - - final colorTokens = ArDriveTheme.of(context).themeData.colorTokens; - if (state is ProfileNameLoaded) { - content = 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, - 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, - ), - ), - ], - ), - ), - ), - ], - ), - ); - } - - return ArDriveTooltip( - message: tooltipMessage ?? '', - child: ArDriveButtonNew( - text: primaryName, - typography: typography, - variant: ButtonVariant.outline, - content: content, - maxWidth: maxWidth, - maxHeight: content != null ? 60 : 46, - onPressed: () { - setState(() { - _showProfileCard = !_showProfileCard; - }); - }, - ), - ); + return ProfileCardHeader( + walletAddress: walletAddress, + onPressed: () { + setState(() { + _showProfileCard = !_showProfileCard; + }); }, ); } @@ -775,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( + 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, 200); + } + + 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: 16.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, + ), + ), + ], + ), + ), + ), + ], + ), + ); + } +} diff --git a/lib/components/side_bar.dart b/lib/components/side_bar.dart index 55908179b..8d42f92f0 100644 --- a/lib/components/side_bar.dart +++ b/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 shareLogs({ required BuildContext context, }) async { diff --git a/lib/components/topbar/help_button.dart b/lib/components/topbar/help_button.dart index c8a2cd5db..aa6cd57c5 100644 --- a/lib/components/topbar/help_button.dart +++ b/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), ), ); } diff --git a/packages/ardrive_ui/assets/fonts/ArDriveIcons.ttf b/packages/ardrive_ui/assets/fonts/ArDriveIcons.ttf index a444ac7c477e08fcaa2b3ca94d89cc94c0207d48..d0900a5ffdeac1d6ef8cac7f724aa9fc0768e7da 100644 GIT binary patch delta 1546 zcmZ8hTWs4@82*p#*lFrq+{SjAbh$XK-DXW1r@54LYP5BubX%vY9c|Y2vaHSMM4NPJ z(Yn24Vmu6l*dV+iU}!^v4I!i!35fyI7$9yBdqG0u0SN?of(L})fvx;bf~H~X%lR+g z|DSWdbDX!nA-BIHmxATL0Lb$IFuAajTfHq@dL4kC0bnmYv3%yly-z;)1;BC@AbWEu zpIZ!N4}6B)9}&qV3~(2j4B9sk9ZM_g8-=@Q0r?rRv0PlpegDO$F99^642uD9^VO!eIMHb51s*}BzeVTLWZQF)hszj+#t!VJt}U$%0J`MYwCX}0qQi&?I50cJNh zOn2$>IJQ9muBO@m97ekVcpU8pU=r;HU<&PQ9bk+{>HuS$t^G@RhFKd?BIJ%Jy1VuC&Zos=sC)i0(6*OoSU9!lRr2On%8$#NAgZ zS4-u?-3QB(MQCdix)e#W_*=Z8`_Bq4m(tdTJ2wGre}voLu5Et+=AnS6DmgjADrz!A zjNK;UC_*aP7n4y7P7T(C;aJg$x=3AY z@J)(Nkqh>KC0f&R+Tj%>#v{0_NH%2Wngk2?ro+x!6CDm8?+BDVypQ_Bs_^#&-W9Z- z*_jONY41S|1Dyls`EON2+lVUjPT3t(#=4J;hUE+u4VrClSj@Kl34`fZDaxZr6jeWz z8rL2;&-xr42`g*&`*}~mZhUUr8}vNA4+dZzbyRIcmVBffA)0F39^=KUG>C3pkG^D0 zLyX&qmtag!rZB6cNUcU~ts=-8qG^~NBoS1N)9u7aHahiUr7YF@VQGX=UpxFf+r)F6 zi^~;P=8pB3HNM$S?@(H3-qPd?kM5t!9^xzQ8R*fAIoRqnB$A1)- zc|aj%(V%d?|26M$H`DF(AZznEC?#J-SlS3&mSi{H<0_|qJ@5OR_c`ymd16NoELFSq4X`Z$9>1nWPOqEC z0jVFbdxPPXnfvb1cfdIY3{`}t)qwl#BuKNbL`#T_{B5~|>Pw<7q{Wse<5YoBhK0hq zUrm;W$#EQ#nbp+g2-8?Q-BnOuGp}mXSG`q@X<#BoOPeD4V(j*LwG~h)AaCqk)^_>8 z#DhS*E%`B7+WCn>iIao3dei@}xmmeg8l=7eHsR6{IiFF@78o~EY@hAgDh)+yX>|V1 z*!TeVaD^vwIe>!?a<5hYW<}bGQ=B7XWTguU%xEFg5)0zy3&5bCwS2&rNL;Uz4f81Ihb;xAW^YtFUjZgpqsi_8OOy5Dqr@9gP| jDVh0<>`cat21g|0ajvhdM2$xErG|jMG#}R0fcV`Hi%o<; diff --git a/packages/ardrive_ui/assets/fonts/config.json b/packages/ardrive_ui/assets/fonts/config.json index 4497d617f..1d8796d50 100644 --- a/packages/ardrive_ui/assets/fonts/config.json +++ b/packages/ardrive_ui/assets/fonts/config.json @@ -860,34 +860,6 @@ "detach" ] }, - { - "uid": "f0b33eebf851e9ceaa43332162541dea", - "css": "manifest-icon-flattened", - "code": 59457, - "src": "custom_icons", - "selected": true, - "svg": { - "path": "M533 167Q575 167 604 196T633 267V333Q633 374 604 403.5T533 433V467H633Q673 467 702 494T733 561V567Q775 567 804 596T833 667V733Q833 774 804 803.5T733 833H667Q626 833 596.5 803.5T567 733V667Q567 625 596.5 596T667 567Q667 554 658.5 544.5T637 534L367 533Q354 533 345 541.5T334 563L333 567Q375 567 404 596T433 667V733Q433 774 404 803.5T333 833H267Q226 833 196.5 803.5T167 733V667Q167 625 196.5 596T267 567Q267 527 294 498T361 467H467V433Q426 433 396.5 403.5T367 333V267Q367 225 396.5 196T467 167H533ZM533 367Q547 367 557 357T567 333V267Q567 253 557 243T533 233H467Q453 233 443 243T433 267V333Q433 347 443 357T467 367H533ZM667 633Q653 633 643 643T633 667V733Q633 747 643 757T667 767H733Q747 767 757 757T767 733V667Q767 653 757 643T733 633H667ZM333 633H267Q253 633 243 643T233 667V733Q233 747 243 757T267 767H333Q347 767 357 757T367 733V667Q367 653 357 643T333 633Z", - "width": 1000 - }, - "search": [ - "manifest-icon-flattened" - ] - }, - { - "uid": "9b1898b8e7a54bf8e7ba248adc7a6c36", - "css": "download-2", - "code": 59458, - "src": "custom_icons", - "selected": true, - "svg": { - "path": "M412 533V529 59Q412 34 429 17T470.5 0 512 17 529 59V530L671 423Q691 409 715 412.5T753.5 435 764.5 478.5 741 518L506 694Q491 706 472 706T437 695L201 529Q182 516 177.5 492T187 448 225 423.5 269 433H270ZM0 823V941Q0 966 17 983T59 1000H882Q907 1000 924 983T941 941V823Q941 799 924 782T882.5 765 841 782 824 823V882H118V823Q118 799 100.5 782T58.5 765 17 782 0 823Z", - "width": 941 - }, - "search": [ - "download-2" - ] - }, { "uid": "d5f4abd6403ef3f4708520042a0d6aab", "css": "pin_circle", @@ -1251,6 +1223,90 @@ "search": [ "vector-2" ] + }, + { + "uid": "ae03365940120109e001e5506308b90b", + "css": "open", + "code": 59474, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M208.7 439.4C192.9 467.9 187.5 489.3 187.5 500S192.9 532.1 208.7 560.6C223.8 588 246.6 618.6 276.3 647 335.6 704 419.5 750 520.8 750S706.1 704 765.4 647C795.1 618.6 817.8 588.1 833 560.6 848.8 532.1 854.2 510.7 854.2 500S848.8 467.9 833 439.4C817.8 412 795.1 381.4 765.4 353 706.1 296 622.2 250 520.8 250S335.6 296 276.3 353C246.6 381.4 223.8 411.9 208.7 439.4ZM218.5 292.8C289.4 224.8 393 166.7 520.8 166.7S752.2 224.8 823.1 292.8C858.6 326.9 886.6 364.1 905.9 399.1 924.7 433.1 937.5 469 937.5 500S924.7 566.9 905.9 600.9C886.6 635.9 858.6 673.1 823.1 707.2 752.2 775.2 648.6 833.3 520.8 833.3S289.4 775.2 218.5 707.2C183.1 673.1 155.1 635.9 135.7 600.9 117 566.9 104.2 531 104.2 500S117 433.1 135.7 399.1C155.1 364.1 183.1 326.9 218.5 292.8ZM520.8 416.7C474.8 416.7 437.5 454 437.5 500S474.8 583.3 520.8 583.3C566.9 583.3 604.2 546 604.2 500S566.9 416.7 520.8 416.7ZM354.2 500C354.2 407.9 428.8 333.3 520.8 333.3S687.5 408 687.5 500C687.5 592 612.8 666.7 520.8 666.7S354.2 592 354.2 500Z", + "width": 1031 + }, + "search": [ + "open" + ] + }, + { + "uid": "17b0e73acdf495e063fc287dca6bef34", + "css": "question-circle-1", + "code": 59482, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M500 166.7C315.9 166.7 166.7 315.9 166.7 500S315.9 833.3 500 833.3C684.1 833.3 833.3 684.1 833.3 500S684.1 166.7 500 166.7ZM83.3 500C83.3 269.9 269.9 83.3 500 83.3S916.7 269.9 916.7 500C916.7 730.1 730.1 916.7 500 916.7S83.3 730.1 83.3 500ZM500 333.3C460.5 333.3 428.4 365.4 428.4 404.9 428.4 427.9 409.8 446.6 386.8 446.6S345.1 427.9 345.1 404.9C345.1 319.4 414.5 250 500 250S655 319.4 655 404.9C655 459.5 626.7 507.4 584.3 535 570.8 543.7 559.3 552.9 551.5 562.3 543.8 571.4 541.7 578.2 541.7 583.3 541.7 606.3 523 625 500 625S458.4 606.3 458.4 583.3C458.4 552.5 472 527.4 487.6 508.8 503 490.3 522.3 475.9 539 465.1 558.8 452.2 571.7 430.1 571.7 404.9 571.7 365.4 539.6 333.3 500.1 333.3ZM458.3 708.3C458.3 685.3 477 666.7 500 666.7H500C523 666.7 541.7 685.3 541.7 708.3S523 750 500 750H500C477 750 458.3 731.3 458.3 708.3Z", + "width": 1000 + }, + "search": [ + "question-circle-1" + ] + }, + { + "uid": "8307a13c60852c9a83b2dcd16ddfba75", + "css": "close", + "code": 59483, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M925.3 95.5C941.6 111.8 941.6 138.2 925.3 154.5L175.3 904.5C159 920.8 132.6 920.8 116.3 904.5S100.1 861.8 116.3 845.5L237.5 724.4C202 693.8 173.1 659.9 151.5 627 123.4 584.2 104.2 537.9 104.2 500 104.2 469 117 433.1 135.7 399.1 155.1 364.1 183.1 326.9 218.5 292.8 289.4 224.8 393 166.7 520.8 166.7 603.2 166.7 675.6 190.8 735.6 226.3L866.4 95.5C882.7 79.2 909 79.2 925.3 95.5ZM674.3 287.6C629.6 264.6 578 250 520.8 250 419.5 250 335.6 296 276.2 353 246.6 381.4 223.8 411.9 208.7 439.4 192.9 467.9 187.5 489.3 187.5 500 187.5 514 196.5 543.8 221.1 581.2 239.6 609.3 265.1 638.9 296.6 665.3L377.2 584.7C362.6 559.8 354.1 530.9 354.1 500 354.1 407.9 428.7 333.3 520.8 333.3 551.7 333.3 580.6 341.8 605.4 356.4L674.3 287.6ZM542.4 419.5C535.6 417.6 528.3 416.7 520.8 416.7 474.8 416.7 437.5 454 437.5 500 437.5 507.5 438.5 514.7 440.3 521.6L542.4 419.5ZM832.4 361C851.6 348.4 877.4 353.7 890.1 372.9 918.3 415.7 937.5 462.1 937.5 500 937.5 531 924.7 566.9 905.9 600.9 886.6 635.9 858.6 673.1 823.1 707.2 752.3 775.2 648.7 833.3 520.8 833.3 505.1 833.3 489.6 832.4 474.5 830.8 451.7 828.2 435.2 807.6 437.8 784.7S461 745.4 483.8 747.9C495.9 749.3 508.2 750 520.8 750 622.2 750 706.1 704 765.4 647 795.1 618.6 817.8 588.1 833 560.6 848.8 532.1 854.2 510.7 854.2 500 854.2 486 845.2 456.2 820.5 418.7 807.8 399.5 813.2 373.7 832.4 361ZM652.6 502.4C674.3 510 685.7 533.8 678 555.5 661.2 602.9 623.8 640.4 576.4 657.2 554.7 664.8 530.9 653.5 523.2 631.8S526.9 586.3 548.6 578.6C572.3 570.2 591.1 551.4 599.4 527.8 607.1 506.1 630.9 494.7 652.6 502.4Z", + "width": 1031 + }, + "search": [ + "close" + ] + }, + { + "uid": "9b1898b8e7a54bf8e7ba248adc7a6c36", + "css": "download-2", + "code": 59458, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M412 533V529 59Q412 34 429 17T470.5 0 512 17 529 59V530L671 423Q691 409 715 412.5T753.5 435 764.5 478.5 741 518L506 694Q491 706 472 706T437 695L201 529Q182 516 177.5 492T187 448 225 423.5 269 433H270ZM0 823V941Q0 966 17 983T59 1000H882Q907 1000 924 983T941 941V823Q941 799 924 782T882.5 765 841 782 824 823V882H118V823Q118 799 100.5 782T58.5 765 17 782 0 823Z", + "width": 941 + }, + "search": [ + "download-2" + ] + }, + { + "uid": "f0b33eebf851e9ceaa43332162541dea", + "css": "manifest-icon-flattened", + "code": 59457, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M533 167Q575 167 604 196T633 267V333Q633 374 604 403.5T533 433V467H633Q673 467 702 494T733 561V567Q775 567 804 596T833 667V733Q833 774 804 803.5T733 833H667Q626 833 596.5 803.5T567 733V667Q567 625 596.5 596T667 567Q667 554 658.5 544.5T637 534L367 533Q354 533 345 541.5T334 563L333 567Q375 567 404 596T433 667V733Q433 774 404 803.5T333 833H267Q226 833 196.5 803.5T167 733V667Q167 625 196.5 596T267 567Q267 527 294 498T361 467H467V433Q426 433 396.5 403.5T367 333V267Q367 225 396.5 196T467 167H533ZM533 367Q547 367 557 357T567 333V267Q567 253 557 243T533 233H467Q453 233 443 243T433 267V333Q433 347 443 357T467 367H533ZM667 633Q653 633 643 643T633 667V733Q633 747 643 757T667 767H733Q747 767 757 757T767 733V667Q767 653 757 643T733 633H667ZM333 633H267Q253 633 243 643T233 667V733Q233 747 243 757T267 767H333Q347 767 357 757T367 733V667Q367 653 357 643T333 633Z", + "width": 1000 + }, + "search": [ + "manifest-icon-flattened" + ] + }, + { + "uid": "1f8a42b99fd1828e7bf264414f9bbe74", + "css": "refresh1", + "code": 59484, + "src": "custom_icons", + "selected": true, + "svg": { + "path": "M714.6 20.3A41.7 41.7 0 0 0 682.7 20.6 41.7 41.7 0 0 0 660.8 75.4C674.4 107.2 680.4 141.4 688.8 174.9 675.4 164.8 665.3 151.8 650.5 143.2 453.8 29.6 201.1 97.4 87.6 294 35.4 384.3 21.3 486.6 40.5 581.5A41.7 41.7 0 0 0 89.6 614.1 41.7 41.7 0 0 0 122.2 565C106.9 489.2 117.9 408 159.7 335.6 250.8 178 451.1 124.3 608.8 215.3 619.5 221.5 626.5 231 636.2 238.1 609.2 244.9 582.9 254.8 555.2 258.2A41.7 41.7 0 0 0 518.8 304.5 41.7 41.7 0 0 0 565.1 340.9C625 333.7 683.7 319.1 739.9 297.6A41.7 41.7 0 0 0 740.2 297.6C743.2 296.5 746.3 295.3 749.5 294 776.6 283.1 793 254.4 788.9 225.5A41.7 41.7 0 0 0 788.9 225.5C779.7 162.6 762.4 101.1 737.4 42.6A41.7 41.7 0 0 0 714.6 20.3ZM804.3 402.9A41.7 41.7 0 0 0 769.4 450.4C780.3 521.7 768.1 596.8 729.1 664.4 638.1 822 437.7 875.7 280.1 784.7 269.4 778.5 262.3 769 252.6 761.9 279.7 755.1 305.9 745.2 333.7 741.8A41.7 41.7 0 0 0 370.1 695.5 41.7 41.7 0 0 0 323.7 659.1C263.8 666.3 205 680.9 148.7 702.5 148.7 702.5 148.6 702.5 148.5 702.5A41.7 41.7 0 0 0 148.4 702.6C145.6 703.7 142.6 704.8 139.7 705.9 112.4 716.7 95.8 745.6 100 774.6 109.2 837.5 126.5 898.9 151.5 957.4A41.7 41.7 0 0 0 206.2 979.4 41.7 41.7 0 0 0 228.1 924.7C214.6 892.8 208.5 858.7 200.1 825.1 213.5 835.2 223.6 848.2 238.4 856.8 435.1 970.4 687.7 902.6 801.3 706 849.9 621.8 865.5 527.1 851.8 437.8A41.7 41.7 0 0 0 804.3 402.9Z", + "width": 875 + }, + "search": [ + "refresh1" + ] } ] } \ No newline at end of file diff --git a/packages/ardrive_ui/lib/src/styles/icons/ar_drive_icons_icons.dart b/packages/ardrive_ui/lib/src/styles/icons/ar_drive_icons_icons.dart index 107054a52..ce6fb9708 100644 --- a/packages/ardrive_ui/lib/src/styles/icons/ar_drive_icons_icons.dart +++ b/packages/ardrive_ui/lib/src/styles/icons/ar_drive_icons_icons.dart @@ -13,9 +13,10 @@ /// /// /// -library; // ignore_for_file: constant_identifier_names +library; + import 'package:flutter/widgets.dart'; class ArDriveIconsData { @@ -188,6 +189,8 @@ class ArDriveIconsData { IconData(0xe850, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData box = IconData(0xe851, fontFamily: _kFontFam, fontPackage: _kFontPkg); + static const IconData open = + IconData(0xe852, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData checked = IconData(0xe853, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData advanced_chevron = @@ -200,6 +203,12 @@ class ArDriveIconsData { IconData(0xe858, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData turbo_coin = IconData(0xe859, fontFamily: _kFontFam, fontPackage: _kFontPkg); + static const IconData question_circle_1 = + IconData(0xe85a, fontFamily: _kFontFam, fontPackage: _kFontPkg); + static const IconData close = + IconData(0xe85b, fontFamily: _kFontFam, fontPackage: _kFontPkg); + static const IconData refresh1 = + IconData(0xe85c, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData arrow_download = IconData(0xe880, fontFamily: _kFontFam, fontPackage: _kFontPkg); } diff --git a/packages/ardrive_ui/lib/src/styles/icons/icons.dart b/packages/ardrive_ui/lib/src/styles/icons/icons.dart index 0d54dd645..45efe4dad 100644 --- a/packages/ardrive_ui/lib/src/styles/icons/icons.dart +++ b/packages/ardrive_ui/lib/src/styles/icons/icons.dart @@ -275,7 +275,7 @@ class ArDriveIcons { // refresh static ArDriveIcon refresh({double? size, Color? color}) => ArDriveIcon( - icon: ArDriveIconsData.refresh, + icon: ArDriveIconsData.refresh1, size: size, color: color, ); @@ -347,7 +347,7 @@ class ArDriveIcons { // help static ArDriveIcon question({double? size, Color? color}) => ArDriveIcon( - icon: ArDriveIconsData.question_circle, + icon: ArDriveIconsData.question_circle_1, size: size, color: color, ); @@ -388,14 +388,14 @@ class ArDriveIcons { // eye_closed static ArDriveIcon eyeClosed({double? size, Color? color}) => ArDriveIcon( - icon: ArDriveIconsData.eye_closed, + icon: ArDriveIconsData.close, size: size, color: color, ); // eye_open static ArDriveIcon eyeOpen({double? size, Color? color}) => ArDriveIcon( - icon: ArDriveIconsData.eye_open, + icon: ArDriveIconsData.open, size: size, color: color, ); From da20b04d070e5155b5e4ddcdd6538cc734f86940 Mon Sep 17 00:00:00 2001 From: Thiago Carvalho <32248947+thiagocarvalhodev@users.noreply.github.com> Date: Wed, 11 Dec 2024 16:06:52 -0300 Subject: [PATCH 8/9] Update profile_card.dart --- lib/components/profile_card.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/profile_card.dart b/lib/components/profile_card.dart index 5a17ace38..e203a49e9 100644 --- a/lib/components/profile_card.dart +++ b/lib/components/profile_card.dart @@ -715,7 +715,7 @@ class ProfileCardHeader extends StatelessWidget { } double width = primaryName.length * 15; - return width.clamp(110, 200); + return width.clamp(110, 220); } String _getTruncatedWalletAddress(String primaryName, String walletAddress) { From 4f147c5c0c257d9cd3a96db9de410da1752f69e9 Mon Sep 17 00:00:00 2001 From: Thiago Carvalho <32248947+thiagocarvalhodev@users.noreply.github.com> Date: Wed, 11 Dec 2024 16:07:20 -0300 Subject: [PATCH 9/9] Update profile_card.dart --- lib/components/profile_card.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/components/profile_card.dart b/lib/components/profile_card.dart index e203a49e9..ae0193512 100644 --- a/lib/components/profile_card.dart +++ b/lib/components/profile_card.dart @@ -735,7 +735,7 @@ class ProfileCardHeader extends StatelessWidget { } return Padding( - padding: const EdgeInsets.only(right: 16.0), + padding: const EdgeInsets.only(right: 8.0), child: ClipOval( child: ArDriveImage( image: NetworkImage(