WIP trocador assets and kyc info

assets/svg/exchange_icons/trocador.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.7254 15.0245C21.0915 15.3907 21.0915 15.9843 20.7254 16.3504L17.6004 19.4747C17.0141 20.0611 16 19.6501 16 18.8118V17.25H13.7037C13.6394 17.25 13.5758 17.2367 13.5169 17.2111C13.4579 17.1855 13.4049 17.1481 13.361 17.1011L10.6049 14.1481L12.6882 11.916L14.75 14.125H16V12.5632C16 11.7258 17.0134 11.3133 17.6004 11.9003L20.7254 15.0245ZM1.46875 7.87499H4.74999L6.81175 10.084L8.89507 7.85187L6.13898 4.8989C6.09512 4.85191 6.04206 4.81444 5.98311 4.78882C5.92415 4.76321 5.86056 4.74999 5.79628 4.74999H1.46875C1.20988 4.74999 1 4.95988 1 5.21874V7.40624C1 7.66511 1.20988 7.87499 1.46875 7.87499ZM16 7.87499V9.43686C16 10.2751 17.0141 10.6861 17.6004 10.0998L20.7254 6.97542C21.0915 6.60929 21.0915 6.0157 20.7254 5.6496L17.6004 2.52535C17.0134 1.93832 16 2.35086 16 3.18824V4.74999H13.7037C13.6394 4.75 13.5758 4.76322 13.5169 4.78884C13.4579 4.81445 13.4049 4.85192 13.361 4.8989L4.74999 14.125H1.46875C1.20988 14.125 1 14.3349 1 14.5937V16.7812C1 17.0401 1.20988 17.25 1.46875 17.25H5.79628C5.9262 17.25 6.05031 17.196 6.13898 17.1011L14.75 7.87499H16Z" fill="#FF3C00" stroke="#FF3C00" stroke-width="0.0585938"/>
+</svg>

assets/svg/trocador_rating_a.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7973_141939)">
+<path d="M10 0C4.47656 0 0 4.47656 0 10C0 15.5234 4.47656 20 10 20C15.5234 20 20 15.5234 20 10C20 4.47656 15.5234 0 10 0ZM14.1445 14.2891C14.017 14.3479 13.8833 14.3761 13.752 14.3761C13.3973 14.3761 13.0586 14.1738 12.9 13.8293L12.4301 12.8066H7.57031L7.10039 13.8293C6.88258 14.3015 6.32852 14.5074 5.85586 14.289C5.38594 14.0719 5.18086 13.5113 5.39766 13.0394L9.14727 4.91051C9.45359 4.24332 10.5438 4.24332 10.85 4.91051L14.5996 13.0394C14.8164 13.5117 14.6133 14.0703 14.1445 14.2891ZM8.40234 10.9219H11.5293L10 7.51953L8.40234 10.9219Z" fill="#00A578" stroke="#00A578" stroke-width="0.0371094"/>
+</g>
+<defs>
+<clipPath id="clip0_7973_141939">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/svg/trocador_rating_b.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7973_141943)">
+<path d="M11.4062 10.9375H8.125V13.125H11.4062C12.0078 13.125 12.5 12.6328 12.5 12.0312C12.5 11.4297 12.0078 10.9375 11.4062 10.9375ZM11.875 7.96875C11.875 7.36562 11.3844 6.875 10.7812 6.875H8.125V9.0625H10.7812C11.3828 9.0625 11.875 8.57031 11.875 7.96875ZM10 0C4.47656 0 0 4.47656 0 10C0 15.5234 4.47656 20 10 20C15.5234 20 20 15.5234 20 10C20 4.47656 15.5234 0 10 0ZM11.4062 15H7.1875C6.67188 15 6.25 14.582 6.25 14.0625V5.9375C6.25 5.42188 6.67188 5 7.1875 5H10.7812C12.418 5 13.75 6.33203 13.75 7.96875C13.75 8.60742 13.5429 9.1957 13.1984 9.68047C13.9102 10.2227 14.375 11.0703 14.375 12.0312C14.375 13.668 13.043 15 11.4062 15Z" fill="#7AA500" stroke="#7AA500" stroke-width="0.0371094"/>
+</g>
+<defs>
+<clipPath id="clip0_7973_141943">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/svg/trocador_rating_c.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7973_141958)">
+<path d="M10 0C4.47656 0 0 4.47656 0 10C0 15.5234 4.47656 20 10 20C15.5234 20 20 15.5234 20 10C20 4.47656 15.5234 0 10 0ZM9.96484 13.125C10.7887 13.125 11.5633 12.8015 12.1469 12.2117C12.5112 11.8455 13.1059 11.8406 13.4727 12.2068C13.8407 12.5706 13.8431 13.1639 13.4788 13.5326C12.5391 14.4805 11.293 15 9.96484 15C6.88086 15 5.00391 12.409 5.00391 10C5.0036 7.61289 6.87383 5 9.96484 5C11.2922 5 12.541 5.52109 13.4789 6.46719C13.8438 6.83594 13.8398 7.42969 13.4727 7.79297C13.1058 8.15918 12.5113 8.15398 12.1469 7.78778C11.5625 7.19922 10.7891 6.875 9.96484 6.875C8.03516 6.875 6.875 8.51172 6.875 10C6.875 11.4805 8.03125 13.125 9.96484 13.125Z" fill="#F4C517" stroke="#F4C517" stroke-width="0.0371094"/>
+</g>
+<defs>
+<clipPath id="clip0_7973_141958">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/svg/trocador_rating_d.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_7973_141964)">
+<path d="M9.9375 6.875H8.125V13.125H9.93789C11.6953 13.125 13.125 11.7227 13.125 10C13.125 8.27734 11.6953 6.875 9.9375 6.875ZM10 0C4.47656 0 0 4.47656 0 10C0 15.5234 4.47656 20 10 20C15.5234 20 20 15.5234 20 10C20 4.47656 15.5234 0 10 0ZM9.9375 15H7.1875C6.67188 15 6.25 14.582 6.25 14.0625V5.9375C6.25 5.42188 6.67188 5 7.1875 5H9.93789C12.7305 5 15 7.24219 15 10C15 12.7578 12.7305 15 9.9375 15Z" fill="#F37B58" stroke="#F37B58" stroke-width="0.0371094"/>
+</g>
+<defs>
+<clipPath id="clip0_7973_141964">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

