Merge branch 'deriv-com:master' into P2PS-2596

deriv-com · Aug 2, 2024 · 7553077 · 7553077
2 parents 1e4b4f7 + db7a958
commit 7553077
Show file tree

Hide file tree

Showing 16 changed files with 330 additions and 54 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,26 @@
+FROM --platform=$BUILDPLATFORM node:18 as build
+
+ARG BUILDPLATFORM=linux/amd64
+
+WORKDIR /app
+
+ENV HUSKY=0
+
+RUN git clone https://github.com/deriv-com/p2p.git .
+
+RUN npm install
+
+ENV NODE_ENV=production
+RUN npm run build
+
+FROM --platform=$BUILDPLATFORM node:lts-alpine3.20
+
+RUN npm install -g serve
+
+COPY --from=build /app/dist /dist
+
+EXPOSE 4000
+
+ENTRYPOINT ["serve"]
+
+CMD ["-s", "dist", "-l", "4000"]
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
         "@babel/preset-env": "^7.24.5",
         "@chakra-ui/react": "^2.8.2",
         "@deriv-com/analytics": "^1.10.1",
-        "@deriv-com/api-hooks": "^1.4.5",
+        "@deriv-com/api-hooks": "^1.4.9",
         "@deriv-com/translations": "^1.2.4",
         "@deriv-com/ui": "^1.29.0",
         "@deriv-com/utils": "^0.0.28",
@@ -109,5 +109,8 @@
         "vite-plugin-html-config": "^1.0.11",
         "vite-plugin-sass": "^0.1.0",
         "vite-plugin-svgr": "^4.2.0"
+    },
+    "optionalDependencies": {
+        "@rollup/rollup-linux-x64-gnu": "4.9.5"
     }
 }
diff --git a/src/components/AppHeader/AppHeader.tsx b/src/components/AppHeader/AppHeader.tsx
@@ -1,5 +1,5 @@
 import { getOauthUrl } from '@/constants';
-import { api } from '@/hooks';
+import { api, useRedirectToOauth } from '@/hooks';
 import { getCurrentRoute } from '@/utils';
 import { StandaloneCircleUserRegularIcon } from '@deriv/quill-icons';
 import { useAuthData } from '@deriv-com/api-hooks';
@@ -19,6 +19,7 @@ import './AppHeader.scss';
 const AppHeader = () => {
     const { isDesktop } = useDevice();
     const isEndpointPage = getCurrentRoute() === 'endpoint';
+    const { redirectToOauth } = useRedirectToOauth();
     const { activeLoginid, logout } = useAuthData();
     const { data: activeAccount } = api.account.useActiveAccount();
     const { localize } = useTranslations();
@@ -46,7 +47,14 @@ const AppHeader = () => {
                         </TooltipMenuIcon>
                     )}
                     <AccountSwitcher account={activeAccount!} />
-                    <Button className='mr-6' onClick={logout} size='md'>
+                    <Button
+                        className='mr-6'
+                        onClick={async () => {
+                            await logout();
+                            redirectToOauth();
+                        }}
+                        size='md'
+                    >
                         <Text size='sm' weight='bold'>
                             {localize('Logout')}
                         </Text>

diff --git a/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx b/src/components/AppHeader/MobileMenu/MobileMenuConfig.tsx
@@ -118,7 +118,9 @@ export const MobileMenuConfig = () => {
                 as: 'button',
                 label: localize('Log out'),
                 LeftComponent: LegacyLogout1pxIcon,
-                onClick: logout,
+                onClick: async () => {
+                    await logout();
+                },
                 removeBorderBottom: true,
             },
         ],

diff --git a/src/components/BlockedScenarios/BlockedScenarios.tsx b/src/components/BlockedScenarios/BlockedScenarios.tsx
@@ -64,7 +64,7 @@ const BlockedScenarios = ({ type }: { type: string }) => {
                     <Localize i18n_default_text='To use Deriv P2P, switch to your real USD account.' />
                 </Text>
             ),
