eth token summary layout and style

assets/svg/cc.svg

@@ -0,0 +1,11 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7503_4777)">
+<path d="M24.5 10.5H0.5V6H24.5V10.5Z" fill="#424A97"/>
+<path opacity="0.4" d="M21.8333 1.5C23.3042 1.5 24.5 2.84297 24.5 4.5V6H0.5V4.5C0.5 2.84297 1.69375 1.5 3.16667 1.5H21.8333ZM24.5 19.5C24.5 21.1547 23.3042 22.5 21.8333 22.5H3.16667C1.69375 22.5 0.5 21.1547 0.5 19.5V10.5H24.5V19.5ZM5.16667 16.5C4.8 16.5 4.5 16.8375 4.5 17.25C4.5 17.6625 4.8 18 5.16667 18H7.83333C8.2 18 8.5 17.6625 8.5 17.25C8.5 16.8375 8.2 16.5 7.83333 16.5H5.16667ZM10.5 18H15.8333C16.2 18 16.5 17.6625 16.5 17.25C16.5 16.8375 16.2 16.5 15.8333 16.5H10.5C10.1333 16.5 9.83333 16.8375 9.83333 17.25C9.83333 17.6625 10.1333 18 10.5 18Z" fill="#424A97"/>
+</g>
+<defs>
+<clipPath id="clip0_7503_4777">
+<rect width="24" height="24" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

lib/pages/token_view/sub_widgets/token_summary.dart

@@ -1,8 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg/svg.dart';
 import 'package:stackwallet/pages/token_view/token_view.dart';
 import 'package:stackwallet/providers/global/wallets_provider.dart';
+import 'package:stackwallet/utilities/assets.dart';
+import 'package:stackwallet/utilities/constants.dart';
 import 'package:stackwallet/utilities/text_styles.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/widgets/rounded_container.dart';
 
 class TokenSummary extends ConsumerWidget {
@@ -15,37 +19,157 @@ class TokenSummary extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final token =
+        ref.watch(tokenServiceProvider.select((value) => value!.token));
+    final balance =
+        ref.watch(tokenServiceProvider.select((value) => value!.balance));
+
     return RoundedContainer(
       color: const Color(0xFFE9EAFF), // todo: fix color
       // color: Theme.of(context).extension<StackColors>()!.,
-
+      padding: const EdgeInsets.all(24),
       child: Column(
         children: [
-          Text(
+          Row(
-            ref.watch(
+            mainAxisAlignment: MainAxisAlignment.center,
-              walletsChangeNotifierProvider.select(
+            children: [
-                (value) => value.getManager(walletId).walletName,
+              SvgPicture.asset(
+                Assets.svg.walletDesktop,
+                color: const Color(0xFF8488AB), // todo: fix color
+                width: 12,
+                height: 12,
               ),
-            ),
+              const SizedBox(
-            style: STextStyles.label(context),
+                width: 6,
-          ),
-          Text(
-            ref.watch(tokenServiceProvider.select((value) => value!.balance
-                .getTotal()
-                .toStringAsFixed(ref.watch(tokenServiceProvider
-                    .select((value) => value!.token.decimals))))),
-            style: STextStyles.label(context),
-          ),
-          Text(
-            ref.watch(
-              walletsChangeNotifierProvider.select(
-                (value) => value.getManager(walletId).walletName,
               ),
-            ),
+              Text(
-            style: STextStyles.label(context),
+                ref.watch(
+                  walletsChangeNotifierProvider.select(
+                    (value) => value.getManager(walletId).walletName,
+                  ),
+                ),
+                style: STextStyles.w500_12(context).copyWith(
+                  color: const Color(0xFF8488AB), // todo: fix color
+                ),
+              ),
+            ],
           ),
+          const SizedBox(
+            height: 6,
+          ),
+          Text(
+            "${balance.getTotal()}"
+            " ${token.symbol}",
+            style: STextStyles.pageTitleH1(context),
+          ),
+          const SizedBox(
+            height: 6,
+          ),
+          Text(
+            "FIXME: price",
+            style: STextStyles.subtitle500(context),
+          ),
+          const SizedBox(
+            height: 20,
+          ),
+          const TokenWalletOptions(),
         ],
       ),
     );
   }
 }
+
+class TokenWalletOptions extends StatelessWidget {
+  const TokenWalletOptions({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        TokenOptionsButton(
+          onPressed: () {},
+          subLabel: "Receive",
+          iconAssetSVG: Assets.svg.receive(context),
+        ),
+        const SizedBox(
+          width: 16,
+        ),
+        TokenOptionsButton(
+          onPressed: () {},
+          subLabel: "Receive",
+          iconAssetSVG: Assets.svg.send(context),
+        ),
+        const SizedBox(
+          width: 16,
+        ),
+        TokenOptionsButton(
+          onPressed: () {},
+          subLabel: "Exchange",
+          iconAssetSVG: Assets.svg.exchange(context),
+        ),
+        const SizedBox(
+          width: 16,
+        ),
+        TokenOptionsButton(
+          onPressed: () {},
+          subLabel: "Buy",
+          iconAssetSVG: Assets.svg.creditCard,
+        ),
+      ],
+    );
+  }
+}
+
+class TokenOptionsButton extends StatelessWidget {
+  const TokenOptionsButton({
+    Key? key,
+    required this.onPressed,
+    required this.subLabel,
+    required this.iconAssetSVG,
+  }) : super(key: key);
+
+  final VoidCallback onPressed;
+  final String subLabel;
+  final String iconAssetSVG;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        RawMaterialButton(
+          fillColor: Theme.of(context).extension<StackColors>()!.popupBG,
+          elevation: 0,
+          focusElevation: 0,
+          hoverElevation: 0,
+          highlightElevation: 0,
+          constraints: const BoxConstraints(),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(
+              Constants.size.circularBorderRadius,
+            ),
+          ),
+          onPressed: onPressed,
+          child: Padding(
+            padding: const EdgeInsets.all(10),
+            child: SvgPicture.asset(
+              iconAssetSVG,
+              color: const Color(0xFF424A97), // todo: fix color
+              width: 24,
+              height: 24,
+            ),
+          ),
+        ),
+        const SizedBox(
+          height: 6,
+        ),
+        Text(
+          subLabel,
+          style: STextStyles.w500_12(context),
+        )
+      ],
+    );
+  }
+}

