Skip to content

Commit

Permalink
added perf changes
Browse files Browse the repository at this point in the history
  • Loading branch information
ishan-torus committed Oct 26, 2021
1 parent 30e06b3 commit 7f87b5d
Show file tree
Hide file tree
Showing 7 changed files with 156 additions and 550 deletions.
1 change: 1 addition & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
engine-strict = true
546 changes: 62 additions & 484 deletions package-lock.json

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@
},
"engines": {
"node": ">=14.17.0",
"npm": "~6.x"
"npm": "~6.x",
"yarn": "please use npm"
}
}
20 changes: 16 additions & 4 deletions src/pages/wallet/Home.vue
Original file line number Diff line number Diff line change
@@ -1,16 +1,28 @@
<script setup lang="ts">
import { defineAsyncComponent } from "vue";
import SolanaMascot from "@/assets/solana-mascot.svg";
import { Button, Card } from "@/components/common";
import TokensAssetsBalance from "@/components/TokensAssetsBalance.vue";
import WalletBalance from "@/components/WalletBalance.vue";
import WalletTabs from "@/components/WalletTabs.vue";
const asyncWalletBalance = defineAsyncComponent({
loader: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "WalletBalance" */ "@/components/WalletBalance.vue"),
delay: 500,
suspensible: false,
});
const asyncTokensAssetsBalance = defineAsyncComponent({
loader: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "TokensAssetsBalance" */ "@/components/TokensAssetsBalance.vue"),
delay: 500,
suspensible: false,
});
</script>

