Skip to content

Commit

Permalink
Introduce new icons for Bisq Easy waiting states
Browse files Browse the repository at this point in the history
* 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 bisq-network#1209
  • Loading branch information
axpoems committed Oct 1, 2023
1 parent 67d3d97 commit ad7e5ff
Show file tree
Hide file tree
Showing 24 changed files with 223 additions and 170 deletions.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
/*
* This file is part of Bisq.
*
* Bisq is free software: you can redistribute it and/or modify it
* under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or (at
* your option) any later version.
*
* Bisq is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public
* License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Bisq. If not, see <http://www.gnu.org/licenses/>.
*/

package bisq.desktop.main.content.bisq_easy.components;

import bisq.desktop.common.utils.ImageUtil;
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.util.Duration;

public class WaitingAnimation extends StackPane {
private final RotateTransition rotate;
private ImageView waitingStateIcon;
private WaitingState waitingState;

public WaitingAnimation(WaitingState waitingState) {
this();
setState(waitingState);
}

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 setState(WaitingState newWaitingState) {
if (waitingState != newWaitingState) {
waitingState = newWaitingState;
updateWaitingStateIcon();
}
}

private void updateWaitingStateIcon() {
if (waitingStateIcon != null) {
getChildren().remove(waitingStateIcon);
waitingStateIcon = null;
}

if (waitingState != null) {
waitingStateIcon = ImageUtil.getImageViewById(getIconId(waitingState));
waitingStateIcon.setScaleX(0.85);
waitingStateIcon.setScaleY(0.85);
getChildren().add(waitingStateIcon);
}
}

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() {
rotate.play();
}

public void stop() {
rotate.stop();
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/*
* This file is part of Bisq.
*
* Bisq is free software: you can redistribute it and/or modify it
* under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or (at
* your option) any later version.
*
* Bisq is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public
* License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Bisq. If not, see <http://www.gnu.org/licenses/>.
*/

package bisq.desktop.main.content.bisq_easy.components;

public enum WaitingState {
ACCOUNT_DATA,
FIAT_PAYMENT,
FIAT_PAYMENT_CONFIRMATION,
BITCOIN_ADDRESS,
BITCOIN_PAYMENT,
BITCOIN_CONFIRMATION,
}
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,15 @@
import bisq.common.monetary.Coin;
import bisq.common.monetary.Fiat;
import bisq.desktop.ServiceProvider;
import bisq.desktop.main.content.bisq_easy.components.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;
Expand Down Expand Up @@ -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;
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,12 @@

import bisq.chat.bisqeasy.open_trades.BisqEasyOpenTradeChannel;
import bisq.desktop.ServiceProvider;
import bisq.desktop.components.controls.WaitingAnimation;
import bisq.desktop.main.content.bisq_easy.components.WaitingAnimation;
import bisq.desktop.main.content.bisq_easy.components.WaitingState;
import bisq.desktop.components.controls.WrappingText;
import bisq.i18n.Res;
import bisq.trade.bisq_easy.BisqEasyTrade;
import javafx.geometry.Insets;
import javafx.scene.layout.VBox;
import javafx.scene.layout.HBox;
import lombok.Getter;
import lombok.extern.slf4j.Slf4j;

Expand Down Expand Up @@ -77,14 +78,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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
import bisq.chat.bisqeasy.open_trades.BisqEasyOpenTradeChannel;
import bisq.common.data.Pair;
import bisq.desktop.ServiceProvider;
import bisq.desktop.components.controls.WaitingAnimation;
import bisq.desktop.main.content.bisq_easy.components.WaitingAnimation;
import bisq.desktop.main.content.bisq_easy.components.WaitingState;
import bisq.desktop.components.controls.WrappingText;
import bisq.i18n.Res;
import bisq.trade.bisq_easy.BisqEasyTrade;
Expand Down Expand Up @@ -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
Expand Down
Loading

0 comments on commit ad7e5ff

Please sign in to comment.