feat(useragent): callouts feature for approving new things

This commit is contained in:
hdbg
2026-03-24 14:07:47 +01:00
parent ddd6e7910f
commit c0b08e84cc
31 changed files with 1801 additions and 88 deletions

View File

@@ -0,0 +1,151 @@
import 'package:arbiter/proto/client.pb.dart';
import 'package:arbiter/theme/palette.dart';
import 'package:flutter/material.dart';
import 'package:sizer/sizer.dart';
class SdkConnectCallout extends StatelessWidget {
const SdkConnectCallout({
super.key,
required this.pubkey,
required this.clientInfo,
this.onAccept,
this.onDecline,
});
final String pubkey;
final ClientInfo clientInfo;
final VoidCallback? onAccept;
final VoidCallback? onDecline;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final name = clientInfo.hasName() && clientInfo.name.isNotEmpty
? clientInfo.name
: _shortPubkey(pubkey);
final hasDescription =
clientInfo.hasDescription() && clientInfo.description.isNotEmpty;
final hasVersion =
clientInfo.hasVersion() && clientInfo.version.isNotEmpty;
final showInfoCard = hasDescription || hasVersion;
return Container(
decoration: BoxDecoration(
color: Palette.cream,
borderRadius: BorderRadius.circular(24),
border: Border.all(color: Palette.line),
),
padding: EdgeInsets.all(2.4.h),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
spacing: 1.6.h,
children: [
// if (clientInfo.iconUrl != null)
// CircleAvatar(
// radius: 36,
// backgroundColor: Palette.line,
// backgroundImage: NetworkImage(iconUrl!),
// ),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
spacing: 0.4.h,
children: [
Text(
name,
textAlign: TextAlign.center,
style: theme.textTheme.titleLarge?.copyWith(
color: Palette.ink,
fontWeight: FontWeight.w800,
),
),
Text(
'is requesting a connection',
textAlign: TextAlign.center,
style: theme.textTheme.bodyMedium?.copyWith(
color: Palette.ink.withValues(alpha: 0.55),
),
),
],
),
if (showInfoCard)
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Palette.ink.withValues(alpha: 0.04),
borderRadius: BorderRadius.circular(14),
border: Border.all(color: Palette.line),
),
padding: EdgeInsets.symmetric(
horizontal: 1.6.w,
vertical: 1.2.h,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
spacing: 0.6.h,
children: [
if (hasDescription)
Text(
clientInfo.description,
style: theme.textTheme.bodyMedium?.copyWith(
color: Palette.ink.withValues(alpha: 0.80),
height: 1.5,
),
),
if (hasVersion)
Text(
'v${clientInfo.version}',
style: theme.textTheme.bodySmall?.copyWith(
color: Palette.ink.withValues(alpha: 0.50),
),
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: OutlinedButton(
onPressed: onDecline,
style: OutlinedButton.styleFrom(
foregroundColor: Palette.coral,
side: BorderSide(
color: Palette.coral.withValues(alpha: 0.50),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
),
padding: EdgeInsets.symmetric(vertical: 1.4.h),
),
child: const Text('Decline'),
),
),
Expanded(
child: FilledButton(
onPressed: onAccept,
style: FilledButton.styleFrom(
backgroundColor: Palette.ink,
foregroundColor: Palette.cream,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
),
padding: EdgeInsets.symmetric(vertical: 1.4.h),
),
child: const Text('Accept'),
),
),
],
),
],
),
);
}
}
String _shortPubkey(String base64Pubkey) {
if (base64Pubkey.length < 12) return base64Pubkey;
return '${base64Pubkey.substring(0, 8)}${base64Pubkey.substring(base64Pubkey.length - 4)}';
}

View File

@@ -1,7 +1,11 @@
import 'package:arbiter/features/callouts/callout_manager.dart';
import 'package:arbiter/features/callouts/show_callout_list.dart';
import 'package:arbiter/router.gr.dart';
import 'package:arbiter/theme/palette.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_adaptive_scaffold/flutter_adaptive_scaffold.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
const breakpoints = MaterialAdaptiveBreakpoints();
@@ -17,7 +21,6 @@ class DashboardRouter extends StatelessWidget {
routes: routes,
transitionBuilder: (context, child, animation) => FadeTransition(
opacity: animation,
// the passed child is technically our animated selected-tab page
child: child,
),
builder: (context, child) {
@@ -53,8 +56,54 @@ class DashboardRouter extends StatelessWidget {
selectedIndex: currentActive,
transitionDuration: const Duration(milliseconds: 800),
internalAnimations: true,
trailingNavRail: const _CalloutBell(),
);
},
);
}
}
class _CalloutBell extends ConsumerWidget {
const _CalloutBell({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(
calloutManagerProvider.select((map) => map.length),
);
return IconButton(
onPressed: () => showCalloutList(context, ref),
icon: Stack(
clipBehavior: Clip.none,
children: [
Icon(
count > 0 ? Icons.notifications : Icons.notifications_outlined,
color: Palette.ink,
),
if (count > 0)
Positioned(
top: -2,
right: -4,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(10),
),
child: Text(
count > 99 ? '99+' : '$count',
style: const TextStyle(
color: Colors.white,
fontSize: 9,
fontWeight: FontWeight.w800,
height: 1.2,
),
),
),
),
],
),
);
}
}