-            icon: <P2pUnavailable />,
+            icon: <P2pUnavailable height={iconSize} width={iconSize} />,
             title: (
                 <Text weight='bold'>
                     <Localize i18n_default_text='Cryptocurrencies not supported' />
@@ -82,7 +82,7 @@ const BlockedScenarios = ({ type }: { type: string }) => {
                     <Localize i18n_default_text='Please switch to Real USD account to access the Deriv P2P marketplace.' />
                 </Text>
             ),
-            icon: <P2pUnavailable />,
+            icon: <P2pUnavailable height={iconSize} width={iconSize} />,
             title: (
                 <Text weight='bold'>
                     <Localize i18n_default_text='You are using a demo account' />
@@ -100,7 +100,7 @@ const BlockedScenarios = ({ type }: { type: string }) => {
                     <Localize i18n_default_text='Please create a Real USD account to access the Deriv P2P marketplace.' />
                 </Text>
             ),
-            icon: <P2pUnavailable />,
+            icon: <P2pUnavailable height={iconSize} width={iconSize} />,
             title: (
                 <Text weight='bold'>
                     <Localize i18n_default_text='You have no Real USD account' />

diff --git a/src/components/PaymentMethodForm/PaymentMethodForm.scss b/src/components/PaymentMethodForm/PaymentMethodForm.scss
@@ -6,6 +6,7 @@
 
     @include mobile-or-tablet-screen {
         width: 100%;
+        height: 100%;
         min-width: 36rem;
         position: absolute;
         top: 0;
@@ -47,28 +48,35 @@
             }
         }
     }
+
     .derivs-button__variant--ghost:hover:not(:disabled) {
         background: transparent;
         text-decoration: underline;
         text-decoration-color: #ec3f3f;
     }
+
     .deriv-input--field:not(:focus) {
         border: 1px solid #d6dadb;
     }
+
     .deriv-input__field:not(:placeholder-shown) ~ label {
         color: #333333;
     }
+
     .deriv-input__container {
         width: 100%;
     }
+
     .deriv-input {
         padding: 0.5 1.2rem;
     }
+
     .deriv-input,
     .deriv-input--field {
         width: 100%;
         font-size: 1.4rem;
     }
+
     .deriv-input__right-content {
         display: flex;
         align-items: center;
@@ -88,12 +96,13 @@
 
         @include mobile-or-tablet-screen {
             overflow: auto;
-            height: calc(100vh - 17rem);
-            padding-bottom: 8rem;
+            height: calc(100% - 11rem);
         }
+    }
 
-        @include mobile {
-            height: calc(100vh - 16rem);
+    &__fields {
+        @include mobile-or-tablet-screen {
+            flex: 1;
         }
     }
 
@@ -113,13 +122,15 @@
         cursor: pointer;
         color: #ffffff;
         font-size: large;
+
         rect {
             fill: #999;
         }
     }
 
     &__field {
         color: #333333;
+
         &-wrapper {
             width: 100%;
             padding: 1rem 0;
@@ -132,9 +143,11 @@
                 & .deriv-dropdown__items {
                     box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.24);
                 }
+
                 & .deriv-input {
                     height: 4rem;
                     align-items: center;
+
                     &__helper-message {
                         display: none;
                     }
@@ -144,9 +157,11 @@
                     max-height: 20rem;
                 }
             }
+
             & .deriv-input__right-content {
                 display: flex;
                 align-items: center;
+
                 & .deriv-dropdown__button {
                     &--active {
                         transform: none;
@@ -155,6 +170,7 @@
             }
         }
     }
+
     &__text {
         display: inline-block;
         line-height: 1.5;

diff --git a/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss b/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss
@@ -10,7 +10,5 @@
         width: 100%;
         padding: 1.6rem 2.4rem;
         border-top: 2px solid #f2f3f4;
-        position: absolute;
-        bottom: 0;
     }
 }