lib/pages/token_view/token_view.dart

@@ -2,6 +2,7 @@ import 'package:event_bus/event_bus.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_svg/svg.dart';
+import 'package:stackwallet/pages/token_view/sub_widgets/token_summary.dart';
 import 'package:stackwallet/pages/token_view/sub_widgets/token_transaction_list_widget.dart';
 import 'package:stackwallet/pages/wallet_view/transaction_views/all_transactions_view.dart';
 import 'package:stackwallet/services/ethereum/ethereum_token_service.dart';
@@ -98,19 +99,12 @@ class _TokenViewState extends ConsumerState<TokenView> {
               const SizedBox(
                 height: 10,
               ),
-              // Center(
+              Padding(
-              //   child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 16),
-              //     padding: const EdgeInsets.symmetric(horizontal: 16),
+                child: TokenSummary(
-              //     child: TokenSummary(
+                  walletId: widget.walletId,
-              //       walletId: widget.walletId,
+                ),
-              //       managerProvider: managerProvider,
+              ),
-              //       initialSyncStatus: ref.watch(managerProvider
-              //               .select((value) => value.isRefreshing))
-              //           ? WalletSyncStatus.syncing
-              //           : WalletSyncStatus.synced,
-              //     ),
-              //   ),
-              // ),
               const SizedBox(
                 height: 20,
               ),

lib/utilities/assets.dart

@@ -210,6 +210,7 @@ class _SVG {
   String get faceId => "assets/svg/faceid.svg";
   String get tokens => "assets/svg/tokens.svg";
   String get circlePlusDark => "assets/svg/circle-plus.svg";
+  String get creditCard => "assets/svg/cc.svg";
 
   String get ellipse1 => "assets/svg/Ellipse-43.svg";
   String get ellipse2 => "assets/svg/Ellipse-42.svg";

pubspec.yaml

@@ -310,6 +310,7 @@ flutter:
     - assets/svg/whirlpool.svg
     - assets/svg/fingerprint.svg
     - assets/svg/faceid.svg
+    - assets/svg/cc.svg
     # light theme coin
     - assets/images/light/