Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Install wallet screen #197

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add Install wallet screen #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e569d7c
feat: install wallet screen
GVatest Dec 7, 2023
cbc4fc4
refactor: move install page to ton-connect.html, add it to gulp stream
GVatest Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion build/gulp/html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const { BUILD_DESTS } = require('./config');
const { version } = require('../../package.json');

const html = buildDest => {
let stream = src('src/index.html').pipe(replace('{{VERSION}}', version));
let stream = src('src/index.html').pipe(replace('{{VERSION}}', version)).pipe(src('src/ton-connect.html'));

// For extensions add body class and remove Controller.js including
if (buildDest !== BUILD_DESTS.WEB) {
Expand Down
Binary file added docs/assets/fonts/Inter/Inter-400.woff2
View file
Open in desktop
Binary file not shown.
Binary file added docs/assets/fonts/Inter/Inter-500.woff2
View file
Open in desktop
Binary file not shown.
Binary file added docs/assets/fonts/Inter/Inter-600.woff2
View file
Open in desktop
Binary file not shown.
Binary file added docs/assets/fonts/Inter/Inter-700.woff2
View file
Open in desktop
Binary file not shown.
206 changes: 206 additions & 0 deletions docs/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,43 @@
font-display: block;
}

/* Inter Regular */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../assets/fonts/Inter/Inter-400.woff2") format("woff2");
}

/* Inter Medium */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: block;
src: url("../assets/fonts/Inter/Inter-500.woff2") format("woff2");
}

/* Inter Semi Bold */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: block;
src: url("../assets/fonts/Inter/Inter-600.woff2") format("woff2");
}

/* Inter Bold */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: block;
src: url("../assets/fonts/Inter/Inter-700.woff2") format("woff2");
}


html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
Expand Down Expand Up @@ -1272,4 +1309,173 @@ button {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

#install .middle {
font-family: "Inter", -apple-system, BlinkMacSystemFont,
Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
background-color: #EFEFF3;
}

#install .container {
width: 100%;
max-width: 544px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}

#install .screen-title {
max-width: 350px;
color: #000;
font-size: 28px;
font-weight: 600;
line-height: 40px;
letter-spacing: -0.07px;

text-align: center;
margin-bottom: 8px;
}

#install #start_createBtn, #install #start_importBtn {
display: none;
}

#install .widget {
width: 100%;

display: flex;
padding: 26px 32px 32px;
flex-direction: column;
align-items: flex-start;

border-radius: 32px;
background: #FFF;
}

#install .widget-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;

margin-bottom: 24px;
}

#install .widget-title {
color: #000;
font-size: 24px;
font-weight: 600;
line-height: 30px;
letter-spacing: -0.046px;

margin-bottom: 6px;
}

#install .widget-subtitle {
color: #728A96;
font-size: 18px;
font-weight: 400;
line-height: 28px;
letter-spacing: -0.025px;

margin-bottom: 24px;
}

#install .widget-subtitle.shortened {
max-width: 300px;
}

#install .widget-button-link {
width: 100%;
-webkit-tap-highlight-color: transparent;
text-decoration: none;
}

#install .widget-button-link:focus {
border-radius: 12px;
outline: solid #32AAFE 1px;
}

#install .widget-button {
width: 100%;

display: flex;
padding: 12px 24px;
justify-content: center;
align-items: center;

border-radius: 12px;
background: #32AAFE;
transition: opacity 0.2s linear;

color:#FFF;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: -0.018px;

outline: none;
border: none;
}

#install .widget-button:hover {
opacity: 0.9;
}

@media (max-width: 734px) {
#install .middle {
justify-content: flex-start;
padding: 16px;
}

#install .container {
gap: 8px;
}

#install .screen-title {
max-width: 320px;
font-size: 22px;
font-weight: 600;
line-height: 28px;
letter-spacing: -0.031px;
margin-bottom: 16px;
}

#install .widget {
border-radius: 24px;
padding: 18px 24px 24px 24px;
}

#install .widget-icon {
width: 48px;
height: 48px;

margin-bottom: 16px;
}

#install .widget-title {
font-size: 20px;
font-weight: 600;
line-height: 26px;
letter-spacing: -0.038px;
}

#install .widget-subtitle {
font-size: 16px;
line-height: 24px;
letter-spacing: -0.018px;
}

#install .widget-button {
border-radius: 12px;

padding: 8px 24px;

