Merge branch 'certsScreen' into 'master'

add certs screen See merge request clients/gecko!41
2022-12-02 06:04:13 +01:00 · 2022-12-02 06:04:13 +01:00 · bafd853884
parent da0e9ba2df 6b1df55ede
commit bafd853884
17 changed files with 563 additions and 137 deletions
--- a/lib/models/queries_indexer.dart
+++ b/lib/models/queries_indexer.dart
@ -56,5 +56,26 @@ query ($address: String!, $number: Int!, $cursor: String) {
 }
 ''';

-// To parse indexer date format
-// log.d(DateTime.parse("2022-06-13T16:51:24.001+00:00").toString());
+const String getCertsReceived = r'''
+query ($address: String!) {
+  certification(where: {receiver: {pubkey: {_eq: $address}}}) {
+    issuer {
+      pubkey
+      name
+    }
+    created_at
+  }
+}
+''';
+
+const String getCertsSent = r'''
+query ($address: String!) {
+  certification(where: {issuer: {pubkey: {_eq: $address}}}) {
+    receiver {
+      pubkey
+      name
+    }
+    created_at
+  }
+}
+''';
--- a/lib/models/widgets_keys.dart
+++ b/lib/models/widgets_keys.dart
@ -61,6 +61,9 @@ const keyCloseTransactionScreen = Key('keyCloseTransactionScreen');
 const keyListTransactions = Key('keyListTransactions');
 const keyActivityScreen = Key('keyActivityScreen');

+// Certification view
+const keyCertsReceived = Key('keyCertsReceived');
+
 // Unlock wallet
 const keyUnlockWallet = Key('keyUnlockWallet');
 const keyPinForm = Key('keyPinForm');
--- a/lib/providers/cesium_plus.dart
+++ b/lib/providers/cesium_plus.dart
@ -8,8 +8,6 @@ import 'package:path_provider/path_provider.dart';

 class CesiumPlusProvider with ChangeNotifier {
  TextEditingController cesiumName = TextEditingController();
-  Image defaultAvatar(double size) =>
-      Image.asset(('assets/icon_user.png'), height: size);

  CancelToken avatarCancelToken = CancelToken();

@ -156,3 +154,6 @@ class CesiumPlusProvider with ChangeNotifier {
    return finalAvatar;
  }
 }
+
+Image defaultAvatar(double size) =>
+    Image.asset(('assets/icon_user.png'), height: size);
--- a/lib/providers/duniter_indexer.dart
+++ b/lib/providers/duniter_indexer.dart
@ -248,8 +248,6 @@ class DuniterIndexer with ChangeNotifier {
  Widget searchIdentity(BuildContext context, String name) {
    // WalletOptionsProvider _walletOptions =
    //     Provider.of<WalletOptionsProvider>(context, listen: false);
-    final cesiumPlusProvider =
-        Provider.of<CesiumPlusProvider>(context, listen: false);
    WalletsProfilesProvider walletsProfiles =
        Provider.of<WalletsProfilesProvider>(context, listen: false);
    if (indexerEndpoint == '') {
@ -305,7 +303,7 @@ class DuniterIndexer with ChangeNotifier {
                        key: keySearchResult(profile['pubkey']),
                        horizontalTitleGap: 40,
                        contentPadding: const EdgeInsets.all(5),
-                        leading: cesiumPlusProvider.defaultAvatar(avatarSize),
+                        leading: defaultAvatar(avatarSize),
                        title: Row(children: <Widget>[
                          Text(getShortPubkey(profile['pubkey']),
                              style: const TextStyle(
--- a/lib/providers/wallets_profiles.dart
+++ b/lib/providers/wallets_profiles.dart
@ -1,21 +1,13 @@
 import 'dart:io';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-
 import 'package:gecko/globals.dart';
 import 'package:gecko/models/g1_wallets_list.dart';
-import 'package:gecko/models/widgets_keys.dart';
-import 'package:gecko/providers/cesium_plus.dart';
-import 'package:gecko/providers/substrate_sdk.dart';
-import 'package:gecko/providers/wallet_options.dart';
-import 'package:gecko/screens/common_elements.dart';
 import 'package:gecko/screens/wallet_view.dart';
 import 'package:jdenticon_dart/jdenticon_dart.dart';
 import 'package:permission_handler/permission_handler.dart';
 // import 'package:qrscan/qrscan.dart' as scanner;
 import 'package:barcode_scan2/barcode_scan2.dart';
-import 'package:provider/provider.dart';

 class WalletsProfilesProvider with ChangeNotifier {
  WalletsProfilesProvider(this.address);
@ -130,101 +122,6 @@ class WalletsProfilesProvider with ChangeNotifier {
    return _balance;
  }

-  Widget headerProfileView(
-      BuildContext context, String address, String? username) {
-    const double avatarSize = 140;
-
-    final walletOptions =
-        Provider.of<WalletOptionsProvider>(context, listen: false);
-    final cesiumPlusProvider =
-        Provider.of<CesiumPlusProvider>(context, listen: false);
-
-    return Stack(children: <Widget>[
-      Consumer<SubstrateSdk>(builder: (context, sub, _) {
-        bool isAccountExist = balanceCache[address] != 0;
-        return Container(
-            height: 180,
-            decoration: BoxDecoration(
-              gradient: LinearGradient(
-                begin: Alignment.topCenter,
-                end: Alignment.bottomCenter,
-                colors: [
-                  isAccountExist ? yellowC : Colors.grey[400]!,
-                  isAccountExist ? const Color(0xFFE7811A) : Colors.grey[600]!,
-                ],
-              ),
-            ));
-      }),
-      Padding(
-        padding: const EdgeInsets.only(left: 30, right: 40),
-        child: Row(children: <Widget>[
-          Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: <Widget>[
-                Container(
-                  height: 10,
-                  color: yellowC, // Colors.grey[400],
-                ),
-                Row(children: [
-                  GestureDetector(
-                    key: keyCopyAddress,
-                    onTap: () {
-                      Clipboard.setData(ClipboardData(text: address));
-                      snackCopyKey(context);
-                    },
-                    child: Text(
-                      getShortPubkey(address),
-                      style: const TextStyle(
-                        fontSize: 30,
-                        fontWeight: FontWeight.w800,
-                      ),
-                    ),
-                  ),
-                ]),
-                const SizedBox(height: 25),
-                balance(context, address, 22),
-                const SizedBox(height: 10),
-                walletOptions.idtyStatus(context, address,
-                    isOwner: false, color: Colors.black),
-                getCerts(context, address, 14),
-                // if (username == null &&
-                //     g1WalletsBox.get(address)?.username != null)
-                //   SizedBox(
-                //     width: 230,
-                //     child: Text(
-                //       g1WalletsBox.get(address)?.username ?? '',
-                //       style: const TextStyle(
-                //         fontSize: 27,
-                //         color: Color(0xff814C00),
-                //       ),
-                //     ),
-                //   ),
-                // if (username != null)
-                //   SizedBox(
-                //     width: 230,
-                //     child: Text(
-                //       username,
-                //       style: const TextStyle(
-                //         fontSize: 27,
-                //         color: Color(0xff814C00),
-                //       ),
-                //     ),
-                //   ),
-                const SizedBox(height: 55),
-              ]),
-          const Spacer(),
-          Column(children: <Widget>[
-            ClipOval(
-              child: cesiumPlusProvider.defaultAvatar(avatarSize),
-            ),
-            const SizedBox(height: 25),
-          ]),
-        ]),
-      ),
-      CommonElements().offlineInfo(context),
-    ]);
-  }
-
  bool isContact(String address) {
    return contactsBox.containsKey(address);
  }
--- a/lib/screens/activity.dart
+++ b/lib/screens/activity.dart
@ -9,9 +9,9 @@ import 'package:gecko/providers/cesium_plus.dart';
 import 'package:gecko/providers/duniter_indexer.dart';
 import 'package:gecko/providers/home.dart';
 import 'package:gecko/providers/substrate_sdk.dart';
-import 'package:gecko/providers/wallets_profiles.dart';
 import 'package:flutter/material.dart';
 import 'package:gecko/screens/wallet_view.dart';
+import 'package:gecko/widgets/header_profile.dart';
 import 'package:graphql_flutter/graphql_flutter.dart';
 import 'package:provider/provider.dart';

@ -31,8 +31,6 @@ class ActivityScreen extends StatelessWidget with ChangeNotifier {

  @override
  Widget build(BuildContext context) {
-    WalletsProfilesProvider walletProfile =
-        Provider.of<WalletsProfilesProvider>(context, listen: false);
    HomeProvider homeProvider =
        Provider.of<HomeProvider>(context, listen: false);

@ -48,7 +46,7 @@ class ActivityScreen extends StatelessWidget with ChangeNotifier {
        ),
        bottomNavigationBar: homeProvider.bottomAppBar(context),
        body: Column(children: <Widget>[
-          walletProfile.headerProfileView(context, address, username),
+          HeaderProfile(address: address, username: username),
          historyQuery(context),
        ]));
  }
@ -188,10 +186,8 @@ class ActivityScreen extends StatelessWidget with ChangeNotifier {
          ]);
  }

-  Widget getTransactionTile(BuildContext context, final duniterIndexer) {
-    final cesiumPlusProvider =
-        Provider.of<CesiumPlusProvider>(context, listen: false);
-
+  Widget getTransactionTile(
+      BuildContext context, DuniterIndexer duniterIndexer) {
    int keyID = 0;
    String? dateDelimiter;
    String? lastDateDelimiter;
@ -301,7 +297,7 @@ class ActivityScreen extends StatelessWidget with ChangeNotifier {
                  contentPadding: const EdgeInsets.only(
                      left: 20, right: 30, top: 15, bottom: 15),
                  leading: ClipOval(
-                    child: cesiumPlusProvider.defaultAvatar(avatarSize),
+                    child: defaultAvatar(avatarSize),
                  ),
                  title: Padding(
                    padding: const EdgeInsets.only(bottom: 5),
--- a/lib/screens/certifications.dart
+++ b/lib/screens/certifications.dart
@ -0,0 +1,64 @@
+import 'package:accordion/controllers.dart';
+import 'package:gecko/globals.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/widgets/certs_received.dart';
+import 'package:gecko/widgets/certs_sent.dart';
+import 'package:accordion/accordion.dart';
+
+class CertificationsScreen extends StatelessWidget {
+  const CertificationsScreen(
+      {Key? key, required this.address, required this.username})
+      : super(key: key);
+  final String address;
+  final String username;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        backgroundColor: backgroundColor,
+        appBar: AppBar(
+            elevation: 0,
+            toolbarHeight: 60 * ratio,
+            title: const SizedBox(
+              height: 22,
+              child: Text('Certifications'),
+            )),
+        body: SafeArea(
+          child: Accordion(
+              maxOpenSections: 1,
+              headerBackgroundColorOpened: orangeC,
+              scaleWhenAnimating: true,
+              openAndCloseAnimation: true,
+              headerPadding:
+                  const EdgeInsets.symmetric(vertical: 7, horizontal: 15),
+              sectionOpeningHapticFeedback: SectionHapticFeedback.heavy,
+              sectionClosingHapticFeedback: SectionHapticFeedback.light,
+              children: [
+                AccordionSection(
+                  isOpen: true,
+                  leftIcon:
+                      const Icon(Icons.insights_rounded, color: Colors.black),
+                  headerBackgroundColor: yellowC,
+                  headerBackgroundColorOpened: orangeC,
+                  header: const Text('Reçus'),
+                  content: CertsReceived(address: address),
+                  contentHorizontalPadding: 0,
+                  contentBorderWidth: 1,
+                ),
+                AccordionSection(
+                  isOpen: false,
+                  leftIcon:
+                      const Icon(Icons.insights_rounded, color: Colors.black),
+                  headerBackgroundColor: yellowC,
+                  headerBackgroundColorOpened: orangeC,
+                  header: const Text('Envoyés'),
+                  content: CertsSent(address: address),
+                  contentHorizontalPadding: 20,
+                  contentBorderWidth: 1,
+                  // onOpenSection: () => print('onOpenSection ...'),
+                  // onCloseSection: () => print('onCloseSection ...'),
+                ),
+              ]),
+        ));
+  }
+}
--- a/lib/screens/my_contacts.dart
+++ b/lib/screens/my_contacts.dart
@ -19,8 +19,6 @@ class ContactsScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    final cesiumPlusProvider =
-        Provider.of<CesiumPlusProvider>(context, listen: false);
    WalletsProfilesProvider walletsProfilesClass =
        Provider.of<WalletsProfilesProvider>(context, listen: true);
    HomeProvider homeProvider =
@ -72,8 +70,7 @@ class ContactsScreen extends StatelessWidget {
                                key: keySearchResult('keyID++'),
                                horizontalTitleGap: 40,
                                contentPadding: const EdgeInsets.all(5),
-                                leading: cesiumPlusProvider
-                                    .defaultAvatar(avatarSize),
+                                leading: defaultAvatar(avatarSize),
                                title: Row(children: <Widget>[
                                  Text(getShortPubkey(g1Wallet.address),
                                      style: const TextStyle(
--- a/lib/screens/search_result.dart
+++ b/lib/screens/search_result.dart
@ -21,8 +21,6 @@ class SearchResultScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final searchProvider = Provider.of<SearchProvider>(context, listen: false);
-    final cesiumPlusProvider =
-        Provider.of<CesiumPlusProvider>(context, listen: false);
    WalletsProfilesProvider walletsProfilesClass =
        Provider.of<WalletsProfilesProvider>(context, listen: false);
    HomeProvider homeProvider =
@ -94,8 +92,7 @@ class SearchResultScreen extends StatelessWidget {
                                      key: keySearchResult(g1Wallet.address),
                                      horizontalTitleGap: 40,
                                      contentPadding: const EdgeInsets.all(5),
-                                      leading: cesiumPlusProvider
-                                          .defaultAvatar(avatarSize),
+                                      leading: defaultAvatar(avatarSize),
                                      title: Row(children: <Widget>[
                                        Text(getShortPubkey(g1Wallet.address),
                                            style: const TextStyle(
--- a/lib/screens/wallet_view.dart
+++ b/lib/screens/wallet_view.dart
@ -20,6 +20,8 @@ import 'package:gecko/screens/myWallets/choose_wallet.dart';
 import 'package:gecko/screens/myWallets/unlocking_wallet.dart';
 import 'package:gecko/screens/qrcode_fullscreen.dart';
 import 'package:gecko/screens/transaction_in_progress.dart';
+import 'package:gecko/widgets/header_profile.dart';
+import 'package:gecko/widgets/page_route_no_transition.dart';
 import 'package:provider/provider.dart';
 import 'package:qr_flutter/qr_flutter.dart';

@ -37,8 +39,6 @@ class WalletViewScreen extends StatelessWidget {
  Widget build(BuildContext context) {
    WalletsProfilesProvider walletProfile =
        Provider.of<WalletsProfilesProvider>(context, listen: false);
-    final cesiumPlusProvider =
-        Provider.of<CesiumPlusProvider>(context, listen: false);
    walletProfile.address = address;
    final sub = Provider.of<SubstrateSdk>(context, listen: false);
    HomeProvider homeProvider =
@ -107,7 +107,7 @@ class WalletViewScreen extends StatelessWidget {
        bottomNavigationBar: homeProvider.bottomAppBar(context),
        body: SafeArea(
          child: Column(children: <Widget>[
-            walletProfile.headerProfileView(context, address, username),
+            HeaderProfile(address: address, username: username),
            SizedBox(height: isTall ? 10 : 0),
            Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
              Column(children: <Widget>[
@ -128,11 +128,10 @@ class WalletViewScreen extends StatelessWidget {
                          onTap: () {
                            Navigator.push(
                              context,
-                              MaterialPageRoute(builder: (context) {
+                              PageNoTransit(builder: (context) {
                                return ActivityScreen(
                                    address: address,
-                                    avatar:
-                                        cesiumPlusProvider.defaultAvatar(50));
+                                    avatar: defaultAvatar(50));
                              }),
                            );
                          }),
--- a/lib/widgets/cert_tile.dart
+++ b/lib/widgets/cert_tile.dart
@ -0,0 +1,84 @@
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/models/widgets_keys.dart';
+import 'package:gecko/providers/cesium_plus.dart';
+import 'package:gecko/providers/substrate_sdk.dart';
+import 'package:gecko/screens/wallet_view.dart';
+
+class CertTile extends StatelessWidget {
+  const CertTile({
+    Key? key,
+    required this.listCerts,
+  }) : super(key: key);
+
+  final List listCerts;
+
+  @override
+  Widget build(BuildContext context) {
+    int keyID = 0;
+    const double avatarSize = 200;
+
+    return Column(
+        children: listCerts.map((repository) {
+      // log.d('bbbbbbbbbbbbbbbbbbbbbb: ' + repository.toString());
+
+      return Column(children: <Widget>[
+        Padding(
+          padding: const EdgeInsets.only(right: 0),
+          child:
+              // Row(children: [Column(children: [],)],)
+              ListTile(
+                  key: keyTransaction(keyID++),
+                  contentPadding: const EdgeInsets.only(
+                      left: 20, right: 30, top: 15, bottom: 15),
+                  leading: ClipOval(
+                    child: defaultAvatar(avatarSize),
+                  ),
+                  title: Padding(
+                    padding: const EdgeInsets.only(bottom: 5),
+                    child: Text(repository['name'],
+                        style: const TextStyle(fontSize: 20)),
+                  ),
+                  subtitle: RichText(
+                    text: TextSpan(
+                      style: TextStyle(
+                        fontSize: 16,
+                        color: Colors.grey[700],
+                      ),
+                      children: <TextSpan>[
+                        TextSpan(
+                          text: repository['date'],
+                        ),
+                        if (repository[2] != '')
+                          TextSpan(
+                            text: '  ·  ',
+                            style: TextStyle(
+                              fontSize: 20,
+                              color: Colors.grey[550],
+                            ),
+                          ),
+                        TextSpan(
+                          text: getShortPubkey(repository['address']),
+                          style: TextStyle(
+                            fontStyle: FontStyle.italic,
+                            color: Colors.grey[600],
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                  dense: false,
+                  isThreeLine: false,
+                  onTap: () {
+                    Navigator.push(
+                      homeContext,
+                      MaterialPageRoute(builder: (context) {
+                        return WalletViewScreen(address: repository['address']);
+                      }),
+                    );
+                  }),
+        ),
+      ]);
+    }).toList());
+  }
+}
--- a/lib/widgets/certs_received.dart
+++ b/lib/widgets/certs_received.dart
@ -0,0 +1,106 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/models/queries_indexer.dart';
+import 'package:gecko/models/widgets_keys.dart';
+import 'package:gecko/widgets/cert_tile.dart';
+import 'package:graphql_flutter/graphql_flutter.dart';
+
+class CertsReceived extends StatelessWidget {
+  const CertsReceived({Key? key, required this.address}) : super(key: key);
+  final String address;
+
+  @override
+  Widget build(BuildContext context) {
+    final screenHeight = MediaQuery.of(context).size.height;
+    final appBarHeight = AppBar().preferredSize.height;
+    log.d(appBarHeight);
+    final windowHeight = screenHeight - appBarHeight - 200;
+
+    final httpLink = HttpLink(
+      '$indexerEndpoint/v1/graphql',
+    );
+
+    final client = ValueNotifier(
+      GraphQLClient(
+        cache: GraphQLCache(store: HiveStore()),
+        link: httpLink,
+      ),
+    );
+    return GraphQLProvider(
+      client: client,
+      child: Query(
+        options: QueryOptions(
+          document: gql(getCertsReceived),
+          variables: <String, dynamic>{
+            'address': address,
+          },
+        ),
+        builder: (QueryResult result, {fetchMore, refetch}) {
+          if (result.isLoading && result.data == null) {
+            return const Center(
+              child: CircularProgressIndicator(),
+            );
+          }
+
+          if (result.hasException || result.data == null) {
+            log.e('Error Indexer: ${result.exception}');
+            return Column(children: <Widget>[
+              const SizedBox(height: 50),
+              Text(
+                "noNetworkNoHistory".tr(),
+                textAlign: TextAlign.center,
+                style: const TextStyle(fontSize: 18),
+              )
+            ]);
+          } else if (result.data?['certification']?.isEmpty) {
+            return Column(children: <Widget>[
+              const SizedBox(height: 50),
+              Text(
+                "noDataToDisplay".tr(),
+                style: const TextStyle(fontSize: 18),
+              )
+            ]);
+          }
+          // Build history list
+          return SizedBox(
+            height: windowHeight,
+            child: Expanded(
+              child: ListView(
+                key: keyListTransactions,
+                children: <Widget>[certsView(result)],
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget certsView(QueryResult result) {
+    List listCerts = [];
+    final List certsData = result.data!['certification'];
+
+    for (final cert in certsData) {
+      final String issuerAddress = cert['issuer']['pubkey'];
+      final String issuerName = cert['issuer']['name'];
+      final date = DateTime.parse(cert['created_at']);
+      final dp = DateTime(date.year, date.month, date.day);
+      final dateForm = '${dp.day}-${dp.month}-${dp.year}';
+      listCerts.add(
+          {'address': issuerAddress, 'name': issuerName, 'date': dateForm});
+    }
+
+    return result.data == null
+        ? Column(children: <Widget>[
+            const SizedBox(height: 50),
+            Text(
+              "noTransactionToDisplay".tr(),
+              style: const TextStyle(fontSize: 18),
+            )
+          ])
+        : Column(children: <Widget>[
+            CertTile(listCerts: listCerts),
+          ]);
+  }
+}
--- a/lib/widgets/certs_sent.dart
+++ b/lib/widgets/certs_sent.dart
@ -0,0 +1,107 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/models/queries_indexer.dart';
+import 'package:gecko/models/widgets_keys.dart';
+import 'package:gecko/widgets/cert_tile.dart';
+import 'package:graphql_flutter/graphql_flutter.dart';
+
+class CertsSent extends StatelessWidget {
+  const CertsSent({Key? key, required this.address}) : super(key: key);
+  final String address;
+
+  @override
+  Widget build(BuildContext context) {
+    final screenHeight = MediaQuery.of(context).size.height;
+    final appBarHeight = AppBar().preferredSize.height;
+    log.d(appBarHeight);
+    final windowHeight = screenHeight - appBarHeight - 200;
+
+    final httpLink = HttpLink(
+      '$indexerEndpoint/v1/graphql',
+    );
+
+    final client = ValueNotifier(
+      GraphQLClient(
+        cache: GraphQLCache(store: HiveStore()),
+        link: httpLink,
+      ),
+    );
+    return GraphQLProvider(
+      client: client,
+      child: Query(
+        options: QueryOptions(
+          document: gql(getCertsSent),
+          variables: <String, dynamic>{
+            'address': address,
+          },
+        ),
+        builder: (QueryResult result, {fetchMore, refetch}) {
+          if (result.isLoading && result.data == null) {
+            return const Center(
+              child: CircularProgressIndicator(),
+            );
+          }
+
+          if (result.hasException || result.data == null) {
+            log.e('Error Indexer: ${result.exception}');
+            return Column(children: <Widget>[
+              const SizedBox(height: 50),
+              Text(
+                "noNetworkNoHistory".tr(),
+                textAlign: TextAlign.center,
+                style: const TextStyle(fontSize: 18),
+              )
+            ]);
+          } else if (result.data?['certification']?.isEmpty) {
+            return Column(children: <Widget>[
+              const SizedBox(height: 50),
+              Text(
+                "noDataToDisplay".tr(),
+                style: const TextStyle(fontSize: 18),
+              )
+            ]);
+          }
+          // Build history list
+          return SizedBox(
+            height: windowHeight,
+            child: Expanded(
+              child: ListView(
+                key: keyListTransactions,
+                children: <Widget>[certsView(result)],
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget certsView(QueryResult result) {
+    List listCerts = [];
+    final List certsData = result.data!['certification'];
+
+    for (final cert in certsData) {
+      final String issuerAddress = cert['receiver']['pubkey'];
+      final String issuerName = cert['receiver']['name'];
+      final date = DateTime.parse(cert['created_at']);
+      final dp = DateTime(date.year, date.month, date.day);
+      final dateForm = '${dp.day}-${dp.month}-${dp.year}';
+
+      listCerts.add(
+          {'address': issuerAddress, 'name': issuerName, 'date': dateForm});
+    }
+
+    return result.data == null
+        ? Column(children: <Widget>[
+            const SizedBox(height: 50),
+            Text(
+              "noTransactionToDisplay".tr(),
+              style: const TextStyle(fontSize: 18),
+            )
+          ])
+        : Column(children: <Widget>[
+            CertTile(listCerts: listCerts),
+          ]);
+  }
+}
--- a/lib/widgets/header_profile.dart
+++ b/lib/widgets/header_profile.dart
@ -0,0 +1,133 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/models/widgets_keys.dart';
+import 'package:gecko/providers/cesium_plus.dart';
+import 'package:gecko/providers/substrate_sdk.dart';
+import 'package:gecko/providers/wallet_options.dart';
+import 'package:gecko/providers/wallets_profiles.dart';
+import 'package:gecko/screens/certifications.dart';
+import 'package:gecko/screens/common_elements.dart';
+import 'package:gecko/widgets/page_route_no_transition.dart';
+import 'package:provider/provider.dart';
+
+class HeaderProfile extends StatelessWidget {
+  const HeaderProfile({
+    Key? key,
+    required this.address,
+    required this.username,
+  }) : super(key: key);
+
+  final String address;
+  final String? username;
+
+  @override
+  Widget build(BuildContext context) {
+    const double avatarSize = 140;
+
+    final walletOptions =
+        Provider.of<WalletOptionsProvider>(context, listen: false);
+
+    return Stack(children: <Widget>[
+      Consumer<SubstrateSdk>(builder: (context, sub, _) {
+        bool isAccountExist = balanceCache[address] != 0;
+        return Container(
+            height: 180,
+            decoration: BoxDecoration(
+              gradient: LinearGradient(
+                begin: Alignment.topCenter,
+                end: Alignment.bottomCenter,
+                colors: [
+                  isAccountExist ? yellowC : Colors.grey[400]!,
+                  isAccountExist ? const Color(0xFFE7811A) : Colors.grey[600]!,
+                ],
+              ),
+            ));
+      }),
+      Padding(
+        padding: const EdgeInsets.only(left: 30, right: 40),
+        child: Row(children: <Widget>[
+          Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: <Widget>[
+                Container(
+                  height: 10,
+                  color: yellowC, // Colors.grey[400],
+                ),
+                Row(children: [
+                  GestureDetector(
+                    key: keyCopyAddress,
+                    onTap: () {
+                      Clipboard.setData(ClipboardData(text: address));
+                      snackCopyKey(context);
+                    },
+                    child: Text(
+                      getShortPubkey(address),
+                      style: const TextStyle(
+                        fontSize: 30,
+                        fontWeight: FontWeight.w800,
+                      ),
+                    ),
+                  ),
+                ]),
+                const SizedBox(height: 25),
+                balance(context, address, 22),
+                const SizedBox(height: 10),
+
+                InkWell(
+                  onTap: () => {
+                    Navigator.push(
+                      context,
+                      PageNoTransit(builder: (context) {
+                        return CertificationsScreen(
+                            address: address, username: '');
+                      }),
+                    ),
+                  },
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      walletOptions.idtyStatus(context, address,
+                          isOwner: false, color: Colors.black),
+                      getCerts(context, address, 14)
+                    ],
+                  ),
+                ),
+                // if (username == null &&
+                //     g1WalletsBox.get(address)?.username != null)
+                //   SizedBox(
+                //     width: 230,
+                //     child: Text(
+                //       g1WalletsBox.get(address)?.username ?? '',
+                //       style: const TextStyle(
+                //         fontSize: 27,
+                //         color: Color(0xff814C00),
+                //       ),
+                //     ),
+                //   ),
+                // if (username != null)
+                //   SizedBox(
+                //     width: 230,
+                //     child: Text(
+                //       username,
+                //       style: const TextStyle(
+                //         fontSize: 27,
+                //         color: Color(0xff814C00),
+                //       ),
+                //     ),
+                //   ),
+                const SizedBox(height: 55),
+              ]),
+          const Spacer(),
+          Column(children: <Widget>[
+            ClipOval(
+              child: defaultAvatar(avatarSize),
+            ),
+            const SizedBox(height: 25),
+          ]),
+        ]),
+      ),
+      CommonElements().offlineInfo(context),
+    ]);
+  }
+}
--- a/lib/widgets/page_route_no_transition.dart
+++ b/lib/widgets/page_route_no_transition.dart
@ -0,0 +1,8 @@
+import 'package:flutter/material.dart';
+
+class PageNoTransit extends MaterialPageRoute {
+  PageNoTransit({builder}) : super(builder: builder);
+
+  @override
+  Duration get transitionDuration => const Duration(milliseconds: 0);
+}
--- a/pubspec.lock
+++ b/pubspec.lock
@ -8,6 +8,13 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "50.0.0"
+  accordion:
+    dependency: "direct main"
+    description:
+      name: accordion
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.5.1"
  analyzer:
    dependency: transitive
    description:
@ -273,7 +280,7 @@ packages:
      name: dart_code_metrics
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "5.0.1"
+    version: "5.1.0"
  dart_style:
    dependency: transitive
    description:
@ -777,7 +784,7 @@ packages:
      name: mime
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "1.0.2"
+    version: "1.0.3"
  mobx:
    dependency: transitive
    description:
@ -1076,20 +1083,27 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "0.27.7"
+  scroll_to_index:
+    dependency: transitive
+    description:
+      name: scroll_to_index
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.1"
  sentry:
    dependency: transitive
    description:
      name: sentry
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "6.16.1"
+    version: "6.17.0"
  sentry_flutter:
    dependency: "direct main"
    description:
      name: sentry_flutter
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "6.16.1"
+    version: "6.17.0"
  shared_preferences:
    dependency: "direct main"
    description:
--- a/pubspec.yaml
+++ b/pubspec.yaml
@ -57,6 +57,7 @@ dependencies:
  pointycastle: ^3.6.1
  hex: ^0.2.0
  flutter_dotenv: ^5.0.2
+  accordion: ^2.5.1

 dev_dependencies:
  # flutter_launcher_icons: ^0.9.2