Cotnesford park
@@ -34,6 +34,8 @@ import BuyDialog from "@/components/Dialogs/buyDialog.vue"
import {priceCalculated} from "@/configs/priceCalculate.js"
import { useDetailStore } from "@/store/detail"
import { useImmutableStore } from "@/store/immutable"
+import LazyLoadImg from "@/components/lazyloadimg"
+import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
import {
useMarketplaceStore
} from "@/store/marketplace"
diff --git a/src/components/lazyloadimg/index.js b/src/components/lazyloadimg/index.js
new file mode 100644
index 0000000..4773ec9
--- /dev/null
+++ b/src/components/lazyloadimg/index.js
@@ -0,0 +1,101 @@
+import { reactive, h, computed, ref, onMounted, onBeforeUnmount } from "vue";
+
+export default {
+ props: {
+ src: {
+ type: String,
+ required: true
+ },
+ srcPlaceholder: {
+ type: String,
+ default:
+ "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+ },
+ srcset: {
+ type: String
+ },
+ intersectionOptions: {
+ type: Object,
+ default: () => ({})
+ },
+ usePicture: {
+ type: Boolean,
+ default: false
+ }
+ },
+ inheritAttrs: false,
+ setup(props, { attrs, slots, emit }) {
+ const root = ref(null);
+ const state = reactive({
+ observer: null,
+ intersected: false,
+ loaded: false
+ });
+
+ // Computed
+ const srcImage = computed(() =>
+ state.intersected && props.src ? props.src : props.srcPlaceholder
+ );
+ const srcsetImage = computed(() =>
+ state.intersected && props.srcset ? props.srcset : false
+ );
+
+ // Methods
+ const load = () => {
+ if (
+ root.value &&
+ root.value.getAttribute("src") !== props.srcPlaceholder
+ ) {
+ state.loaded = true;
+ emit("load", root.value);
+ }
+ };
+ const error = () => emit("error", root.value);
+
+ // Hooks
+ onMounted(() => {
+ if ("IntersectionObserver" in window) {
+ state.observer = new IntersectionObserver((entries) => {
+ const image = entries[0];
+ if (image.isIntersecting) {
+ state.intersected = true;
+ state.observer.disconnect();
+ emit("intersect");
+ }
+ }, props.intersectionOptions);
+
+ state.observer.observe(root.value);
+ }
+ });
+
+ onBeforeUnmount(() => {
+ if ("IntersectionObserver" in window && state.observer) {
+ state.observer.disconnect();
+ }
+ });
+
+ return () => {
+ const img = h("img", {
+ ref: root,
+ src: srcImage.value,
+ srcset: srcsetImage.value || null, // set to null explicitly if falsy
+ ...attrs,
+ class: [
+ attrs.class,
+ "v-lazy-image",
+ { "v-lazy-image-loaded": state.loaded }
+ ],
+ onLoad: load,
+ onError: error
+ });
+
+ return props.usePicture
+ ? h(
+ "picture",
+ { ref: root, onLoad: load },
+ state.intersected ? [slots.default, img] : [img]
+ )
+ : img;
+ };
+ }
+};
\ No newline at end of file
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index ba981f6..8df8cfb 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -5,7 +5,7 @@
-
![]()
+
@@ -145,12 +145,14 @@ import { nftDetail } from "@/utils/marketplace"
import {priceCalculated} from "@/configs/priceCalculate.js"
import { BlockChain } from "@/components/chain/BlockChain"
import {walletStore} from "@/store/wallet";
+import LazyLoadImg from "@/components/lazyloadimg"
const router = useRouter();
const localWalletStore = walletStore()
const props = defineProps({
address: String,
tokenid: String
})
+import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
const detailData = ref(null)
// const detailData = window.history.state.nftData
// console.log(detailData)
From cc37aca3822db572e3b088ce1be8f657a8b7b87b Mon Sep 17 00:00:00 2001
From: CounterFire2023 <136581895+CounterFire2023@users.noreply.github.com>
Date: Tue, 25 Jun 2024 16:43:33 +0800
Subject: [PATCH 2/3] fix sth
---
src/views/DetailView.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index 8df8cfb..278e2fb 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -156,7 +156,7 @@ import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
const detailData = ref(null)
// const detailData = window.history.state.nftData
// console.log(detailData)
-// const myAddress = localWalletStore.address
+const myAddress = localWalletStore.address
// const nftAbilities = ref(detailData.detail)
// 购买
From 4d1d884c1904e8a67b450a69fe3810144ab62998 Mon Sep 17 00:00:00 2001
From: CounterFire2023 <136581895+CounterFire2023@users.noreply.github.com>
Date: Tue, 25 Jun 2024 17:46:47 +0800
Subject: [PATCH 3/3] =?UTF-8?q?access=20token=20=E4=B8=8D=E5=86=8D?=
=?UTF-8?q?=E4=BB=8Elocalstorage=E8=AF=BB=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/chain/BlockChain.js | 9 +++++++--
src/components/chain/wallet/PassportWallet.js | 6 +++---
src/utils/marketplace.js | 7 ++++---
3 files changed, 14 insertions(+), 8 deletions(-)
diff --git a/src/components/chain/BlockChain.js b/src/components/chain/BlockChain.js
index aec0350..2dfd288 100644
--- a/src/components/chain/BlockChain.js
+++ b/src/components/chain/BlockChain.js
@@ -45,8 +45,10 @@ export class BlockChain {
async restoreWallet(walletType) {
this.wallet = new allProviders[walletType]();
- const { provider } = await this.wallet.web3Provider();
+ const { provider, token } = await this.wallet.web3Provider();
this.provider = provider
+ this.token = token
+ this.store.$persist();
this.market.updateProvider(provider);
return provider;
}
@@ -56,11 +58,12 @@ export class BlockChain {
if (ALL_PROVIDERS.length === 1) {
const walletType = ALL_PROVIDERS[0].id
this.wallet = new allProviders[walletType]();
- const { provider, accounts } = await this.wallet.web3Provider();
+ const { provider, accounts, token } = await this.wallet.web3Provider();
this.provider = provider
this.market.updateProvider(provider);
this.store.walletType = walletType;
this.store.address = accounts[0];
+ this.token = token
this.store.$persist();
return
}
@@ -72,6 +75,7 @@ export class BlockChain {
this.wallet = new allProviders[result.wallet]();
this.store.walletType = result.wallet;
this.store.address = result.accounts[0];
+ this.token = token
this.store.$persist();
} else {
console.log(`select result : ${result.errmsg}`);
@@ -80,6 +84,7 @@ export class BlockChain {
}
async logout() {
+ this.token = '';
this.store.reset();
this.store.$persist();
await this.wallet.logout();
diff --git a/src/components/chain/wallet/PassportWallet.js b/src/components/chain/wallet/PassportWallet.js
index 9a9a6f8..e945cd2 100644
--- a/src/components/chain/wallet/PassportWallet.js
+++ b/src/components/chain/wallet/PassportWallet.js
@@ -62,9 +62,9 @@ export class PassportWallet {
const passportProvider = this.passportInstance.connectEvm();
const accounts = await passportProvider.request({ method: "eth_requestAccounts" });
const provider = new providers.Web3Provider(passportProvider);
- let accessToken = await this.passportInstance.getAccessToken()
- console.log(`accesstoken`, accessToken)
- return { provider, accounts };
+ const token = await this.passportInstance.getAccessToken()
+ console.log(`accesstoken`, token)
+ return { provider, accounts, token };
}
diff --git a/src/utils/marketplace.js b/src/utils/marketplace.js
index e733272..0d82503 100644
--- a/src/utils/marketplace.js
+++ b/src/utils/marketplace.js
@@ -1,4 +1,5 @@
-import axios from 'axios'
+import { BlockChain } from "@/components/chain/BlockChain";
+
const API_BASE = import.meta.env.VUE_APP_MKT_API
@@ -7,7 +8,7 @@ const net_id = import.meta.env.VUE_APP_NET_ID
const toJson = res => res.json();
const httpPost = async (url, data) => {
- const token = localStorage.getItem('assessToken');
+ const token = new BlockChain().token;
let headers = {"Content-Type": "application/json"};
// let token = token;
if (token) {
@@ -22,7 +23,7 @@ const httpPost = async (url, data) => {
const httpGet = async (url, data) => {
- const token = localStorage.getItem('assessToken');
+ const token = new BlockChain().token;
let headers = {"Content-Type": "application/json"};
if (token) {
headers['Authorization'] = `Bearer ${token}`;