<template>
<WalletTabs tab="home">
<div class="py-2">
<div class="mt-4 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-2">
<WalletBalance :show-buttons="true" />
<asyncWalletBalance :show-buttons="true" />
<Card :height="'164px'">
<div class="grid grid-cols-3">
<div class="col-span-2">
Expand All @@ -31,7 +43,7 @@ import WalletTabs from "@/components/WalletTabs.vue";
</Card>
</div>
<div>
<TokensAssetsBalance class="mt-10" />
<asyncTokensAssetsBalance class="mt-10" />
</div>
</div>
</WalletTabs>
Expand Down
28 changes: 20 additions & 8 deletions src/pages/wallet/Transfer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,9 @@ import { PublicKey, SystemProgram, Transaction } from "@solana/web3.js";
import useVuelidate from "@vuelidate/core";
import { helpers, minValue, required } from "@vuelidate/validators";
import log from "loglevel";
import { computed, reactive, ref } from "vue";
import { computed, defineAsyncComponent, reactive, ref } from "vue";
import { Button, Card, MessageModal, SelectField, TextField } from "@/components/common";
import { TransferConfirm, TransferTokenSelect } from "@/components/transfer";
import WalletBalance from "@/components/WalletBalance.vue";
import { Button, Card, SelectField, TextField } from "@/components/common";
import WalletTabs from "@/components/WalletTabs.vue";
import ControllersModule from "@/modules/controllers";
import { ALLOWED_VERIFIERS, ALLOWED_VERIFIERS_ERRORS, ENS, STATUS_ERROR, STATUS_INFO, STATUS_TYPE, TransferType } from "@/utils/enums";
Expand All @@ -22,6 +20,20 @@ const transactionFee = ref(0);
const blockhash = ref("");
const selectedVerifier = ref("solana");
const asyncWalletBalance = defineAsyncComponent({
loader: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "WalletBalance" */ "@/components/WalletBalance.vue"),
});
const asyncTransferConfirm = defineAsyncComponent({
loader: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "TransferConfirm" */ "@/components/transfer"),
});
const asyncTransferTokenSelect = defineAsyncComponent({
loader: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "TransferTokenSelect" */ "@/components/transfer"),
});
const asyncMessageModal = defineAsyncComponent({
loader: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "MessageModal" */ "@/components/common"),
});
const messageModalState = reactive({
showMessage: false,
messageTitle: "",
Expand Down Expand Up @@ -121,7 +133,7 @@ const transferTypes = ALLOWED_VERIFIERS;
<Card class="order-2 sm:order-1">
<form action="#" method="POST">
<div>
<TransferTokenSelect class="mb-6" />
<asyncTransferTokenSelect class="mb-6" />
<div class="grid grid-cols-3 gap-3 mb-6">
<div class="col-span-3 sm:col-span-2">
<TextField v-model="transferTo" label="Send to" :errors="$v.transferTo.$errors" />
Expand Down Expand Up @@ -153,7 +165,7 @@ const transferTypes = ALLOWED_VERIFIERS;
<Button class="ml-auto" :disabled="$v.$dirty && $v.$invalid" @click="openModal"><span class="text-base">Transfer</span></Button>
<!-- :crypto-tx-fee="state.transactionFee" -->
<!-- :transfer-disabled="$v.$invalid || $v.$dirty || $v.$error || !allRequiredValuesAvailable()" -->
<TransferConfirm
<asyncTransferConfirm
:sender-pub-key="ControllersModule.selectedAddress"
:receiver-pub-key="transferTo"
:crypto-amount="sendAmount"
Expand All @@ -168,9 +180,9 @@ const transferTypes = ALLOWED_VERIFIERS;
</div>
</form>
</Card>
<WalletBalance class="self-start order-1 sm:order-2" />
<asyncWalletBalance class="self-start order-1 sm:order-2" />
</dl>
<MessageModal
<asyncMessageModal
:is-open="messageModalState.showMessage"
:title="messageModalState.messageTitle"
:description="messageModalState.messageDescription"
Expand Down
30 changes: 15 additions & 15 deletions src/router.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,75 +5,75 @@ import { PKG } from "@/const";
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [
{ path: "/", component: () => import("@/pages/Login.vue"), meta: { title: "Login" } },
{ path: "/", redirect: "/login" },
{
path: "/login",
component: () => import("@/pages/Login.vue"),
component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "LOGIN" */ "@/pages/Login.vue"),
meta: { title: "Login" },
},
{
path: "/start",
component: () => import("@/pages/Start.vue"),
component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "START" */ "@/pages/Start.vue"),
meta: { title: "Start" },
},
{
path: "/end",
component: () => import("@/pages/End.vue"),
component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "END" */ "@/pages/End.vue"),
meta: { title: "End" },
},
{
path: "/confirm",
component: () => import("@/pages/Confirm.vue"),
component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "CONFIRM" */ "@/pages/Confirm.vue"),
meta: { title: "Confirm" },
},
{
path: "/confirm_message",
component: () => import("@/pages/ConfirmMessage.vue"),
component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "CONFIRM_MESSAGE" */ "@/pages/ConfirmMessage.vue"),
meta: { title: "Sign Message" },
},
{
path: "/redirect",
component: () => import("@/pages/RedirectHandler.vue"),
component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "REDIRECT_HANDLER" */ "@/pages/RedirectHandler.vue"),
meta: { title: "redirecting" },
},
{
path: "/providerchange",
component: () => import("@/pages/ProviderChange.vue"),
component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "PROVIDER_CHANGE" */ "@/pages/ProviderChange.vue"),
meta: { title: "ProviderChange" },
},
{
path: "/frame",
component: () => import("@/pages/Frame.vue"),
component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "FRAME" */ "@/pages/Frame.vue"),
meta: { title: "Frame" },
},
{
path: "/logout",
component: () => import("@/pages/Logout.vue"),
component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "LOGOUT" */ "@/pages/Logout.vue"),
meta: { title: "Logout" },
},
{
path: "/wallet/home",
component: () => import("@/pages/wallet/Home.vue"),
component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "HOME" */ "@/pages/wallet/Home.vue"),
meta: { title: "Home" },
},
{
path: "/wallet/transfer",
component: () => import("@/pages/wallet/Transfer.vue"),
component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "TRANSFER" */ "@/pages/wallet/Transfer.vue"),
meta: { title: "Transfer" },
},
{
path: "/wallet/topup",
component: () => import("@/pages/wallet/TopUp.vue"),
component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "TOPUP" */ "@/pages/wallet/TopUp.vue"),
meta: { title: "Top Up" },
},
{
path: "/wallet/activity",
component: () => import("@/pages/wallet/Activity.vue"),
component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "ACTIVITY" */ "@/pages/wallet/Activity.vue"),
meta: { title: "Activity" },
},
{
path: "/wallet/settings",
component: () => import("@/pages/wallet/Settings.vue"),
component: () => import(/* webpackPrefetch: true */ /* webpackChunkName: "SETTINGS" */ "@/pages/wallet/Settings.vue"),
meta: { title: "Settings" },
},
],
Expand Down
78 changes: 40 additions & 38 deletions vue.config.js
Original file line number Diff line number Diff line change
@@ -1,44 +1,46 @@
const path = require("path");
const pkg = require("./package.json");
const { ProvidePlugin } = require("webpack");
const {ProvidePlugin} = require("webpack");

