Skip to content

Commit bf5fd4f

Browse files
its-saeedits-saeed
authored
Add success icon to the transaction list. (#61)
1 parent e845986 commit bf5fd4f

File tree

12 files changed

+143
-106
lines changed

12 files changed

+143
-106
lines changed

‎src/components/LeftSidebar/FilesList/FilesTitleBar.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,6 @@ const selectFile = () => {
6767
const fileSelected = async (file: File) => {
6868
const content = await readFileAsText(file);
6969
filesStore.addNew(file.name, content.toString());
70-
console.log(file);
7170
};
7271
7372
const newFileClicked = () => {

‎src/components/RightSidebar/ContractGeneralInfoCard.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,12 +80,11 @@ const fetchCode = async () => {
8080
mode.value = 'code';
8181
loading.value = true;
8282
data.value = await blockchainStore.getSmartContractCode(props.address);
83-
console.log(data.value);
8483
} catch (error) {
8584
mode.value = null;
8685
q.notify({
8786
type: 'negative',
88-
message: `Failed to get the receipt. ${error.message}`,
87+
message: `Failed to get the contract code. ${error.message}`,
8988
});
9089
} finally {
9190
loading.value = false;

‎src/components/Tools/TransferZilDialog.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@ const transfer = async () => {
7676
});
7777
show.value = false;
7878
} catch (error) {
79-
console.log(error)
8079
q.notify({
8180
type: 'negative',
8281
message: `Failed to transfer. ${error}`,

‎src/components/TransactionReceiptDialog.vue‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,12 @@
88
<q-card style="width: 500px; max-width: 80vw">
99
<q-card-section>
1010
<div class="text-h6">Transaction Receipt</div>
11-
<truncated-text class="text-grey-7 q-m" :text="props.txHash" :length="50" :position="25"/>
11+
<truncated-text
12+
class="text-grey-7 q-m"
13+
:text="props.txHash"
14+
:length="50"
15+
:position="25"
16+
/>
1217
</q-card-section>
1318

1419
<q-card-section class="q-pt-none">
@@ -17,12 +22,7 @@
1722
</q-card-section>
1823
<q-separator />
1924
<q-card-actions align="right" class="bg-grey-2">
20-
<q-btn
21-
icon="close"
22-
no-caps
23-
flat
24-
color="negative"
25-
v-close-popup
25+
<q-btn icon="close" no-caps flat color="negative" v-close-popup
2626
>Close</q-btn
2727
>
2828
</q-card-actions>
@@ -38,19 +38,21 @@ import 'vue-json-pretty/lib/styles.css';
3838
import { useBlockchainStore } from 'src/stores/blockchain';
3939
import { useQuasar } from 'quasar';
4040
41-
const receiptJson = ref(null)
41+
const receiptJson = ref(null);
4242
const q = useQuasar();
4343
const props = defineProps(['txHash']);
4444
45-
onMounted(async() => {
45+
onMounted(async () => {
4646
try {
4747
const blockchainStore = useBlockchainStore();
48-
receiptJson.value = await blockchainStore.getTransactionReceipt(props.txHash)
48+
receiptJson.value = await blockchainStore.getTransactionReceipt(
49+
props.txHash
50+
);
4951
} catch (error) {
5052
q.notify({
5153
type: 'negative',
52-
message: `Failed to get the receipt. ${error}`
53-
})
54+
message: `Failed to get receipt. ${error.message}`,
55+
});
5456
}
55-
})
57+
});
5658
</script>

‎src/components/contracts/DeployContractDialog.vue‎

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
label="Contract Name"
2222
hint="For easier reference"
2323
v-model="contractName"
24-
:rules="[val => !!val || 'Name is required']"
24+
:rules="[(val) => !!val || 'Name is required']"
2525
/>
2626
</div>
2727
</div>
@@ -66,12 +66,21 @@
6666
</q-card-section>
6767
<q-separator />
6868
<q-card-actions class="bg-grey-2">
69-
<q-btn no-caps flat icon="upload" color="primary" :loading="loading" @click="deploy" :disable="deployBtnIsDisabled"
69+
<q-btn
70+
no-caps
71+
flat
72+
icon="upload"
73+
color="primary"
74+
:loading="loading"
75+
@click="deploy"
76+
:disable="deployBtnIsDisabled"
7077
>Deploy</q-btn
7178
>
7279
<q-space />
7380
<q-btn no-caps flat icon="delete_forever" color="red">Reset</q-btn>
74-
<q-btn no-caps flat icon="close" color="warning" v-close-popup>Cancel</q-btn>
81+
<q-btn no-caps flat icon="close" color="warning" v-close-popup
82+
>Cancel</q-btn
83+
>
7584
</q-card-actions>
7685
</q-card>
7786
</q-dialog>
@@ -84,7 +93,7 @@ import { ref } from 'vue';
8493
import ContractInput from './ContractInput.vue';
8594
import { useQuasar } from 'quasar';
8695
import { useContractsStore } from 'src/stores/contracts';
87-
import { BN, Long} from '@zilliqa-js/util';
96+
import { BN, Long } from '@zilliqa-js/util';
8897
import GasPriceInput from 'src/components/GasPriceInput.vue';
8998
9099
const q = useQuasar();
@@ -94,28 +103,30 @@ const show = ref(true);
94103
const amount = ref(0);
95104
const gasPrice = ref(0);
96105
const gasLimit = ref(30000);
97-
const contractName = ref('')
106+
const contractName = ref('');
98107
99108
const abi = ref();
100109
let abiParams = [];
101-
const initializationParameters = ref({})
110+
const initializationParameters = ref({});
102111
const contractsStore = useContractsStore();
103112
104113
const deployBtnIsDisabled = computed(() => {
105114
return contractName.value === '';
106-
})
115+
});
107116
108117
onMounted(async () => {
109118
try {
110119
const contractAbi = await getContractAbi(props.code);
111120
abi.value = contractAbi;
112121
abiParams = contractAbi.params;
113-
abiParams.forEach(item => initializationParameters.value[item.vname] = '')
122+
abiParams.forEach(
123+
(item) => (initializationParameters.value[item.vname] = '')
124+
);
114125
} catch (error) {
115126
q.notify({
116127
type: 'warning',
117-
message: `Failed to get the contract ABI. ${error}`
118-
})
128+
message: `Failed to get the contract ABI. ${error}`,
129+
});
119130
}
120131
});
121132
@@ -124,21 +135,25 @@ const props = defineProps(['file', 'code']);
124135
const deploy = async () => {
125136
loading.value = true;
126137
try {
127-
const id = await contractsStore.deploy(contractName.value, props.code, {
128-
gasPrice: new BN(gasPrice.value),
129-
gasLimit: Long.fromNumber(gasLimit.value),
130-
amount: new BN(amount.value),
131-
}, abiParams.map(param => ({
132-
...param,
133-
value: initializationParameters.value[param.vname]
134-
})))
138+
const id = await contractsStore.deploy(
139+
contractName.value,
140+
props.code,
141+
{
142+
gasPrice: new BN(gasPrice.value),
143+
gasLimit: Long.fromNumber(gasLimit.value),
144+
amount: new BN(amount.value),
145+
},
146+
abiParams.map((param) => ({
147+
...param,
148+
value: initializationParameters.value[param.vname],
149+
}))
150+
);
135151
q.notify({
136152
type: 'info',
137153
message: `Contract deployment started. ${id}`,
138154
});
139155
show.value = false;
140156
} catch (error) {
141-
console.log(error)
142157
q.notify({
143158
type: 'negative',
144159
message: `Failed to deploy. ${error}`,

‎src/components/header/MenuBar/Transactions.vue‎

Lines changed: 39 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,40 @@
3939

4040
<q-list dense>
4141
<div v-for="transaction in store.transactions" :key="transaction.id">
42-
<q-item :class="`bg-${listItemBgColor(transaction.status)}`">
42+
<q-item>
4343
<q-item-section>
4444
<q-item-label>
45-
<truncated-text
46-
:text="transaction.id"
47-
:length="40"
48-
:position="20"
49-
:link="blockchainStore.getExplorerLinkForTx(transaction.id)"
50-
/>
51-
<copy-to-clipboard-btn :content="transaction.id" />
45+
<div
46+
:class="`row items-center q-gutter-x-xs bg-${listItemBgColor(
47+
transaction.success
48+
)}`"
49+
style="border-radius: 4px"
50+
>
51+
<q-circular-progress
52+
indeterminate
53+
rounded
54+
size="14px"
55+
color="orange"
56+
v-if="transaction.success === undefined"
57+
/>
58+
<q-icon
59+
v-else-if="transaction.success"
60+
name="task_alt"
61+
color="green"
62+
>
63+
<q-tooltip>Transaction was successful</q-tooltip>
64+
</q-icon>
65+
<q-icon v-else name="highlight_off" color="red">
66+
<q-tooltip>Transaction failed</q-tooltip>
67+
</q-icon>
68+
<truncated-text
69+
:text="transaction.id"
70+
:length="40"
71+
:position="20"
72+
:link="blockchainStore.getExplorerLinkForTx(transaction.id)"
73+
/>
74+
<copy-to-clipboard-btn :content="transaction.id" />
75+
</div>
5276
</q-item-label>
5377
<q-item-label caption>
5478
<q-badge
@@ -133,16 +157,13 @@ const txStatusColor = (status: TransactionStatus) => {
133157
}
134158
};
135159
136-
const listItemBgColor = (status: TransactionStatus) => {
137-
switch (status) {
138-
case 'Initialized':
139-
return 'blue-2';
140-
case 'Confirmed':
141-
return 'white';
142-
case 'Pending':
143-
return 'yellow-2';
144-
case 'Rejected':
145-
return 'red-2';
160+
const listItemBgColor = (success: boolean | undefined) => {
161+
if (success === undefined) {
162+
return 'yellow-1';
163+
} else if (success) {
164+
return 'green-1';
165+
} else {
166+
return 'red-1';
146167
}
147168
};
148169
</script>

‎src/pages/EditorPage.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,7 @@ const tab = ref('tab');
6464
const filesStore = useFilesStore();
6565
const closeFile = (file: string) => {
6666
filesStore.removeFromOpenFiles(file);
67-
console.log(filesStore.openFiles[0]);
6867
tab.value = filesStore.openFiles[0];
69-
console.log(tab.value);
7068
};
7169
7270
const thumbStyle = {

‎src/stores/blockchain.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,11 @@ export const useBlockchainStore = defineStore('blockchain', {
163163
getTransactionStatus: (state) => {
164164
return async (
165165
txHash: string
166-
): Promise<{ status: TransactionStatus; statusMessage: string }> => {
166+
): Promise<{
167+
status: TransactionStatus;
168+
statusMessage: string;
169+
success: boolean | undefined;
170+
}> => {
167171
if (state.zilliqa === null) {
168172
throw new Error('Please select a network');
169173
}
@@ -172,7 +176,15 @@ export const useBlockchainStore = defineStore('blockchain', {
172176
txHash
173177
);
174178

175-
return interpretTransactionStatus(response);
179+
const status = interpretTransactionStatus(response);
180+
181+
return {
182+
...status,
183+
success:
184+
status.status === 'Confirmed' || status.status === 'Rejected'
185+
? response.success
186+
: undefined,
187+
};
176188
};
177189
},
178190
minimumGasPrice: async (state) => {
@@ -265,7 +277,7 @@ export const useBlockchainStore = defineStore('blockchain', {
265277
}
266278
this.selectedAccount = account;
267279
this.refreshSelectedAccountBalance().then(() => {
268-
console.log('update');
280+
/* */
269281
});
270282
},
271283
setSelectedNetwork(name: string) {

0 commit comments

Comments
 (0)