Skip to content

Commit

Permalink
Merge branch 'PE-7246-show-logo-on-profile-card' into PE-4381-wallet-…
Browse files Browse the repository at this point in the history 
…switch-dialog-uses-the-old-modal-component
  • Loading branch information
@thiagocarvalhodev
thiagocarvalhodev committed Dec 11, 2024
2 parents 23c471d + 4f147c5 commit 8a88ca8
Show file tree
Hide file tree
Showing 13 changed files with 284 additions and 152 deletions.
11 changes: 5 additions & 6 deletions lib/app_shell.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,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';
Expand Down Expand Up @@ -380,15 +381,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(),
Expand Down
4 changes: 1 addition & 3 deletions lib/components/app_top_bar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,9 +149,7 @@ class SyncButton extends StatelessWidget {
),
),
],
child: ArDriveIcons.refresh(
color: colorTokens.textMid,
),
child: ArDriveIcons.refresh(color: colorTokens.textMid),
),
);
}
Expand Down
228 changes: 152 additions & 76 deletions lib/components/profile_card.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -548,82 +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.primaryNameDetails.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;
}

Widget? icon;

if (state is ProfileNameLoaded) {
if (state.primaryNameDetails.logo != null) {
icon = ArDriveImage(
image: NetworkImage(
'https://arweave.net/${state.primaryNameDetails.logo}'),
width: 24,
height: 24,
);
}
}

Widget? content;

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,
),
),
),
],
);
}

return ArDriveTooltip(
message: tooltipMessage ?? '',
child: ArDriveButtonNew(
text: primaryName,
typography: typography,
variant: ButtonVariant.outline,
content: content,
maxWidth: maxWidth,
maxHeight: 40,
onPressed: () {
setState(() {
_showProfileCard = !_showProfileCard;
});
},
),
);
return ProfileCardHeader(
walletAddress: walletAddress,
onPressed: () {
setState(() {
_showProfileCard = !_showProfileCard;
});
},
);
}
Expand Down Expand Up @@ -730,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,
),
),
],
),
),
),
],
),
);
}
}
15 changes: 0 additions & 15 deletions lib/components/side_bar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
9 changes: 2 additions & 7 deletions lib/components/topbar/help_button.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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),
),
);
}
Expand Down
7 changes: 7 additions & 0 deletions lib/user/name/presentation/bloc/profile_name_bloc.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Binary file modified packages/ardrive_ui/assets/fonts/ArDriveIcons.ttf
View file
Binary file not shown.
Loading

0 comments on commit 8a88ca8

Please sign in to comment.