Skip to content

Commit c043a54

Browse files
kvhnukekvhnuke
authored
Merge pull request #807 from firoorg/feature/add-firo-network
Feature/add firo network
2 parents 7d8c92a + 764c245 commit c043a54

8 files changed

Lines changed: 178 additions & 94 deletions

File tree

‎packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue‎

Lines changed: 62 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,66 @@
11
<template>
22
<div class="container">
3-
<div v-if="isLoadingAssets" class="send-transaction__loading">
4-
<div class="send-transaction__loading-content">
5-
<div class="send-transaction__loading-spinner"></div>
6-
<p class="send-transaction__loading-text">Loading...</p>
3+
<div v-if="!!selected" class="send-transaction-wrapper">
4+
<div v-if="isLoadingAssets" class="send-transaction__loading">
5+
<div class="send-transaction__loading-content">
6+
<div class="send-transaction__loading-spinner"></div>
7+
<p class="send-transaction__loading-text">Loading...</p>
8+
</div>
79
</div>
8-
</div>
910

10-
<div v-if="!!selected && !isLoadingAssets" class="send-transaction">
11-
<send-header
12-
:is-send-token="isSendToken"
13-
:is-nft-available="!!network.NFTHandler"
14-
@close="close"
15-
@toggle-type="toggleSelector"
16-
/>
17-
18-
<div
19-
v-if="!!accountInfo.sparkAccount && network.name === NetworkNames.Firo"
20-
class="send-transaction__tabs"
21-
>
22-
<button
23-
:class="
24-
selectedSendTab === 'transparent' && 'send-transaction__tabs-active'
25-
"
26-
@click="setSelectedSendTab('transparent')"
27-
>
28-
Transparent address
29-
</button>
30-
<button
31-
:class="
32-
selectedSendTab === 'spark' && 'send-transaction__tabs-active'
11+
<div v-show="!isLoadingAssets" class="send-transaction">
12+
<send-header
13+
:is-send-token="isSendToken"
14+
:is-nft-available="!!network.NFTHandler"
15+
@close="close"
16+
@toggle-type="toggleSelector"
17+
/>
18+
19+
<div
20+
v-if="
21+
!!accountInfo.sparkAccount && network.name === NetworkNames.Firo
3322
"
34-
@click="setSelectedSendTab('spark')"
23+
class="send-transaction__tabs"
3524
>
36-
Spark address
37-
</button>
25+
<button
26+
:class="
27+
selectedSendTab === 'transparent' &&
28+
'send-transaction__tabs-active'
29+
"
30+
@click="setSelectedSendTab('transparent')"
31+
>
32+
Transparent address
33+
</button>
34+
<button
35+
:class="
36+
selectedSendTab === 'spark' && 'send-transaction__tabs-active'
37+
"
38+
@click="setSelectedSendTab('spark')"
39+
>
40+
Spark address
41+
</button>
42+
</div>
43+
44+
<transparent-send-tab
45+
v-show="selectedSendTab === 'transparent'"
46+
:network="network"
47+
:account-info="accountInfo"
48+
:is-send-token="isSendToken"
49+
v-model:isLoadingAssets="isLoadingAssets"
50+
:updateIsLoadingAssets="updateIsLoadingAssets"
51+
/>
52+
53+
<spark-send-tab
54+
v-show="selectedSendTab === 'spark'"
55+
v-if="!!accountInfo.sparkAccount"
56+
:network="network"
57+
:account-info="accountInfo"
58+
:spark-account="accountInfo?.sparkAccount ?? null"
59+
:is-send-token="isSendToken"
60+
v-model:isLoadingAssets="isLoadingAssets"
61+
:updateIsLoadingAssets="updateIsLoadingAssets"
62+
/>
3863
</div>
39-
40-
<transparent-send-tab
41-
v-show="selectedSendTab === 'transparent'"
42-
:network="network"
43-
:account-info="accountInfo"
44-
:is-send-token="isSendToken"
45-
v-model:isLoadingAssets="isLoadingAssets"
46-
:updateIsLoadingAssets="updateIsLoadingAssets"
47-
/>
48-
49-
<spark-send-tab
50-
v-show="selectedSendTab === 'spark'"
51-
v-if="!!accountInfo.sparkAccount"
52-
:network="network"
53-
:account-info="accountInfo"
54-
:spark-account="accountInfo?.sparkAccount ?? null"
55-
:is-send-token="isSendToken"
56-
v-model:isLoadingAssets="isLoadingAssets"
57-
:updateIsLoadingAssets="updateIsLoadingAssets"
58-
/>
5964
</div>
6065
</div>
6166
</template>
@@ -136,6 +141,12 @@ const toggleSelector = (isTokenSend: boolean) => {
136141
}
137142
}
138143
144+
.send-transaction-wrapper {
145+
width: 100%;
146+
height: 100%;
147+
position: relative;
148+
}
149+
139150
.send-transaction {
140151
width: 100%;
141152
height: 100%;

‎packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/spark-send-tab.vue‎

Lines changed: 50 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@
5252
<base-button
5353
title="Send"
5454
:click="sendAction"
55-
:disabled="!isInputsValid"
55+
:disabled="
56+
!isInputsValid || isAddress(addressTo, network.networkInfo)
57+
"
5658
/>
5759
</div>
5860
</div>
@@ -73,7 +75,7 @@ import { AccountsHeaderData, SparkAccount } from '@/ui/action/types/account';
7375
import BaseButton from '@action/components/base-button/index.vue';
7476
import { fromBase, isValidDecimals, toBase } from '@enkryptcom/utils';
7577
import BigNumber from 'bignumber.js';
76-
import { computed, onMounted, PropType, ref } from 'vue';
78+
import { computed, onMounted, PropType, ref, watch } from 'vue';
7779
import { useRoute, useRouter } from 'vue-router';
7880
import { toBN } from 'web3-utils';
7981
import SendSparkAddressInput from '../components/send-spark-address-input.vue';
@@ -125,40 +127,24 @@ const addressTo = ref<string>('');
125127
const availableAsset = ref<BTCToken>(loadingAvailableAsset);
126128
const amount = ref<string>('');
127129
const isMaxSelected = ref<boolean>(false);
130+
const isValidAddress = ref<boolean>(false);
131+
132+
watch(addressTo, async newAddress => {
133+
if (!newAddress) {
134+
isValidAddress.value = false;
135+
return;
136+
}
137+
const sparkValid = await isSparkAddress(newAddress);
138+
isValidAddress.value =
139+
sparkValid || isAddress(newAddress, props.network.networkInfo);
140+
});
128141
129142
onMounted(async () => {
130143
trackSendEvents(SendEventType.SendOpen, { network: props.network.name });
131144
emit('update:isLoadingAssets', false);
132145
setAsset();
133146
});
134147
135-
const isInputsValid = computed<boolean>(() => {
136-
if (
137-
!isSparkAddress(addressTo.value) &&
138-
!isAddress(addressTo.value, props.network.networkInfo)
139-
)
140-
return false;
141-
142-
if (
143-
props.isSendToken &&
144-
!isValidDecimals(sendAmount.value, props.network.decimals!)
145-
) {
146-
return false;
147-
}
148-
// if (
149-
// Number(sendAmount.value) < (props.network as BitcoinNetwork).dust &&
150-
// props.isSendToken
151-
// )
152-
// return false;
153-
// if (
154-
// new BigNumber(sendAmount.value).gt(
155-
// new BigNumber(props.sparkAccount.sparkBalance.availableBalance),
156-
// )
157-
// )
158-
// return false;
159-
return true;
160-
});
161-
162148
const sendAmount = computed(() => {
163149
if (amount.value && amount.value !== '') return amount.value;
164150
return '0';
@@ -180,6 +166,41 @@ const { value: assetMaxValue } = useAsyncComputed(async () => {
180166
return fromBase(sparkBalance, props.network.decimals);
181167
}, '');
182168
169+
const isInputsValid = computed<boolean>(() => {
170+
if (!isValidAddress.value) return false;
171+
172+
if (
173+
props.isSendToken &&
174+
!isValidDecimals(sendAmount.value, props.network.decimals!)
175+
) {
176+
return false;
177+
}
178+
if (
179+
props.isSendToken &&
180+
new BigNumber(sendAmount.value).lt(props.network.dust)
181+
) {
182+
return false;
183+
}
184+
185+
if (
186+
props.sparkAccount?.sparkBalance?.availableBalance &&
187+
new BigNumber(sendAmount.value).gt(
188+
new BigNumber(
189+
fromBase(
190+
props.sparkAccount.sparkBalance.availableBalance,
191+
props.network.decimals,
192+
),
193+
),
194+
)
195+
)
196+
return false;
197+
const sendAmountBigNumber = new BigNumber(sendAmount.value);
198+
if (sendAmountBigNumber.isNaN()) return false;
199+
if (sendAmountBigNumber.lte(0)) return false;
200+
if (nativeBalanceAfterTransaction.value.isNeg()) return false;
201+
return true;
202+
});
203+
183204
const inputAmount = (inputAmount: string) => {
184205
if (inputAmount === '') {
185206
inputAmount = '0';

‎packages/extension/src/providers/bitcoin/ui/send-transaction/tabs/transparent-send-tab.vue‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -317,14 +317,24 @@ const updateUTXOs = async () => {
317317
});
318318
};
319319
320+
const fetchAssetsRequestId = ref(0);
321+
320322
const fetchAssets = () => {
323+
const requestId = ++fetchAssetsRequestId.value;
321324
selectedAsset.value = loadingAsset;
322325
emit('update:isLoadingAssets', true);
323-
return props.network.getAllTokens(addressFrom.value).then(allAssets => {
324-
accountAssets.value = allAssets as BTCToken[];
325-
selectedAsset.value = allAssets[0] as BTCToken;
326-
emit('update:isLoadingAssets', false);
327-
});
326+
return props.network
327+
.getAllTokens(addressFrom.value)
328+
.then(allAssets => {
329+
if (requestId !== fetchAssetsRequestId.value) return;
330+
accountAssets.value = allAssets as BTCToken[];
331+
selectedAsset.value = allAssets[0] as BTCToken;
332+
})
333+
.finally(() => {
334+
if (requestId === fetchAssetsRequestId.value) {
335+
emit('update:isLoadingAssets', false);
336+
}
337+
});
328338
};
329339
330340
const toggleSelectToken = () => {
@@ -446,7 +456,6 @@ const toggleSelectContactTo = (open: boolean) => {
446456
const selectAccountFrom = (account: string) => {
447457
addressFrom.value = account;
448458
isOpenSelectContactFrom.value = false;
449-
fetchAssets();
450459
};
451460
452461
const selectAccountTo = (account: string) => {

‎packages/extension/src/ui/action/composables/update-activity-state.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,9 @@ export const useUpdateActivityState = (
3838
[
3939
{
4040
network: network.name,
41-
from: 'Hidden',
41+
from:
42+
accountHeaderData.value.sparkAccount?.defaultAddress ??
43+
'Hidden',
4244
to: 'Hidden',
4345
isIncoming: false,
4446
status: ActivityStatus.success,

‎packages/extension/src/ui/action/views/accounts/components/accounts-list-item.vue‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,15 @@
44
:class="{ disabled: !active }"
55
@click="select(address)"
66
>
7-
<img :src="identiconElement(address)" />
7+
<img
8+
:src="
9+
identiconElement(
10+
network.name === NetworkNames.Firo && active && sparkDisplayAddress
11+
? sparkDisplayAddress
12+
: address,
13+
)
14+
"
15+
/>
816
<div class="accounts-item__info">
917
<p class="accounts-item__info-name">
1018
{{ name }}

‎packages/extension/src/ui/action/views/network-activity/components/network-activity-total.vue‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,8 @@ packages/extension/src/ui/action/views/network-activity/components/network-activ
4040
<span>Private {{ symbol }}</span>
4141
</h6>
4242

43-
<p v-if="network.name !== NetworkNames.Firo">
44-
<span v-if="subnetwork !== ''">Chain {{ subnetwork }} &middot;</span>
45-
{{ $filters.parseCurrency(fiatAmount) }}
46-
</p>
43+
<span v-if="subnetwork !== ''">Chain {{ subnetwork }} &middot;</span>
44+
{{ $filters.parseCurrency(totalFiatAmount) }}
4745
</div>
4846

4947
<div v-if="tokenPrice !== '0.00'" class="network-activity__total-market">
@@ -101,6 +99,7 @@ import { GridComponent } from 'echarts/components';
10199
import VChart from 'vue-echarts';
102100
use([SVGRenderer, LineChart, GridComponent]);
103101
import { fromBase } from '@enkryptcom/utils';
102+
import BigNumber from 'bignumber.js';
104103
import { computed, onBeforeMount, PropType, ref, watchEffect } from 'vue';
105104
import { AccountsHeaderData, SparkAccount } from '@action/types/account';
106105
import { NetworkNames } from '@enkryptcom/types';
@@ -232,9 +231,21 @@ const {
232231
} = useAsyncComputed(async () => {
233232
const balance = await calculateCurrentSparkBalance();
234233
if (balance === '0') return '0';
235-
return fromBase(balance, props.network.decimals ?? 8);
234+
const decimalValue = fromBase(balance, props.network.decimals ?? 8);
235+
return new BigNumber(decimalValue).toFormat(5);
236236
}, '-');
237237
238+
const totalFiatAmount = computed(() => {
239+
const transparentFiat = parseFloat(props.fiatAmount) || 0;
240+
if (props.network.name === NetworkNames.Firo) {
241+
const sparkVal = parseFloat(sparkBalanceFormatted.value) || 0;
242+
const price = parseFloat(props.tokenPrice) || 0;
243+
const sparkFiat = sparkVal * price;
244+
return transparentFiat + sparkFiat;
245+
}
246+
return transparentFiat;
247+
});
248+
238249
const openAnonymizeFundsModal = () => {
239250
synchronizeState.value = true;
240251
};
@@ -294,6 +305,8 @@ const openAnonymizeFundsModal = () => {
294305
295306
.network-activity {
296307
&__total-error {
308+
width: 100%;
309+
box-sizing: border-box;
297310
padding: 16px 24px;
298311
background: rgba(239, 68, 68, 0.08);
299312
border: 1.5px solid rgba(239, 68, 68, 0.2);
@@ -314,6 +327,8 @@ const openAnonymizeFundsModal = () => {
314327
}
315328
316329
&__total {
330+
width: 100%;
331+
box-sizing: border-box;
317332
padding: 20px;
318333
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
319334
border-radius: 16px;

0 commit comments

Comments
 (0)