lib/pages/exchange_view/sub_widgets/exchange_provider_options.dart

@@ -20,6 +20,8 @@ import 'package:stackwallet/utilities/theme/stack_colors.dart';
 import 'package:stackwallet/utilities/util.dart';
 import 'package:stackwallet/widgets/animated_text.dart';
 import 'package:stackwallet/widgets/conditional_parent.dart';
+import 'package:stackwallet/widgets/exchange/trocador/trocador_kyc_info_button.dart';
+import 'package:stackwallet/widgets/exchange/trocador/trocador_rating_type_enum.dart';
 import 'package:stackwallet/widgets/rounded_white_container.dart';
 
 class ExchangeProviderOptions extends ConsumerStatefulWidget {
@@ -652,7 +654,7 @@ class _ExchangeProviderOptionsState
                             width: isDesktop ? 32 : 24,
                             height: isDesktop ? 32 : 24,
                             child: SvgPicture.asset(
-                              Assets.exchange.majesticBankBlue,
+                              Assets.exchange.trocador,
                               width: isDesktop ? 32 : 24,
                               height: isDesktop ? 32 : 24,
                             ),
@@ -805,6 +807,9 @@ class _ExchangeProviderOptionsState
                             ],
                           ),
                         ),
+                        const TrocadorKYCInfoButton(
+                          kycType: TrocadorKYCType.a,
+                        ),
                       ],
                     ),
                   ),

lib/utilities/assets.dart

