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.

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 Welcome component #836

Merged
merged 20 commits into from
Nov 13, 2024
Merged

Add Welcome component #836

merged 20 commits into from
Nov 13, 2024

Conversation

r-czajkowski
Copy link
Contributor

@r-czajkowski r-czajkowski commented Nov 8, 2024

Closes: #824
Closes: AENG-1

This PR adds a Welcome component based on the Figma views. Here we are also updating how we display modal in the correct order - we use react router loaders to display modals in the correct order. We want to display the welcome component after the access code modal in a standalone app and before the wallet connection in embedded apps.

Screenshots obraz obraz obraz

Copy link

netlify bot commented Nov 8, 2024

Deploy Preview for acre-dapp-testnet ready!

Name Link
🔨 Latest commit 6b30218
🔍 Latest deploy log https://app.netlify.com/sites/acre-dapp-testnet/deploys/67349e1f4a39f10008ea85b5
😎 Deploy Preview https://deploy-preview-836--acre-dapp-testnet.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Nov 8, 2024

Deploy Preview for acre-dapp ready!

Name Link
🔨 Latest commit 6b30218
🔍 Latest deploy log https://app.netlify.com/sites/acre-dapp/deploys/67349e1f19f7980008f9b936
😎 Deploy Preview https://deploy-preview-836--acre-dapp.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@nkuba nkuba added this to the Ledger Live Launch milestone Nov 8, 2024
Copy link
Contributor

@kpyszkowski kpyszkowski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left review. Overall looks good. Please use style props shorthands (eg. w instead of width) and style tokens (eg. 2.5 instead of "10px") if possible (indicated below).

dapp/src/theme/utils/colors.ts Outdated Show resolved Hide resolved
dapp/src/components/WelcomeModal/index.tsx Outdated Show resolved Hide resolved
dapp/src/components/WelcomeModal/index.tsx Outdated Show resolved Hide resolved
dapp/src/components/WelcomeModal/index.tsx Outdated Show resolved Hide resolved
dapp/src/components/WelcomeModal/index.tsx Outdated Show resolved Hide resolved
dapp/src/components/WelcomeModal/index.tsx Outdated Show resolved Hide resolved
dapp/src/components/WelcomeModal/index.tsx Outdated Show resolved Hide resolved
dapp/src/components/WelcomeModal/index.tsx Outdated Show resolved Hide resolved
dapp/src/components/WelcomeModal/index.tsx Outdated Show resolved Hide resolved
dapp/src/components/WelcomeModal/index.tsx Outdated Show resolved Hide resolved
dapp/src/components/WelcomeModal/index.tsx Outdated Show resolved Hide resolved
dapp/src/components/ModalRoot/withBaseModal.tsx Outdated Show resolved Hide resolved
dapp/src/components/WelcomeModal/index.tsx Outdated Show resolved Hide resolved
r-czajkowski and others added 8 commits November 8, 2024 16:54
Use react router loaders to display modals in correct order. We want to
display welcome modal after access code modal in standalone app and
before wallet connection in embedded apps.
To emphasize the fragment of text.
Remove border based on the Figma views - now none of the modals have a
border.
Pull up the `WelcomeModal/index.ts` file one level higher - keep the
component code in `src/components/WelcomeModal.tsx` file.
@r-czajkowski r-czajkowski marked this pull request as ready for review November 12, 2024 08:26
Set correct border radius for the video box. We should make rounded
corners only on the right side to fit the modal dialog.
Copy link
Contributor

@kpyszkowski kpyszkowski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🔥

Copy link
Contributor

@kkosiorowska kkosiorowska left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works great 🚀 I left some minor comments.

dapp/src/components/WelcomeModal.tsx Outdated Show resolved Hide resolved
Comment on lines +131 to +135
// Cast to fix eslint error: `unbound-method`.
const { activeStep, goToNext } = useSteps({
index: 0,
count: steps.length,
}) as UseStepsReturn & { goToNext: () => void }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably update the Chakra package, see here. But let's leave it as it is for now.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah. But it's not a good time to update main packages just before the release.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add it to our backlog.

dapp/src/hooks/useInitApp.ts Show resolved Hide resolved
dapp/src/theme/Modal.ts Show resolved Hide resolved
dapp/src/router/utils.ts Outdated Show resolved Hide resolved
dapp/src/pages/AccessPage/loader.ts Outdated Show resolved Hide resolved
Remove no longer needed border styles. We do not want to display border
for the modal component.
We already have a file for router utils. Let's keep everything in one
file.
There is no need to send the request to acre api to verify access code
if the access code from local storage is `undefined` - it means the
access code is invalid and we can skip the validation.
In some cases we render different content layouts etc depnding on
whether it is an embedded or standalone application. Here we introduce
the `DappMode` type to simplify code and organize the dapp modes.
kkosiorowska
kkosiorowska previously approved these changes Nov 13, 2024
Copy link
Contributor

@kkosiorowska kkosiorowska left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🚀

@kkosiorowska kkosiorowska dismissed kpyszkowski’s stale review November 13, 2024 10:14

The requests have been implemented.

@kkosiorowska kkosiorowska merged commit 012e981 into main Nov 13, 2024
28 checks passed
@kkosiorowska kkosiorowska deleted the welcome-component branch November 13, 2024 12:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement Welcome component
4 participants