Skip to content

Commit

Permalink
Added Transactions
Browse files Browse the repository at this point in the history
  • Loading branch information
@erfanmola
erfanmola committed Oct 9, 2023
1 parent 9a50010 commit cc9bc30
Show file tree
Hide file tree
Showing 4 changed files with 355 additions and 18 deletions.
18 changes: 0 additions & 18 deletions webApp/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,24 +61,6 @@
Your client is not authorized, please use this WebApp from a valid Telegram Client
</template>
</component>
<!-- Include liriliri/eruda developer console if we are in Development Mode -->
<teleport to="head" v-if="devMode">
<component is="script" v-if="devMode" src="node_modules/eruda/eruda.js"></component>
<component is="script" v-if="devMode">
let timer = setInterval(() => {
if (typeof eruda === 'object') {
clearInterval(timer);
eruda.init();
}
}, 250);
</component>
</teleport>
</template>
<style lang="scss">
Expand Down
12 changes: 12 additions & 0 deletions webApp/src/router/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import WalletView from '../views/Wallet.vue';
import BadgesView from '../views/Badges.vue';
import ReceiveView from '../views/Receive.vue';
import TransferView from '../views/Transfer.vue';
import TransactionsView from '../views/Transactions.vue';
import TransactionView from '../views/Transaction.vue';

const routes = [
{
Expand Down Expand Up @@ -49,6 +51,16 @@ const routes = [
name: 'transfer',
component: TransferView,
},
{
path: '/transactions',
name: 'transactions',
component: TransactionsView,
},
{
path: '/transaction/:id',
name: 'transaction',
component: TransactionView,
},
];

const router = createRouter({
Expand Down
168 changes: 168 additions & 0 deletions webApp/src/views/Transaction.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
<script setup>
import { inject, ref, onMounted } from 'vue';
import { useI18n } from "vue-i18n";
import { useRouter, useRoute } from 'vue-router';
import WebApp from '@twa-dev/sdk';
import Utils from '../utils';
import Header from '../components/Header.vue';
// If user has no saved wallet, redirect to login
if (!(Utils.GetWallet('wallet'))) {
const router = useRouter();
router.push('/login');
}
const i18nLocale = useI18n({ useScope: 'global' });
// Set i18n locale based on the user's locale provided by <LocaleProvider>
i18nLocale.locale.value = localStorage.getItem('dpxwallet_locale') || inject('locale', 'en');
const route = useRoute();
const router = useRouter();
const time = ref([]);
const wallet = ref(Utils.GetWallet('wallet'));
const transaction = ref(null);
if (localStorage.getItem(`transaction_${ route.params.id }`)) {
transaction.value = JSON.parse(localStorage.getItem(`transaction_${ route.params.id }`));
transaction.value['type'] = (transaction.value.departure === wallet.value) ? 'transfer' : 'receive';
localStorage.removeItem(`transaction_${ route.params.id }`);
time.value = new Date(transaction.value.timestamp * 1000).toLocaleString('en-US', { timeZone: 'Asia/Tehran' }).split(' ')[1].split(':').map(num => num.padStart(2, '0'));
}else{
setTimeout(async () => {
let data = await Utils.DPXSendRequest(`/transaction/${ route.params.id }`, {}, 'GET');
if (data && `result` in data && data.status === 'success') {
transaction.value = data.result;
}else{
router.push('/transactions');
}
});
}
WebApp.BackButton.onClick(() => { router.push('/'); });
WebApp.BackButton.show();
</script>

<template>
<section id="section-transaction">

<Header :icon="transaction ? (transaction.type === 'receive' ? 'icon-arrow-down-circle' : 'icon-arrow-up-circle') : 'icon-inbox'" :title="$t('transaction.title')"></Header>

<div v-if="transaction">

<section id="section-transaction-info">
<h1 class="w550-dots-1">{{ $t('transaction.info') }}</h1>

<ul>
<li><span class="w500-dots-1">{{ $t('transaction.fields.id') }}:</span><span class="w550-dots-1">{{ transaction.transaction }}</span></li>
<li><span class="w500-dots-1">{{ $t('transaction.fields.departure') }}:</span><span class="w550-dots-1">{{ transaction.departure }}</span></li>
<li><span class="w500-dots-1">{{ $t('transaction.fields.destination') }}:</span><span class="w550-dots-1">{{ transaction.destination }}</span></li>
<li><span class="w500-dots-1">{{ $t('transaction.fields.amount') }}:</span><span class="w550-dots-1">{{ transaction.amount }}</span></li>
<li><span class="w500-dots-1">{{ $t('transaction.fields.fee') }}:</span><span class="w550-dots-1">{{ transaction.fee }}</span></li>
<li><span class="w500-dots-1">{{ $t('transaction.fields.date') }}:</span><span class="w550-dots-1">{{ new Date(transaction.timestamp * 1000).toLocaleTimeString() }} {{ new Date(transaction.timestamp * 1000).toLocaleDateString() }}</span></li>
</ul>
</section>

</div>

<ul v-else class="shimmer-container" id="shimmer-transaction">
<li></li>
</ul>

</section>
</template>

<style lang="scss">
#section-transaction {
display: flex;
flex-direction: column;
gap: 1rem;
height: 100%;
> div {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
> section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
padding: 1rem;
gap: 1rem;
position: relative;
overflow: hidden;
border-radius: 0.5rem;
color: var(--tg-theme-button-color);
&:before {
position: absolute;
background-color: var(--tg-theme-button-color);
width: 100%;
height: 100%;
left: 0;
right: 0;
content: '';
z-index: -100;
opacity: 0.125;
}
> ul {
display: flex;
width: 100%;
flex-direction: column;
gap: 1rem;
> li {
display: flex;
align-items: center;
justify-content: space-between;
> span {
&:first-child {
font-size: 1rem;
}
&:last-child {
font-size: 0.925rem;
}
}
}
}
}
}
}
#shimmer-transaction {
width: 100%;
> li {
border-radius: 0.425rem;
height: 24rem;
}
}
</style>
175 changes: 175 additions & 0 deletions webApp/src/views/Transactions.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
<script setup>
import { inject, ref, onMounted } from 'vue';
import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router';
import WebApp from '@twa-dev/sdk';
import Utils from '../utils';
import Header from '../components/Header.vue';
// If user has no saved wallet, redirect to login
if (!(Utils.GetWallet('wallet'))) {
const router = useRouter();
router.push('/login');
}
const i18nLocale = useI18n({ useScope: 'global' });
// Set i18n locale based on the user's locale provided by <LocaleProvider>
i18nLocale.locale.value = localStorage.getItem('dpxwallet_locale') || inject('locale', 'en');
const router = useRouter();
const transactions = ref(null);
const wallet = ref(Utils.GetWallet('wallet'));
onMounted(async () => {
let data = await Utils.DPXSendRequest(`/transactions`, { 'departure': wallet.value, 'destination': wallet.value }, 'POST', i18nLocale);
if (data && `result` in data && data.status === 'success') {
transactions.value = data.result;
}
});
const OpenTransaction = (transaction) => {
localStorage.setItem(`transaction_${ transaction.transaction }`, JSON.stringify(transaction));
router.push(`/transaction/${ transaction.transaction }`);
};
WebApp.BackButton.onClick(() => { router.push('/'); });
WebApp.BackButton.show();
</script>

