Merge pull request #6 from Dimitreee/dDanev/fix_edit_screen_buttons

add edit screen buttons
Dimitreee · Dec 15, 2022 · 57a035e · 57a035e
2 parents 11d82ae + 80cff68
commit 57a035e
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 8 deletions.
diff --git a/css/constants.css b/css/constants.css
@@ -74,6 +74,7 @@ html[data-theme='light'] {
   --socials--color: #D9D9D9;
 
   --tonkeeper__icon: url("/assets/tonkeeper__white.svg");
+  --tonkeeper__icon--mono: url("/assets/tonkeeper__icon.svg");
   --web__wallet__icon: url("/assets/web__wallet.svg");
 }
 
@@ -139,6 +140,7 @@ html[data-theme='dark'] {
   --arrow--link--after: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgMTRMOSA5LjVMNCA1IiBzdHJva2U9IiMwMUE0RjUiIHN0cm9rZS13aWR0aD0iMi4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==");
   --socials--color: #606069;
   --tonkeeper__icon: url("/assets/tonkeeper__icon.svg");
+  --tonkeeper__icon--mono: url("/assets/tonkeeper__icon.svg");
   --web__wallet__icon: url("/assets/web__wallet.svg");
 }
 

diff --git a/css/dns.css b/css/dns.css
@@ -63,6 +63,19 @@ body.scroll__disabled {
     color: var(--text-secondary);
 }
 
+.btn.outline {
+    background: none;
+    padding: 0;
+    width: 100%;
+    color: var(--accent-default);
+}
+
+.btn.outline:hover {
+    color: var(--accent-hover);
+    text-decoration: underline;
+}
+
+
 .btn,
 .btn:after,
 .btn:active,
@@ -101,9 +114,13 @@ body.scroll__disabled {
     gap: 8px;
 }
 
+
 .buttonWrapper {
     padding-top: 24px;
     text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
 }
 
 .mobile__bid--label {
@@ -1151,6 +1168,11 @@ p {
     background-size: contain;
 }
 
+.tonkeeper__icon.tonkeeper__icon--mono {
+    background: var(--tonkeeper__icon--mono) center no-repeat;
+
+}
+
 .webwallet__icon {
     width: 24px;
     height: 24px;
@@ -1329,15 +1351,21 @@ p {
 /* DOMAIN EDIT */
 
 .edit-expand #connectBtn,
+.edit-expand #connectMobile,
 .edit-expand #busyOwnerRow {
     display: none;
 }
 
 .edit-loading #connectBtn,
+.edit-expand #connectMobile,
 .edit-loading #busyOwnerRow {
     display: none;
 }
 
+#connectMobile {
+    display: none;
+}
+
 
 #domainEditContainer {
     display: none;
@@ -1430,6 +1458,14 @@ p {
 }
 
 @media screen and (max-width: 568px) {
+    #connectBtn {
+        display: none;
+    }
+
+    #connectMobile {
+        display: inline-flex;
+    }
+
     .start h1 {
         font-size: 26px;
         line-height: 32px;

diff --git a/index.html b/index.html
@@ -234,11 +234,22 @@ <h1 data-locale="open__auction">Buy .ton domains</h1>
                 </div>
             </div>
         </div>
+
         <p class="buttonWrapper">
-            <a id="connectBtn" class="btn" >
-                <img src="/assets/edit_bid.svg" alt="Edit bid">
-                <span data-locale="edit">
-                    Edit
+            <a id="connectBtn" class="btn">
+                <span data-locale="manage__domain">
+                    Manage a domain
+                </span>
+            </a>
+            <a id="connectMobile" class="btn" href="https://tonkeeper.com/" target="_blank">
+                <span class="tonkeeper__icon tonkeeper__icon--mono"></span>
+                <span data-locale="manage__domain__mobile">
+                    Set up via Tonkeeper
+                </span>
+            </a>
+            <a id="infoBtn" class="btn outline" href="/about.html#claim-your-ton-domain" target="_blank" >
+                <span data-locale="claim__your__domain">
+                    How to claim your TON domain
                 </span>
             </a>
         </p>

diff --git a/index.js b/index.js
@@ -43,13 +43,16 @@ const localeDict = {
 		invalidChars: 'В домене можно использовать английские символы (a-z), цифры (0-9) и дефис (-). Дефис не может находиться в начале и конце.',
 		notOwner: 'Вы не владелец домена',
 		invalidAddress: 'Неправильный адрес',
-		installExtension: 'Обновите расширение TON Wallet',
+		installExtension: 'Установите расширение TON Wallet для управления доменом',
 		auction: 'Аукцион',
 		free: 'Свободен',
 		busy: 'Занят',
-		updateExtension: 'Установите расширение TON Wallet для управления доменом',
+		updateExtension: 'Обновите расширение TON Wallet',
 		install__web__extension: 'Установить TON Wallet',
 		install__tonkeeper: 'Установить Tonkeeper',
+		claim__your__domain: 'Как получить домен',
+		manage__domain: 'Редактировать',
+		manage__domain__mobile: 'Редактировать в Tonkeeper',
 	},
 	en: {
 		about: 'About',
@@ -95,13 +98,16 @@ const localeDict = {
 		invalidChars: 'English letters (a-z), numbers (0-9), and hyphens (-) are allowed. A hyphen cannot be at the beginning or the end.',
 		notOwner: 'You are not the owner of this domain.',
 		invalidAddress: 'The address is invalid.',
-		installExtension: 'Please update your TON Wallet extension',
+		installExtension: 'Please install the TON Wallet extension to edit the domain',
 		auction: 'On auction',
 		free: 'Available',
 		busy: 'Taken',
-		updateExtension: 'Please install the TON Wallet extension to edit the domain',
+		updateExtension: 'Please update your TON Wallet extension',
 		install__web__extension: 'Install TON Wallet',
 		install__tonkeeper: 'Install Tonkeeper',
+		claim__your__domain: 'How to claim your TON domain',
+		manage__domain: 'Manage your domain',
+		manage__domain__mobile: 'Set up via Tonkeeper',
 	},
 }
 
@@ -770,11 +776,13 @@ const connectExtension = async (domain, dnsItem) => {
 		return
 	}
 
+
 	if (!window.tonProtocolVersion || window.tonProtocolVersion < 1) {
 		alert(locale.updateExtension)
 		return
 	}
 
+
 	const accounts = await provider.send('ton_requestAccounts')
 	const account = new TonWeb.Address(accounts[0]).toString(
 		true,
@@ -1069,5 +1077,37 @@ function renderBidModalSubmitButton() {
 	}
 }
 
+function renderBusyScreenSubmitButton() {
+	const isDesktop = !isMobile();
+	/*
+	* - Chrome
+	* - Opera
+	* - Brave
+	* - Edge
+	* - Vivaldi Browser
+	* */
+	if (isDesktop) {
+		const supportsExtension = ['Chrome', 'Mozilla Firefox', 'Opera', 'MS Edge'].includes(BROWSER);
+		const isExtensionInstalled = Boolean(window.ton)
+		$('#connectMobile').display = 'none'
+
+		if (supportsExtension) {
+			if (isExtensionInstalled) {
+				const invalidExtensionVersion = !window.tonProtocolVersion || window.tonProtocolVersion < 1
+
+				if (invalidExtensionVersion) {
+					alert(locale.updateExtension)
+					return;
+				}
+				return;
+			} else {
+				$('#connectBtn').style.display = 'inline-flex'
+			}
+		} else {
+			$('#connectBtn').style.display = 'none'
+		}
+	}
+}
 
+renderBusyScreenSubmitButton()
 renderBidModalSubmitButton()