Required collections + started implementing login

.idea/workspace.xml

@@ -1,14 +1,20 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="The screens for domain owners">
+    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Adaptivity">
+      <change afterPath="$PROJECT_DIR$/public/tonconnect-manifest.json" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/collection.ts" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/LoginModal.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/assets/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/main.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/TonButton.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/TonButton.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/ZonePricing.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZonePricing.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/DarkLayout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DarkLayout.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/DomainResult.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DomainResult.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/GetDomainBtn.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/GetDomainBtn.vue" 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/components/ZoneTable.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZoneTable.vue" 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/result.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/result.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/Explore.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Explore.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/zone.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/zone.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -80,7 +86,11 @@
       <workItem from="1671490155427" duration="1029000" />
       <workItem from="1671554049942" duration="6375000" />
       <workItem from="1671797380442" duration="603000" />
-      <workItem from="1671887059754" duration="4958000" />
+      <workItem from="1671887059754" duration="6359000" />
+      <workItem from="1672337938860" duration="148000" />
+      <workItem from="1672483245701" duration="3321000" />
+      <workItem from="1672753446569" duration="4197000" />
+      <workItem from="1672782388693" duration="2160000" />
     </task>
     <task id="LOCAL-00001" summary="Wrote the landing">
       <created>1670844191163</created>
@@ -187,7 +197,14 @@
       <option name="project" value="LOCAL" />
       <updated>1671892446204</updated>
     </task>
-    <option name="localTasksCounter" value="16" />
+    <task id="LOCAL-00016" summary="Adaptivity">
+      <created>1671893611233</created>
+      <option name="number" value="00016" />
+      <option name="presentableId" value="LOCAL-00016" />
+      <option name="project" value="LOCAL" />
+      <updated>1671893611233</updated>
+    </task>
+    <option name="localTasksCounter" value="17" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -220,6 +237,7 @@
     <MESSAGE value="Add (almost) monochrome logo + loading QR on checkout" />
     <MESSAGE value="Back button + stuff for deploy" />
     <MESSAGE value="The screens for domain owners" />
-    <option name="LAST_COMMIT_MESSAGE" value="The screens for domain owners" />
+    <MESSAGE value="Adaptivity" />
+    <option name="LAST_COMMIT_MESSAGE" value="Adaptivity" />
   </component>
 </project>

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@popperjs/core": "^2.11.6",
+        "@tonconnect/sdk": "^2.0.4",
         "axios": "^1.2.1",
         "bulma": "^0.9.4",
         "qr-code-styling": "^1.6.0-rc.1",
@@ -16,7 +17,8 @@
         "vue": "^3.2.45",
         "vue-contenteditable": "^4.1.0",
         "vue-router": "^4.1.6",
-        "vue3-popper": "^1.5.0"
+        "vue3-popper": "^1.5.0",
+        "vuex": "^4.0.2"
       },
       "devDependencies": {
         "@types/node": "^18.11.16",
@@ -499,6 +501,26 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@tonconnect/protocol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@tonconnect/protocol/-/protocol-2.0.1.tgz",
+      "integrity": "sha512-jkSj6EKjIlHnJxrtxdlO7KqVJe41yrIgqamGZiqziKH6iwx0m9YyKvuIREd6CmWY2jbsev3BvBWqPp9KH6HrRw==",
+      "dependencies": {
+        "tweetnacl-util": "^0.15.1"
+      }
+    },
+    "node_modules/@tonconnect/sdk": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@tonconnect/sdk/-/sdk-2.0.4.tgz",
+      "integrity": "sha512-mG3vm0F6aNxAw5QNEeZ1MH0i3yWpGWxpZauFZTuy2wo2yKZscoAYYBlEF0AUwmdClW6n458EYrXFuC7Vy/a8FA==",
+      "dependencies": {
+        "@tonconnect/protocol": "^2.0.1",
+        "deepmerge": "^4.2.2",
+        "eventsource": "^2.0.2",
+        "node-fetch": "^2.6.7",
+        "tweetnacl": "^1.0.3"
+      }
+    },
     "node_modules/@types/node": {
       "version": "18.11.16",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.16.tgz",
@@ -1008,6 +1030,14 @@
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
       "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
     },
+    "node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/define-properties": {
       "version": "1.1.4",
       "dev": true,
@@ -1175,6 +1205,14 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -1789,6 +1827,25 @@
       "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
       "dev": true
     },
