Skip to content

Commit

Permalink
vue 3 migration
Browse files Browse the repository at this point in the history
Antoine de Chevigné committed Jan 2, 2025

Verified

This commit was signed with the committer’s verified signature.
raxhvl raxhvl
1 parent 7aefb2a commit c51da30
Showing 16 changed files with 105 additions and 115 deletions.
13 changes: 11 additions & 2 deletions run/api/demo.js
Original file line number Diff line number Diff line change
@@ -66,7 +66,7 @@ router.post('/migrateExplorer', authMiddleware, async (req, res, next) => {
const plan = await db.getStripePlan(getDemoTrialSlug());
if (!plan)
return managedError(new Error('Could not find plan.'), req, res);

console.log(plan);
const subscription = await stripe.subscriptions.create({
customer: user.stripeCustomerId,
items: [{ price: plan.stripePriceId }],
@@ -138,7 +138,16 @@ router.post('/explorers', async (req, res, next) => {
}
};

const explorer = await db.createExplorerFromOptions(user.id, sanitize(options));
let explorer;
try {
explorer = await db.createExplorerFromOptions(user.id, sanitize(options));
} catch(error) {
const err = new Error(error);
if (err.message.includes('workspace with this name'))
return managedError(new Error('This explorername is already taken. Please choose a different name.'), req, res);
return managedError(new Error(error), req, res);
}

if (!explorer)
return managedError(new Error('Could not create explorer. Please retry.'), req, res);

5 changes: 1 addition & 4 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@
color="primary"
></v-progress-circular>
</v-overlay>
<v-system-bar height="40" v-html="banner" v-if="explorerStore && banner" class="bg-primary color--text text-center font-weight-bold" color="primary"></v-system-bar>
<v-system-bar height="40" v-html="banner" v-if="banner" class="d-flex justify-start font-weight-bold" color="primary"></v-system-bar>

<v-navigation-drawer v-model="drawer" :style="styles" v-if="canDisplaySides">
<div class="custom-logo-wrapper" v-if="logo">
@@ -349,9 +349,6 @@ a:not(.v-list-item) {
.v-system-bar a {
color: rgb(var(--v-theme-base)) !important;
}
.v-toolbar__content {
padding: 0;
}
.custom-logo-wrapper {
text-align: center;
}
2 changes: 1 addition & 1 deletion src/components/DemoExplorerSetup.vue
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@
v => !!v || 'RPC server is required'
]"
variant="outlined" v-model="rpcServer" label="RPC URL" placeholder="https://my.rpc.com:8545" class="mb-2" required></v-text-field>
<v-text-field variant="outlined" v-model="nativeToken" label="Native Token Symbol (optional)" placeholder="ETH" class="mb-2" required></v-text-field>
<v-text-field variant="outlined" v-model="nativeToken" label="Native Token Symbol (optional)" placeholder="ETH" class="my-2" required></v-text-field>
<v-btn size="large" width="100%" :loading="loading" color="primary" :disabled="!valid" type="submit">Generate Explorer</v-btn>
</v-form>
<v-card border flat class="mt-4" v-if="domain">
4 changes: 0 additions & 4 deletions src/components/ERC721Gallery.vue
Original file line number Diff line number Diff line change
@@ -37,7 +37,6 @@
</template>

<script>
import { mapGetters } from 'vuex';
import ERC721TokenCard from './ERC721TokenCard';
export default {
@@ -75,9 +74,6 @@ export default {
}
},
computed: {
...mapGetters([
'currentWorkspace'
]),
length() {
return this.totalSupply ? Math.ceil(this.totalSupply / this.currentOptions.itemsPerPage) : 0;
}
67 changes: 36 additions & 31 deletions src/components/ERC721Token.vue
Original file line number Diff line number Diff line change
@@ -18,10 +18,10 @@
<v-container v-else fluid>
<ERC721-Token-Transfer-Modal ref="erc721TokenTransferModal" :address="hash" :token="token" />

<v-alert text v-if="metadataReloaded" type="success">A metadata reload for this token has been queued for processing. It will be updated soon.</v-alert>
<v-alert class="mb-3" density="compact" text v-if="metadataReloaded" type="success">A metadata reload for this token has been queued for processing. It will be updated soon.</v-alert>
<v-row class="mb-3">
<v-col v-if="token.attributes.image_data && !loading" cols="12" sm="6" lg="4">
<v-card flat :color="token.attributes.background_color ? `#${token.attributes.background_color}` : ''" rounded="xl" class="mb-1">
<v-card flat :color="token.attributes.background_color ? `#${token.attributes.background_color}` : ''" rounded="lg" class="mb-1">
<div class="fill ma-1" v-html="token.attributes.image_data"></div>
</v-card>
</v-col>
@@ -30,40 +30,42 @@
</v-col>

<v-col cols="12" sm="6">
<v-card>
<template v-if="!loading">
<v-card-subtitle class="pb-0 d-flex justify-space-between align-center">
<v-card v-if="!loading">
<template v-slot:subtitle>
<div class="pb-0 d-flex justify-space-between align-center">
<Router-Link align="middle" :to="`/nft/${hash}`" class="text-h6 text-decoration-none">{{ contract.tokenName }}</Router-Link>
<span>
<v-tooltip v-if="token.attributes.external_url" location="top">
<template v-slot:activator="{ props }">
<a target="_blank" v-bind="props" class="text-decoration-none" :href="token.attributes.external_url" v-if="token.attributes.external_url">
<v-icon color="primary" class="mr-2">mdi-open-in-new</v-icon>
</a>
</template>
See on {{ hostOf(token.attributes.external_url) }}
</v-tooltip>
<v-tooltip location="top" v-if="currentWorkspaceStore.public">
<template v-slot:activator="{ props }">
<v-btn @click="reloadMetadata" v-bind="props" variant="text" icon="mdi-refresh" size="small"></v-btn>
</template>
Reload metadata
</v-tooltip>
<v-tooltip location="top">
<template v-slot:activator="{ props }">
<v-btn @click="openErc721TokenTransferModal()" v-bind="props" variant="text" icon="mdi-send" size="small"></v-btn>
</template>
Transfer Token
</v-tooltip>
<v-tooltip v-if="token.attributes.external_url" location="top">
<template v-slot:activator="{ props }">
<a target="_blank" v-bind="props" class="text-decoration-none" :href="token.attributes.external_url" v-if="token.attributes.external_url">
<v-icon color="primary" class="mr-2">mdi-open-in-new</v-icon>
</a>
</template>
See on {{ hostOf(token.attributes.external_url) }}
</v-tooltip>
<v-tooltip location="top" v-if="currentWorkspaceStore.public">
<template v-slot:activator="{ props }">
<v-btn @click="reloadMetadata" v-bind="props" variant="text" icon="mdi-refresh" size="small"></v-btn>
</template>
Reload metadata
</v-tooltip>
<v-tooltip location="top">
<template v-slot:activator="{ props }">
<v-btn @click="openErc721TokenTransferModal()" v-bind="props" variant="text" icon="mdi-send" size="small"></v-btn>
</template>
Transfer Token
</v-tooltip>
</span>
</v-card-subtitle>
<v-card-title class="text-h4 font-weight-bold">{{ token.attributes.name }}</v-card-title>
<v-card-subtitle>Owned by <Hash-Link :type="'address'" :hash="token.owner" /></v-card-subtitle>
<v-card-text v-if="token.attributes.description">{{ token.attributes.description }}</v-card-text>
</div>
</template>
<v-card-subtitle v-else>
<v-card-title class="text-h4 font-weight-bold">{{ token.attributes.name }}</v-card-title>
<v-card-subtitle>Owned by <Hash-Link :type="'address'" :hash="token.owner" /></v-card-subtitle>
<v-card-text v-if="token.attributes.description">{{ token.attributes.description }}</v-card-text>
</v-card>
<v-card v-else>
<template v-slot:subtitle>
<v-skeleton-loader type="paragraph"></v-skeleton-loader>
</v-card-subtitle>
</template>
</v-card>
</v-col>

@@ -264,4 +266,7 @@ export default {
min-width: 100%;
min-height: 100%
}
.v-card-subtitle {
opacity: var(--v-card-subtitle-opacity, var(--v-high-emphasis-opacity));
}
</style>
6 changes: 0 additions & 6 deletions src/components/ERC721TokenCard.vue
Original file line number Diff line number Diff line change
@@ -27,7 +27,6 @@
</template>

<script>
import { mapGetters } from 'vuex';
import HashLink from './HashLink';
export default {
@@ -64,11 +63,6 @@ export default {
this.backgroundColor = data.metadata.background_color;
}
})
},
computed: {
...mapGetters([
'currentWorkspace'
]),
}
}
</script>
17 changes: 7 additions & 10 deletions src/components/ERC721TokenTransferModal.vue
Original file line number Diff line number Diff line change
@@ -35,15 +35,15 @@

<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" variant="text" @click.stop="close()">Close</v-btn>
<v-btn id="transferToken" color="primary" :disabled="!validForm || isPublicExplorer && !metamaskData.isReady || invalidOwner" :loading="loading" variant="text" @click.stop="transferToken()">Transfer Token</v-btn>
<v-btn @click.stop="close()">Close</v-btn>
<v-btn id="transferToken" variant="flat" :disabled="!validForm || isPublicExplorer && !metamaskData.isReady || invalidOwner" :loading="loading" @click.stop="transferToken()">Transfer Token</v-btn>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { useCurrentWorkspaceStore } from '../stores/currentWorkspace';
import ERC721_ABI from '../abis/erc721.json';
import { sendTransaction } from '../lib/metamask';
import HashLink from './HashLink';
@@ -74,6 +74,10 @@ export default {
invalidOwner: false,
didTransfer: false
}),
setup() {
const { rpcServer, public: isPublicExplorer } = useCurrentWorkspaceStore();
return { rpcServer, isPublicExplorer };
},
methods: {
transferWithMetamask() {
sendTransaction({
@@ -164,13 +168,6 @@ export default {
this.resolve = null;
this.reject = null;
}
},
computed: {
...mapGetters([
'rpcServer',
'currentWorkspace',
'isPublicExplorer'
])
}
}
</script>
2 changes: 1 addition & 1 deletion src/components/ExplorerBranding.vue
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
<v-card border flat :disabled="disabled">
<v-form @submit.prevent="update()" v-model="valid">
<v-card-text>
<v-alert v-if="disabled" text type="warning">Upgrade your plan to activate branding customization.</v-alert>
<v-alert v-if="disabled" density="compact" text type="warning">Upgrade your plan to activate branding customization.</v-alert>
<v-alert v-if="successMessage" density="compact" text type="success">{{ successMessage }}</v-alert>
<v-alert v-if="errorMessage" density="compact" text type="error">{{ errorMessage }}</v-alert>
<v-row class="mt-3">
2 changes: 1 addition & 1 deletion src/components/ExplorerGeneral.vue
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@
</v-card>
</template>
<template v-else-if="explorer && workspaces.length > 0">
<v-alert text type="warning" v-if="explorer.stripeSubscription && explorer.stripeSubscription.isTrialing">
<v-alert class="mb-2" text type="warning" v-if="explorer.stripeSubscription && explorer.stripeSubscription.isTrialing">
This explorer is on a free trial plan. To keep it running once it's over, add a payment method.
</v-alert>
<v-alert text type="error" v-if="!explorer.stripeSubscription">This explorer is not active. To activate it, start a subscription.</v-alert>
4 changes: 2 additions & 2 deletions src/components/ExplorerPlanSelector.vue
Original file line number Diff line number Diff line change
@@ -76,7 +76,7 @@ export default {
this.cancelPlan();
},
createPlan(slug) {
if (this.user.cryptoPaymentEnabled) {
if (this.userStore.cryptoPaymentEnabled) {
this.$server.startCryptoSubscription(slug, this.explorerId)
.then(() => {
this.$emit('planCreated', slug);
@@ -87,7 +87,7 @@ export default {
})
.finally(() => this.selectedPlanSlug = null);
}
else if (this.user.canTrial) {
else if (this.userStore.canTrial) {
this.$server.startTrial(this.explorerId, slug)
.then(() => window.location.assign(`//app.${this.envStore.mainDomain}/explorers/${this.explorerId}`))
.catch(error => {
6 changes: 0 additions & 6 deletions src/components/ImportArtifactModal.vue
Original file line number Diff line number Diff line change
@@ -29,7 +29,6 @@
</template>
<script>
const ethers = require('ethers');
import { mapGetters } from 'vuex';
export default {
name: 'ImportArtifactModal',
@@ -123,11 +122,6 @@ export default {
this.successMessage = null;
this.errorMessage = null;
}
},
computed: {
...mapGetters([
'currentWorkspace'
])
}
}
</script>
32 changes: 17 additions & 15 deletions src/components/MigrateExplorerModal.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<v-dialog v-model="dialog" :max-width="user.canTrial || justMigrated ? 600 : 1800" :persistent="true">
<v-card border flat v-if="explorerId" :class="{'pa-4': !user.canTrial && !justMigrated }">
<v-card-title v-if="!user.canTrial && !justMigrated">Setup up your explorer</v-card-title>
<v-dialog v-model="dialog" :max-width="canTrial || justMigrated ? 600 : 1800" :persistent="true">
<v-card v-if="explorerId" :class="{'pa-4': !canTrial && !justMigrated }">
<v-card-title v-if="!canTrial && !justMigrated">Setup up your explorer</v-card-title>
<v-card-title v-else>
<template v-if="!finalized">
<v-progress-circular
@@ -16,7 +16,7 @@
<v-icon class="text-success mr-2">mdi-check-circle-outline</v-icon>Your explorer is ready!
</span>
</v-card-title>
<template v-if="user.canTrial || justMigrated">
<template v-if="canTrial || justMigrated">
<v-card-text>
<template v-if="finalized">You can now:</template>
<template v-else>Your explorer is almost ready. You'll soon be able to:</template>
@@ -34,7 +34,7 @@
<template v-else>
<v-card-text>
You've already used your free trial, please choose a plan below to finalize your explorer.
<div v-if="!user.cryptoPaymentEnabled">To setup crypto payment (Explorer 150 or above), reach out to contact@tryethernal.com.</div>
<div v-if="!cryptoPaymentEnabled">To setup crypto payment (Team plan or above), reach out to contact@tryethernal.com.</div>
</v-card-text>
<Explorer-Plan-Selector
:explorerId="explorerId"
@@ -46,7 +46,10 @@
</v-dialog>
</template>
<script>
import { mapGetters } from 'vuex';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/stores/user';
import { useEnvStore } from '@/stores/env';
import ExplorerPlanSelector from './ExplorerPlanSelector.vue';
export default {
@@ -65,6 +68,12 @@ export default {
finalized: null,
justMigrated: true
}),
setup() {
const { id: userId, canTrial, cryptoPaymentEnabled } = storeToRefs(useUserStore());
const { mainDomain, isBillingEnabled } = storeToRefs(useEnvStore());
return { userId, canTrial, cryptoPaymentEnabled, mainDomain, isBillingEnabled };
},
methods: {
open(options) {
this.dialog = true;
@@ -74,7 +83,7 @@ export default {
this.explorerToken = options.explorerToken;
this.justMigrated = !!options.justMigrated;
if (this.user.canTrial)
if (this.canTrial)
this.$server.migrateDemoExplorer(this.explorerToken)
.then(this.waitForMigration)
.catch(console.log);
@@ -89,7 +98,7 @@ export default {
waitForMigration() {
this.$server.getExplorer(this.explorerId)
.then(({ data }) => {
if (data.isDemo || data.userId != this.user.id)
if (data.isDemo || data.userId != this.userId)
return setTimeout(this.waitForMigration, 3000);
else
this.finalized = true;
@@ -114,13 +123,6 @@ export default {
this.reject = null;
this.dialog = false;
}
},
computed: {
...mapGetters([
'user',
'isBillingEnabled',
'mainDomain'
])
}
}
</script>
5 changes: 0 additions & 5 deletions src/components/TokensBalanceDiff.vue
Original file line number Diff line number Diff line change
@@ -35,7 +35,6 @@
</template>
<script>
const ethers = require('ethers');
import { mapGetters } from 'vuex';
import HashLink from './HashLink';
import FromWei from '../filters/FromWei';
@@ -98,10 +97,6 @@ export default {
}
},
computed: {
...mapGetters([
'currentWorkspace',
'isPublicExplorer'
]),
previousBlockNumber: function() {
return Math.max(0, parseInt(this.blockNumber) - 1);
}
Loading

0 comments on commit c51da30

Please sign in to comment.