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

feat: web monetization welcome screen #462

Merged
merged 12 commits into from
Jul 30, 2024
Merged

feat: web monetization welcome screen #462

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
9be53a8
First version - welcome screen
raducristianpopa Jul 22, 2024
4d8f4c9
Update error messages
raducristianpopa Jul 23, 2024
7648581
Format
raducristianpopa Jul 23, 2024
21ca8da
Update error messages interface
raducristianpopa Jul 23, 2024
4af5e5c
Refactor and better formatting
raducristianpopa Jul 23, 2024
e1164f6
Move SVGs to `img` folder and update paths
raducristianpopa Jul 23, 2024
7dfa981
Address feedback
raducristianpopa Jul 24, 2024
d930279
Add intent
raducristianpopa Jul 24, 2024
ba2c565
Update messages (intent: funds)
raducristianpopa Jul 26, 2024
397dab7
Add todo item
raducristianpopa Jul 26, 2024
d7a7a26
Update leftover message
raducristianpopa Jul 26, 2024
36f0358
Do not hide WM Logo and resize it; remove capitalize function
raducristianpopa Jul 30, 2024
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
35 changes: 24 additions & 11 deletions src/pages/welcome.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,7 @@ changeLanguage('en')
</li>
<li class='nav-link__github'>
<a href='https://github.com/WICG/webmonetization/'>
<img
src='/img/icon-github.svg'
alt='Link to Github repository'
/>
<img src='/img/icon-github.svg' alt='Link to Github repository' />
</a>
</li>
</ul>
Expand All @@ -89,6 +86,8 @@ changeLanguage('en')
<section class='hero'>
<div class='heroContent'>
<img
width={160}
height={160}
alt='Loading'
class='heroLogo'
src='/img/wm-logo--animated.svg'
Expand Down Expand Up @@ -277,6 +276,10 @@ changeLanguage('en')
text-align: center;
}

.heroContent img {
display: none;
}

raducristianpopa marked this conversation as resolved.
Show resolved Hide resolved
.heroLogo {
max-width: 10em;
raducristianpopa marked this conversation as resolved.
Show resolved Hide resolved
margin-block-end: var(--space-s);
Expand Down Expand Up @@ -381,7 +384,7 @@ changeLanguage('en')
}

const DEFAULT_ERROR_MESSAGE = 'Something went wrong. Please try reconnecting your wallet.'
const CLOSE_TAB_MESSAGE = 'You can now close this tab.'
const CLOSE_TAB_MESSAGE = 'You may safely close this tab.'

/**
* Includes versioning for future proof if needed.
Expand All @@ -392,7 +395,7 @@ changeLanguage('en')
},
hash_failed(_version: string): string {
return 'An error occurred. Please try reconnecting the wallet.'
}
},
}
type ErrorCode = keyof typeof ERROR_MESSAGES

Expand All @@ -405,19 +408,29 @@ changeLanguage('en')
const errorCode = searchParams.get('errorCode') as ErrorCode
const version = searchParams.get('version') ?? 'default'

function capitalize(str: string) {
return str.charAt(0).toUpperCase() + str.slice(1)
}

function updateImage(type: 'success' | 'error' | 'warning') {
heroLogo.src = `/img/${type}.svg`
heroLogo.style.display = 'inline-block'
raducristianpopa marked this conversation as resolved.
Show resolved Hide resolved
heroLogo.alt = capitalize(type)
raducristianpopa marked this conversation as resolved.
Show resolved Hide resolved
}

switch (result) {
case SuccessParam.SUCCESS:
heroLogo.src = '/img/success.svg'
updateImage('success')
heroInfo.textContent = CLOSE_TAB_MESSAGE
heroHeading.textContent = 'Your wallet was successfully connected to the extension.'
heroHeading.textContent = 'Your wallet is now successfully connected to the extension.'
break
case SuccessParam.REJECTED:
heroLogo.src = '/img/warning.svg'
updateImage('warning')
heroInfo.textContent = CLOSE_TAB_MESSAGE
heroHeading.textContent = 'Your request was successfully rejected.'
break
case SuccessParam.ERROR:
heroLogo.src = '/img/error.svg'
updateImage('error')
heroInfo.textContent = CLOSE_TAB_MESSAGE
heroHeading.textContent = 'Something went wrong. Please try again.'
if (errorCode in ERROR_MESSAGES) {
Expand All @@ -427,7 +440,7 @@ changeLanguage('en')
}
break
case SuccessParam.INVALID:
heroLogo.src = '/img/error.svg'
updateImage('error')
heroInfo.textContent = CLOSE_TAB_MESSAGE
heroHeading.textContent = 'Something went wrong with your request. Please try reconnecting your wallet.'
break
Expand Down
Loading