Explore: viewing records

.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/result.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/result.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/utils.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/utils.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>

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));

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}});
     }
 

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>