+    "node_modules/node-fetch": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -2559,6 +2616,21 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
+    "node_modules/tweetnacl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
+      "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw=="
+    },
+    "node_modules/tweetnacl-util": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/tweetnacl-util/-/tweetnacl-util-0.15.1.tgz",
+      "integrity": "sha512-RKJBIj8lySrShN4w6i/BonWp2Z/uxwC3h4y7xsRrpP59ZboCd0GpEVsOnMDYLMmKBpYhb5TgHzZXy7wTfYFBRw=="
+    },
     "node_modules/typescript": {
       "version": "4.7.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
@@ -2742,6 +2814,31 @@
         "vue": "^3.2.20"
       }
     },
+    "node_modules/vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which-boxed-primitive": {
       "version": "1.0.2",
       "dev": true,
@@ -3016,6 +3113,26 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
       "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
     },
+    "@tonconnect/protocol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@tonconnect/protocol/-/protocol-2.0.1.tgz",
+      "integrity": "sha512-jkSj6EKjIlHnJxrtxdlO7KqVJe41yrIgqamGZiqziKH6iwx0m9YyKvuIREd6CmWY2jbsev3BvBWqPp9KH6HrRw==",
+      "requires": {
+        "tweetnacl-util": "^0.15.1"
+      }
+    },
+    "@tonconnect/sdk": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@tonconnect/sdk/-/sdk-2.0.4.tgz",
+      "integrity": "sha512-mG3vm0F6aNxAw5QNEeZ1MH0i3yWpGWxpZauFZTuy2wo2yKZscoAYYBlEF0AUwmdClW6n458EYrXFuC7Vy/a8FA==",
+      "requires": {
+        "@tonconnect/protocol": "^2.0.1",
+        "deepmerge": "^4.2.2",
+        "eventsource": "^2.0.2",
+        "node-fetch": "^2.6.7",
+        "tweetnacl": "^1.0.3"
+      }
+    },
     "@types/node": {
       "version": "18.11.16",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.16.tgz",
@@ -3445,6 +3562,11 @@
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
       "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
     },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+    },
     "define-properties": {
       "version": "1.1.4",
       "dev": true,
@@ -3567,6 +3689,11 @@
       "version": "1.0.5",
       "dev": true
     },
+    "eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA=="
+    },
     "fast-glob": {
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -3959,6 +4086,14 @@
       "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
       "dev": true
     },
+    "node-fetch": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "requires": {
+        "whatwg-url": "^5.0.0"
+      }
+    },
     "normalize-package-data": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
@@ -4470,6 +4605,21 @@
         "is-number": "^7.0.0"
       }
     },
+    "tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
+    "tweetnacl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
+      "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw=="
+    },
+    "tweetnacl-util": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/tweetnacl-util/-/tweetnacl-util-0.15.1.tgz",
+      "integrity": "sha512-RKJBIj8lySrShN4w6i/BonWp2Z/uxwC3h4y7xsRrpP59ZboCd0GpEVsOnMDYLMmKBpYhb5TgHzZXy7wTfYFBRw=="
+    },
     "typescript": {
       "version": "4.7.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
@@ -4581,6 +4731,28 @@
         "debounce": "^1.2.1"
       }
     },
+    "vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      }
+    },
+    "webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "requires": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "which-boxed-primitive": {
       "version": "1.0.2",
       "dev": true,

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
+    "@tonconnect/sdk": "^2.0.4",
     "axios": "^1.2.1",
     "bulma": "^0.9.4",
     "qr-code-styling": "^1.6.0-rc.1",
@@ -18,7 +19,8 @@
     "vue": "^3.2.45",
     "vue-contenteditable": "^4.1.0",
     "vue-router": "^4.1.6",
-    "vue3-popper": "^1.5.0"
+    "vue3-popper": "^1.5.0",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@types/node": "^18.11.16",

public/tonconnect-manifest.json

@@ -0,0 +1,5 @@
+{
+  "url": "https://agorata.io/",
+  "name": "Agorata",
+  "iconUrl": "https://front.agorata.io/favicon.png"
+}

src/collection.ts

@@ -0,0 +1,11 @@
+export class Collection {
+    address: string;
+    name: string;
+    logo_url?: string;
+
+    constructor(address: string, name: string, logo_url?: string) {
+        this.address = address;
+        this.name = name;
+        this.logo_url = logo_url;
+    }
+}

src/components/DarkLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <main style="width: 100vw; min-height: 100vh; height: 100%;" id="dark_body">
-    <Header>
+    <Header @login-modal="$refs.loginModal.openModal()">
       <slot name="header"></slot>
     </Header>
     <div class="center">
