|
|
|
|
@ -8,28 +8,115 @@
|
|
|
|
|
</button> |
|
|
|
|
</router-link> |
|
|
|
|
</template> |
|
|
|
|
<!-- todo: button to go back + this whole view --> |
|
|
|
|
<DomainBar :value="core_domain" :zone="'.' + zone" :has_button="false" :editable="false"/> |
|
|
|
|
<div v-if="loading" class="center"> |
|
|
|
|
<RotateSquare2 style="width: 5rem; height: 5rem; margin-top: 3rem;"/> |
|
|
|
|
</div> |
|
|
|
|
<div v-else> |
|
|
|
|
<div class="owned" v-if="result.owner && !isMine"> |
|
|
|
|
<p class="domain">{{ domain }}</p> |
|
|
|
|
<div>is owned by |
|
|
|
|
<div class="owner-address">{{ ownerAddr }}</div> |
|
|
|
|
</div> |
|
|
|
|
<a :href="result.nft_info.explorer_link">View nft</a> |
|
|
|
|
</div> |
|
|
|
|
<div v-else-if="isMine" class="owned"> |
|
|
|
|
<p class="domain">{{ domain }}</p> |
|
|
|
|
<div>is owned by |
|
|
|
|
<div class="owner-address">you</div> |
|
|
|
|
</div> |
|
|
|
|
<br/> |
|
|
|
|
<div id="wallet_input" class="rec-field"> |
|
|
|
|
<div style="display: flex; width: 100%"> |
|
|
|
|
<p style="width: 9rem">Wallet:</p> |
|
|
|
|
<contenteditable class="record-inp" tag="div" :no-hl="true" :no-html="true" spellcheck="false" |
|
|
|
|
v-model="wallet_rec"></contenteditable> |
|
|
|
|
<div class="record-submit get_b">Save</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div id="site_input" class="rec-field"> |
|
|
|
|
<div style="display: flex; width: 100%"> |
|
|
|
|
<p style="width: 9rem;">Site:</p> |
|
|
|
|
<contenteditable class="record-inp" tag="div" :no-hl="true" :no-html="true" spellcheck="false" |
|
|
|
|
v-model="site_rec"></contenteditable> |
|
|
|
|
<div class="record-submit get_b">Save</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-else> |
|
|
|
|
This domain is not owned. |
|
|
|
|
<router-link :to="{name: 'Get', params: {domain_init: core_domain, zone: zone}}"> |
|
|
|
|
<button class="b darkish back"> |
|
|
|
|
Get it |
|
|
|
|
</button> |
|
|
|
|
</router-link> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</DarkLayout> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import DarkLayout from "../components/DarkLayout.vue"; |
|
|
|
|
import DomainBar from "../components/DomainBar.vue"; |
|
|
|
|
import RotateSquare2 from "../components/RotateSquare2.vue"; |
|
|
|
|
import {get_domain_result, get_records} from "../result"; |
|
|
|
|
import {convertAddress} from "../utils"; |
|
|
|
|
import contenteditable from 'vue-contenteditable'; |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: "Explore", |
|
|
|
|
components: {DomainBar, DarkLayout}, |
|
|
|
|
components: {DomainBar, DarkLayout, RotateSquare2, contenteditable}, |
|
|
|
|
props: { |
|
|
|
|
domain: { |
|
|
|
|
type: String, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
result: null, |
|
|
|
|
records: null, |
|
|
|
|
wallet_rec: null, |
|
|
|
|
site_rec: null |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
get_domain_result(this.domain, this.$store.getters.address).then(r => { |
|
|
|
|
this.result = r; |
|
|
|
|
if (this.isMine) { |
|
|
|
|
get_records(r.nft_info.address).then(r => { |
|
|
|
|
this.records = r; |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
core_domain() { |
|
|
|
|
return this.domain.split('.')[0]; |
|
|
|
|
}, |
|
|
|
|
zone() { |
|
|
|
|
return this.domain.split('.').slice(1).join('.'); |
|
|
|
|
}, |
|
|
|
|
loading() { |
|
|
|
|
return this.result === null; |
|
|
|
|
}, |
|
|
|
|
ownerAddr() { |
|
|
|
|
let owner = this.result.owner; |
|
|
|
|
if (!owner instanceof String) { |
|
|
|
|
return ''; |
|
|
|
|
} |
|
|
|
|
let address = convertAddress(owner); |
|
|
|
|
return address.slice(0, 5) + '...' + address.slice(-4); |
|
|
|
|
}, |
|
|
|
|
isMine() { |
|
|
|
|
return this.result.owner === this.$store.getters.address; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
records: function (val) { |
|
|
|
|
if (val) { |
|
|
|
|
this.wallet_rec = val.wallet; |
|
|
|
|
this.site_rec = val.site; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -37,4 +124,44 @@ export default {
|
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
|
|
|
|
|
.domain { |
|
|
|
|
font-family: 'Inconsolata', monospace; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-size: 2rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@media only screen and (max-width: 800px) { |
|
|
|
|
.domain { |
|
|
|
|
font-size: 1.7rem; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.owned { |
|
|
|
|
border-radius: 1rem; |
|
|
|
|
background-color: #363e5e; |
|
|
|
|
color: white; |
|
|
|
|
font-size: 1.5rem; |
|
|
|
|
text-align: center; |
|
|
|
|
padding: 2rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.owner-address { |
|
|
|
|
font-family: 'Inconsolata', monospace; |
|
|
|
|
color: #c86161; |
|
|
|
|
font-size: 2rem; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.record-inp { |
|
|
|
|
padding: 0.3rem; |
|
|
|
|
margin-left: 0.5rem; |
|
|
|
|
border-radius: 0.3rem; |
|
|
|
|
background-color: #4e5a88; |
|
|
|
|
color: white; |
|
|
|
|
min-width: 50%; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.rec-field:not(:last-child) { |
|
|
|
|
margin-bottom: 1rem; |
|
|
|
|
} |
|
|
|
|
</style> |