const p = require('path');
module.exports = {
pages: {
index: {
entry: path.join("src", "main.ts"),
title: pkg.app.name,
pages: {
index: {
entry: path.join("src", "main.ts"),
title: pkg.app.name,
},
},
},
configureWebpack: (config) => {
config.resolve.fallback = {
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
assert: require.resolve("assert"),
os: require.resolve("os-browserify/browser"),
https: require.resolve("https-browserify"),
http: require.resolve("stream-http"),
};
config.plugins.push(new ProvidePlugin({ Buffer: ["buffer", "Buffer"] }));
config.plugins.push(new ProvidePlugin({ process: ["process/browser"] }));
},
pwa: {
name: "Solana Wallet",
themeColor: "#70a3ff",
msTileColor: "#000000",
appleMobileWebAppCapable: "yes",
appleMobileWebAppStatusBarStyle: "black",
iconPaths: {
faviconSVG: "img/icons/favicon.svg",
favicon32: "img/icons/favicon-32x32.png",
favicon16: "img/icons/favicon-16x16.png",
appleTouchIcon: "img/icons/apple-touch-icon-152x152.png",
maskIcon: "img/icons/safari-pinned-tab.svg",
msTileImage: "img/icons/msapplication-icon-144x144.png",
configureWebpack: (config) => {
config.resolve.fallback = {
...config.resolve.fallback,
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
assert: require.resolve("assert"),
os: require.resolve("os-browserify/browser"),
https: require.resolve("https-browserify"),
http: require.resolve("stream-http"),
};
config.resolve.alias = {
...config.resolve.alias,
'bn.js': p.join(__dirname, 'node_modules/bn.js/lib/bn.js'), // used as peer dep multiple times, duplicate present in bundle
}
config.plugins.push(new ProvidePlugin({Buffer: ["buffer", "Buffer"]}));
config.plugins.push(new ProvidePlugin({process: ["process/browser"]}));
},
pwa: {
name: "Solana Wallet",
themeColor: "#70a3ff",
msTileColor: "#000000",
appleMobileWebAppCapable: "yes",
appleMobileWebAppStatusBarStyle: "black",
iconPaths: {
faviconSVG: "img/icons/favicon.svg",
favicon32: "img/icons/favicon-32x32.png",
favicon16: "img/icons/favicon-16x16.png",
appleTouchIcon: "img/icons/apple-touch-icon-152x152.png",
maskIcon: "img/icons/safari-pinned-tab.svg",
msTileImage: "img/icons/msapplication-icon-144x144.png",
},
},
},
pluginOptions: {
webpackBundleAnalyzer: {
openAnalyzer: false,
analyzerMode: "disabled",
},
},
productionSourceMap: false
};

0 comments on commit 7f87b5d

Please sign in to comment.