Introduce new icons for Bisq Easy waiting states

* Design new icons for all of the waiting states in the Bisq Easy protocol. * Change WaitingAnimation component to use a rotation of a png image of a spinning circle instead to improve CPU performace. * Introduce the different icons into each buyer and seller view states accordingly. Fix #1209
bisq-network · Sep 29, 2023 · e6e33af · e6e33af
1 parent 67d3d97
commit e6e33af
Show file tree

Hide file tree

Showing 23 changed files with 165 additions and 126 deletions.
diff --git a/desktop/src/main/java/bisq/desktop/components/controls/WaitingAnimation.java b/desktop/src/main/java/bisq/desktop/components/controls/WaitingAnimation.java
@@ -17,93 +17,79 @@
 
 package bisq.desktop.components.controls;
 
-import bisq.desktop.common.Transitions;
-import bisq.desktop.common.threading.UIScheduler;
 import bisq.desktop.common.utils.ImageUtil;
-import javafx.animation.Timeline;
+import javafx.animation.Animation;
+import javafx.animation.Interpolator;
+import javafx.animation.RotateTransition;
 import javafx.geometry.Pos;
 import javafx.scene.image.ImageView;
 import javafx.scene.layout.StackPane;
-import javafx.scene.paint.Color;
-import javafx.scene.shape.Circle;
-
-import java.util.ArrayList;
-import java.util.List;
-import java.util.concurrent.TimeUnit;
+import javafx.util.Duration;
 
 public class WaitingAnimation extends StackPane {
-    private final static double DURATION = 600;
-    private final List<CircleAnimation> circleAnimations = new ArrayList<>();
-    private final ImageView hourGlass;
-    private final double duration;
-    private UIScheduler scheduler;
-    private Timeline hourGlassTimeline;
+    private final RotateTransition rotate;
+    private ImageView waitingStateIcon;
+    private WaitingState waitingState;
 
-    public WaitingAnimation() {
-        this(DURATION);
+    public WaitingAnimation(WaitingState waitingState) {
+        this();
+        setState(waitingState);
     }
 
-    public WaitingAnimation(double duration) {
-        this.duration = duration;
-        setAlignment(Pos.TOP_LEFT);
-        circleAnimations.add(new CircleAnimation(duration, 0));
-        circleAnimations.add(new CircleAnimation(duration, 1 / (double) 3));
-        circleAnimations.add(new CircleAnimation(duration, 2 / (double) 3));
-        getChildren().addAll(circleAnimations);
-
-        // size 140 px
-        hourGlass = ImageUtil.getImageViewById("hour_glass");
-        getChildren().add(hourGlass);
+    public WaitingAnimation() {
+        setAlignment(Pos.CENTER);
+        ImageView spinningCircle = ImageUtil.getImageViewById("spinning-circle");
+        getChildren().add(spinningCircle);
+        rotate = new RotateTransition(Duration.seconds(1), spinningCircle);
+        rotate.setByAngle(360);
+        rotate.setCycleCount(Animation.INDEFINITE);
+        rotate.setInterpolator(Interpolator.LINEAR);
     }
 
-    public void play() {
-        stop();
-        hourGlassTimeline = Transitions.pulse(hourGlass, duration, 0,
-                0, 0.05, 0.1,
-                1.1, 1);
-        scheduler = UIScheduler.run(() -> circleAnimations.forEach(CircleAnimation::play))
-                .periodically(0, Math.round(10 * duration), TimeUnit.MILLISECONDS);
+    public void setState(WaitingState newWaitingState) {
+        if (waitingState != newWaitingState) {
+            waitingState = newWaitingState;
+            updateWaitingStateIcon();
+        }
     }
 
-    public void stop() {
-        if (hourGlassTimeline != null) {
-            hourGlassTimeline.stop();
-            hourGlassTimeline = null;
+    private void updateWaitingStateIcon() {
+        if (waitingStateIcon != null) {
+            getChildren().remove(waitingStateIcon);
+            waitingStateIcon = null;
         }
-        if (scheduler != null) {
-            scheduler.stop();
-            scheduler = null;
+
+        if (waitingState != null) {
+            waitingStateIcon = ImageUtil.getImageViewById(getIconId(waitingState));
+            waitingStateIcon.setScaleX(0.85);
+            waitingStateIcon.setScaleY(0.85);
+            getChildren().add(waitingStateIcon);
         }
-        circleAnimations.forEach(CircleAnimation::stop);
     }
 
-    private static class CircleAnimation extends Circle {
-        private final double duration;
-        private final double delay;
-        private Timeline timeline;
-
-        public CircleAnimation(double duration, double offset) {
-            super(0, 0, 69);
-            this.duration = duration;
-            this.delay = duration * offset;
-            setFill(Color.TRANSPARENT);
-            setStroke(Color.valueOf("#56ae48"));
-            setStrokeWidth(1);
-            setOpacity(0);
+    private String getIconId(WaitingState waitingState) {
+        switch (waitingState) {
+            case ACCOUNT_DATA:
+               return "account-data";
+            case FIAT_PAYMENT:
+            case FIAT_PAYMENT_CONFIRMATION:
+                return "fiat-payment";
+            case BITCOIN_ADDRESS:
+                return "bitcoin-address";
+            case BITCOIN_PAYMENT:
+                return "bitcoin-payment";
+            case BITCOIN_CONFIRMATION:
+                return "bitcoin-confirmation";
+            default:
+                throw new IllegalArgumentException("Unknown WaitingState: " + waitingState);
         }
+    }
 
-        public void play() {
-            stop();
-            timeline = Transitions.pulse(this, duration, delay,
-                    0, 0.1, 0,
-                    1, 1.5);
-        }
+    public void play() {
+        rotate.play();
+    }
 
-        public void stop() {
-            if (timeline != null) {
-                timeline.stop();
-                timeline = null;
-            }
-        }
+    public void stop() {
+        rotate.stop();
     }
-}
+}
diff --git a/desktop/src/main/java/bisq/desktop/components/controls/WaitingState.java b/desktop/src/main/java/bisq/desktop/components/controls/WaitingState.java
@@ -0,0 +1,10 @@
+package bisq.desktop.components.controls;
+
+public enum WaitingState {
+    ACCOUNT_DATA,
+    FIAT_PAYMENT,
+    FIAT_PAYMENT_CONFIRMATION,
+    BITCOIN_ADDRESS,
+    BITCOIN_PAYMENT,
+    BITCOIN_CONFIRMATION,
+}
diff --git a/...in/java/bisq/desktop/main/content/bisq_easy/open_trades/trade_state/states/BaseState.java b/...in/java/bisq/desktop/main/content/bisq_easy/open_trades/trade_state/states/BaseState.java
@@ -26,11 +26,15 @@
 import bisq.common.monetary.Coin;
 import bisq.common.monetary.Fiat;
 import bisq.desktop.ServiceProvider;
+import bisq.desktop.components.controls.WaitingAnimation;
+import bisq.desktop.components.controls.WrappingText;
 import bisq.offer.bisq_easy.BisqEasyOffer;
 import bisq.presentation.formatters.AmountFormatter;
 import bisq.trade.bisq_easy.BisqEasyTrade;
 import bisq.trade.bisq_easy.BisqEasyTradeService;
 import bisq.user.identity.UserIdentityService;
+import javafx.geometry.Pos;
+import javafx.scene.layout.HBox;
 import javafx.scene.layout.VBox;
 import lombok.Getter;
 import lombok.Setter;
@@ -130,5 +134,15 @@ protected void onViewAttached() {
         @Override
         protected void onViewDetached() {
         }
+
+        protected HBox createWaitingInfo(WaitingAnimation animation, WrappingText headline, WrappingText info) {
+            animation.setAlignment(Pos.CENTER);
+            VBox text = new VBox(headline, info);
+            text.setAlignment(Pos.CENTER_LEFT);
+            text.setSpacing(10);
+            HBox waitingInfo = new HBox(animation, text);
+            waitingInfo.setSpacing(20);
+            return waitingInfo;
+        }
     }
-}
+}
diff --git a/.../java/bisq/desktop/main/content/bisq_easy/open_trades/trade_state/states/BuyerState1.java b/.../java/bisq/desktop/main/content/bisq_easy/open_trades/trade_state/states/BuyerState1.java
@@ -20,9 +20,12 @@
 import bisq.chat.bisqeasy.open_trades.BisqEasyOpenTradeChannel;
 import bisq.desktop.ServiceProvider;
 import bisq.desktop.components.controls.WaitingAnimation;
+import bisq.desktop.components.controls.WaitingState;
+import bisq.desktop.components.controls.WrappingText;
 import bisq.i18n.Res;
 import bisq.trade.bisq_easy.BisqEasyTrade;
-import javafx.geometry.Insets;
+import javafx.geometry.Pos;
+import javafx.scene.layout.HBox;
 import javafx.scene.layout.VBox;
 import lombok.Getter;
 import lombok.extern.slf4j.Slf4j;
@@ -77,14 +80,11 @@ public static class View extends BaseState.View<Model, Controller> {
 
         private View(Model model, Controller controller) {
             super(model, controller);
-
-            waitingAnimation = new WaitingAnimation();
-
-            VBox.setMargin(waitingAnimation, new Insets(30, 0, 10, 20));
-            root.getChildren().addAll(
-                    FormUtils.getHeadline(Res.get("bisqEasy.tradeState.info.buyer.phase1.headline")),
-                    FormUtils.getInfo(Res.get("bisqEasy.tradeState.info.buyer.phase1.info")),
-                    waitingAnimation);
+            waitingAnimation = new WaitingAnimation(WaitingState.ACCOUNT_DATA);
+            WrappingText headline = FormUtils.getHeadline(Res.get("bisqEasy.tradeState.info.buyer.phase1.headline"));
+            WrappingText info = FormUtils.getInfo(Res.get("bisqEasy.tradeState.info.buyer.phase1.info"));
+            HBox waitingInfo = createWaitingInfo(waitingAnimation, headline, info);
+            root.getChildren().add(waitingInfo);
         }
 
         @Override

diff --git a/.../java/bisq/desktop/main/content/bisq_easy/open_trades/trade_state/states/BuyerState3.java b/.../java/bisq/desktop/main/content/bisq_easy/open_trades/trade_state/states/BuyerState3.java
@@ -21,6 +21,7 @@
 import bisq.common.data.Pair;
 import bisq.desktop.ServiceProvider;
 import bisq.desktop.components.controls.WaitingAnimation;
+import bisq.desktop.components.controls.WaitingState;
 import bisq.desktop.components.controls.WrappingText;
 import bisq.i18n.Res;
 import bisq.trade.bisq_easy.BisqEasyTrade;
@@ -93,41 +94,41 @@ public static class View extends BaseState.View<Model, Controller> {
         private View(Model model, Controller controller) {
             super(model, controller);
 
-            headline = FormUtils.getHeadline();
-            info = FormUtils.getInfo();
-
             Pair<WrappingText, HBox> confirmPair = FormUtils.getConfirmInfo();
             fiatReceiptConfirmed = confirmPair.getFirst();
             fiatReceiptConfirmedHBox = confirmPair.getSecond();
 
-            waitingAnimation = new WaitingAnimation();
             VBox.setMargin(fiatReceiptConfirmedHBox, new Insets(0, 0, 5, 0));
-            VBox.setMargin(waitingAnimation, new Insets(30, 0, 0, 20));
-            root.getChildren().addAll(
-                    fiatReceiptConfirmedHBox,
-                    headline,
-                    info,
-                    waitingAnimation);
+
+            waitingAnimation = new WaitingAnimation();
+            headline = FormUtils.getHeadline();
+            info = FormUtils.getInfo();
+            HBox waitingInfo = createWaitingInfo(waitingAnimation, headline, info);
+
+            root.getChildren().addAll(fiatReceiptConfirmedHBox, waitingInfo);
+            root.setSpacing(20);
         }
 
         @Override
         protected void onViewAttached() {
             super.onViewAttached();
 
-            waitingAnimation.play();
-
             fiatReceiptConfirmedPin = EasyBind.subscribe(model.getFiatReceiptConfirmed(), fiatPaymentConfirmed -> {
                 fiatReceiptConfirmedHBox.setVisible(fiatPaymentConfirmed);
                 fiatReceiptConfirmedHBox.setManaged(fiatPaymentConfirmed);
                 if (fiatPaymentConfirmed) {
                     headline.setText(Res.get("bisqEasy.tradeState.info.buyer.phase3b.headline"));
                     info.setText(Res.get("bisqEasy.tradeState.info.buyer.phase3b.info"));
                     fiatReceiptConfirmed.setText(Res.get("bisqEasy.tradeState.info.buyer.phase3.fiatReceiptConfirmedCheckBox", model.getFormattedQuoteAmount()));
+                    waitingAnimation.setState(WaitingState.BITCOIN_PAYMENT);
                 } else {
                     headline.setText(Res.get("bisqEasy.tradeState.info.buyer.phase3a.headline"));
                     info.setText(Res.get("bisqEasy.tradeState.info.buyer.phase3a.info", model.getFormattedQuoteAmount()));
+                    waitingAnimation.setState(WaitingState.FIAT_PAYMENT_CONFIRMATION);
                 }
             });
+
+            waitingAnimation.play();
         }
 
         @Override

diff --git a/.../java/bisq/desktop/main/content/bisq_easy/open_trades/trade_state/states/BuyerState4.java b/.../java/bisq/desktop/main/content/bisq_easy/open_trades/trade_state/states/BuyerState4.java
@@ -26,6 +26,8 @@
 import bisq.desktop.common.threading.UIScheduler;
 import bisq.desktop.common.threading.UIThread;
 import bisq.desktop.components.controls.MaterialTextField;
+import bisq.desktop.components.controls.WaitingAnimation;
+import bisq.desktop.components.controls.WaitingState;
 import bisq.desktop.components.controls.WrappingText;
 import bisq.desktop.components.overlay.Popup;
 import bisq.i18n.Res;
@@ -39,6 +41,7 @@
 import javafx.beans.property.StringProperty;
 import javafx.geometry.Insets;
 import javafx.scene.control.Button;
+import javafx.scene.layout.HBox;
 import javafx.scene.layout.VBox;
 import lombok.Getter;
 import lombok.Setter;
@@ -172,13 +175,11 @@ protected Model(BisqEasyTrade bisqEasyTrade, BisqEasyOpenTradeChannel channel) {
     public static class View extends BaseState.View<Model, Controller> {
         private final Button button;
         private final MaterialTextField txId, btcBalance;
+        private final WaitingAnimation waitingAnimation;
 
         private View(Model model, Controller controller) {
             super(model, controller);
 
-            WrappingText headline = FormUtils.getHeadline(Res.get("bisqEasy.tradeState.info.buyer.phase4.headline"));
-            WrappingText info = FormUtils.getInfo(Res.get("bisqEasy.tradeState.info.buyer.phase4.info"));
-
             txId = FormUtils.getTextField(Res.get("bisqEasy.tradeState.info.phase4.txId"), "", false);
             txId.setIcon(AwesomeIcon.EXTERNAL_LINK);
             txId.setIconTooltip(Res.get("bisqEasy.tradeState.info.phase4.txId.tooltip"));
@@ -187,15 +188,14 @@ private View(Model model, Controller controller) {
             btcBalance.setPromptText(Res.get("bisqEasy.tradeState.info.buyer.phase4.balance.prompt"));
 
             button = new Button(Res.get("bisqEasy.tradeState.info.phase4.buttonText"));
-
-            VBox.setMargin(info, new Insets(0, 0, 10, 0));
             VBox.setMargin(button, new Insets(5, 0, 5, 0));
-            root.getChildren().addAll(
-                    headline,
-                    info,
-                    txId,
-                    btcBalance,
-                    button);
+
+            waitingAnimation = new WaitingAnimation(WaitingState.BITCOIN_CONFIRMATION);
+            WrappingText headline = FormUtils.getHeadline(Res.get("bisqEasy.tradeState.info.buyer.phase4.headline"));
+            WrappingText info = FormUtils.getInfo(Res.get("bisqEasy.tradeState.info.buyer.phase4.info"));
+            HBox waitingInfo = createWaitingInfo(waitingAnimation, headline, info);
+
+            root.getChildren().addAll(waitingInfo, txId, btcBalance, button);
         }
 
         @Override
@@ -210,6 +210,8 @@ protected void onViewAttached() {
 
             button.setOnAction(e -> controller.onComplete());
             txId.getIconButton().setOnAction(e -> controller.openExplorer());
+
+            waitingAnimation.play();
         }
 
         @Override
@@ -222,6 +224,8 @@ protected void onViewDetached() {
 
             button.setOnAction(null);
             txId.getIconButton().setOnAction(null);
+
+            waitingAnimation.stop();
         }
     }
 }