diff --git a/src/hooks/api/advertiser/p2p-advertiser/__tests__/useAdvertiserCreate.spec.ts b/src/hooks/api/advertiser/p2p-advertiser/__tests__/useAdvertiserCreate.spec.ts
@@ -38,8 +38,8 @@ describe('useAdvertiserCreate', () => {
     });
 
     it('should return modified data if the data is ready', () => {
-        // @ts-expect-error not all values are defined
         mockUseP2PAdvertiserCreate.mockReturnValueOnce({
+            // @ts-expect-error not all values are defined
             data: {
                 ...mockAdvertiserCreateValues,
             },

diff --git a/src/hooks/api/advertiser/p2p-advertiser/__tests__/useAdvertiserList.spec.ts b/src/hooks/api/advertiser/p2p-advertiser/__tests__/useAdvertiserList.spec.ts
@@ -24,9 +24,10 @@ describe('useAdvertiserList', () => {
 
     it('should return modified data if the data is ready', () => {
         const mockData = { ...mockAdvertiserCreateValues, is_blocked: 0 as const };
-        // @ts-expect-error not all properties are defined
+
         mockUseP2pAdvertiserList.mockReturnValueOnce({
             data: [
+                // @ts-expect-error not all properties are defined
                 {
                     ...mockData,
                 },

diff --git a/src/hooks/api/advertiser/p2p-advertiser/__tests__/useAdvertiserUpdate.spec.ts b/src/hooks/api/advertiser/p2p-advertiser/__tests__/useAdvertiserUpdate.spec.ts
@@ -38,8 +38,8 @@ describe('useAdvertiserUpdate', () => {
     });
 
     it('should return modified data if the data is ready', () => {
-        // @ts-expect-error not all values are defined
         mockUseP2pAdvertiserUpdate.mockReturnValueOnce({
+            // @ts-expect-error not all values are defined
             data: {
                 ...mockAdvertiserCreateValues,
             },

diff --git a/src/hooks/api/order-dispute/p2p-order-dispute/__tests__/useOrderDispute.spec.ts b/src/hooks/api/order-dispute/p2p-order-dispute/__tests__/useOrderDispute.spec.ts
@@ -43,7 +43,6 @@ describe('useOrderDispute', () => {
     });
 
     it('should return the correct data', () => {
-        // @ts-expect-error - useQuery return values not specified
         mockUseP2pOrderDispute.mockReturnValue({
             data: {
                 account_currency: 'USD',
@@ -54,6 +53,7 @@ describe('useOrderDispute', () => {
                     payment_method: 'payment_method',
                     type: 'buy',
                 },
+                // @ts-expect-error - useQuery return values not specified
                 advertiser_details: {
                     completed_orders_count: 1,
                     first_name: 'first_name',

diff --git a/src/pages/my-profile/screens/MyProfile/MyProfile.scss b/src/pages/my-profile/screens/MyProfile/MyProfile.scss
@@ -3,13 +3,11 @@
     flex-direction: column;
     padding-top: 2.4rem;
     overflow-y: auto;
-    max-height: calc(100vh - 19rem);
-    min-height: calc(100vh - 19rem);
+    height: calc(100% - 12rem);
 
     @include mobile-or-tablet-screen {
         padding: 0;
-        max-height: calc(100vh - 11rem);
-        min-height: calc(100vh - 11rem);
+        height: calc(100% - 11rem);
     }
 
     &__tabs {

diff --git a/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss b/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss
@@ -16,7 +16,7 @@
     &__mobile-wrapper {
         position: absolute;
         top: 0;
-        height: calc(100vh - 7.5rem);
+        height: calc(100% - 7.5rem);
     }
 
     & .deriv-textarea {

diff --git a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss
@@ -5,7 +5,7 @@
     width: 100%;
 
     @include mobile-or-tablet-screen {
-        margin-top: 7rem;
+        margin: 7rem 0 2rem;
         justify-content: center;
     }
 

diff --git a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss
@@ -5,7 +5,7 @@
 
         & .mobile-wrapper {
             &__body {
-                height: calc(100vh - 22rem);
+                height: 100%;
                 overflow-y: scroll;
             }