adrienne / added jurisdiction modal for desktop (deriv-com#10330)

* feat: added wide wrapper for jurisdiction modal * feat: added desktop view for jurisdiction modal * chore: updated package-lock.json for wallets * chore: removed package-lock.json in wallets * chore: updated component typings based on comments * chore: updated comments based on reviews * chore: fixed issues with circleci for wallets * chore: removed duplicated packages in wallets
shafin-deriv · Oct 2, 2023 · bf02321 · bf02321
1 parent 34393a4
commit bf02321
Show file tree

Hide file tree

Showing 10 changed files with 35,681 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/wallets/package.json b/packages/wallets/package.json
@@ -6,6 +6,7 @@
     "dependencies": {
         "@deriv/api": "^1.0.0",
         "@deriv/utils": "^1.0.0",
+        "classnames": "^2.2.6",
         "embla-carousel-react": "^8.0.0-rc12",
         "formik": "^2.1.4",
         "qrcode.react": "^1.0.0",
@@ -15,6 +16,7 @@
         "usehooks-ts": "^2.7.0"
     },
     "devDependencies": {
+        "@types/react-dom": "^18.0.0",
         "@typescript-eslint/eslint-plugin": "5.45.0",
         "@typescript-eslint/parser": "5.45.0",
         "eslint-plugin-local-rules": "2.0.0",

diff --git a/packages/wallets/src/components/JurisdictionModal/JurisdictionCard.scss b/packages/wallets/src/components/JurisdictionModal/JurisdictionCard.scss
@@ -0,0 +1,80 @@
+.wallets-jurisdiction-card {
+    align-items: center;
+    border-radius: 16px;
+    border: 2px solid #f2f3f4;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-width: 25%;
+    position: relative;
+    transform-style: preserve-3d;
+    transition-duration: 0.6s;
+    transition-property: transform, box-shadow;
+
+    &__link {
+        color: #ff444f;
+    }
+
+    &:hover {
+        box-shadow: 0px 24px 48px 0px rgba(14, 14, 14, 0.18);
+    }
+
+    &--selected {
+        border: 2px solid #85acb0;
+        box-shadow: 0px 24px 48px 0px rgba(14, 14, 14, 0.18);
+    }
+
+    &--flip {
+        transform: rotateY(180deg);
+    }
+
+    &-front {
+        backface-visibility: hidden;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 20px 16px;
+        transform-style: preserve-3d;
+        transition: transform 0.6s;
+
+        &--flip {
+            transform: rotateY(180deg);
+        }
+
+        &__label {
+            font-size: 20px;
+            font-weight: 700;
+            line-height: 30px;
+            margin-bottom: 10px;
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        &__tag {
+            background-color: #661b20;
+            border-radius: 4px;
+            color: #ffffff;
+            font-weight: 700;
+            padding: 1rem;
+
+            &--assets {
+                background-color: #661b20;
+            }
+
+            &--leverage {
+                background-color: #ffa912;
+            }
+
+            &--spreads-from {
+                background-color: #4a3871;
+            }
+        }
+    }
+
+    &-back {
+        backface-visibility: hidden;
+        transform: rotateY(180deg);
+        position: absolute;
+    }
+}
diff --git a/packages/wallets/src/components/JurisdictionModal/JurisdictionCard.tsx b/packages/wallets/src/components/JurisdictionModal/JurisdictionCard.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import classNames from 'classnames';
+import JurisdictionCardRow from './JurisdictionCardRow';
+import JurisdictionCardTag from './JurisdictionCardTag';
+import './JurisdictionCard.scss';
+
+type TJurisdictionCardProps = {
+    isSelected: boolean;
+    jurisdiction: string;
+    onSelect: (clickedJurisdiction: string) => void;
+    tag?: string;
+};
+
+const JurisdictionCard: React.FC<TJurisdictionCardProps> = ({ isSelected, jurisdiction, onSelect, tag }) => {
+    const [shouldFlip, setShouldFlip] = React.useState(false);
+
+    return (
+        <div
+            className={classNames('wallets-jurisdiction-card', {
+                'wallets-jurisdiction-card--flip': shouldFlip,
+                'wallets-jurisdiction-card--selected': isSelected,
+            })}
+            onClick={() => onSelect(jurisdiction)}
+        >
+            {!shouldFlip && tag && <JurisdictionCardTag tag={tag} />}
+            <React.Fragment>
+                <div className='wallets-jurisdiction-card-front'>
+                    <div className='wallets-jurisdiction-card-front__label'>{jurisdiction}</div>
+                    <JurisdictionCardRow
+                        description='Synthetics,baskets,and derived FX'
+                        renderTag={() => (
+                            <div className='wallets-jurisdiction-card-front__tag wallets-jurisdiction-card-front__tag--assets'>
+                                40+
+                            </div>
+                        )}
+                        title='Assets'
+                    />
+                    <JurisdictionCardRow
+                        description={<div className='wallets-jurisdiction-card__link'>Dynamic leverage</div>}
+                        renderTag={() => (
+                            <div className='wallets-jurisdiction-card-front__tag wallets-jurisdiction-card-front__tag--leverage'>
+                                1:1000
+                            </div>
+                        )}
+                        title='Leverage'
+                    />
+
+                    <JurisdictionCardRow
+                        renderTag={() => (
+                            <div className='wallets-jurisdiction-card-front__tag wallets-jurisdiction-card-front__tag--spreads-from'>
+                                0.6 pips
+                            </div>
+                        )}
+                        title='Spreads from'
+                    />
+                    <JurisdictionCardRow
+                        description={
+                            <div>
+                                <a className='wallets-jurisdiction-card__link' onClick={() => setShouldFlip(true)}>
+                                    Learn more
+                                </a>{' '}
+                                about required verifications.
+                            </div>
+                        }
+                        title='Verifications'
+                    />
+                    <JurisdictionCardRow
+                        description='British Virgin Islands Financial Services Commission (Licence no. SIBA/L/18/1114)'
+                        title='Regulator'
+                    />
+                </div>
+                <div className='wallets-jurisdiction-card-back'>IM BACK</div>
+            </React.Fragment>
+        </div>
+    );
+};
+
+export default JurisdictionCard;
diff --git a/packages/wallets/src/components/JurisdictionModal/JurisdictionCardRow.scss b/packages/wallets/src/components/JurisdictionModal/JurisdictionCardRow.scss
@@ -0,0 +1,36 @@
+.wallets-jurisdiction-card-row {
+    border-bottom: 2px solid #f2f3f4;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 20px 0;
+    width: 100%;
+    &:last-child {
+        border-bottom: none;
+    }
+
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        &-title {
+            font-size: 14px;
+            font-weight: 700;
+        }
+
+        &-badge {
+            background-color: #661b20;
+            border-radius: 4px;
+            color: #ffffff;
+            font-weight: 700;
+            padding: 1rem;
+        }
+    }
+
+    &__content {
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 20px;
+    }
+}
diff --git a/packages/wallets/src/components/JurisdictionModal/JurisdictionCardRow.tsx b/packages/wallets/src/components/JurisdictionModal/JurisdictionCardRow.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import './JurisdictionCardRow.scss';
+
+type TJurisdictionCardRowProps = {
+    description?: React.ReactNode | string;
+    renderTag?: () => React.ReactNode;
+    title: string;
+};
+
+const JurisdictionCardRow: React.FC<TJurisdictionCardRowProps> = ({ description, renderTag, title }) => {
+    return (
+        <div className='wallets-jurisdiction-card-row'>
+            <div className='wallets-jurisdiction-card-row__header'>
+                <div className='wallets-jurisdiction-card-row__header-title'>{title}</div>
+                {renderTag && <div className='wallets-jurisdiction-card-row__header-tag'>{renderTag()}</div>}
+            </div>
+            {description && <div className='wallets-jurisdiction-card-row__content'>{description}</div>}
+        </div>
+    );
+};
+
+export default JurisdictionCardRow;
diff --git a/packages/wallets/src/components/JurisdictionModal/JurisdictionCardTag.scss b/packages/wallets/src/components/JurisdictionModal/JurisdictionCardTag.scss
@@ -0,0 +1,16 @@
+.wallets-jurisdiction-card-tag {
+    background-color: #dfeaff;
+    border-radius: 13px 13px 0 0;
+    padding: 8px;
+    position: absolute;
+    top: 0;
+    width: 100%;
+
+    &__label {
+        color: #377cfc;
+        font-size: 12px;
+        display: grid;
+        place-items: center;
+        font-weight: 700;
+    }
+}
diff --git a/packages/wallets/src/components/JurisdictionModal/JurisdictionCardTag.tsx b/packages/wallets/src/components/JurisdictionModal/JurisdictionCardTag.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import './JurisdictionCardTag.scss';
+
+type TJurisdictionCardTagProps = {
+    tag: string;
+};
+const JurisdictionCardTag: React.FC<TJurisdictionCardTagProps> = ({ tag }) => {
+    return (
+        <div className='wallets-jurisdiction-card-tag'>
+            <div className='wallets-jurisdiction-card-tag__label'>{tag}</div>
+        </div>
+    );
+};
+
+export default JurisdictionCardTag;
diff --git a/packages/wallets/src/components/JurisdictionModal/JurisdictionModal.scss b/packages/wallets/src/components/JurisdictionModal/JurisdictionModal.scss
@@ -1,20 +1,55 @@
 .wallets-jurisdiction-modal {
-    display: grid;
     align-items: center;
+    border-radius: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    height: 75vh;
     justify-content: center;
+    margin: auto 4rem;
+    width: 85vw;
 
-    &__button {
+    &__cards {
+        align-items: center;
         display: flex;
-        height: 40px;
-        padding: 10px 16px;
+        gap: 16px;
         justify-content: center;
+    }
+
+    &__button {
         align-items: center;
+        background: #ff444f;
         border-radius: 4px;
         border: none;
         color: #ffffff;
-        background: #ff444f;
-        font-weight: 700;
         cursor: pointer;
+        display: flex;
+        font-weight: 700;
+        height: 40px;
+        justify-content: center;
         margin-left: 1rem;
+        padding: 10px 16px;
+
+        &--disabled {
+            opacity: 0.4;
+        }
+    }
+
+    &__tnc {
+        display: flex;
+        flex-direction: column;
+        font-size: 14px;
+        font-weight: 700;
+        gap: 12px;
+        justify-content: center;
+        text-align: center;
+
+        &-checkbox {
+            align-items: center;
+            display: flex;
+            font-weight: 400;
+            gap: 4px;
+            justify-content: center;
+        }
     }
 }
diff --git a/packages/wallets/src/components/JurisdictionModal/JurisdictionModal.tsx b/packages/wallets/src/components/JurisdictionModal/JurisdictionModal.tsx
@@ -1,20 +1,58 @@
-import React from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import { PrimaryActionButton } from '../PrimaryActionButton';
 import { WalletModal } from '../WalletModal';
 import { WideWrapper } from '../WideWrapper';
+import JurisdictionCard from './JurisdictionCard';
 import './JurisdictionModal.scss';
 
 const JurisdictionModal = () => {
+    const [selectedJurisdiction, setSelectedJurisdiction] = useState('');
+
+    const jurisdictions = ['St. Vincent & Grenadines', 'British Virgin Islands', 'Vanuatu'];
+
     return (
         <WalletModal>
             <WideWrapper
                 renderFooter={() => (
                     <React.Fragment>
-                        <button className='wallets-jurisdiction-modal__button'>Next</button>
+                        <PrimaryActionButton
+                            className={classNames('wallets-jurisdiction-modal__button', {
+                                'wallets-jurisdiction-modal__button--disabled': !selectedJurisdiction,
+                            })}
+                        >
+                            Next
+                        </PrimaryActionButton>
                     </React.Fragment>
                 )}
                 renderHeader={() => <div>Choose a jurisdiction for your MT5 Derived account</div>}
             >
-                <div className='wallets-jurisdiction-modal'>BODY</div>
+                <div className='wallets-jurisdiction-modal'>
+                    <div className='wallets-jurisdiction-modal__cards'>
+                        {jurisdictions.map(jurisdiction => (
+                            <JurisdictionCard
+                                isSelected={selectedJurisdiction === jurisdiction}
+                                jurisdiction={jurisdiction}
+                                key={jurisdiction}
+                                onSelect={clickedJurisdiction => {
+                                    setSelectedJurisdiction(clickedJurisdiction);
+                                }}
+                                tag='Straight-through processing'
+                            />
+                        ))}
+                    </div>
+
+                    {selectedJurisdiction && (
+                        <div className='wallets-jurisdiction-modal__tnc'>
+                            Add Your Deriv MT5 Financial account under Deriv (V) Ltd, regulated by the Vanuatu Financial
+                            Services Commission.
+                            <div className='wallets-jurisdiction-modal__tnc-checkbox'>
+                                <input type='checkbox' />
+                                <label>I confirm and accept Deriv (V) Ltd’s Terms and Conditions</label>
+                            </div>
+                        </div>
+                    )}
+                </div>
             </WideWrapper>
         </WalletModal>
     );