@@ -63,6 +63,7 @@ class _EXCHANGE {
   String get simpleSwap => "${_path}simpleswap-icon.svg";
   String get majesticBankBlue => "${_path}mb_blue.svg";
   String get majesticBankGreen => "${_path}mb_green.svg";
+  String get trocador => "${_path}trocador.svg";
 }
 
 class _BUY {
@@ -285,6 +286,11 @@ class _SVG {
   String get list => "assets/svg/list-ul.svg";
   String get unclaimedPaynym => "assets/svg/unclaimed.png";
 
+  String get trocadorRatingA => "assets/svg/trocador_rating_a.svg";
+  String get trocadorRatingB => "assets/svg/trocador_rating_b.svg";
+  String get trocadorRatingC => "assets/svg/trocador_rating_c.svg";
+  String get trocadorRatingD => "assets/svg/trocador_rating_d.svg";
+
 // TODO provide proper assets
   String get bitcoinTestnet => "assets/svg/coin_icons/Bitcoin.svg";
   String get bitcoincashTestnet => "assets/svg/coin_icons/Bitcoincash.svg";

lib/widgets/exchange/trocador/trocador_kyc_icon.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:stackwallet/utilities/assets.dart';
+import 'package:stackwallet/utilities/theme/stack_colors.dart';
+import 'package:stackwallet/widgets/exchange/trocador/trocador_rating_type_enum.dart';
+
+class TrocadorKYCIcon extends StatelessWidget {
+  const TrocadorKYCIcon({
+    Key? key,
+    required this.kycType,
+    this.width = 18,
+    this.height = 18,
+  }) : super(key: key);
+
+  final TrocadorKYCType kycType;
+  final double width;
+  final double height;
+
+  String _getAssetName(TrocadorKYCType type) {
+    switch (type) {
+      case TrocadorKYCType.a:
+        return Assets.svg.trocadorRatingA;
+      case TrocadorKYCType.b:
+        return Assets.svg.trocadorRatingB;
+      case TrocadorKYCType.c:
+        return Assets.svg.trocadorRatingC;
+      case TrocadorKYCType.d:
+        return Assets.svg.trocadorRatingD;
+    }
+  }
+
+  Color _getColor(TrocadorKYCType type, BuildContext context) {
+    switch (type) {
+      case TrocadorKYCType.a:
+        return Theme.of(context).extension<StackColors>()!.accentColorGreen;
+      case TrocadorKYCType.b:
+        return const Color(0xFF7AA500);
+      case TrocadorKYCType.c:
+        return Theme.of(context).extension<StackColors>()!.accentColorYellow;
+      case TrocadorKYCType.d:
+        return const Color(0xFFF37B58);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SvgPicture.asset(
+      _getAssetName(kycType),
+      width: width,
+      height: height,
+      color: _getColor(kycType, context),
+    );
+  }
+}

lib/widgets/exchange/trocador/trocador_kyc_info_button.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:stackwallet/widgets/exchange/trocador/trocador_kyc_icon.dart';
+import 'package:stackwallet/widgets/exchange/trocador/trocador_rating_type_enum.dart';
+import 'package:stackwallet/widgets/trocador_kyc_rating_info.dart';
+
+class TrocadorKYCInfoButton extends StatelessWidget {
+  const TrocadorKYCInfoButton({
+    Key? key,
+    required this.kycType,
+  }) : super(key: key);
+
+  final TrocadorKYCType kycType;
+
+  @override
+  Widget build(BuildContext context) {
+    return IconButton(
+      onPressed: () {
+        showDialog<void>(
+          context: context,
+          builder: (context) => const TrocadorKYCRatingInfo(),
+        );
+      },
+      icon: TrocadorKYCIcon(
+        kycType: kycType,
+      ),
+    );
+  }
+}

lib/widgets/exchange/trocador/trocador_rating_type_enum.dart

@@ -0,0 +1,6 @@
+enum TrocadorKYCType {
+  a,
+  b,
+  c,
+  d;
+}

lib/widgets/trocador_kyc_rating_info.dart

@@ -0,0 +1,122 @@
+import 'package:flutter/material.dart';
+import 'package:stackwallet/utilities/text_styles.dart';
+import 'package:stackwallet/widgets/conditional_parent.dart';
+import 'package:stackwallet/widgets/desktop/secondary_button.dart';
+import 'package:stackwallet/widgets/exchange/trocador/trocador_kyc_icon.dart';
+import 'package:stackwallet/widgets/exchange/trocador/trocador_rating_type_enum.dart';
+import 'package:stackwallet/widgets/stack_dialog.dart';
+
+class TrocadorKYCRatingInfo extends StatelessWidget {
+  const TrocadorKYCRatingInfo({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final small = MediaQuery.of(context).size.width <= 500;
+    return ConditionalParent(
+      condition: !small,
+      builder: (child) => child,
+      child: ConditionalParent(
+        condition: small,
+        builder: (child) {
+          return StackDialogBase(
+            child: child,
+          );
+        },
+        child: Column(
+          children: [
+            Text(
+              "Trocador KYC Rating",
+              style: STextStyles.pageTitleH2(context),
+            ),
+            const SizedBox(
+              height: 16,
+            ),
+            const _Rating(
+              kycType: TrocadorKYCType.a,
+              text: "Never asks for user verification.",
+            ),
+            const SizedBox(
+              height: 16,
+            ),
+            const _Rating(
+              kycType: TrocadorKYCType.b,
+              text: "Rarely asks for verification. Refunds if refused.",
+            ),
+            const SizedBox(
+              height: 16,
+            ),
+            const _Rating(
+              kycType: TrocadorKYCType.c,
+              text:
+                  "Rarely asks for verification. Refunds if refused, unless a "
+                  "legal order prevents it.",
+            ),
+            const SizedBox(
+              height: 16,
+            ),
+            const _Rating(
+              kycType: TrocadorKYCType.d,
+              text:
+                  "Rarely asks for verification. In case of refusal may block "
+                  "funds indefinitely without a legal order.",
+            ),
+            if (small)
+              Padding(
+                padding: const EdgeInsets.only(
+                  top: 16,
+                ),
+                child: Row(
+                  children: [
+                    const Spacer(),
+                    const SizedBox(
+                      width: 16,
+                    ),
+                    Expanded(
+                      child: SecondaryButton(
+                        label: "Close",
+                        onPressed: Navigator.of(context).pop,
+                      ),
+                    )
+                  ],
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _Rating extends StatelessWidget {
+  const _Rating({
+    Key? key,
+    required this.kycType,
+    required this.text,
+  }) : super(key: key);
+
+  final TrocadorKYCType kycType;
+  final String text;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        TrocadorKYCIcon(
+          kycType: kycType,
+          width: 20,
+          height: 20,
+        ),
+        const SizedBox(
+          width: 8,
+        ),
+        Flexible(
+          child: Text(
+            text,
+            style: STextStyles.subtitle(context),
+          ),
+        ),
+      ],
+    );
+  }
+}

pubspec.yaml

@@ -327,6 +327,10 @@ flutter:
     - assets/svg/framed-gear.svg
     - assets/svg/list-ul.svg
     - assets/svg/cc.svg
+    - assets/svg/trocador_rating_a.svg
+    - assets/svg/trocador_rating_b.svg
+    - assets/svg/trocador_rating_c.svg
+    - assets/svg/trocador_rating_d.svg
 
 
     # coin icons