@@ -8,15 +8,17 @@
         <slot></slot>
       </div>
     </div>
+    <LoginModal ref="loginModal"/>
   </main>
 </template>
 
 <script>
 import Header from "../components/Header.vue";
+import LoginModal from "./LoginModal.vue";
 
 export default {
   name: "DarkLayout",
-  components: {Header}
+  components: {LoginModal, Header}
 }
 </script>
 

src/components/DomainResult.vue

@@ -4,6 +4,7 @@
   </div>
   <GetDomainBtn v-else-if="result.canBuy()"
                 :domain="domain" :price="result.auction_price"
+                :collection_required="result.collection_required"
                 @click="$router.push({name: 'Checkout', params: result.getRouteParams()})"/>
   <!-- todo: differentiate between auction and buy -->
   <GetDomainBtn v-else-if="result.canAuction()"

src/components/GetDomainBtn.vue

@@ -7,6 +7,13 @@
       {{ price }}
       <img src="@/assets/icons/ton_bottom.svg" class="ton_img" alt="TON"/>
     </span>
+    <template v-if="collection_required !== undefined && collection_required !== null">
+      <br/>
+      <div class="collection_required">
+        for owners of
+        <div class="collection">{{ collection_required.name }}</div>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -22,6 +29,10 @@ export default {
       type: Number,
       required: true
     },
+    collection_required: {
+      // type: Collection | null,
+      default: null
+    }
   }
 }
 </script>
@@ -70,4 +81,10 @@ export default {
   height: 2rem;
   margin-left: -0.3rem;
 }
+
+.collection {
+  border-radius: 10px;
+  background-color: white;
+  color: #0088cc;
+}
 </style>

src/components/Header.vue

@@ -1,12 +1,20 @@
 <template>
   <header>
-    <div class="wrapper flex">
+    <div class="wrapper flex" style="width: 100%">
       <router-link to="/"><img class="logo" src="@/assets/logo.png" alt="Agorata"/></router-link>
-      <nav>
+      <nav style="display: flex">
         <!--        <router-link to="/">Home</router-link>-->
         <!--        <router-link to="/about">About</router-link>-->
         <!--        <router-link to="/contact">Contact</router-link>-->
+        <div>
           <slot></slot>
+        </div>
+        <!-- right-aligned login button -->
+        <div class="login-b">
+          <button class="b blue wide" @click="$emit('login-modal')">
+            <span>Login</span>
+          </button>
+        </div>
       </nav>
     </div>
   </header>
