Merge remote-tracking branch 'origin/develop' into chainmanager-to-pinia

telosnetwork · Jul 11, 2024 · 8278e5e · 8278e5e
2 parents e39d645 + 0e7f2e8
commit 8278e5e
Show file tree

Hide file tree

Showing 9 changed files with 206 additions and 120 deletions.
diff --git a/README.md b/README.md
@@ -38,7 +38,7 @@ This includes following key features:
 - BP Voting and Governance
 - Premium Name bids
 
-Following, excelent products can be taken as reference points for further features:
+Following, excellent products can be taken as reference points for further features:
 
 - [EOS Authority](https://eosauthority.com/)
 - [Blocks](https://bloks.io/)
@@ -112,7 +112,7 @@ app running at localhost:4000
 
 [Vue 2 documentation](https://vuejs.org/v2/api/)
 
-[Vue 3 documenation](https://v3.vuejs.org/)
+[Vue 3 documentation](https://v3.vuejs.org/)
 
 [Testing Quasar with Jest](https://github.com/quasarframework/quasar-testing/tree/next/packages/unit-jest)
 

diff --git a/src/boot/wharf.ts b/src/boot/wharf.ts
@@ -0,0 +1,45 @@
+import { Session, SessionKit } from '@wharfkit/session';
+import { TransactPluginResourceProvider } from '@wharfkit/transact-plugin-resource-provider';
+import { WalletPluginAnchor } from '@wharfkit/wallet-plugin-anchor';
+import { WalletPluginCleos } from '@wharfkit/wallet-plugin-cleos';
+import { WalletPluginPrivateKey } from '@wharfkit/wallet-plugin-privatekey';
+import WebRenderer from '@wharfkit/web-renderer';
+import { boot } from 'quasar/wrappers';
+import { getChain } from 'src/config/ConfigManager';
+import { Chain } from 'src/types/Chain';
+
+const chain: Chain = getChain();
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $kit: SessionKit;
+    $user: Session;
+  }
+}
+
+export const ui = new WebRenderer();
+
+export const kit = new SessionKit({
+    appName: process.env.APP_NAME,
+    chains: [
+        {
+            id: chain.getChainId(),
+            url: String(chain.getRPCEndpoint()),
+        },
+    ],
+    ui,
+    walletPlugins: [
+        new WalletPluginAnchor(),
+        new WalletPluginCleos(),
+        new WalletPluginPrivateKey('5Jtoxgny5tT7NiNFp1MLogviuPJ9NniWjnU4wKzaX4t7pL4kJ8s'),
+    ],
+},
+{
+    transactPlugins: [
+        new TransactPluginResourceProvider(),
+    ],
+});
+
+export default boot(({ app }) => {
+    app.config.globalProperties.$kit = kit;
+});
diff --git a/src/components/BlockCard.vue b/src/components/BlockCard.vue
@@ -15,15 +15,21 @@ import { formatDate } from 'src/utils/string-utils';
 export default defineComponent({
     name: 'BlockCard',
     props: {
+        block_num: {
+            type: String,
+            required: true,
+        },
         block: {
             type: Object as PropType<Block>,
             required: false,
             default: null,
         },
     },
     setup(props) {
+        const loading = ref<boolean>(true);
         const router = useRouter();
         const q = useQuasar();
+        const blockNum = computed(() => props.block_num);
         const Block = computed(() => props.block);
         const blockInfo = ref<{ key: string; value: string }[]>([]);
         async function nextBlock() {
@@ -96,6 +102,7 @@ export default defineComponent({
                     },
                     { key: 'Actions', value: actionCount.toString() },
                 ];
+                loading.value = false;
             }
         }
         watch(Block, () => {
@@ -105,13 +112,14 @@ export default defineComponent({
             setBlockData();
         });
         return {
-            block_num: computed(() => Block.value?.block_num || 0),
             nextBlock,
             previousBlock,
             numberWithCommas,
             formatDate,
             copy,
             blockInfo,
+            blockNum,
+            loading,
         };
     },
 });
@@ -154,7 +162,7 @@ export default defineComponent({
                 </q-card-section>
                 <q-card-section class="q-pt-none">
                     <div class="row items-center">
-                        <div class="col-11 text-bold ellipsis">{{numberWithCommas(block_num)}}</div>
+                        <div class="col-11 text-bold ellipsis">{{numberWithCommas(parseInt(block_num))}}</div>
                         <div class="col-1">
                             <q-btn
                                 class="float-right"
@@ -168,20 +176,28 @@ export default defineComponent({
                         </div>
                     </div>
                 </q-card-section>
-                <q-card-section>
-                    <div class="text-grey-7">SUMMARY</div>
+                <!-- we show a centered spinner if loading is true -->
+                <q-card-section v-if="loading" class="q-pa-none">
+                    <div class="row full-width justify-center">
+                        <q-spinner-dots color="primary" size="40px"/>
+                    </div>
                 </q-card-section>
-                <div v-for="item in blockInfo" :key="item.key">
-                    <q-separator class="card-separator" inset="inset"/>
+                <template v-else>
                     <q-card-section>
-                        <div class="row">
-                            <div class="col-xs-12 col-sm-6">
-                                <div class="text-body1 text-weight-medium text-uppercase">{{item.key}}</div>
-                            </div>
-                            <div class="col-xs-12 col-sm-6 text-right text-bold">{{item.value}}</div>
-                        </div>
+                        <div class="text-grey-7">SUMMARY</div>
                     </q-card-section>
-                </div>
+                    <div v-for="item in blockInfo" :key="item.key">
+                        <q-separator class="card-separator" inset="inset"/>
+                        <q-card-section>
+                            <div class="row">
+                                <div class="col-xs-12 col-sm-6">
+                                    <div class="text-body1 text-weight-medium text-uppercase">{{item.key}}</div>
+                                </div>
+                                <div class="col-xs-12 col-sm-6 text-right text-bold">{{item.value}}</div>
+                            </div>
+                        </q-card-section>
+                    </div>
+                </template>
             </div>
         </q-card>
     </div>

diff --git a/src/components/SendDialog.vue b/src/components/SendDialog.vue
@@ -81,11 +81,12 @@ export default defineComponent({
         };
 
         const resetForm = () => {
+            const token = networksStore.getCurrentNetwork.getSystemToken();
             sendToken.value = {
-                symbol: networksStore.getCurrentNetwork.getSystemToken().symbol,
-                precision: 4,
-                amount: 0,
-                contract: 'eosio.token',
+                symbol: token.symbol,
+                precision: token.precision,
+                amount: token.amount,
+                contract: token.contract,
             };
         };
 

diff --git a/src/components/TransactionsTable.vue b/src/components/TransactionsTable.vue
@@ -252,56 +252,30 @@ export default defineComponent({
         const filterRows = () => {
             filteredRows.value = rows.value;
         };
-
         const loadTableData = async (): Promise<void> => {
-            let tableData: Action[];
+            let tableData: Action[] = [];
             if (isTransaction.value) {
                 tableData = (await api.getTransaction(account.value)).actions;
             } else if (hasActions.value) {
                 tableData = actions.value;
             } else {
                 const page = paginationSettings.value.page;
                 let limit = paginationSettings.value.rowsPerPage;
-
-                let notified = accountsModel.value ?? '';
-                let after = '';
-                let before = '';
-                if (toDateModel.value !== now) {
-                    before = new Date(toDateModel.value).toISOString();
-                }
-                if (fromDateModel.value !== '') {
-                    after = new Date(fromDateModel.value).toISOString();
-                }
+                const notified = accountsModel.value ?? '';
+                const after = fromDateModel.value !== '' ? new Date(fromDateModel.value).toISOString() : '';
+                const before = toDateModel.value !== now ? new Date(toDateModel.value).toISOString() : '';
                 const sort = paginationSettings.value.descending ? 'desc' : 'asc';
+                const extras: {[key:string]:string} = {};
 
-                let extras: {[key:string]:string} | null = tokenModel.value ? { 'act.account': tokenModel.value.contract } : null;
-                if (actionsModel.value) {
-                    extras = extras ? {
-                        ...extras,
-                        'act.name': actionsModel.value,
-                    } : {
-                        'act.name': actionsModel.value,
-                    };
-                }
-
-                if (page > 1 && currentFirstAction.value === 0) {
-                    currentFirstAction.value = rows.value[0]?.action.global_sequence;
+                if (tokenModel.value) {
+                    extras['act.account'] = tokenModel.value.contract;
+                    // Increase limit to allow for filtering
+                    limit = limit * 3;
                 }
-
-                if (currentFirstAction.value > 0) {
-                    extras = extras ? {
-                        ...extras,
-                        'global_sequence': '0-' + currentFirstAction.value.toString(),
-                    } : {
-                        'global_sequence': '0-' + currentFirstAction.value.toString(),
-                    };
+                if (actionsModel.value) {
+                    extras['act.name'] = actionsModel.value;
                 }
 
-                // if token is selected, we need to get all transactions and filter them
-                // so we eventually will need more than the current page size
-                if (tokenModel.value) {
-                    limit = 100;
-                }
                 const response = await api.getTransactions({
                     page,
                     limit,
@@ -319,36 +293,42 @@ export default defineComponent({
             if (tableData) {
                 if (tokenModel.value) {
                     tableData = tableData.filter(
-                        item => (item.act.data as {quantity?:string}).quantity?.includes(tokenModel.value.symbol),
+                        item => (item.act.data as {quantity?:string})?.quantity?.includes(tokenModel.value.symbol),
                     );
-
-                    // take only the first aginationSettings.value.rowsPerPage items
-                    tableData = tableData.slice(0, paginationSettings.value.rowsPerPage);
                 }
 
-                rows.value = tableData.map(item => ({
-                    name: item.trx_id,
-                    transaction: { id: item.trx_id, type: 'transaction' },
-                    timestamp: item['@timestamp'] || item.timestamp,
-                    action: item,
-                    data: hasActions.value
-                        ? { data: item.data, name: item.account }
-                        : { data: item.act.data, name: item.act.name },
-                    actions: [
-                        {
-                            name: item.trx_id,
-                            transaction: { id: item.trx_id, type: 'transaction' },
-                            timestamp: item['@timestamp'],
-                            action: item,
-                            data: hasActions.value
-                                ? {
-                                    data: item.data,
-                                    name: item.account,
-                                }
-                                : { data: item.act.data as unknown, name: item.act.name },
-                        },
-                    ],
-                }));
+                const flattenedData: TransactionTableRow[] = [];
+                tableData.forEach((action) => {
+                    const actionsArray = action.act?.data ? [action] : [];
+                    actionsArray.forEach((act) => {
+                        flattenedData.push({
+                            name: act.trx_id,
+                            transaction: { id: act.trx_id, type: 'transaction' },
+                            timestamp: act['@timestamp'] || act.timestamp,
+                            action: act,
+                            data: {
+                                data: act.act.data,
+                                name: act.act.name,
+                            },
+                            actions: actionsArray.map(a => ({
+                                name: a.trx_id,
+                                transaction: { id: a.trx_id, type: 'transaction' },
+                                timestamp: a['@timestamp'] || a.timestamp,
+                                action: a,
+                                data: {
+                                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                                    data: a.act.data,
+                                    name: a.act.name,
+                                },
+                            })),
+                        });
+                    });
+                });
+
+                // Apply pagination after filtering
+                const startIndex = (paginationSettings.value.page - 1) * paginationSettings.value.rowsPerPage;
+                rows.value = flattenedData.slice(startIndex, startIndex + paginationSettings.value.rowsPerPage);
+                totalRows.value = flattenedData.length;
             }
             void filterRows();
         };

diff --git a/src/config/chains/wax/index.ts b/src/config/chains/wax/index.ts
@@ -14,7 +14,7 @@ const NAME = 'wax';
 const DISPLAY = 'WAX';
 const TOKEN = {
     symbol: 'WAX',
-    precision: 4,
+    precision: 8,
     amount: 0,
     contract: 'eosio.token',
 } as Token;