Browse Source

Explore: viewing records

vue
Lev 2 years ago
parent
commit
8f23c4460a
  1. 7
      .idea/workspace.xml
  2. 11
      src/result.ts
  3. 3
      src/views/Checkout.vue
  4. 131
      src/views/Explore.vue

7
.idea/workspace.xml

@ -3,8 +3,9 @@
<component name="ChangeListManager">
<list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Checkout">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Header.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Header.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/utils.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/utils.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/result.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/result.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/Checkout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Checkout.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/Explore.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Explore.vue" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -91,7 +92,7 @@
<workItem from="1673195751389" duration="2458000" />
<workItem from="1673683299593" duration="12019000" />
<workItem from="1673906442760" duration="1896000" />
<workItem from="1674161982371" duration="2229000" />
<workItem from="1674161982371" duration="13824000" />
</task>
<task id="LOCAL-00001" summary="Wrote the landing">
<created>1670844191163</created>

11
src/result.ts

@ -16,8 +16,9 @@ export class Result {
condition_fulfilled: boolean | null = null;
buy_msg: Message | null = null;
content_msg: Message | null = null;
nft_info?: any;
constructor(domain: string, buy_price?: number, auction_price?: number, owner?: string, collection_required: Collection | null = null, condition_fulfilled: boolean | null = null, buy_msg: Message | null = null, content_msg: Message | null = null) {
constructor(domain: string, buy_price?: number, auction_price?: number, owner?: string, collection_required: Collection | null = null, condition_fulfilled: boolean | null = null, buy_msg: Message | null = null, content_msg: Message | null = null, nft_info?: any) {
this.domain = domain;
this.buy_price = buy_price;
this.auction_price = auction_price;
@ -26,6 +27,7 @@ export class Result {
this.condition_fulfilled = condition_fulfilled;
this.buy_msg = buy_msg;
this.content_msg = content_msg;
this.nft_info = nft_info;
}
static fromBackend(data: any): Result {
@ -37,8 +39,9 @@ export class Result {
let condition_fulfilled = data.condition_fulfilled;
let buy_msg = data.buy_msg;
let content_msg = data.content_msg;
let nft_info = data.nft_info;
return new Result(domain, buy_price, auction_price, owner, collection_required, condition_fulfilled, buy_msg, content_msg);
return new Result(domain, buy_price, auction_price, owner, collection_required, condition_fulfilled, buy_msg, content_msg, nft_info);
}
getRouteParams(): any {
@ -101,6 +104,10 @@ export async function get_domain_result(domain: string, address?: string) {
return new Result(domain, 5, 3);*/
}
export async function get_records(address: string) {
return await call_api('records/' + address);
}
export async function get_zones() {
let zones_back = await call_api('zones');
return zones_back.map((zone: any) => new Zone(zone.zone, zone.price_buy_1, zone.price_buy_2, zone.collection_required, zone.price_auction_1, zone.price_auction_2, zone.min_length, zone.length_1, zone.length_2, zone.address));

3
src/views/Checkout.vue

@ -63,6 +63,9 @@ export default {
console.log("Signing the transaction", transaction);
const result = await this.$store.state.connector.sendTransaction(transaction);
console.log(result);
if (result.boc === '') {
this.$router.push({name: 'Get', params: {domain_init: this.domain, zone: this.zone}});
}
this.$router.push({name: 'Explore', params: {domain: this.domain + '.' + this.zone}});
}

131
src/views/Explore.vue

@ -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>
Loading…
Cancel
Save