Skip to content

Commit

Permalink
Minor updates in the UI (#69)
Browse files Browse the repository at this point in the history 
* Updated my-domains table to display the sale price of the domain (when it was bought from auction) instead of the current sale price

Modified the loading state of the my-domains view

Implemented refetch when 429 error is thrown

Some other minor updates (constants, locales, etc)

* Updated brand logo and colour scheme

* Implemented separate fetching for domain sale prices in the 'my domains' list

* Addressed the security threat (XSS) of the dnsAlert method - see issues #60

* Fixed bug in the flip timer countdown

* Updates after review

* Updated main title: from 'Buy .ton domains' to 'Get .ton domains' (only english locale)

* Updated scripts and styles cache (in advance)

* Removed 'Sale Price' in usd from 'My Domains' table. Minor updates to css styles to make sure the interface is responsive
  • Loading branch information
@andreyxdd
andreyxdd authored Aug 14, 2023
1 parent 3f35d09 commit de9743b
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 117 deletions.
8 changes: 4 additions & 4 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@

<meta name="description" content="Give crypto wallets, smart contracts or websites short readable names." />

<meta property="og:title" content="Buy .ton domains" />
<meta property="og:title" content="Get .ton domains" />
<meta property="og:description" content="Give crypto wallets, smart contracts or websites short readable names." />
<meta property="og:image" content="./assets/meta/og_snippet.jpeg" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Buy .ton domains" />
<meta property="og:site_name" content="Get .ton domains" />

<meta itemProp="name" content="Buy .ton domains" />
<meta itemProp="name" content="Get .ton domains" />
<meta itemProp="description" content="Give crypto wallets, smart contracts or websites short readable names." />
<meta itemProp="image" content="./assets/meta/og_snippet.jpeg" />

<link rel="icon" type="image/png" sizes="32x32" href="./assets/meta/favicon_32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="./assets/meta/favicon_16x16.png" />

<meta name="twitter:title" content="Buy .ton domains" />
<meta name="twitter:title" content="Get .ton domains" />
<meta name="twitter:description" content="Give crypto wallets, smart contracts or websites short readable names." />
<meta name="twitter:image" content="./assets/meta/og_snippet.jpeg" />
<meta name="twitter:card" content="summary_large_image" />
Expand Down
54 changes: 20 additions & 34 deletions css/my-domains.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ html[data-theme='dark'] #noDomainsBannerLight {
font-weight: 600;
padding: 12px 0 12px 24px;
border-top: var(--table-border);
height: 50px;
}

.my-domains-table-row:hover {
Expand Down Expand Up @@ -175,29 +176,27 @@ html[data-theme='dark'] #noDomainsBannerLight {
overflow: hidden;
}

