[Wallets] Responsive view for success and password modal #10871

adrienne-deriv · 2023-10-23T05:26:23Z

Changes:

Please provide a summary of the change.

Screenshots:

Added responsive view for success and password modal variants
Fixed an issue where the primary button for password is not disabled when user has not typed anything
Added base component for button grouping WalletButtonGroup

Please provide some screenshots of the change.

…-modal-responsive

vercel · 2023-10-23T05:26:28Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
deriv-app	✅ Ready (Inspect)	Visit Preview	Oct 24, 2023 6:13am

github-actions · 2023-10-23T05:27:52Z

A production App ID was automatically generated for this PR. (log)

PR: [Wallets] Responsive view for success and password modal #10871
URLs:
- w/ App ID + Server: https://deriv-app-git-fork-adrienne-deriv-success-modal-responsive.binary.sx?qa_server=red.binaryws.com&app_id=24197
- Original: https://deriv-app-git-fork-adrienne-deriv-success-modal-responsive.binary.sx
App ID: 24197

Click here to copy & paste above information.

- **PR**: [https://github.com/binary-com/deriv-app/pull/10871](https://github.com/binary-com/deriv-app/pull/10871)
- **URLs**:
    - **w/ App ID + Server**: https://deriv-app-git-fork-adrienne-deriv-success-modal-responsive.binary.sx?qa_server=red.binaryws.com&app_id=24197
    - **Original**: https://deriv-app-git-fork-adrienne-deriv-success-modal-responsive.binary.sx
- **App ID**: `24197`

github-actions · 2023-10-23T05:28:12Z

🚨 Lighthouse report for the changes in this PR:

Category	Score
🔺 Performance	15
🟧 Accessibility	75
🟢 Best practices	92
🟧 SEO	85
🟧 PWA	80

Lighthouse ran with https://deriv-app-git-fork-adrienne-deriv-success-modal-responsive.binary.sx/

adrienne-deriv · 2023-10-23T05:30:29Z

packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss

@@ -12,16 +12,18 @@
        grid-template-rows: 9% auto;

        &--fixed {
-            grid-template-rows: 9% auto 8%;
+            grid-template-rows: 7% auto 8%;


Reduced the header height

adrienne-deriv · 2023-10-23T05:32:13Z

packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.tsx

+    );
+};
+
+export default WalletButtonGroup;


Added a new base component to group buttons.

Adding isVertical option allows the button grouping to be grouped vertically:

adrienne-deriv · 2023-10-23T05:34:04Z

packages/wallets/src/features/cfd/screens/CreatePassword/CreatePassword.tsx

-            </button>
+            {!isMobile && (
+                <WalletButton
+                    disabled={!password}


Fixed an issue where the button is not disabled when user has not entered any password. In design the button was disabled when input was empty

Screen.Recording.2023-10-23.at.1.15.49.PM.mov

coveralls · 2023-10-23T05:37:11Z

coverage: 26.752%. remained the same when pulling 3c4f211 on adrienne-deriv:success-modal-responsive into 43ec46e on binary-com:master.

…deriv-app into success-modal-responsive

adrienne-deriv · 2023-10-23T06:33:22Z

packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.tsx

+                            platform='mt5'
+                        />
+                    ))}
+            </ModalStepWrapper>


EnterPassword

Success

CreatePassword

packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss

aizad-deriv · 2023-10-23T07:26:18Z

packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.tsx

Let's use the components we already created from the base for this file 😃 👍🏼

packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.scss

…-modal-responsive

packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.tsx

sonarcloud · 2023-10-24T06:04:21Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
5 Code Smells

No Coverage information
1.6% Duplication

…-com#10871) * chore: backup * chore: added responsive view for success and password modal * chore: reverted test changes * chore: removed unused scss file * chore: removed unused scss file * chore: fix eslint issues * chore: fix eslint issues * chore: removed unused css and fix padding issue in header step modal * chore: refactored code based on reviews * chore: remove usage of children * chore: fix eslint issues

adrienne-deriv added 3 commits October 20, 2023 12:30

chore: backup

35e63b2

Merge branch 'master' of github.com:binary-com/deriv-app into success…

e46ce21

…-modal-responsive

chore: added responsive view for success and password modal

13e6e2b

chore: reverted test changes

fa3dd75

adrienne-deriv temporarily deployed to Preview October 23, 2023 05:28 — with GitHub Actions Inactive

adrienne-deriv commented Oct 23, 2023

View reviewed changes

chore: removed unused scss file

2fc4b8e

adrienne-deriv had a problem deploying to Preview October 23, 2023 05:35 — with GitHub Actions Failure

adrienne-deriv added 2 commits October 23, 2023 13:40

chore: removed unused scss file

2b2f389

Merge branch 'success-modal-responsive' of github.com:adrienne-deriv/…

