Skip to content

Commit 3511946

Browse files
annipiannipi
committed
refactor: adding new design to pegout flow
1 parent bd16d20 commit 3511946

File tree

20 files changed

+1139
-1145
lines changed

20 files changed

+1139
-1145
lines changed

‎package-lock.json

Lines changed: 743 additions & 858 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/common/components/exchange/SelectBitcoinWallet.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export default {
6666
const wallets = computed(() => walletConf.wallets.filter((wallet) => {
6767
const walletConfJsonConstant = wallet.constant as BtcWallet;
6868
const flag = getFeature.value(FeatureNames[walletConfJsonConstant]);
69-
return flag?.value === 'enabled';
69+
return flag?.value === constants.ENABLED;
7070
}));
7171
7272
const bitcoinWallet = useStateAttribute<BtcWallet>('pegInTx', 'bitcoinWallet');

‎src/common/components/status/StatusSummary.vue

Lines changed: 55 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<template>
2-
<v-row>
3-
<h2 class="mt-4 mb-2 w-100 text-center">Summary</h2>
2+
<v-row class="ml-2">
3+
<span class="mt-4 mb-2 w-100 text-left">Summary</span>
44
</v-row>
5-
<v-row class="rounded-lg py-8 px-4 border-md">
5+
<v-row class="rounded-lg py-8 px-4 border-md ml-2">
66
<v-col :order="columnOrder.btc" cols="6" class="d-flex flex-column ga-4">
77
<div class="pb-4">
88
<h3 class="text-h3 pa-1 pb-2 bg-orange d-inline-block">
99
Bitcoin
1010
</h3>
1111
</div>
1212
<div v-for="({title, value, ticker, link}) in btcSide" :key="title"
13-
class="d-flex flex-column ga-1">
13+
class="d-flex flex-column ga-1 custom-input">
1414
<span>{{ title }}</span>
15-
<div class="d-flex align-center bg-surface py-2 px-4 rounded-lg border">
15+
<div class="d-flex align-center py-2 px-4 rounded-lg border-md">
1616
<span class="text-h4">{{ value?.length > 18 ? truncateString(value) : value }}</span>
1717
<v-spacer />
1818
<v-chip v-if="ticker" :prepend-icon="mdiBitcoin" class="btc-icon">
@@ -37,10 +37,9 @@
3737
</h3>
3838
</div>
3939
<div v-for="({title, value, ticker, link}) in rskSide" :key="title"
40-
class="d-flex flex-column ga-1">
40+
class="d-flex flex-column ga-1 custom-input">
4141
<span>{{ title }}</span>
42-
<div class="d-flex align-center bg-surface py-2 px-4
43-
rounded-lg border">
42+
<div class="d-flex align-center py-2 px-4 rounded-lg border-md">
4443
<span class="text-h4">{{ value?.length > 18 ? truncateString(value) : value }}</span>
4544
<v-spacer />
4645
<v-chip v-if="ticker" class="pl-2 pr-3">
@@ -110,6 +109,16 @@ export default defineComponent({
110109
if (props.type === TxStatusType.PEGOUT || props.type === TxStatusType.FLYOVER_PEGOUT) {
111110
const fee = props.details.fee === 0 ? props.details.estimatedFee : props.details.fee;
112111
return [
112+
{
113+
title: 'You receive',
114+
value: props.txWithError ? '-' : props.details.amountReceivedString,
115+
ticker: true,
116+
},
117+
{
118+
title: props.details.fee === 0 ? 'Estimated Fee' : 'Fee',
119+
value: status.value.type === TxStatusType.FLYOVER_PEGOUT || props.txWithError ? '-' : fee,
120+
ticker: true,
121+
},
113122
{
114123
title: 'Recipient Address',
115124
value: props.details.recipientAddress && !props.txWithError
@@ -122,40 +131,30 @@ export default defineComponent({
122131
? props.details.btcTxId : '-',
123132
link: getBtcTxExplorerUrl(props.details.btcTxId),
124133
},
125-
{
126-
title: props.details.fee === 0 ? 'Estimated Fee' : 'Fee',
127-
value: status.value.type === TxStatusType.FLYOVER_PEGOUT || props.txWithError ? '-' : fee,
128-
ticker: true,
129-
},
130-
{
131-
title: 'You receive',
132-
value: props.txWithError ? '-' : props.details.amountReceivedString,
133-
ticker: true,
134-
},
135134
];
136135
}
137136
return [
138137
{
139-
title: 'Sender Address',
140-
value: props.details.senderAddress || '-',
141-
link: getBtcAddressExplorerUrl(props.details.senderAddress),
138+
title: 'You send',
139+
value: props.details.total,
140+
ticker: true,
142141
},
143-
...(props.withTxIds ? [{
144-
title: 'Transaction ID',
145-
value: props.details.txId || '-',
146-
link: getBtcTxExplorerUrl(props.details.txId),
147-
}] : []),
148142
{
149143
title: props.details && props.type === TxStatusType.FLYOVER_PEGIN
150144
? 'Fee (includes provider and network fees)' : 'Fee',
151145
value: props.details.fee,
152146
ticker: true,
153147
},
154148
{
155-
title: 'You send',
156-
value: props.details.total,
157-
ticker: true,
149+
title: 'Sender Address',
150+
value: props.details.senderAddress || '-',
151+
link: getBtcAddressExplorerUrl(props.details.senderAddress),
158152
},
153+
...(props.withTxIds ? [{
154+
title: 'Transaction ID',
155+
value: props.details.txId || '-',
156+
link: getBtcTxExplorerUrl(props.details.txId),
157+
}] : []),
159158
];
160159
});
161160
@@ -164,14 +163,9 @@ export default defineComponent({
164163
const gasFee = props.details.gas?.gt(0) ? props.details.gas.toRBTCTrimmedString() : '-';
165164
return [
166165
{
167-
title: 'Sender Address',
168-
value: props.details.senderAddress || '-',
169-
link: getRskAddressExplorerUrl(props.details.senderAddress),
170-
},
171-
{
172-
title: 'Transaction ID',
173-
value: props.details.txId || '-',
174-
link: getRskTxExplorerUrl(props.details.txId),
166+
title: 'You send',
167+
value: props.details.amountFromString,
168+
ticker: true,
175169
},
176170
{
177171
title: props.type === TxStatusType.FLYOVER_PEGOUT
@@ -182,12 +176,28 @@ export default defineComponent({
182176
ticker: true,
183177
},
184178
{
185-
title: 'You send',
186-
value: props.details.amountFromString,
187-
ticker: true,
179+
title: 'Sender Address',
180+
value: props.details.senderAddress || '-',
181+
link: getRskAddressExplorerUrl(props.details.senderAddress),
182+
},
183+
{
184+
title: 'Transaction ID',
185+
value: props.details.txId || '-',
186+
link: getRskTxExplorerUrl(props.details.txId),
188187
}];
189188
}
190189
return [
190+
{
191+
title: 'You receive',
192+
value: props.details.amountReceivedString && !props.txWithError
193+
? props.details.amountReceivedString : '-',
194+
ticker: true,
195+
},
196+
{
197+
title: 'Fee',
198+
value: '-',
199+
ticker: true,
200+
},
191201
{
192202
title: 'Recipient Address',
193203
value: props.details.recipientAddress && !props.txWithError
@@ -200,17 +210,6 @@ export default defineComponent({
200210
? props.details.rskTxId : '-',
201211
link: getRskTxExplorerUrl(props.details.rskTxId),
202212
}] : []),
203-
{
204-
title: 'Fee',
205-
value: '-',
206-
ticker: true,
207-
},
208-
{
209-
title: 'You receive',
210-
value: props.details.amountReceivedString && !props.txWithError
211-
? props.details.amountReceivedString : '-',
212-
ticker: true,
213-
},
214213
];
215214
});
216215
@@ -238,4 +237,9 @@ export default defineComponent({
238237
.v-col.order-1 {
239238
padding-right: 20px;
240239
}
240+
.custom-input {
241+
.border-md {
242+
border-color: rgb(var(--v-theme-bw-500)) !important;
243+
}
244+
}
241245
</style>

‎src/common/components/status/TxPegin.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<span class="text-center text-bw-400 text-body-2">Confirmations</span>
1111
</v-row>
1212
</template>
13-
<v-row>
13+
<v-row class="mb-4">
1414
<status-progress-bar :isFlyover="isFlyover" :txWithErrorType="txWithErrorType"
1515
:txWithError="txWithError" />
1616
</v-row>

‎src/common/components/status/TxPegout.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<v-container>
3-
<v-row>
3+
<v-row class="mb-4">
44
<status-progress-bar :isFlyover="isFlyover" :txWithErrorType="txWithErrorType"
55
:txWithError="txWithError"/>
66
</v-row>

‎src/common/services/FlyoverService.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { isValidSiteKey, ServiceError } from '../utils';
1717
export default class FlyoverService {
1818
flyover?: Flyover;
1919

20-
flyovernetwork: Network;
20+
flyoverNetwork: Network;
2121

2222
private lbcAddress = EnvironmentAccessorService.getEnvironmentVariables().lbcAddress;
2323

@@ -40,13 +40,13 @@ export default class FlyoverService {
4040
const appNetwork = EnvironmentAccessorService.getEnvironmentVariables().vueAppCoin;
4141
switch (appNetwork) {
4242
case constants.BTC_NETWORK_MAINNET:
43-
this.flyovernetwork = 'Mainnet';
43+
this.flyoverNetwork = 'Mainnet';
4444
break;
4545
case constants.BTC_NETWORK_TESTNET:
46-
this.flyovernetwork = 'Testnet';
46+
this.flyoverNetwork = 'Testnet';
4747
break;
4848
default:
49-
this.flyovernetwork = 'Regtest';
49+
this.flyoverNetwork = 'Regtest';
5050
break;
5151
}
5252
}
@@ -58,7 +58,7 @@ export default class FlyoverService {
5858
BlockchainConnection.createUsingStandard(provider)
5959
.then((connection: BlockchainConnection) => {
6060
this.flyover = new Flyover({
61-
network: this.flyovernetwork,
61+
network: this.flyoverNetwork,
6262
rskConnection: connection,
6363
captchaTokenResolver: this.tokenResolver.bind(this),
6464
disableChecksum: true,

‎src/common/store/constants.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,7 @@ export const FLYOVER_PEGOUT_SET_BTC_ADDRESS = 'FLYOVER_PEGOUT_SET_BTC_ADDRESS';
160160
export const FLYOVER_PEGOUT_SET_TX_HASH = 'FLYOVER_PEGOUT_SET_TX_HASH';
161161
export const FLYOVER_PEGOUT_SET_SELECTED_QUOTE = 'FLYOVER_PEGOUT_SET_SELECTED_QUOTE';
162162
export const FLYOVER_PEGOUT_SET_QUOTES_DIFFERENCES = 'FLYOVER_PEGOUT_SET_QUOTES_DIFFERENCES';
163+
export const FLYOVER_PEGOUT_SET_RESPONDING = 'FLYOVER_PEGOUT_SET_RESPONDING';
163164

164165
// Flyover PegIn mutations
165166
export const FLYOVER_PEGIN_SET_PROVIDERS = 'FLYOVER_PEGIN_SET_PROVIDERS';
@@ -345,11 +346,19 @@ export const POWPEG_RSKT_HEADER = '52534b5401';
345346
export const PEGIN_OUTPUTS = 3;
346347
export const COOKIE_EXPIRATION_HOURS = 12;
347348

349+
export const ENABLED = 'enabled';
350+
export const DISABLED = 'disabled';
351+
348352
export enum peginType {
349353
POWPEG = 'POWPEG',
350354
FLYOVER = 'FLYOVER'
351355
}
352356

357+
export enum pegoutType {
358+
POWPEG = 'POWPEG',
359+
FLYOVER = 'FLYOVER'
360+
}
361+
353362
export const BTC_AVG_BLOCK_TIME_IN_SECONDS = 600;
354363
export const RSK_AVG_BLOCK_TIME_IN_SECONDS = 30;
355364
export const FULFILLED = 'fulfilled';

‎src/common/styles/_cards.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@
1414
.not-available {
1515
position: relative;
1616
.not-available-text {
17-
position: absolute;
18-
inset: 0;
19-
background-color: rgba(var(--v-theme-background), 0.5);
20-
backdrop-filter: blur(4px);
21-
opacity: 1;
22-
z-index: 1;
17+
position: absolute;
18+
inset: 0;
19+
background-color: rgba(var(--v-theme-background), 0.5);
20+
backdrop-filter: blur(4px);
21+
opacity: 1;
22+
z-index: 1;
2323
}
24-
}
24+
}

‎src/common/styles/_home.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.home {
22
input[type="checkbox"] {
3-
accent-color: rgb(var(--v-theme-on-background));
3+
accent-color: rgb(var(--v-theme-green));
44
}
55
.border-box {
66
color: rgb(var(--v-theme-background));

‎src/common/types/Flyover/FlyoverPegout.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,5 @@ export interface FlyoverPegoutState {
1414
flyoverService: FlyoverService;
1515
txHash?: string;
1616
selectedQuoteHash: string;
17+
isResponding: boolean;
1718
}

‎src/common/utils/common.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ export const getClearFlyoverPegoutState = (): FlyoverPegoutState => ({
108108
flyoverService: markRaw(new FlyoverService()),
109109
selectedQuoteHash: '',
110110
differences: [],
111+
isResponding: false,
111112
});
112113

113114
export const getClearFlyoverPeginState = (): FlyoverPeginState => ({

‎src/common/views/Home.vue

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,25 @@
1212
<span class="mx-1 my-2 pa-4 bg-green">Rootstock</span>
1313
</div>
1414
</v-col>
15-
<v-col lg="4" xl="3" xxl="2" class="d-flex flex-column ga-6">
15+
<v-col lg="4" xl="3" xxl="2" class="d-flex flex-column">
1616
<template v-if="termsAndConditionsEnabled">
17-
<v-row class="d-flex justify-center">
17+
<v-row class="d-flex justify-center mb-6">
1818
<label for="termscheck" class="pa-0 d-flex align-center mx-3">
1919
{{ '' }}
2020
<input id="termscheck" type="checkbox"
2121
:checked="areTermsAccepted" @click="setTermsAccepted">
2222
</label>
2323
<span>I acknowledge and accept
24-
<a href="#" rel="noopener" @key-press="toggleCheck" class="px-1 text-bw-500"
24+
<a href="#" rel="noopener" @key-press="toggleCheck" class="px-1 text-orange"
2525
@click.prevent="$emit('update:showDialog', true)">
26-
terms and conditions
26+
Terms and conditions
2727
</a>
2828
</span>
2929
</v-row>
3030
</template>
3131
<v-btn @click="selectConversion(constants.PEG_IN_TRANSACTION_TYPE)"
3232
:disabled="!isAllowedBrowser || (!areTermsAccepted && !!termsAndConditionsEnabled)"
33-
class="border-box d-block pa-6 rounded-lg h-auto">
33+
class="border-box d-block pa-6 rounded-lg h-auto mb-6">
3434
<v-row no-gutters align="center" justify="space-between">
3535
<v-col cols="4">
3636
<div class="d-flex text-h3 ga-1 flex-wrap">
@@ -46,7 +46,7 @@
4646
</v-btn>
4747
<v-btn @click="selectConversion(constants.PEG_OUT_TRANSACTION_TYPE)"
4848
:disabled="!areTermsAccepted && !!termsAndConditionsEnabled"
49-
class="border-box d-block pa-6 rounded-lg h-auto">
49+
class="border-box d-block pa-6 rounded-lg h-auto mb-6">
5050
<v-row no-gutters align="center" justify="space-between">
5151
<v-col cols="4">
5252
<div class="d-flex text-h3 ga-1 flex-wrap">
@@ -60,18 +60,19 @@
6060
</v-col>
6161
</v-row>
6262
</v-btn>
63-
<div class="d-flex justify-center gc-2 align-baseline flex-wrap">
64-
<span>Already made a transaction?</span>
65-
<v-btn variant="text" color="orange" density="compact" class="pa-0 text-body-1"
63+
<div class="d-flex justify-start align-baseline flex-wrap ml-6">
64+
<span class="text-body-1">Already made a transaction?</span>
65+
<v-btn variant="text" color="orange" density="compact"
66+
class="pa-0 text-body-1 ml-2"
6667
@click="toStatusSearch">
6768
Transaction Status
6869
</v-btn>
6970
</div>
70-
<div class="d-flex justify-center gc-2 align-baseline flex-wrap">
71-
<span class="text-center">To learn about the various RBTC access methods, visit</span>
72-
<v-btn variant="text" color="orange" density="compact" class="pa-0 text-body-1"
71+
<div class="d-flex justify-start align-baseline flex-wrap ml-6">
72+
<span class="text-body-1">To learn about the various RBTC access methods, visit </span>
73+
<v-btn variant="text" color="orange" density="compact" class="pa-0 text-body-1 mr-2"
7374
href="https://rootstock.io/rbtc/" target="_blank">
74-
RBTC Webpage
75+
RBTC Webpage
7576
</v-btn>
7677
</div>
7778
</v-col>

0 commit comments

Comments
 (0)