ui: redesign gas back dialog

tct68 · May 30, 2023 · 03911f0 · 03911f0
1 parent dedcf51
commit 03911f0
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 24 deletions.
diff --git a/assets/images/zerofee_pass.png b/assets/images/zerofee_pass.png
diff --git a/lib/screens/home/components/transaction/gas_back_sheet.dart b/lib/screens/home/components/transaction/gas_back_sheet.dart
@@ -1,28 +1,123 @@
+import 'dart:math';
+import 'dart:ui';
+
 import 'package:candide_mobile_app/config/theme.dart';
+import 'package:confetti/confetti.dart';
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 
-class GasBackSheet extends StatelessWidget {
+class GasBackSheet extends StatefulWidget {
   const GasBackSheet({Key? key}) : super(key: key);
 
+  @override
+  State<GasBackSheet> createState() => _GasBackSheetState();
+}
+
+class _GasBackSheetState extends State<GasBackSheet> {
+  final ConfettiController confettiController = ConfettiController(duration: const Duration(seconds: 1));
+
+  Path drawStar(Size size) {
+    double degToRad(double deg) => deg * (pi / 180.0);
+    const numberOfPoints = 5;
+    final halfWidth = size.width / 2;
+    final externalRadius = halfWidth;
+    final internalRadius = halfWidth / 2.5;
+    final degreesPerStep = degToRad(360 / numberOfPoints);
+    final halfDegreesPerStep = degreesPerStep / 2;
+    final path = Path();
+    final fullAngle = degToRad(360);
+    path.moveTo(size.width, halfWidth);
+
+    for (double step = 0; step < fullAngle; step += degreesPerStep) {
+      path.lineTo(halfWidth + externalRadius * cos(step),
+          halfWidth + externalRadius * sin(step));
+      path.lineTo(halfWidth + internalRadius * cos(step + halfDegreesPerStep),
+          halfWidth + internalRadius * sin(step + halfDegreesPerStep));
+    }
+    path.close();
+    return path;
+  }
+
+  @override
+  void initState() {
+    confettiController.play();
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    confettiController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Container(
-      margin: const EdgeInsets.symmetric(horizontal: 15),
-      child: Column(
-        children: [
-          const SizedBox(height: 20,),
-          Text("You got a Reward!", style: TextStyle(fontFamily: AppThemes.fonts.gilroyBold, fontSize: 25),),
-          const SizedBox(height: 20,),          
-          Image.asset("assets/images/zerofee_pass.png" , height: 300),
-          const SizedBox(height: 10,),
-          const SizedBox(height: 5,),
-          const Text(
-            "Your sense of exploration unlocked a valuable ZeroFee Pass, granting you a feeless transaction. Enjoy the freedom to transact without worrying about gas fees!",
-            textAlign: TextAlign.center,
-            style: TextStyle(color: Colors.grey),
-          ),
-          const SizedBox(height: 35,),
-        ],
+    return BackdropFilter(
+      filter: ImageFilter.blur(sigmaX: 3.5, sigmaY: 3.5),
+      child: AlertDialog(
+        contentPadding: EdgeInsets.zero,
+        backgroundColor: Colors.transparent,
+        content: Stack(
+          children: [
+            Align(
+              alignment: Alignment.center,
+              child: ConfettiWidget(
+                confettiController: confettiController,
+                blastDirectionality: BlastDirectionality.explosive,
+                shouldLoop: false,
+                colors: const [
+                  Colors.green,
+                  Colors.blue,
+                  Colors.pink,
+                  Colors.orange,
+                  Colors.purple
+                ], // manually specify the colors to be used
+                createParticlePath: drawStar, // define a custom shape/path.
+              ),
+            ),
+            Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                const SizedBox(height: 50,),
+                Image.asset("assets/images/zerofee_pass.png" , height: 300),
+                const SizedBox(height: 25,),
+                const Text(
+                  "Your sense of exploration unlocked a valuable ZeroFee Pass, granting you a feeless transaction. Enjoy the freedom to transact without worrying about gas fees!",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(color: Colors.white70),
+                ),
+                const SizedBox(height: 35,),
+                Container(
+                  decoration: BoxDecoration(
+                      gradient: const LinearGradient(
+                        begin: Alignment.centerLeft,
+                        end: Alignment.centerRight,
+                        colors: [
+                          Color.fromRGBO(181, 150, 77, 1),
+                          Color.fromRGBO(232, 223, 200, 1),
+                        ],
+                        stops: [0.4, 1]
+                      ),
+                    borderRadius: BorderRadius.circular(15)
+                  ),
+                  child: ElevatedButton(
+                    onPressed: (){
+                      Get.back();
+                    },
+                    style: ElevatedButton.styleFrom(
+                      padding: const EdgeInsets.symmetric(vertical: 7.5),
+                      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                      backgroundColor: Colors.transparent,
+                      shadowColor: Colors.transparent,
+                      minimumSize: const Size(200, 0),
+                    ),
+                    child: Text('Continue', style: TextStyle(fontFamily: AppThemes.fonts.gilroyBold, color: Colors.black, fontSize: 16),),
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
       ),
     );
   }

diff --git a/lib/screens/home/components/transaction/token_fee_selector.dart b/lib/screens/home/components/transaction/token_fee_selector.dart
@@ -43,13 +43,10 @@ class _TokenFeeSelectorState extends State<TokenFeeSelector> {
   }
 
   showGasBackSheet(){
-    showBarModalBottomSheet(
+    showDialog(
       context: context,
-      backgroundColor: Get.theme.canvasColor,
-      builder: (context) => SingleChildScrollView(
-        controller: ModalScrollController.of(context),
-        child: const GasBackSheet(),
-      ),
+      useRootNavigator: false,
+      builder: (context) => const GasBackSheet(),
     );
   }
 

diff --git a/pubspec.lock b/pubspec.lock
@@ -145,6 +145,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.17.0"
+  confetti:
+    dependency: "direct main"
+    description:
+      name: confetti
+      sha256: "979aafde2428c53947892c95eb244466c109c129b7eee9011f0a66caaca52267"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.7.0"
   convert:
     dependency: transitive
     description:

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -63,6 +63,7 @@ dependencies:
   expandable: ^5.0.1
   info_popup: ^2.4.6
   animated_emoji: ^1.0.1+2
+  confetti: ^0.7.0
   # Typography
   phosphor_flutter: ^1.4.0
   font_awesome_flutter: ^10.1.0