28fd534

…deriv-app into success-modal-responsive

adrienne-deriv deployed to Preview October 23, 2023 05:41 — with GitHub Actions View deployment

chore: fix eslint issues

7b1de58

adrienne-deriv deployed to Preview October 23, 2023 05:48 — with GitHub Actions View deployment

adrienne-deriv added 2 commits October 23, 2023 13:56

chore: fix eslint issues

5dff4eb

Merge branch 'success-modal-responsive' of github.com:adrienne-deriv/…

2cd8c69

…deriv-app into success-modal-responsive

adrienne-deriv deployed to Preview October 23, 2023 05:59 — with GitHub Actions View deployment

chore: removed unused css and fix padding issue in header step modal

54766b3

adrienne-deriv deployed to Preview October 23, 2023 06:26 — with GitHub Actions View deployment

adrienne-deriv marked this pull request as ready for review October 23, 2023 06:31

adrienne-deriv requested review from thisyahlen-deriv, farhan-nurzi-deriv and wojciech-deriv as code owners October 23, 2023 06:31

adrienne-deriv commented Oct 23, 2023

View reviewed changes

aizad-deriv reviewed Oct 23, 2023

View reviewed changes

packages/wallets/src/components/Base/ModalStepWrapper/ModalStepWrapper.scss Outdated Show resolved Hide resolved

aizad-deriv reviewed Oct 23, 2023

View reviewed changes

packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.scss Outdated Show resolved Hide resolved

chore: refactored code based on reviews

0a051d8

adrienne-deriv deployed to Preview October 23, 2023 09:24 — with GitHub Actions View deployment

Merge branch 'master' of github.com:binary-com/deriv-app into success…

3c4f211

…-modal-responsive

adrienne-deriv deployed to Preview October 24, 2023 02:52 — with GitHub Actions View deployment

thisyahlen-deriv previously approved these changes Oct 24, 2023

View reviewed changes

yashim-deriv requested changes Oct 24, 2023

View reviewed changes

packages/wallets/src/components/Base/WalletButtonGroup/WalletButtonGroup.tsx Outdated Show resolved Hide resolved

chore: remove usage of children

14e5e29

adrienne-deriv dismissed thisyahlen-deriv’s stale review via 14e5e29 October 24, 2023 04:57

adrienne-deriv deployed to Preview October 24, 2023 04:57 — with GitHub Actions View deployment

chore: fix eslint issues

af88a0d

adrienne-deriv deployed to Preview October 24, 2023 06:01 — with GitHub Actions View deployment

yashim-deriv approved these changes Oct 24, 2023

View reviewed changes

farhan-nurzi-deriv approved these changes Oct 24, 2023

View reviewed changes

yashim-deriv merged commit 480519f into binary-com:master Oct 24, 2023
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Wallets] Responsive view for success and password modal #10871

[Wallets] Responsive view for success and password modal #10871

adrienne-deriv commented Oct 23, 2023 •

edited

Loading

vercel bot commented Oct 23, 2023 •

edited

Loading

github-actions bot commented Oct 23, 2023 •

edited

Loading

github-actions bot commented Oct 23, 2023 •

edited

Loading

adrienne-deriv Oct 23, 2023

adrienne-deriv Oct 23, 2023

adrienne-deriv Oct 23, 2023

coveralls commented Oct 23, 2023 •

edited

Loading

adrienne-deriv Oct 23, 2023

aizad-deriv Oct 23, 2023

sonarcloud bot commented Oct 24, 2023

[Wallets] Responsive view for success and password modal #10871

[Wallets] Responsive view for success and password modal #10871

Conversation

adrienne-deriv commented Oct 23, 2023 • edited Loading

Changes:

Screenshots:

vercel bot commented Oct 23, 2023 • edited Loading

github-actions bot commented Oct 23, 2023 • edited Loading

github-actions bot commented Oct 23, 2023 • edited Loading

adrienne-deriv Oct 23, 2023

Choose a reason for hiding this comment

adrienne-deriv Oct 23, 2023

Choose a reason for hiding this comment

adrienne-deriv Oct 23, 2023

Choose a reason for hiding this comment

coveralls commented Oct 23, 2023 • edited Loading

adrienne-deriv Oct 23, 2023

Choose a reason for hiding this comment

EnterPassword

Success

CreatePassword

aizad-deriv Oct 23, 2023

Choose a reason for hiding this comment

sonarcloud bot commented Oct 24, 2023

adrienne-deriv commented Oct 23, 2023 •

edited

Loading

vercel bot commented Oct 23, 2023 •

edited

Loading

github-actions bot commented Oct 23, 2023 •

edited

Loading

github-actions bot commented Oct 23, 2023 •

edited

Loading

coveralls commented Oct 23, 2023 •

edited

Loading