.my-domains-cell-price-row {
.my-domains-cell-price-container {
display: flex;
flex-direction: row;
}

.my-domains-cell-price-loading {
flex: 1;
margin-left: 4px;
border-radius: 6px;
color: transparent;
background: var(--loader--background--gradient);
animation: var(--gradient--animation--transition--slower);
margin-bottom: 2px;
line-height: 26px;
}

.my-domains-cell-price-title {
.my-domains-cell-price {
font-size: 16px;
line-height: 28px;
font-weight: 600;
}

.my-domains-cell-price-title-loading {
margin-bottom: 2px;
line-height: 26px;
text-overflow: ellipsis;
overflow: hidden;
}

.my-domains-cell-price-ton-logo {
Expand All @@ -207,18 +206,6 @@ html[data-theme='dark'] #noDomainsBannerLight {
background: var(--ton-logo-path) center no-repeat;
}

.my-domains-cell-price-caption {
color: var(--text-tetriary);
font-size: 14px;
line-height: 18px;
font-weight: 400;
}

.my-domains-cell-price-caption-loading {
margin-top: 2px;
line-height: 16px;
}

.my-domains-cell-expiried-date {
font-size: 16px;
line-height: 24px;
Expand Down Expand Up @@ -301,7 +288,7 @@ html[data-theme='dark'] #noDomainsBannerLight {
.my-domains-table-cell, .my-domains-table-cell-first, .my-domains-table-cell-last {
font-size: 14px;
line-height: 20px;
padding: 8px 16px 8px 0px;
padding: 8px 8px 8px 0px;
}

.my-domains-title-container {
Expand All @@ -313,12 +300,12 @@ html[data-theme='dark'] #noDomainsBannerLight {
line-height: 28px;
}

.my-domains-cell-price-title {
.my-domains-cell-price {
font-size: 14px;
line-height: 20px;
}

.my-domains-cell-price-title-loading {
.my-domains-cell-price-loading {
margin-bottom: 1px;
line-height: 18px;
}
Expand All @@ -329,16 +316,6 @@ html[data-theme='dark'] #noDomainsBannerLight {
transform: translateY(12%);
}

.my-domains-cell-price-caption {
font-size: 12px;
line-height: 16px;
}

.my-domains-cell-price-caption-loading {
margin-top: 1px;
line-height: 14px;
}

.my-domains-cell-expiried-date {
font-size: 14px;
line-height: 20px;
Expand All @@ -360,7 +337,7 @@ html[data-theme='dark'] #noDomainsBannerLight {
display: block;
}

.my-domains-cell-price-title:before {
.my-domains-cell-price:before {
width: 16px;
height: 16px;
transform: translateY(10%);
Expand All @@ -381,4 +358,13 @@ html[data-theme='dark'] #noDomainsBannerLight {
width: 148px;
heigth: 166px;
}

.my-domains-table-headers th:not(.my-domains-table-last-column) {
width: 32%; /* first three table columns */
}


.my-domains-table-last-column {
width: 4%; /* last table column = 100% - 3 * ( 32% ) */
}
}
66 changes: 33 additions & 33 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,20 @@
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

<meta property="og:title" content="Buy .ton domains" />
<meta property="og:title" content="Get .ton domains" />
<meta property="og:description" content="Give crypto wallets, smart contracts or websites short readable names." />
<meta property="og:image" content="./assets/meta/og_snippet.jpeg" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Buy .ton domains" />
<meta property="og:site_name" content="Get .ton domains" />

<meta itemProp="name" content="Buy .ton domains" />
<meta itemProp="name" content="Get .ton domains" />
<meta itemProp="description" content="Give crypto wallets, smart contracts or websites short readable names." />
<meta itemProp="image" content="./assets/meta/og_snippet.jpeg" />

<link rel="icon" type="image/png" sizes="32x32" href="./assets/meta/favicon_32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="./assets/meta/favicon_16x16.png" />

<meta name="twitter:title" content="Buy .ton domains" />
<meta name="twitter:title" content="Get .ton domains" />
<meta name="twitter:description" content="Give crypto wallets, smart contracts or websites short readable names." />
<meta name="twitter:image" content="./assets/meta/og_snippet.jpeg" />
<meta name="twitter:card" content="summary_large_image" />
Expand All @@ -37,16 +37,16 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/constants.css?11">
<link rel="stylesheet" href="./css/loader.css?11">
<link rel="stylesheet" href="./css/dns.css?11">
<link rel="stylesheet" href="./css/flip-clock.css?11">
<link rel="stylesheet" href="./css/my-domains.css?11">
<script type="text/javascript" src="src/state.js?11"></script>
<script type="text/javascript" src="src/controllers/themeController.js?11"></script>
<script type="text/javascript" src="src/controllers/flipTimerController.js?11"></script>
<script type="text/javascript" src="./src/utils.js?11"></script>
<script type="text/javascript" src="./src/libs/preloadImages.js?11">
<link rel="stylesheet" href="./css/constants.css?12">
<link rel="stylesheet" href="./css/loader.css?12">
<link rel="stylesheet" href="./css/dns.css?12">
<link rel="stylesheet" href="./css/flip-clock.css?12">
<link rel="stylesheet" href="./css/my-domains.css?12">
<script type="text/javascript" src="src/state.js?12"></script>
<script type="text/javascript" src="src/controllers/themeController.js?12"></script>
<script type="text/javascript" src="src/controllers/flipTimerController.js?12"></script>
<script type="text/javascript" src="./src/utils.js?12"></script>
<script type="text/javascript" src="./src/libs/preloadImages.js?12">
preloadImages([
'/assets/logo.svg',
'/assets/dns_logo.svg',
Expand Down Expand Up @@ -122,7 +122,7 @@
</nav>

<div id="startScreen" class="start animate">
<h1 data-locale="open_auction">Buy .ton domains</h1>
<h1 data-locale="open_auction">Get .ton domains</h1>
<p>
<span data-locale="start_splash">Give crypto wallets, smart contracts or websites short readable names.</span>
<a class="arrow__link" href="/about.html" target="_blank" data-locale="more_info">
Expand Down Expand Up @@ -768,23 +768,23 @@ <h1 data-locale="open_auction">Buy .ton domains</h1>
</div>
<script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>
<script src="https://unpkg.com/@tonconnect/sdk@latest/dist/tonconnect-sdk.min.js"></script>
<script type="text/javascript" src="./src/libs/tonweb-0.0.59.js?11"></script>
<script type="text/javascript" src="./src/libs/jquery.min-3.4.1.js?11"></script>
<script type="text/javascript" src="./src/libs/lottie-player-1.6.2.js?11"></script>
<script type="text/javascript" src="./src/libs/qr-code-styling-1.5.0.js?11"></script>
<script type="text/javascript" src='./src/libs/bignumbers.js?11'></script>
<script type="text/javascript" src="./src/analytics.js?11"></script>
<script type="text/javascript" src="./src/controllers/localeController.js?11"></script>
<script type="text/javascript" src="./src/libs/flip-clock.js?11"></script>
<script type="text/javascript" src="./src/lottie.js?11"></script>
<script type="text/javascript" src="./src/mobile-menu.js?11"></script>
<script type="text/javascript" src="./src/libs/mask.js?11"></script>
<script type="text/javascript" src="./src/config/wallets.js?11"></script>
<script type="text/javascript" src="./src/controllers/walletController.js?11"></script>
<script type="text/javascript" src="./src/controllers/testnetController.js?11"></script>
<script type="text/javascript" src="./src/views/myDomainsView.js?11"></script>
<script type="text/javascript" src="./src/controllers/myDomainsController.js?11"></script>
<script type="text/javascript" src="./src/constants.js?11"></script>
<script type="text/javascript" src="./src/index.js?11"></script>
<script type="text/javascript" src="./src/libs/tonweb-0.0.59.js?12"></script>
<script type="text/javascript" src="./src/libs/jquery.min-3.4.1.js?12"></script>
<script type="text/javascript" src="./src/libs/lottie-player-1.6.2.js?12"></script>
<script type="text/javascript" src="./src/libs/qr-code-styling-1.5.0.js?12"></script>
<script type="text/javascript" src='./src/libs/bignumbers.js?12'></script>
<script type="text/javascript" src="./src/analytics.js?12"></script>
<script type="text/javascript" src="./src/controllers/localeController.js?12"></script>
<script type="text/javascript" src="./src/libs/flip-clock.js?12"></script>
<script type="text/javascript" src="./src/lottie.js?12"></script>
<script type="text/javascript" src="./src/mobile-menu.js?12"></script>
<script type="text/javascript" src="./src/libs/mask.js?12"></script>
<script type="text/javascript" src="./src/config/wallets.js?12"></script>
<script type="text/javascript" src="./src/controllers/walletController.js?12"></script>
<script type="text/javascript" src="./src/controllers/testnetController.js?12"></script>
<script type="text/javascript" src="./src/views/myDomainsView.js?12"></script>
<script type="text/javascript" src="./src/controllers/myDomainsController.js?12"></script>
<script type="text/javascript" src="./src/constants.js?12"></script>
<script type="text/javascript" src="./src/index.js?12"></script>
</body>
</html>
54 changes: 8 additions & 46 deletions src/views/myDomainsView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,19 +36,9 @@ class MyDomainsView {


// --- UTILITY REDNER METHODS ---
let tonToUsdtRatio = 1;
const fetchTonToUsdtRatio = (async () => {
try {
const coinPrice = await getCoinPrice();
tonToUsdtRatio = coinPrice;
} catch (e) {
console.error(e.message);
}
})();

const assembleRowData = (item) => {
const domainName = item.name;
const salePricePromise = getSalePrice(domainName); // new Promise((r) => r(100));
const salePricePromise = getSalePrice(domainName); // new Promise((r) => setTimeout(() => r(1234567), 5000))
const expiryDate = new Date(item.expiring_at * 1000);

return { domainName, salePricePromise, expiryDate };
Expand All @@ -63,58 +53,30 @@ const buildDomainCell = (cell, domain) => {
cell.appendChild(domainCellDiv);
}

const loadingPricePlaceholder = isMobile() ? 123 : 12345;
const buildSalePriceCell = (cell, salePricePromise) => {
cell.classList.add('my-domains-table-cell');

const priceCellDiv = document.createElement('div');
priceCellDiv.classList.add('my-domains-cell-container');

// --- first row in the cell
const firstRow = document.createElement('div');
firstRow.classList.add('my-domains-cell-price-row');
priceCellDiv.appendChild(firstRow);
const priceCellDiv = document.createElement('div');
priceCellDiv.classList.add('my-domains-cell-price-container');

const spanPriceInTON = document.createElement('span');
spanPriceInTON.classList.add('my-domains-cell-price-loading');
spanPriceInTON.classList.add('my-domains-cell-price-title-loading');
spanPriceInTON.innerHTML = '&nbsp;';
firstRow.appendChild(spanPriceInTON);
spanPriceInTON.innerHTML = '&nbsp;' + formatNumber(loadingPricePlaceholder, 2);
priceCellDiv.appendChild(spanPriceInTON);

const tonLogoSpan = document.createElement('span');
tonLogoSpan.classList.add('my-domains-cell-price-ton-logo');
firstRow.insertBefore(tonLogoSpan, spanPriceInTON);
// ---

// --- second row in the cell
const secondRow = document.createElement('div');
secondRow.classList.add('my-domains-cell-price-row');
priceCellDiv.appendChild(secondRow);

const spanPriceInUSDT = document.createElement('span');
spanPriceInUSDT.classList.add('my-domains-cell-price-loading');
spanPriceInUSDT.classList.add('my-domains-cell-price-caption-loading');
spanPriceInUSDT.innerText = '&nbsp;';
secondRow.appendChild(spanPriceInUSDT);

const dollarSignSpan = document.createElement('span');
dollarSignSpan.classList.add('my-domains-cell-price-caption');
dollarSignSpan.innerText = '≈ $';
secondRow.insertBefore(dollarSignSpan, spanPriceInUSDT);
priceCellDiv.insertBefore(tonLogoSpan, spanPriceInTON);
// ---

cell.appendChild(priceCellDiv);

salePricePromise.then((priceInTON) => {
spanPriceInTON.classList.remove('my-domains-cell-price-loading');
spanPriceInTON.classList.remove('my-domains-cell-price-title-loading');
spanPriceInTON.classList.add('my-domains-cell-price-title');
spanPriceInTON.classList.add('my-domains-cell-price');
spanPriceInTON.innerHTML = '&nbsp;' + formatNumber(priceInTON, 2);

const priceInUSDT = priceInTON * tonToUsdtRatio;
spanPriceInUSDT.classList.remove('my-domains-cell-price-loading');
spanPriceInUSDT.classList.remove('my-domains-cell-price-caption-loading');
spanPriceInUSDT.classList.add('my-domains-cell-price-caption');
spanPriceInUSDT.innerText = formatNumber(priceInUSDT, 2);
});
}

Expand Down

0 comments on commit de9743b

Please sign in to comment.