diff --git a/frontend/package.json b/frontend/package.json index 4f24e96..512c198 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -23,10 +23,8 @@ "dependencies": { "axios": "^0.26.0", "cids": "^1.1.9", - "core-js": "~3.12.1", "ipfs-core": "^0.12.0", "near-api-js": "~0.43.1", - "sass-loader": "^8.0.2", "vue": "~2.6.11", "vue-notification": "^1.3.20", "vue-router": "^3.5.3", @@ -43,6 +41,7 @@ "near-cli": "~2.1.1", "nodemon": "~2.0.4", "sass": "^1.49.9", + "sass-loader": "^8.0.2", "shelljs": "~0.8.4", "vue-template-compiler": "~2.6.11" }, diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 127d58e..ffc86b3 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -2,7 +2,10 @@
- + +
+ +
@@ -57,35 +60,6 @@ export default { } - - - \ No newline at end of file diff --git a/frontend/src/components/Spinner/SpinnerDots.vue b/frontend/src/components/Spinner/SpinnerDots.vue index 820847f..c5c6720 100644 --- a/frontend/src/components/Spinner/SpinnerDots.vue +++ b/frontend/src/components/Spinner/SpinnerDots.vue @@ -54,11 +54,11 @@ $animationDuration: 1s; } .spinner-dots .bounce1 { - animation-delay: -($animationDuration/3); + animation-delay: -(calc($animationDuration / 3)); } .spinner-dots .bounce2 { - animation-delay: -($animationDuration/6); + animation-delay: -(calc($animationDuration / 6)); } @-webkit-keyframes sk-bouncedelay { diff --git a/frontend/src/components/Spinner/SpinnerFadingCircle.vue b/frontend/src/components/Spinner/SpinnerFadingCircle.vue index a5928fa..ee3be75 100644 --- a/frontend/src/components/Spinner/SpinnerFadingCircle.vue +++ b/frontend/src/components/Spinner/SpinnerFadingCircle.vue @@ -52,16 +52,16 @@ $spinkit-size: 36px; height: $width; overflow: hidden; background-color: currentColor; - border-radius: ($width / 2); + border-radius: calc($width / 2); animation: sk-circleFadeDelay $animation-duration infinite ease-in-out both; } @for $i from 1 through $circle-count { .sk-circle#{$i} { - transform: rotate(360deg / $circle-count * ($i - 1)); + transform: rotate(360deg / calc($circle-count * ($i - 1))); &::before { - $a: -$animation-duration + ($i - 1) * $animation-duration/$circle-count; + $a: -$animation-duration + calc(($i - 1) * $animation-duration/$circle-count); animation-delay: $a; } } diff --git a/frontend/src/global.css b/frontend/src/global.css deleted file mode 100644 index 4c5b777..0000000 --- a/frontend/src/global.css +++ /dev/null @@ -1,223 +0,0 @@ -* { - box-sizing: border-box; -} - -html { - --bg: #efefef; - --fg: #1e1e1e; - --gray: #555; - --light-gray: #ccc; - --shadow: #e6e6e6; - --success: rgb(90, 206, 132); - --primary: #FF585D; - --secondary: #0072CE; - - background-color: var(--bg); - color: var(--fg); - font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif; - font-size: calc(0.9em + 0.5vw); - line-height: 1.3; -} - -.fade-enter-active, .fade-leave-active { - transition: opacity .15s; -} -.fade-enter, .fade-leave-to /* .fade-leave-active до версии 2.1.8 */ { - opacity: 0; -} - -.loading-container { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; -} - -body { - margin: 0; - padding: 0; -} - -.page { - display: flex; - align-items: center; - justify-content: center; - min-height: 100vh; -} - -main { - margin: 0 auto; - max-width: 1200px; - margin-top: 60px; -} - -h1 { - background-image: url(assets/logo-black.svg); - background-position: center 1em; - background-repeat: no-repeat; - background-size: auto 1.5em; - margin-top: 0; - padding: 3.5em 0 0.5em; - text-align: center; -} - -.h1--no-logo { - background-image: unset; - padding: 10px 0; - white-space: nowrap; - text-align: left; - margin-top: 30px; -} - -a, -.link { - color: var(--primary); - text-decoration: none; -} -a:hover, -a:focus, -.link:hover, -.link:focus { - text-decoration: underline; -} -a:active, -.link:active { - color: var(--secondary); -} - -button, input { - font: inherit; - outline: none; -} - -button { - background-color: var(--secondary); - border-radius: 5px; - border: none; - color: #efefef; - cursor: pointer; - padding: 0.3em 0.75em; - transition: transform 30ms; -} -button.error { - background-color: var(--primary); - color: #fff; -} - -button:hover, button:focus { - box-shadow: 0 0 10em rgba(255, 255, 255, 0.2) inset; -} -button:active { - box-shadow: 0 0 10em rgba(0, 0, 0, 0.1) inset; -} -button.link { - background: none; - border: none; - box-shadow: none; - display: inline; -} -[disabled] button, button[disabled] { - box-shadow: none; - background-color: var(--light-gray); - color: gray; - cursor: not-allowed; - transform: none; -} -[disabled] button { - text-indent: -900em; - width: 2em; - position: relative; -} -[disabled] button:after { - content: " "; - display: block; - width: 0.8em; - height: 0.8em; - border-radius: 50%; - border: 2px solid #fff; - border-color: var(--fg) transparent var(--fg) transparent; - animation: loader 1.2s linear infinite; - position: absolute; - top: 0.45em; - right: 0.5em; -} -@keyframes loader { - 0% { transform: rotate(0deg) } - 100% { transform: rotate(360deg) } -} - -fieldset { - border: none; - padding: 2em 0; -} - -input { - background-color: var(--shadow); - border: none; - border-radius: 5px 0 0 5px; - caret-color: var(--primary); - color: inherit; - padding: 0.25em 1em; -} -input::selection { - background-color: var(--secondary); - color: #efefef; -} -input:focus { - box-shadow: 0 0 10em rgba(0, 0, 0, 0.02) inset; -} - -code { - color: var(--gray); -} - -li { - padding-bottom: 1em; -} - -aside { - animation: notify ease-in-out 10s; - background-color: var(--shadow); - border-radius: 5px; - bottom: 0; - font-size: 0.8em; - margin: 1em; - padding: 1em; - position: fixed; - transform: translateY(10em); - right: 0; -} -aside footer { - display: flex; - font-size: 0.9em; - justify-content: space-between; - margin-top: 0.5em; -} -aside footer *:first-child { - color: var(--success); -} -aside footer *:last-child { - color: var(--gray); -} -@keyframes notify { - 0% { transform: translateY(10em) } - 5% { transform: translateY(0) } - 95% { transform: translateY(0) } - 100% { transform: translateY(10em) } -} - -@media (prefers-color-scheme: dark) { - html { - --bg: #1e1e1e; - --fg: #efefef; - --gray: #aaa; - --shadow: #2a2a2a; - --light-gray: #444; - } - h1 { - background-image: url(assets/logo-white.svg); - } - input:focus { - box-shadow: 0 0 10em rgba(255, 255, 255, 0.02) inset; - } -} diff --git a/frontend/src/main.js b/frontend/src/main.js index b65a23a..35798ed 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -12,8 +12,8 @@ Vue.use(Notifications) window.nearInitPromise = initContract() .then(() => { new Vue({ - router, store, + router, render: h => h(App), }).$mount("#app") diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js index 2f771b8..3af2bad 100644 --- a/frontend/src/router/index.js +++ b/frontend/src/router/index.js @@ -1,10 +1,11 @@ import Vue from 'vue' import Router from 'vue-router' -import Home from '../views/Home' +import Login from '../views/Login' import ChooseNFT from "../views/ChooseNFT" import SendNFT from "../views/SendNFT" const { providers } = require("near-api-js") -import store, { Status } from "../store" +import store from "../store" +import { StatusType } from "../utilities" const provider = new providers.JsonRpcProvider( "https://rpc.testnet.near.org" @@ -17,8 +18,14 @@ let routes = [ { path: '/', name: 'Home', - component: Home, - meta: { title: 'Do[NFT]' } + meta: { title: 'Do[NFT]' }, + redirect: { name: 'ChooseNFT' }, + }, + { + path: '/login', + name: 'Login', + component: Login, + meta: { title: 'Do[NFT]' }, }, { path: '/choose_nft', @@ -52,23 +59,22 @@ async function passResult(txHash, accountId, type) { if (result.status && 'SuccessValue' in result.status && type === 'send_nft') { console.log("Result: 2 ", result) - // store.dispatch.setStatus(Status.Approved) - store.dispatch('setStatus', Status.Approved) + store.dispatch('setStatus', StatusType.Approved) } if (result.status && 'SuccessValue' in result.status && type === 'choose_nft') { console.log("Result: 2 ", result) - // store.dispatch.setStatus(Status.Approved) - store.dispatch('setStatus', Status.Minted) + store.dispatch('setStatus', StatusType.Minted) } } +// checking for auth require, depend on it, going to next route router.beforeEach((to, _from, next) => { const requiresAuth = to.matched.some((record) => record.meta.requiresAuth) const user = window.walletConnection.isSignedIn() if (requiresAuth && !user) { - next('/') + next('/login') Vue.notify({ group: 'foo', title: 'Important message', @@ -82,6 +88,7 @@ router.beforeEach((to, _from, next) => { const account_id = window.accountId const url = new URL(document.location) const tx_hash = url.searchParams.get('transactionHashes') + console.log("Result: 2 ", this) if (tx_hash && to.name === 'SendNFT') { router.push({ name: 'SendNFT' }) diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js index cb56ac4..4365599 100644 --- a/frontend/src/store/index.js +++ b/frontend/src/store/index.js @@ -11,26 +11,14 @@ import { } from "../near_utilities" +import {StatusType} from "../utilities" import {getEffects, modifyPicture} from "../api" -// import {BigNumber} from "ethers"; + +// too heavy, this one adding 2mb to builded bundle-js (total 2.5mb) import * as IPFS from "ipfs-core" -// import {getImageURLFromObject} from "../utilities"; Vue.use(Vuex) -export const Status = Object.freeze({ - Error: -3, - Cancelled: -2, - ChoosingParameters: -1, - Applying: 0, - Approving: 1, - DeployingToIPFS: 2, - DeployedToIPFS: 3, - Minting: 4, - Minted: 5, - Approved: 6, -}) - const store = new Vuex.Store({ state: { ipfs: null, @@ -47,7 +35,7 @@ const store = new Vuex.Store({ globalLoading: false, result: null, NFT: null, - status: Status.ChoosingParameters + status: StatusType.ChoosingParameters }, mutations: { setIpfs (state, ipfsInstance) { @@ -122,11 +110,11 @@ const store = new Vuex.Store({ commit('setEffects', await getEffects()) }, async setResult ({commit, dispatch, getters}) { - dispatch('setStatus', Status.Applying) + dispatch('setStatus', StatusType.Applying) commit('setResult', await modifyPicture(getters.getNFTforModification.media, getters.getEffectChoice)) }, async setDeployedPictureMeta ({commit, dispatch, getters}) { - dispatch('setStatus', Status.DeployingToIPFS) + dispatch('setStatus', StatusType.DeployingToIPFS) commit('setDeployedPictureMeta', await deployNFTtoIPFS(getters.getIpfs, getters.getResult, getters.getNFTforModification)) }, async getListOfNFT ({commit, dispatch, getters}) { @@ -136,20 +124,20 @@ const store = new Vuex.Store({ commit('passAllNFTs', result) }, createNewRandomNFT ({getters, dispatch}, { token_id, metadata }) { - dispatch('setStatus', Status.Minting) + dispatch('setStatus', StatusType.Minting) createRandomNft(token_id, metadata, getters.getAccountId, getters.getContract) }, createNewUsualNFT ({getters, dispatch}, { token_id, metadata }) { console.log(token_id, metadata, 'result createNewUsualNFT') - dispatch('setStatus', Status.Minting) + dispatch('setStatus', StatusType.Minting) createUsualNFT(token_id, metadata, getters.getAccountId, getters.getContract) }, setNFTApproveId ({getters, dispatch}, token_id) { - dispatch('setStatus', Status.Approving) + dispatch('setStatus', StatusType.Approving) approveNFT(getters.getAccountId, token_id, getters.getContract) }, sendNFTByToken ({getters, dispatch}, { receiver, token_id }) { - dispatch('setStatus', Status.Approving) + dispatch('setStatus', StatusType.Approving) sendNFT(receiver, token_id, getters.getContract) }, }, diff --git a/frontend/src/styles/_fonts.scss b/frontend/src/styles/_fonts.scss new file mode 100644 index 0000000..8fab4b8 --- /dev/null +++ b/frontend/src/styles/_fonts.scss @@ -0,0 +1,39 @@ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: url('./styles/fonts/Roboto-Regular.eot') format("embedded-opentype"), + url('./styles/fonts/Roboto-Regular.ttf') format("truetype"), + url('./styles/fonts/Roboto-Regular.woff') format("woff"), + url('./styles/fonts/Roboto-Regular.woff2') format("woff2"), +} + +@font-face { + font-family: 'Roboto'; + font-style: medium; + font-weight: 500; + src: url('./styles/fonts/Roboto-Medium.eot') format("embedded-opentype"), + url('./styles/fonts/Roboto-Medium.ttf') format("truetype"), + url('./styles/fonts/Roboto-Medium.woff') format("woff"), + url('./styles/fonts/Roboto-Medium.woff2') format("woff2"), +} + +@font-face { + font-family: 'Roboto'; + font-style: bold; + font-weight: 700; + src: url('./styles/fonts/Roboto-Bold.eot') format("embedded-opentype"), + url('./styles/fonts/Roboto-Bold.ttf') format("truetype"), + url('./styles/fonts/Roboto-Bold.woff') format("woff"), + url('./styles/fonts/Roboto-Bold.woff2') format("woff2"), +} + + +@font-face { + font-family: 'Roboto mono'; + font-style: normal; + font-weight: 400; + src: url('./styles/fonts/RobotoMono-Regular.eot') format("embedded-opentype"), + url('./styles/fonts/RobotoMono-Regular.woff') format("woff"), + url('./styles/fonts/RobotoMono-Regular.woff2') format("woff2"), +} diff --git a/frontend/src/styles/_general_set.scss b/frontend/src/styles/_general_set.scss new file mode 100644 index 0000000..472cb69 --- /dev/null +++ b/frontend/src/styles/_general_set.scss @@ -0,0 +1,207 @@ +@import './fonts'; +* { + box-sizing: border-box; + font-family: 'Roboto'; +} + +html { + --bg: #efefef; + --fg: #1e1e1e; + --gray: #555; + --light-gray: #ccc; + --shadow: #e6e6e6; + --success: rgb(90, 206, 132); + --primary: #FF585D; + --secondary: #0072CE; + + background-color: var(--bg); + color: var(--fg); + font-size: calc(0.9em + 0.5vw); + line-height: 1.3; +} + +.fade-enter-active, .fade-leave-active { + transition: opacity .15s; +} +.fade-enter, .fade-leave-to { + opacity: 0; +} + +.loading-container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +body { + margin: 0; + padding: 0; + overflow-x: hidden; +} + +#root { + min-height: 100vh; + display: flex; + flex-direction: column; + overflow-x: hidden; +} + +.page { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; +} + +main { + margin: 0 auto; + margin-top: 60px; +} + +.container { + max-width: 1400px; + margin: 0 auto; + padding: 0 20px; +} + +h1 { + padding: 10px 0; + font-family: 'Roboto mono'; +} + +h2, h3, h4, h5, h6 { + font-family: 'Roboto mono'; +} + +a, +.link { + color: var(--primary); + text-decoration: none; +} +a:hover, +a:focus, +.link:hover, +.link:focus { + text-decoration: underline; +} +a:active, +.link:active { + color: var(--secondary); +} + +button, input { + font: inherit; + outline: none; +} + +button { + background-color: var(--secondary); + border-radius: 5px; + border: none; + color: #efefef; + cursor: pointer; + padding: 0.3em 0.75em; + transition: transform 30ms; +} +button.error { + background-color: var(--primary); + color: #fff; +} + +button:hover, button:focus { + box-shadow: 0 0 10em rgba(255, 255, 255, 0.2) inset; +} +button:active { + box-shadow: 0 0 10em rgba(0, 0, 0, 0.1) inset; +} +button.link { + background: none; + border: none; + box-shadow: none; + display: inline; +} +[disabled] button, button[disabled] { + box-shadow: none; + background-color: var(--light-gray); + color: gray; + cursor: not-allowed; + transform: none; +} +[disabled] button { + text-indent: -900em; + width: 2em; + position: relative; +} +[disabled] button:after { + content: " "; + display: block; + width: 0.8em; + height: 0.8em; + border-radius: 50%; + border: 2px solid #fff; + border-color: var(--fg) transparent var(--fg) transparent; + animation: loader 1.2s linear infinite; + position: absolute; + top: 0.45em; + right: 0.5em; +} +@keyframes loader { + 0% { transform: rotate(0deg) } + 100% { transform: rotate(360deg) } +} + +fieldset { + border: none; + padding: 2em 0; +} + +input { + background-color: var(--shadow); + border: none; + border-radius: 5px 0 0 5px; + caret-color: var(--primary); + color: inherit; + padding: 0.25em 1em; +} +input::selection { + background-color: var(--secondary); + color: #efefef; +} +input:focus { + box-shadow: 0 0 10em rgba(0, 0, 0, 0.02) inset; +} + +li { + padding-bottom: 1em; +} + +.vue-notification-group { + width: 370px!important; + top: 20px!important; +} + +.vue-notification-group .vue-notification { + padding: 10px; + margin: 0 5px 5px; + font-size: 18px; + color: #ffffff; + background: #44A4FC; + border-left: 5px solid #187FE7; + &.warn { + background: #ffb648; + border-left-color: #f48a06; + } + &.error { + background: #E54D42; + border-left-color: #B82E24; + } + &.success { + background: #68CD86; + border-left-color: #42A85F; + } +} + +.home-text__inner__subtext { + font-size: 24px; +} \ No newline at end of file diff --git a/frontend/src/styles/app.scss b/frontend/src/styles/app.scss new file mode 100644 index 0000000..cada288 --- /dev/null +++ b/frontend/src/styles/app.scss @@ -0,0 +1 @@ +@import 'general_set'; diff --git a/frontend/src/styles/fonts/Roboto-Bold.eot b/frontend/src/styles/fonts/Roboto-Bold.eot new file mode 100644 index 0000000..a761c2e Binary files /dev/null and b/frontend/src/styles/fonts/Roboto-Bold.eot differ diff --git a/frontend/src/styles/fonts/Roboto-Bold.ttf b/frontend/src/styles/fonts/Roboto-Bold.ttf new file mode 100644 index 0000000..764e281 Binary files /dev/null and b/frontend/src/styles/fonts/Roboto-Bold.ttf differ diff --git a/frontend/src/styles/fonts/Roboto-Bold.woff b/frontend/src/styles/fonts/Roboto-Bold.woff new file mode 100644 index 0000000..aaeb6d1 Binary files /dev/null and b/frontend/src/styles/fonts/Roboto-Bold.woff differ diff --git a/frontend/src/styles/fonts/Roboto-Bold.woff2 b/frontend/src/styles/fonts/Roboto-Bold.woff2 new file mode 100644 index 0000000..87e4f28 Binary files /dev/null and b/frontend/src/styles/fonts/Roboto-Bold.woff2 differ diff --git a/frontend/src/styles/fonts/Roboto-Medium.eot b/frontend/src/styles/fonts/Roboto-Medium.eot new file mode 100644 index 0000000..2294c50 Binary files /dev/null and b/frontend/src/styles/fonts/Roboto-Medium.eot differ diff --git a/frontend/src/styles/fonts/Roboto-Medium.ttf b/frontend/src/styles/fonts/Roboto-Medium.ttf new file mode 100644 index 0000000..16709ea Binary files /dev/null and b/frontend/src/styles/fonts/Roboto-Medium.ttf differ diff --git a/frontend/src/styles/fonts/Roboto-Medium.woff b/frontend/src/styles/fonts/Roboto-Medium.woff new file mode 100644 index 0000000..1dd01c1 Binary files /dev/null and b/frontend/src/styles/fonts/Roboto-Medium.woff differ diff --git a/frontend/src/styles/fonts/Roboto-Medium.woff2 b/frontend/src/styles/fonts/Roboto-Medium.woff2 new file mode 100644 index 0000000..110bbe9 Binary files /dev/null and b/frontend/src/styles/fonts/Roboto-Medium.woff2 differ diff --git a/frontend/src/styles/fonts/Roboto-Regular.eot b/frontend/src/styles/fonts/Roboto-Regular.eot new file mode 100644 index 0000000..b06f366 Binary files /dev/null and b/frontend/src/styles/fonts/Roboto-Regular.eot differ diff --git a/frontend/src/styles/fonts/Roboto-Regular.ttf b/frontend/src/styles/fonts/Roboto-Regular.ttf new file mode 100644 index 0000000..0d752dc Binary files /dev/null and b/frontend/src/styles/fonts/Roboto-Regular.ttf differ diff --git a/frontend/src/styles/fonts/Roboto-Regular.woff b/frontend/src/styles/fonts/Roboto-Regular.woff new file mode 100644 index 0000000..17158a2 Binary files /dev/null and b/frontend/src/styles/fonts/Roboto-Regular.woff differ diff --git a/frontend/src/styles/fonts/Roboto-Regular.woff2 b/frontend/src/styles/fonts/Roboto-Regular.woff2 new file mode 100644 index 0000000..c817ca4 Binary files /dev/null and b/frontend/src/styles/fonts/Roboto-Regular.woff2 differ diff --git a/frontend/src/styles/fonts/RobotoMono-Regular.eot b/frontend/src/styles/fonts/RobotoMono-Regular.eot new file mode 100644 index 0000000..2ddd583 Binary files /dev/null and b/frontend/src/styles/fonts/RobotoMono-Regular.eot differ diff --git a/frontend/src/styles/fonts/RobotoMono-Regular.svg b/frontend/src/styles/fonts/RobotoMono-Regular.svg new file mode 100644 index 0000000..132f423 --- /dev/null +++ b/frontend/src/styles/fonts/RobotoMono-Regular.svg @@ -0,0 +1,2949 @@ + + + + +Created by FontForge 20190801 at Wed May 6 12:19:23 2020 + By Jimmy Wärting +Copyright 2015 The Roboto Mono Project Authors (https://github.com/googlefonts/robotomono) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/styles/fonts/RobotoMono-Regular.ttf b/frontend/src/styles/fonts/RobotoMono-Regular.ttf new file mode 100644 index 0000000..b6ac2f7 Binary files /dev/null and b/frontend/src/styles/fonts/RobotoMono-Regular.ttf differ diff --git a/frontend/src/styles/fonts/RobotoMono-Regular.woff b/frontend/src/styles/fonts/RobotoMono-Regular.woff new file mode 100644 index 0000000..3d3ed1b Binary files /dev/null and b/frontend/src/styles/fonts/RobotoMono-Regular.woff differ diff --git a/frontend/src/styles/fonts/RobotoMono-Regular.woff2 b/frontend/src/styles/fonts/RobotoMono-Regular.woff2 new file mode 100644 index 0000000..ad9486f Binary files /dev/null and b/frontend/src/styles/fonts/RobotoMono-Regular.woff2 differ diff --git a/frontend/src/utilities/index.js b/frontend/src/utilities/index.js index 37ce56f..352f141 100644 --- a/frontend/src/utilities/index.js +++ b/frontend/src/utilities/index.js @@ -7,4 +7,16 @@ export function placeholder() { } export function getImageURLFromObject(obj) { return obj?.animation_url || obj?.image -} \ No newline at end of file +} +export const StatusType = Object.freeze({ + Error: -3, + Cancelled: -2, + ChoosingParameters: -1, + Applying: 0, + Approving: 1, + DeployingToIPFS: 2, + DeployedToIPFS: 3, + Minting: 4, + Minted: 5, + Approved: 6, +}) diff --git a/frontend/src/views/ChooseNFT.vue b/frontend/src/views/ChooseNFT.vue index 7184c16..62762dd 100644 --- a/frontend/src/views/ChooseNFT.vue +++ b/frontend/src/views/ChooseNFT.vue @@ -70,16 +70,12 @@ import EffectCards from "../components/EffectCards/EffectCards.vue" import Spinner from "../components/Spinner" import { mapGetters, mapActions } from "vuex" -import { Status } from "../store" +import { StatusType } from "../utilities" export default { name: "ChooseNFT", - async mounted() { - await this.$store.dispatch("setEffects") - }, - components: { EffectCards, Spinner @@ -87,12 +83,11 @@ export default { data() { return { - Status, nftObj: { metadata: { title: 'NFT token 2 title', description: 'NFT token 2 description', - media: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/VitalikButerinProfile.jpg/1200px-VitalikButerinProfile.jpg', + media: '', }, receiver_id: '', token_id: [], @@ -121,15 +116,15 @@ export default { }, statusText() { switch (this.getStatus) { - case this.Status.Approving: + case StatusType.Approving: return "Redirecting to Approve NFT" - case this.Status.Applying: + case StatusType.Applying: return "Applying the chosen effect..." - case this.Status.DeployingToIPFS: + case StatusType.DeployingToIPFS: return "Uploading the result to IPFS..." - case this.Status.Minting: + case StatusType.Minting: return "NFT Minting..." - case this.Status.Minted: + case StatusType.Minted: return "NFT successfully Minted!" default: return "" @@ -151,6 +146,10 @@ export default { }, }, + mounted() { + this.setEffects() + }, + methods: { ...mapActions([ 'setResult', @@ -159,6 +158,7 @@ export default { 'setEffectChoice', 'createNewRandomNFT', 'createNewUsualNFT', + 'setEffects', ]), // choosing NFT for applying effects chooseNFT(item) { diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue deleted file mode 100644 index bdfb942..0000000 --- a/frontend/src/views/Home.vue +++ /dev/null @@ -1,55 +0,0 @@ - - - - - \ No newline at end of file diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue new file mode 100644 index 0000000..7ac7cc1 --- /dev/null +++ b/frontend/src/views/Login.vue @@ -0,0 +1,54 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/views/SendNFT.vue b/frontend/src/views/SendNFT.vue index 57f8821..88b6b3d 100644 --- a/frontend/src/views/SendNFT.vue +++ b/frontend/src/views/SendNFT.vue @@ -52,7 +52,7 @@