View File

@@ -8,17 +8,9 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:arbiter/theme/palette.dart';
import 'package:sizer/sizer.dart';
// ─── Palette ──────────────────────────────────────────────────────────────────
class _Palette {
static const ink = Color(0xFF15263C);
static const coral = Color(0xFFE26254);
static const cream = Color(0xFFFFFAF4);
static const line = Color(0x1A15263C);
}
// ─── Column width getters ─────────────────────────────────────────────────────
double get _accentStripWidth => 0.8.w;
@@ -92,8 +84,8 @@ class _StatePanel extends StatelessWidget {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
color: _Palette.cream.withValues(alpha: 0.92),
border: Border.all(color: _Palette.line),
color: Palette.cream.withValues(alpha: 0.92),
border: Border.all(color: Palette.line),
),
child: Padding(
padding: EdgeInsets.all(2.8.h),
@@ -107,12 +99,12 @@ class _StatePanel extends StatelessWidget {
child: const CircularProgressIndicator(strokeWidth: 2.5),
)
else
Icon(icon, size: 34, color: _Palette.coral),
Icon(icon, size: 34, color: Palette.coral),
SizedBox(height: 1.8.h),
Text(
title,
style: theme.textTheme.headlineSmall?.copyWith(
color: _Palette.ink,
color: Palette.ink,
fontWeight: FontWeight.w800,
),
),
@@ -120,7 +112,7 @@ class _StatePanel extends StatelessWidget {
Text(
body,
style: theme.textTheme.bodyLarge?.copyWith(
color: _Palette.ink.withValues(alpha: 0.72),
color: Palette.ink.withValues(alpha: 0.72),
height: 1.5,
),
),
@@ -155,8 +147,8 @@ class _Header extends StatelessWidget {
padding: EdgeInsets.symmetric(horizontal: 1.6.w, vertical: 1.2.h),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(18),
color: _Palette.cream,
border: Border.all(color: _Palette.line),
color: Palette.cream,
border: Border.all(color: Palette.line),
),
child: Row(
children: [
@@ -164,7 +156,7 @@ class _Header extends StatelessWidget {
child: Text(
'SDK Clients',
style: theme.textTheme.titleMedium?.copyWith(
color: _Palette.ink,
color: Palette.ink,
fontWeight: FontWeight.w800,
),
),
@@ -173,7 +165,7 @@ class _Header extends StatelessWidget {
Text(
'Syncing',
style: theme.textTheme.bodySmall?.copyWith(
color: _Palette.ink.withValues(alpha: 0.62),
color: Palette.ink.withValues(alpha: 0.62),
fontWeight: FontWeight.w700,
),
),
@@ -182,8 +174,8 @@ class _Header extends StatelessWidget {
OutlinedButton.icon(
onPressed: () => onRefresh(),
style: OutlinedButton.styleFrom(
foregroundColor: _Palette.ink,
side: BorderSide(color: _Palette.line),
foregroundColor: Palette.ink,
side: BorderSide(color: Palette.line),
padding: EdgeInsets.symmetric(
horizontal: 1.4.w,
vertical: 1.2.h,
@@ -209,7 +201,7 @@ class _ClientTableHeader extends StatelessWidget {
@override
Widget build(BuildContext context) {
final style = Theme.of(context).textTheme.labelLarge?.copyWith(
color: _Palette.ink.withValues(alpha: 0.72),
color: Palette.ink.withValues(alpha: 0.72),
fontWeight: FontWeight.w800,
letterSpacing: 0.3,
);
@@ -218,7 +210,7 @@ class _ClientTableHeader extends StatelessWidget {
padding: EdgeInsets.symmetric(vertical: 1.4.h),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: _Palette.ink.withValues(alpha: 0.04),
color: Palette.ink.withValues(alpha: 0.04),
),
child: Row(
children: [
@@ -257,7 +249,7 @@ class _ClientTableRow extends HookWidget {
final expanded = useState(false);
final accent = _accentColor(client.pubkey);
final theme = Theme.of(context);
final muted = _Palette.ink.withValues(alpha: 0.62);
final muted = Palette.ink.withValues(alpha: 0.62);
final name = client.info.name.isEmpty ? '' : client.info.name;
final version = client.info.version.isEmpty ? '' : client.info.version;
@@ -301,7 +293,7 @@ class _ClientTableRow extends HookWidget {
child: Text(
'${client.id}',
style: theme.textTheme.bodyLarge?.copyWith(
color: _Palette.ink,
color: Palette.ink,
),
),
),
@@ -313,7 +305,7 @@ class _ClientTableRow extends HookWidget {
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: theme.textTheme.bodyMedium?.copyWith(
color: _Palette.ink,
color: Palette.ink,
),
),
),
@@ -395,7 +387,7 @@ class _ClientTableRow extends HookWidget {
child: Text(
_shortPubkey(client.pubkey),
style: theme.textTheme.bodySmall?.copyWith(
color: _Palette.ink,
color: Palette.ink,
fontFamily: 'monospace',
),
),
@@ -444,8 +436,8 @@ class _ClientTable extends StatelessWidget {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
color: _Palette.cream.withValues(alpha: 0.92),
border: Border.all(color: _Palette.line),
color: Palette.cream.withValues(alpha: 0.92),
border: Border.all(color: Palette.line),
),
child: Padding(
padding: EdgeInsets.all(2.h),
@@ -459,7 +451,7 @@ class _ClientTable extends StatelessWidget {
Text(
'Registered clients',
style: theme.textTheme.titleLarge?.copyWith(
color: _Palette.ink,
color: Palette.ink,
fontWeight: FontWeight.w800,
),
),
@@ -467,7 +459,7 @@ class _ClientTable extends StatelessWidget {
Text(
'Every entry here has authenticated with Arbiter at least once.',
style: theme.textTheme.bodyMedium?.copyWith(
color: _Palette.ink.withValues(alpha: 0.70),
color: Palette.ink.withValues(alpha: 0.70),
height: 1.4,
),
),
@@ -564,7 +556,7 @@ class ClientsScreen extends HookConsumerWidget {
return Scaffold(
body: SafeArea(
child: RefreshIndicator.adaptive(
color: _Palette.ink,
color: Palette.ink,
backgroundColor: Colors.white,
onRefresh: refresh,
child: ListView(

View File

@@ -1,6 +1,7 @@
import 'dart:math' as math;
import 'package:arbiter/proto/evm.pb.dart';
import 'package:arbiter/theme/palette.dart';
import 'package:arbiter/providers/connection/connection_manager.dart';
import 'package:arbiter/providers/evm/evm.dart';
import 'package:auto_route/auto_route.dart';
@@ -89,7 +90,7 @@ class EvmScreen extends HookConsumerWidget {
return Scaffold(
body: SafeArea(
child: RefreshIndicator.adaptive(
color: _Palette.ink,
color: Palette.ink,
backgroundColor: Colors.white,
onRefresh: refreshWallets,
child: ListView(
@@ -114,13 +115,6 @@ class EvmScreen extends HookConsumerWidget {
}
}
class _Palette {
static const ink = Color(0xFF15263C);
static const coral = Color(0xFFE26254);
static const cream = Color(0xFFFFFAF4);
static const line = Color(0x1A15263C);
}
double get _accentStripWidth => 0.8.w;
double get _cellHorizontalPadding => 1.8.w;
double get _walletColumnWidth => 18.w;
@@ -148,8 +142,8 @@ class _Header extends StatelessWidget {
padding: EdgeInsets.symmetric(horizontal: 1.6.w, vertical: 1.2.h),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(18),
color: _Palette.cream,
border: Border.all(color: _Palette.line),
color: Palette.cream,
border: Border.all(color: Palette.line),
),
child: Row(
children: [
@@ -157,7 +151,7 @@ class _Header extends StatelessWidget {
child: Text(
'EVM Wallet Vault',
style: theme.textTheme.titleMedium?.copyWith(
color: _Palette.ink,
color: Palette.ink,
fontWeight: FontWeight.w800,
),
),
@@ -166,7 +160,7 @@ class _Header extends StatelessWidget {
Text(
'Syncing',
style: theme.textTheme.bodySmall?.copyWith(
color: _Palette.ink.withValues(alpha: 0.62),
color: Palette.ink.withValues(alpha: 0.62),
fontWeight: FontWeight.w700,
),
),
@@ -175,7 +169,7 @@ class _Header extends StatelessWidget {
FilledButton.icon(
onPressed: isCreating ? null : () => onCreate(),
style: FilledButton.styleFrom(
backgroundColor: _Palette.ink,
backgroundColor: Palette.ink,
foregroundColor: Colors.white,
padding: EdgeInsets.symmetric(horizontal: 1.4.w, vertical: 1.2.h),
shape: RoundedRectangleBorder(
@@ -195,8 +189,8 @@ class _Header extends StatelessWidget {
OutlinedButton.icon(
onPressed: () => onRefresh(),
style: OutlinedButton.styleFrom(
foregroundColor: _Palette.ink,
side: BorderSide(color: _Palette.line),
foregroundColor: Palette.ink,
side: BorderSide(color: Palette.line),
padding: EdgeInsets.symmetric(horizontal: 1.4.w, vertical: 1.2.h),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
@@ -223,8 +217,8 @@ class _WalletTable extends StatelessWidget {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
color: _Palette.cream.withValues(alpha: 0.92),
border: Border.all(color: _Palette.line),
color: Palette.cream.withValues(alpha: 0.92),
border: Border.all(color: Palette.line),
),
child: Padding(
padding: EdgeInsets.all(2.h),
@@ -238,7 +232,7 @@ class _WalletTable extends StatelessWidget {
Text(
'Managed wallets',
style: theme.textTheme.titleLarge?.copyWith(
color: _Palette.ink,
color: Palette.ink,
fontWeight: FontWeight.w800,
),
),
@@ -246,7 +240,7 @@ class _WalletTable extends StatelessWidget {
Text(
'Every address here is generated and held by Arbiter.',
style: theme.textTheme.bodyMedium?.copyWith(
color: _Palette.ink.withValues(alpha: 0.70),
color: Palette.ink.withValues(alpha: 0.70),
height: 1.4,
),
),
@@ -288,7 +282,7 @@ class _WalletTableHeader extends StatelessWidget {
@override
Widget build(BuildContext context) {
final style = Theme.of(context).textTheme.labelLarge?.copyWith(
color: _Palette.ink.withValues(alpha: 0.72),
color: Palette.ink.withValues(alpha: 0.72),
fontWeight: FontWeight.w800,
letterSpacing: 0.3,
);
@@ -297,7 +291,7 @@ class _WalletTableHeader extends StatelessWidget {
padding: EdgeInsets.symmetric(vertical: 1.4.h),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color: _Palette.ink.withValues(alpha: 0.04),
color: Palette.ink.withValues(alpha: 0.04),
),
child: Row(
children: [
@@ -328,10 +322,10 @@ class _WalletTableRow extends StatelessWidget {
final rowHeight = 5.h;
final walletStyle = Theme.of(
context,
).textTheme.bodyLarge?.copyWith(color: _Palette.ink);
).textTheme.bodyLarge?.copyWith(color: Palette.ink);
final addressStyle = Theme.of(
context,
).textTheme.bodyMedium?.copyWith(color: _Palette.ink);
).textTheme.bodyMedium?.copyWith(color: Palette.ink);
return Container(
height: rowHeight,
@@ -420,8 +414,8 @@ class _StatePanel extends StatelessWidget {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(24),
color: _Palette.cream.withValues(alpha: 0.92),
border: Border.all(color: _Palette.line),
color: Palette.cream.withValues(alpha: 0.92),
border: Border.all(color: Palette.line),
),
child: Padding(
padding: EdgeInsets.all(2.8.h),
@@ -435,12 +429,12 @@ class _StatePanel extends StatelessWidget {
child: CircularProgressIndicator(strokeWidth: 2.5),
)
else
Icon(icon, size: 34, color: _Palette.coral),
Icon(icon, size: 34, color: Palette.coral),
SizedBox(height: 1.8.h),
Text(
title,
style: theme.textTheme.headlineSmall?.copyWith(
color: _Palette.ink,
color: Palette.ink,
fontWeight: FontWeight.w800,
),
),
@@ -448,7 +442,7 @@ class _StatePanel extends StatelessWidget {
Text(
body,
style: theme.textTheme.bodyLarge?.copyWith(
color: _Palette.ink.withValues(alpha: 0.72),
color: Palette.ink.withValues(alpha: 0.72),
height: 1.5,
),
),