<template>
<section id="section-transactions">

<Header icon="icon-inbox" :title="$t('transactions.title')"></Header>

<div>

<ul v-if="transactions && transactions.length > 0">
<li v-for="transaction in transactions" @click="OpenTransaction(transaction)" :class="transaction.departure === wallet ? 'transfer' : 'receive'">
<div>
<h2 class="w550-dots-1">{{ transaction.amount }} DPX {{ transaction.departure === wallet ? $t('transactions.sent') : $t('transactions.received') }}</h2>
<span>{{ $t('transactions.transaction') }}: {{ transaction.transaction }}</span>
</div>
<i :class="transaction.departure === wallet ? 'icon-arrow-up-circle' : 'icon-arrow-down-circle'"></i>
</li>
</ul>

<p v-else-if="transactions">{{ $t('transactions.no_transactions') }}</p>

<ul v-else class="shimmer-container" id="shimmer-transactions">
<li v-for="i in 8"></li>
</ul>

</div>

</section>
</template>

<style lang="scss">
#section-transactions {
display: flex;
flex-direction: column;
gap: 1rem;
height: 100%;
> div {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding-bottom: 1rem;
height: 100%;
overflow-y: scroll;
> ul {
display: grid;
width: 100%;
grid-gap: 1rem;
> li {
display: flex;
overflow: hidden;
color: var(--tg-theme-button-color);
align-items: center;
padding: 0 1rem;
position: relative;
border-radius: 0.5rem;
width: 100%;
cursor: pointer;
&.receive {
> i {
color: var(--border-green);
}
}
&.transfer {
> i {
color: var(--border-red);
}
}
> i {
font-size: 1.5rem;
}
> div {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 1rem 0;
gap: 0.5rem;
> h2 {
font-size: 1rem;
line-height: 1;
}
> span {
font-size: 0.875rem;
line-height: 1;
}
}
}
}
#shimmer-transactions {
> li {
height: 4.35rem;
}
}
> ul:not(#shimmer-transactions) {
> li {
&::before {
background-color: var(--tg-theme-button-color);
width: 100%;
height: 100%;
content: '';
position: absolute;
left: 0;
top: 0;
z-index: -100;
opacity: 0.125;
}
}
}
}
}
</style>

0 comments on commit cc9bc30

Please sign in to comment.