Skip to content
This repository was archived by the owner on Sep 27, 2023. It is now read-only.

Commit aa0ffc6

Browse files
paouvrardpaouvrard
committed
feat: add faucet claim designed modals
1 parent a4b02ee commit aa0ffc6

15 files changed

+257
-118
lines changed

‎src/css/modal.css

+4-10
Original file line numberDiff line numberDiff line change
@@ -88,10 +88,8 @@
8888
font-size: var(--fs-small);
8989
line-height: var(--lh-copy);
9090
text-align: center;
91-
}
92-
93-
.modal__cta {
94-
margin: var(--spacing-l) 0 var(--spacing-xl);
91+
padding: 0 var(--spacing-xxl);
92+
margin: var(--spacing-xxl) 0;
9593
}
9694

9795
/* child must have nav element with one close button within */
@@ -101,12 +99,8 @@
10199
}
102100

103101
.modal__nav__button--close {
104-
background-color: transparent;
105-
display: flex;
106-
align-items: center;
107-
justify-content: center;
108-
padding: var(--spacing-s);
109-
height: auto;
102+
background: url(../img/cross.svg);
103+
background-size: 100% 100%;
110104
}
111105

112106
.modal__nav__button--close:hover,

‎src/html/claim-ready-modal.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div class="modal__container">
2+
<nav class="modal__nav">
3+
<button
4+
type="button"
5+
class="modal__nav__button--close"
6+
data-behavior="closeModal"
7+
>
8+
<span class="visually-hidden">close</span>
9+
</button>
10+
</nav>
11+
<div class="modal-image__container">
12+
<img src="img/gift-near.svg" alt="" class="modal__image" />
13+
</div>
14+
<h1 class="modal__heading">Your account is ready to claim!</h1>
15+
<p class="modal__message">
16+
Continue to NEAR Wallet to claim you NEAR account.
17+
</p>
18+
<button data-behavior="claimNEARAccount" class="full-width">
19+
Claim your NEAR Account
20+
</button>
21+
</div>

‎src/html/erc20-form.html

-22
Original file line numberDiff line numberDiff line change
@@ -91,28 +91,6 @@ <h2>New Transfer</h2>
9191
class="modal__nav__button--close"
9292
data-behavior="closeModal"
9393
>
94-
<svg
95-
width="24"
96-
height="24"
97-
viewBox="0 0 24 24"
98-
fill="none"
99-
xmlns="http://www.w3.org/2000/svg"
100-
>
101-
<path
102-
d="M18 6L6 18"
103-
stroke="#A2A2A8"
104-
stroke-width="2"
105-
stroke-linecap="round"
106-
stroke-linejoin="round"
107-
/>
108-
<path
109-
d="M6 6L18 18"
110-
stroke="#A2A2A8"
111-
stroke-width="2"
112-
stroke-linecap="round"
113-
stroke-linejoin="round"
114-
/>
115-
</svg>
11694
<span class="visually-hidden">close</span>
11795
</button>
11896
</nav>

‎src/html/erc20n-form.html

-22
Original file line numberDiff line numberDiff line change
@@ -80,28 +80,6 @@ <h2>New Transfer</h2>
8080
class="modal__nav__button--close"
8181
data-behavior="closeModal"
8282
>
83-
<svg
84-
width="24"
85-
height="24"
86-
viewBox="0 0 24 24"
87-
fill="none"
88-
xmlns="http://www.w3.org/2000/svg"
89-
>
90-
<path
91-
d="M18 6L6 18"
92-
stroke="#A2A2A8"
93-
stroke-width="2"
94-
stroke-linecap="round"
95-
stroke-linejoin="round"
96-
/>
97-
<path
98-
d="M6 6L18 18"
99-
stroke="#A2A2A8"
100-
stroke-width="2"
101-
stroke-linecap="round"
102-
stroke-linejoin="round"
103-
/>
104-
</svg>
10583
<span class="visually-hidden">close</span>
10684
</button>
10785
</nav>

‎src/html/incorrect-network-modal.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ <h1 class="modal__heading">Incorrect Wallet Network</h1>
1111
<div data-behavior="modalMessage" class="modal__message"></div>
1212
<p class="modal__cta">Change your active wallet network to proceed.</p>
1313
<button
14-
class="button-variant--secondary button-size--small"
14+
class="button-variant--secondary button-size--small full-width"
1515
data-behavior="switchEthWallet"
1616
>
1717
Switch wallet

‎src/html/landing.html