@@ -30,6 +38,7 @@ header {
 div.wrapper {
   flex-wrap: wrap;
 }
+
 .logo {
   display: block;
   margin: 0 auto 2rem;
@@ -67,4 +76,9 @@ nav {
     padding: 1rem 0;
   }
 }
+
+/* right-aligned login button */
+.login-b {
+  margin-left: auto;
+}
 </style>

src/components/LoginModal.vue

@@ -0,0 +1,114 @@
+<template>
+  <transition name="fade">
+    <div class="modal" v-if="show">
+      <div class="modal__backdrop" @click="closeModal()"/>
+
+      <div class="modal__dialog">
+        <div class="modal__header">
+          <slot name="header"/>
+          <button type="button" class="modal__close" @click="closeModal()">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
+              <path
+                fill="currentColor"
+                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+              ></path>
+            </svg>
+          </button>
+        </div>
+
+        <div class="modal__body">
+          <slot name="body"/>
+        </div>
+
+        <div class="modal__footer">
+          <slot name="footer"/>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: "LoginModal",
+  data() {
+    return {
+      show: false
+    };
+  },
+  methods: {
+    closeModal() {
+      this.show = false;
+      document.querySelector("body").classList.remove("overflow-hidden");
+    },
+    openModal() {
+      this.show = true;
+      document.querySelector("body").classList.add("overflow-hidden");
+    }
+  }
+};
+</script>
+
+
+<style lang="scss" scoped>
+.modal {
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9;
+  &__backdrop {
+    background-color: rgba(0, 0, 0, 0.3);
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+  }
+  &__dialog {
+    background-color: #4e5a88;
+    position: relative;
+    width: 600px;
+    margin: 50px auto;
+    display: flex;
+    flex-direction: column;
+    border-radius: 5px;
+    z-index: 2;
+    @media screen and (max-width: 992px) {
+      width: 90%;
+    }
+  }
+  &__close {
+    width: 30px;
+    height: 30px;
+  }
+  &__header {
+    padding: 20px 20px 10px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+  &__body {
+    padding: 10px 20px 10px;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  &__footer {
+    padding: 10px 20px 20px;
+  }
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/components/ZoneTable.vue

@@ -1,5 +1,8 @@
 <template>
-  <div style="overflow-x: auto; max-width: 98vw;">
+  <div class="center" v-if="zones === []">
+    <RotateSquare2 style="width: 5rem; height: 5rem; margin-top: 3rem;"/>
+  </div>
+  <div style="overflow-x: auto; max-width: 98vw;" v-else>
     <table class="table_outer">
       <thead class="table_header">
       <tr>
@@ -26,15 +29,22 @@
 <script>
 import {Zone} from "../zone";
 import ZonePricing from "./ZonePricing.vue";
+import {get_zones} from "../result";
+import RotateSquare2 from "./RotateSquare2.vue";
 
 export default {
   name: "ZoneTable",
-  components: {ZonePricing},
+  components: {ZonePricing, RotateSquare2},
   props: {
     zones: {
       type: Array[Zone],
-      default: [new Zone("example.ton", 3, 5), new Zone("agorata.ton", 3, 5), new Zone("testtesttest.ton", 1, 1)]
+      default: []
     }
+  },
+  mounted() {
+    get_zones().then(zones => {
+      this.zones = zones;
+    });
   }
 }
 </script>

src/result.ts

@@ -1,16 +1,23 @@
 // import {call_api} from "@/api";
 
+import {Zone} from "@/zone";
+import {Collection} from "@/collection";
+
+let ex_collection = () => new Collection("example.ton", "Example collection");
+
 export class Result {
     domain: string;
     buy_price?: number;
     auction_price?: number;
     owner?: string;
+    collection_required: Collection | null;
 
-    constructor(domain: string, buy_price?: number, auction_price?: number, owner?: string) {
+    constructor(domain: string, buy_price?: number, auction_price?: number, owner?: string, collection_required: Collection | null = null) {
         this.domain = domain;
         this.buy_price = buy_price;
         this.auction_price = auction_price;
         this.owner = owner;
+        this.collection_required = collection_required;
     }
 
     getRouteParams(): any {
@@ -49,15 +56,38 @@ export async function get_search_results(query: string) {
     ];
 }
 
+function parse_zone(domain: string) {
+    // extract the zone from the domain (e.g. example.ton from 123.example.ton)
+    return domain.split('.').slice(1).join('.');
+}
+
 export async function get_domain_result(domain: string) {
     // return await call_api('get/' + domain);
     await sleep(100);
     if (domain === 'test.ton') {
         return new Result(domain);
     }
+    // if (domain.split('.')[0] === 'owned') {
+    //     return new Result(domain, 5, 3, '123');
+    // }
+    console.log(domain);
+    console.log(domain.split('.'))
+    let exc = ex_collection();
+    if (parse_zone(domain) === 'example.ton') {
+        return new Result(domain, 5, 3, undefined, exc);
+    }
     return new Result(domain, 5, 3);
 }
 
+export async function get_zones() {
+    // return await call_api('zones');
+    await sleep(10);
+    return [
+        new Zone("example.ton", 3, 5, ex_collection()),
+        new Zone("agorata.ton", 3, 5),
+        new Zone("testtesttest.ton", 1, 1)];
+}
+
 export class TonLink {
     address: string;
     sum?: number;

src/zone.ts

@@ -1,8 +1,11 @@
+import type {Collection} from "@/collection";
+
 export class Zone {
     zone: string;   // Without the dot in the front
     min_length: number;
     length_1: number;
     length_2: number;
+    collection_required?: Collection;
     price_buy_1?: number;
     price_buy_2?: number;
     price_auction_1?: number;
@@ -10,7 +13,7 @@ export class Zone {
 	address?: string;
 
     constructor(zone: string,
-                price_buy_1?: number, price_buy_2?: number, price_auction_1?: number, price_auction_2?: number,
+                price_buy_1?: number, price_buy_2?: number, collection_required?: Collection, price_auction_1?: number, price_auction_2?: number,
                 min_length: number = 2, length_1: number = 3, length_2: number = 8, address?: string
                 ) {
         this.zone = zone;
@@ -22,6 +25,7 @@ export class Zone {
         this.price_auction_1 = price_auction_1;
         this.price_auction_2 = price_auction_2;
 		this.address = address;
+        this.collection_required = collection_required;
     }
 
     canBuy(): boolean {