font-size: 14px;
line-height: 24px;
letter-spacing: -0.008px;
}
}
139 changes: 139 additions & 0 deletions docs/ton-connect.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en" translate="no">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy"
content="default-src 'none'; script-src 'self'; style-src 'self'; font-src 'self'; img-src 'self' data: https://nft.ton.diamonds/; manifest-src 'self'; connect-src 'self' https://toncenter.com/api/v2/jsonRPC https://testnet.toncenter.com/api/v2/jsonRPC https://ton.diamonds/api/wallet/diamond_nfts">
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover">

<title>TON Wallet</title>

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="google" content="notranslate">

<meta name="description" content="Set up your own TON Wallet on The Open Network">
<meta name="image" content="assets/favicon/512x512.png">

<meta itemprop="name" content="TON Wallet">
<meta itemprop="description" content="Set up your own TON Wallet on The Open Network">
<meta itemprop="image" content="assets/favicon/512x512.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="TON Wallet">
<meta name="twitter:description" content="Set up your own TON Wallet on The Open Network">
<meta name="og:title" content="TON Wallet">
<meta name="og:description" content="Set up your own TON Wallet on The Open Network">
<meta name="og:type" content="website">

<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/favicon/192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/favicon/site.webmanifest">
<link rel="mask-icon" href="assets/favicon/safari-pinned-tab.svg" color="#0088cc">
<link rel="shortcut icon" href="assets/favicon/favicon.ico">
<meta name="apple-mobile-web-app-title" content="TON Wallet">
<meta name="application-name" content="TON Wallet">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="assets/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

<link rel="stylesheet" href="main.css?v=1.1.47">
</head>
<body>
<div id="install" class="screen">
<div class="middle">
<div class="container">
<div class="screen-title">
How to sign in to services with TON Wallet
</div>

<div class="widget">
<div class="widget-icon">
<svg
viewBox="0 0 56 56"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M39.1352 11.6667H16.8648C13.2991 11.6667 11.9766 11.9637 10.6651 12.6651C9.51547 13.2799 8.61325 14.1821 7.99843 15.3317C7.29704 16.6432 7 17.9658 7 21.5315V34.4685C7 38.0342 7.29704 39.3568 7.99843 40.6683C8.61325 41.8179 9.51547 42.7201 10.6651 43.3349C11.9766 44.0363 13.2991 44.3333 16.8648 44.3333H39.1352C42.7009 44.3333 44.0234 44.0363 45.3349 43.3349C46.4845 42.7201 47.3868 41.8179 48.0016 40.6683C48.703 39.3568 49 38.0342 49 34.4685V21.5315C49 17.9658 48.703 16.6432 48.0016 15.3317C47.3868 14.1821 46.4845 13.2799 45.3349 12.6651C44.0234 11.9637 42.7009 11.6667 39.1352 11.6667Z"
stroke="#32AAFE"
stroke-width="3.5"
/>
<path
d="M43.0033 28H49V35H43.0033C42.1184 35 41.2697 34.6313 40.644 33.9749C40.0182 33.3185 39.6667 32.4283 39.6667 31.5V31.5C39.6667 30.5717 40.0182 29.6815 40.644 29.0251C41.2697 28.3687 42.1184 28 43.0033 28V28Z"
stroke="#32AAFE"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M14 18.6667H20.5567"
stroke="#32AAFE"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="widget-title">
Install TON Wallet<br />and log in to your wallet
</div>
<div class="widget-subtitle">
Create a new wallet or import an existing one.
</div>
<a
class="widget-button-link"
target="_blank"
href="https://play.google.com/store/apps/details?id=org.ton.wallet"
>
<button class="widget-button">Google Play Store</button>
</a>
</div>

<div class="widget">
<div class="widget-icon">
<svg
viewBox="0 0 56 56"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 21L29.5829 28L21 35"
stroke="#32AAFE"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M28 28H9.33331"
stroke="#32AAFE"
stroke-width="3.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M28 9.33334H36.8019C40.3676 9.33334 41.6901 9.63037 43.0016 10.3318C44.1512 10.9466 45.0534 11.8488 45.6682 12.9984C46.3696 14.3099 46.6667 15.6324 46.6667 19.1981V36.8019C46.6667 40.3676 46.3696 41.6901 45.6682 43.0016C45.0534 44.1512 44.1512 45.0534 43.0016 45.6682C41.6901 46.3696 40.3676 46.6667 36.8019 46.6667H28"
stroke="#32AAFE"
stroke-width="3.5"
stroke-linecap="round"
/>
</svg>
</div>
<div class="widget-title">Sign in with TON Wallet</div>
<div class="widget-subtitle shortened">
Click the button below or log in through the service page.
</div>
<a class="widget-button-link" href="#">
<button class="widget-button">Sign in with TON Wallet</button>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Loading