+117-53
Original file line numberDiff line numberDiff line change
@@ -43,59 +43,87 @@ <h1 class="logo--landing-page">
4343
style="cursor: pointer"
4444
>here</a>.
4545
</p>
46-
<div data-behavior="claimModal" class="modal" style="display: none">
46+
<div data-behavior="claimVerification" class="modal" style="display: none">
4747
<div class="modal__container">
4848
<nav class="modal__nav">
4949
<button
5050
type="button"
5151
class="modal__nav__button--close"
5252
data-behavior="closeModal"
5353
>
54-
<svg
55-
width="24"
56-
height="24"
57-
viewBox="0 0 24 24"
58-
fill="none"
59-
xmlns="http://www.w3.org/2000/svg"
60-
>
61-
<path
62-
d="M18 6L6 18"
63-
stroke="#A2A2A8"
64-
stroke-width="2"
65-
stroke-linecap="round"
66-
stroke-linejoin="round"
67-
/>
68-
<path
69-
d="M6 6L18 18"
70-
stroke="#A2A2A8"
71-
stroke-width="2"
72-
stroke-linecap="round"
73-
stroke-linejoin="round"
74-
/>
75-
</svg>
7654
<span class="visually-hidden">close</span>
7755
</button>
7856
</nav>
79-
<h1 class="modal__heading">Claim your NEAR account</h1>
80-
<p class="modal__message">
81-
Create a free NEAR account by showing that you have at least 0.05 ETH.
82-
Learn more about the Paras Faucet
83-
<a
84-
target="_blank"
85-
rel="noopener noreferrer"
86-
href="https://faucet.paras.id/"
87-
>here</a
88-
>.
89-
</p>
90-
<p data-behavior="claimMessage"></p>
91-
<div class="">
92-
<button data-behavior="authEthereum" class="full-width">
93-
Connect Ethereum Wallet
57+
<div data-behavior="enoughETH">
58+
<div class="modal-image__container">
59+
<img src="img/gift.svg" alt="" class="modal__image"/>
60+
</div>
61+
<h1 class="modal__heading">Claim Your NEAR Account</h1>
62+
<p class="modal__message">
63+
Ethereum holders may create a NEAR account using the
64+
<a target="_blank" rel="noopener noreferrer" href="https://faucet.paras.id/">Paras Faucet</a>.
65+
Connect your Ethereum wallet to get started.
66+
</p>
67+
</div>
68+
<div data-behavior="notEnoughETH" style="display: none">
69+
<div class="modal-image__container">
70+
<img src="img/empty-wallet.svg" alt="" class="modal__image"/>
71+
</div>
72+
<h1 class="modal__heading">Insufficient funds to claim account</h1>
73+
<p class="modal__message">
74+
Your Ethereum wallet must have a balance of at least 0.05 ETH as proof of liquidity in order to claim your account.
75+
</p>
76+
</div>
77+
<div class="authenticated-account__details space_around">
78+
<img src="img/ethereum.svg" alt="" class="network-indicator network--ethereum"/>
79+
<div data-behavior="ethAccountPlaceholder">Ethereum</div>
80+
<button
81+
type="button"
82+
class="button-size--small"
83+
id="authEthereum"
84+
data-behavior="authEthereum"
85+
>
86+
Connect
9487
</button>
95-
<button data-behavior="claimNearAccount" class="full-width">
96-
Claim NEAR Account
88+
<button
89+
class="button-size--small button-variant--secondary"
90+
data-behavior="disconnectEthereum"
91+
style="display: none"
92+
type="button"
93+
>
94+
Disconnect
95+
</button>
96+
</div>
97+
<button data-behavior="verifyEthAddress" class="full-width">
98+
Verify & Continue
99+
</button>
100+
</div>
101+
</div>
102+
<div data-behavior="claimSignature" class="modal" style="display: none">
103+
<include src="sign-message-modal.html"></include>
104+
</div>
105+
<div data-behavior="claimReady" class="modal" style="display: none">
106+
<include src="claim-ready-modal.html"></include>
107+
</div>
108+
<div data-behavior="claimError" class="modal" style="display: none">
109+
<div class="modal__container">
110+
<nav class="modal__nav">
111+
<button
112+
type="button"
113+
class="modal__nav__button--close"
114+
data-behavior="closeModal"
115+
>
116+
<span class="visually-hidden">close</span>
97117
</button>
118+
</nav>
119+
<div class="modal-image__container">
120+
<img src="img/warning.svg" alt="" class="modal__image" />
98121
</div>
122+
<h1 class="modal__heading">Oops! Something went wrong</h1>
123+
<p class="modal__message" data-behavior="claimErrorMessage"></p>
124+
<button data-behavior="openClaimModal" class="full-width">
125+
Return
126+
</button>
99127
</div>
100128
</div>
101129
</div>
@@ -154,36 +182,72 @@ <h1 class="modal__heading">Claim your NEAR account</h1>
154182
font-weight: var(--fw-regular);
155183
margin-top: 0.5em;
156184
}
185+
.space_around {
186+
margin: var(--spacing-xxl) 0;
187+
}
157188
</style>
158189
<script>
159-
window.addEventListener("load", function addClaimHandler() {
190+
window.addEventListener("load", function addLoginParasFaucetHandler () {
191+
const verifyButton = window.dom.find("verifyEthAddress");
192+
const claimButton = window.dom.find("claimNEARAccount");
160193
window.dom.onClick('openClaimModal', function renderClaimModal () {
161194
if (process.env.ethNetworkId !== 'main') {
162195
window.location.href = 'https://wallet.testnet.near.org/'
163196
return
164197
}
165-
window.dom.fill('claimMessage').with('')
198+
window.dom.hide("claimError")
199+
window.dom.show("enoughETH")
200+
window.dom.hide("notEnoughETH")
201+
verifyButton.disabled = false
166202
if (!window.ethInitialized) {
167-
window.dom.hide("claimNearAccount")
203+
verifyButton.disabled = true
168204
}
169-
window.dom.show("claimModal")
205+
window.dom.show("claimVerification")
170206
})
171207

172-
const claimButton = window.dom.find("claimNearAccount");
173-
claimButton.onclick = async () => {
174-
window.dom.fill('claimMessage').with('To claim, please sign the message when prompted on your Ethereum wallet...');
208+
verifyButton.onclick = async () => {
175209
try{
176-
claimButton.disabled = true
177-
await window.faucetUtils.claim()
210+
await window.faucetUtils.checkETHBalance()
178211
} catch(error) {
179-
window.dom.fill('claimMessage').with(error.message)
180-
claimButton.disabled = false
212+
console.error(error.message)
213+
window.dom.hide("enoughETH")
214+
window.dom.show("notEnoughETH")
215+
verifyButton.disabled = true
216+
return
217+
}
218+
window.dom.hide("claimVerification")
219+
window.dom.show("claimSignature")
220+
try{
221+
await window.faucetUtils.parasFaucetLogin()
222+
} catch(error) {
223+
console.log(error.message)
224+
window.dom.fill('claimErrorMessage').with(error.message);
225+
window.dom.hide("claimSignature")
226+
window.dom.show("claimError")
227+
return
228+
}
229+
window.dom.hide("claimSignature")
230+
window.dom.show("claimReady")
231+
}
232+
233+
claimButton.onclick = async () => {
234+
window.dom.fill('claimErrorMessage').with("");
235+
let claimURL
236+
try {
237+
claimURL = await window.faucetUtils.getClaimURL()
238+
} catch(error) {
239+
console.error(error.message)
240+
window.dom.fill('claimErrorMessage').with(error.message);
241+
window.dom.hide("claimReady")
242+
window.dom.show("claimError")
243+
return
181244
}
245+
window.location.href = claimURL
182246
}
183247
})
184248

185-
async function renderLanding() {
186-
if (window.ethInitialized) { window.dom.show("claimNearAccount") }
249+
async function renderLanding () {
250+
if (window.ethInitialized) {window.dom.find("verifyEthAddress").disabled = false}
187251
if (window.ethInitialized && window.nearInitialized) {
188252
window.dom.find("landingSubmit").disabled = false;
189253
} else {

‎src/html/sign-message-modal.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div class="modal__container">
2+
<nav class="modal__nav">
3+
<button
4+
type="button"
5+
class="modal__nav__button--close"
6+
data-behavior="closeModal"
7+
>
8+
<span class="visually-hidden">close</span>
9+
</button>
10+
</nav>
11+
<div class="modal-image__container">
12+
<img src="img/eth-wallet-sig.svg" alt="" class="modal__image" />
13+
</div>
14+
<h1 class="modal__heading">Complete Signature Request</h1>
15+
<p class="modal__message">
16+
Please complete the signature request in your Ethereum wallet to proceed.
17+
</p>
18+
</div>

‎src/img/cross.svg

+22
Loading

‎src/img/empty-wallet.svg

+8
Loading

‎src/img/eth-wallet-sig.svg

+11
Loading

0 commit comments

Comments
 (0)