agorata
/
frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Required collections + started implementing login

vue
Lev 2 years ago
parent
7fbd425260
commit
fd54c4f93d
13 changed files with 427 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      .idea/workspace.xml
  2. 174
      package-lock.json
  3. 4
      package.json
  4. 5
      public/tonconnect-manifest.json
  5. 11
      src/collection.ts
  6. 6
      src/components/DarkLayout.vue
  7. 1
      src/components/DomainResult.vue
  8. 21
      src/components/GetDomainBtn.vue
  9. 28
      src/components/Header.vue
  10. 114
      src/components/LoginModal.vue
  11. 16
      src/components/ZoneTable.vue
  12. 32
      src/result.ts
  13. 6
      src/zone.ts

36
.idea/workspace.xml
Unescape View File

@ -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$/src/components/TonButton.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/TonButton.vue" 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$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" 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/views/Explore.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Explore.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/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>

174
package-lock.json generated
Unescape View File

@ -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,

4
package.json
Unescape View File

@ -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",

5
public/tonconnect-manifest.json
Unescape View File

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

11
src/collection.ts
Unescape View File

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

6
src/components/DarkLayout.vue
Unescape View File

@ -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>

1
src/components/DomainResult.vue
Unescape View File

@ -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()"

21
src/components/GetDomainBtn.vue
Unescape View File

@ -1,12 +1,19 @@
<template>
<div class="get-domain">
Get<br/>
<p class="domain">{{domain}}</p>
<p class="domain">{{ domain }}</p>
for<br/>
<span class="price">
{{price}}
{{ 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>

28
src/components/Header.vue
Unescape View File

@ -1,12 +1,20 @@
<template>
<header>
<div class="wrapper flex">
<router-link to="/"><img class="logo" src="@/assets/logo.png" alt="Agorata" /></router-link>
<nav>
<!-- <router-link to="/">Home</router-link>-->
<!-- <router-link to="/about">About</router-link>-->
<!-- <router-link to="/contact">Contact</router-link>-->
<slot></slot>
<div class="wrapper flex" style="width: 100%">
<router-link to="/"><img class="logo" src="@/assets/logo.png" alt="Agorata"/></router-link>
<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>

114
src/components/LoginModal.vue
Unescape View File

@ -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>

16
src/components/ZoneTable.vue
Unescape View File

@ -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>

32
src/result.ts
Unescape View File

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

6
src/zone.ts
Unescape View File

@ -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 {

Write Preview
Loading…
Cancel
Save