SuiSin/Check on mobile view

.github/workflows/test.yml

@@ -31,8 +31,12 @@ jobs:
       run: npx tsc --project packages/stores/tsconfig.json -noEmit
     - name: Check TypeScript for @deriv/wallets
       run: npx tsc --project packages/wallets/tsconfig.json -noEmit
+    - name: Check TypeScript for @deriv/tradershub
+      run: npx tsc --project packages/tradershub/tsconfig.json -noEmit
     - name: Check ESLint for @deriv/wallets
       run: npx eslint --fix --ignore-path packages/wallets/.eslintignore --config packages/wallets/.eslintrc.js packages/wallets
+    - name: Check ESLint for @deriv/tradershub
+      run: npx eslint --fix --ignore-path packages/tradershub/.eslintignore --config packages/tradershub/.eslintrc.js packages/tradershub
     - name: Check Stylelint for @deriv/wallets
       run: npx stylelint packages/wallets/**/*.scss
     - name: Check tests for @deriv/hooks

package.json

@@ -35,6 +35,7 @@
         "@types/react-dom": "^18.0.0",
         "@types/react-router-dom": "^5.1.6",
         "@types/react-virtualized": "^9.21.21",
+        "autoprefixer": "^10.4.16",
         "babel-polyfill": "^6.26.0",
         "dotenv-webpack": "^8.0.1",
         "husky": "^7.0.0",
@@ -52,6 +53,7 @@
         "stylelint-no-unsupported-browser-features": "^4.0.0",
         "stylelint-selector-bem-pattern": "^2.1.0",
         "stylelint-webpack-plugin": "^2.1.1",
+        "tailwindcss": "^3.3.6",
         "ts-jest": "^26.4.2"
     },
     "scripts": {
@@ -94,6 +96,7 @@
     "dependencies": {
         "@babel/preset-typescript": "^7.16.5",
         "@deriv/analytics": "^1.4.5",
+        "@deriv/quill-design": "^1.2.10",
         "@sendbird/chat": "^4.9.7",
         "@types/react-transition-group": "^4.4.4",
         "babel-jest": "^27.3.1",

packages/account/src/Components/financial-details/__tests__/financial-details.spec.tsx

@@ -55,7 +55,7 @@ describe('<FinancialDetails />', () => {
 
         fieldsRenderCheck();
 
-        const inputs = screen.getAllByTestId('dti_dropdown_display');
+        const inputs = screen.getAllByTestId('dt_dropdown_display');
         expect(inputs).toHaveLength(8);
 
         expect(screen.getByText('Next')).toBeInTheDocument();

packages/account/src/Components/forms/scroll-to-field-with-error.tsx

@@ -27,7 +27,7 @@ const ScrollToFieldWithError = ({
     }, [should_recollect_inputs_names]);
     React.useEffect(() => {
         const current_error_field_name =
-            all_page_inputs_names.find(input_name => Object.hasOwn(errors, input_name)) || '';
+            all_page_inputs_names.find(input_name => Object.prototype.hasOwnProperty.call(errors, input_name)) || '';
 
         if (fields_to_scroll_top?.includes(current_error_field_name)) {
             scrollToElement(current_error_field_name, 'start');

packages/account/src/Components/personal-details/__tests__/personal-details.spec.js

@@ -116,7 +116,7 @@ const runCommonFormfieldsTests = is_svg => {
                 name: /additional information/i,
             })
         ).toBeInTheDocument();
-    expect(screen.queryByTestId('dti_dropdown_display')).toBeInTheDocument();
+    expect(screen.queryByTestId('dt_dropdown_display')).toBeInTheDocument();
     expect(screen.queryByTestId('account_opening_reason_mobile')).not.toBeInTheDocument();
     expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
@@ -610,7 +610,7 @@ describe('<PersonalDetails/>', () => {
         expect(screen.getByText(/tax identification number/i)).toBeInTheDocument();
         expect(screen.getByLabelText(/tax identification number/i)).toBeInTheDocument();
         expect(screen.getByRole('heading', { name: /account opening reason/i })).toBeInTheDocument();
-        expect(screen.queryByTestId('dti_dropdown_display')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('dt_dropdown_display')).not.toBeInTheDocument();
         expect(screen.queryByTestId('account_opening_reason_mobile')).toBeInTheDocument();
         expect(screen.getByRole('button', { name: /previous/i })).toBeInTheDocument();
         expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();

packages/account/src/Components/poi/idv-status/idv-failed/idv-failed.tsx

@@ -334,15 +334,21 @@ const IdvFailed = ({
                         />
                         <DesktopWrapper>
                             {!is_from_external && (
-                                <Button
-                                    className='proof-of-identity__submit-button'
-                                    type='submit'
-                                    has_effect
-                                    is_disabled={!dirty || isSubmitting || !isValid}
-                                    text={is_document_upload_required ? localize('Verify') : localize('Update profile')}
-                                    large
-                                    primary
-                                />
+                                <div className='proof-of-identity__actions'>
+                                    <Button
+                                        className='proof-of-identity__submit-button'
+                                        type='submit'
+                                        has_effect
+                                        is_disabled={!dirty || isSubmitting || !isValid}
+                                        text={
+                                            is_document_upload_required
+                                                ? localize('Verify')
+                                                : localize('Update profile')
+                                        }
+                                        large
+                                        primary
+                                    />
+                                </div>
                             )}
                         </DesktopWrapper>
                     </FormBody>

packages/api/src/__tests__/useP2PAdvertList.spec.tsx → packages/api/src/__tests__/useAdvertList.spec.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import useInfiniteQuery from '../useInfiniteQuery';
 import { renderHook } from '@testing-library/react-hooks';
-import useP2PAdvertList from '../hooks/p2p/useP2PAdvertList';
+import useAdvertList from '../hooks/p2p/useAdvertList';
 import APIProvider from '../APIProvider';
 
 jest.mock('../useInfiniteQuery');
 
 const mockUseInfiniteQuery = useInfiniteQuery as jest.MockedFunction<typeof useInfiniteQuery<'p2p_advert_list'>>;
 
-describe('useP2PAdvertList', () => {
+describe('useAdvertList', () => {
     test('should return undefined if there is no response', () => {
         const wrapper = ({ children }: { children: JSX.Element }) => <APIProvider>{children}</APIProvider>;
         // @ts-expect-error need to come up with a way to mock the return type of useInfiniteQuery
         mockUseInfiniteQuery.mockReturnValueOnce({});
 
-        const { result } = renderHook(() => useP2PAdvertList(), { wrapper });
+        const { result } = renderHook(() => useAdvertList(), { wrapper });
         expect(result.current.data).toBeUndefined();
     });
 
@@ -84,7 +84,7 @@ describe('useP2PAdvertList', () => {
             },
         });
 
-        const { result } = renderHook(() => useP2PAdvertList(), { wrapper });
+        const { result } = renderHook(() => useAdvertList(), { wrapper });
         const adverts_list = result.current.data;
         expect(adverts_list).toHaveLength(1);
         expect(adverts_list?.[0].country).toBe('id');

packages/api/src/constants/index.ts

@@ -1,3 +1,2 @@
 export * from './countries';
 export * from './onfido';
-export * from './payment-method-icons';

packages/api/src/hooks/p2p/useAdvertDelete.ts

@@ -0,0 +1,65 @@
+import { useCallback, useMemo } from 'react';
+import useMutation from '../../useMutation';
+import useInvalidateQuery from '../../useInvalidateQuery';
+
+type TPayload = Parameters<ReturnType<typeof useMutation<'p2p_advert_update'>>['mutate']>[0]['payload'];
+
+/** A custom hook that deletes a P2P advert. This can only be used by an approved P2P advertiser.
+ * 
+ * To delete an advert, specify the advert ID to delete, for instance:
+ * @example
+ *  mutate({
+        "id": 1234
+    });
+ *
+ * Once this is mutated, the advert with ID of 1234 will be deleted.
+*/
+const useAdvertDelete = () => {
+    const invalidate = useInvalidateQuery();
+    const {
+        data,
+        mutate: _mutate,
+        ...rest
+    } = useMutation('p2p_advert_update', {
+        onSuccess: () => {
+            invalidate('p2p_advert_list');
+        },
+    });
+
+    const mutate = useCallback(
+        (payload: Omit<TPayload, 'delete'>) =>
+            _mutate({
+                payload: {
+                    ...payload,
+                    delete: 1,
+                },
+            }),
+        [_mutate]
+    );
+
+    const modified_data = useMemo(() => {
+        const p2p_advert_update = data?.p2p_advert_update;
+
+        if (!p2p_advert_update) return undefined;
+
+        return {
+            ...p2p_advert_update,
+            /** Indicates if this is block trade advert or not. */
+            is_block_trade: Boolean(p2p_advert_update.block_trade),
+            /** The activation status of the advert. */
+            is_active: Boolean(p2p_advert_update.is_active),
+            /** Indicates that this advert will appear on the main advert list. */
+            is_visible: Boolean(p2p_advert_update.is_visible),
+            /** Indicates that the advert has been deleted. */
+            is_deleted: Boolean(p2p_advert_update.deleted),
+        };
+    }, [data?.p2p_advert_update]);
+
+    return {
+        data: modified_data,
+        mutate,
+        ...rest,
+    };
+};
+
+export default useAdvertDelete;

packages/api/src/hooks/p2p/useAdvertInfo.ts

@@ -0,0 +1,45 @@
+import { useMemo } from 'react';
+import useQuery from '../../useQuery';
+
+/**
+ * This custom hook returns the advert information about the given advert ID.
+ */
+const useAdvertInfo = (
+    payload: NonNullable<Parameters<typeof useQuery<'p2p_advert_info'>>[1]>['payload'],
+    options?: NonNullable<Parameters<typeof useQuery<'p2p_advert_info'>>[1]>['options']
+) => {
+    const { data, ...rest } = useQuery('p2p_advert_info', {
+        payload,
+        options,
+    });
+
+    const modified_data = useMemo(() => {
+        const p2p_advert_info = data?.p2p_advert_info;
+
+        if (!p2p_advert_info) return undefined;
+
+        return {
+            ...p2p_advert_info,
+            /** Determines whether the advert is a buy advert or not. */
+            is_buy: p2p_advert_info.type === 'buy',
+            /** Determines whether the advert is a sell advert or not. */
+            is_sell: p2p_advert_info.type === 'sell',
+            is_block_trade: Boolean(p2p_advert_info.block_trade),
+            is_deleted: Boolean(p2p_advert_info.deleted),
+            is_active: Boolean(p2p_advert_info.is_active),
+            is_visible: Boolean(p2p_advert_info.is_visible),
+            /**
+             * @deprecated This property was deprecated on back-end
+             * @see https://api.deriv.com/api-explorer#p2p_advert_info
+             * **/
+            payment_method: p2p_advert_info.payment_method,
+        };
+    }, [data?.p2p_advert_info]);
+
+    return {
+        data: modified_data,
+        ...rest,
+    };
+};
+
+export default useAdvertInfo;

packages/api/src/hooks/p2p/useP2PAdvertList.ts → packages/api/src/hooks/p2p/useAdvertList.ts

@@ -5,13 +5,13 @@ import useAuthorize from '../useAuthorize';
 /**
  * This custom hook returns available adverts for use with 'p2p_order_create' by calling 'p2p_advert_list' endpoint
  */
-const useP2PAdvertList = (
+const useAdvertList = (
     payload?: NonNullable<Parameters<typeof useInfiniteQuery<'p2p_advert_list'>>[1]>['payload'],
     config?: NonNullable<Parameters<typeof useInfiniteQuery<'p2p_advert_list'>>[1]>['options']
 ) => {
     const { isSuccess } = useAuthorize();
     const { data, fetchNextPage, ...rest } = useInfiniteQuery('p2p_advert_list', {
-        payload: { ...payload, offset: payload?.offset || 0, limit: payload?.limit || 50 },
+        payload: { ...payload, offset: payload?.offset, limit: payload?.limit },
         options: {
             getNextPageParam: (lastPage, pages) => {
                 if (!lastPage?.p2p_advert_list?.list) return;
@@ -65,4 +65,4 @@ const useP2PAdvertList = (
     };
 };
 
-export default useP2PAdvertList;
+export default useAdvertList;

packages/api/src/hooks/p2p/useAdvertUpdate.ts

@@ -0,0 +1,55 @@
+import { useCallback, useMemo } from 'react';
+import useMutation from '../../useMutation';
+import useInvalidateQuery from '../../useInvalidateQuery';
+
+type TPayload = Parameters<ReturnType<typeof useMutation<'p2p_advert_update'>>['mutate']>[0]['payload'];
+
+/** A custom hook that updates a P2P advert. This can only be used by an approved P2P advertiser.
+ * 
+ * To update an advert, specify the payload arguments that should be updated, for instance:
+ * @example
+ *  mutate({
+        "id": 1234, // required
+        "is_active": 0 // optional
+    });
+ * 
+*/
+const useAdvertUpdate = () => {
+    const invalidate = useInvalidateQuery();
+    const {
+        data,
+        mutate: _mutate,
+        ...rest
+    } = useMutation('p2p_advert_update', {
+        onSuccess: () => {
+            invalidate('p2p_advert_list');
+        },
+    });
+
+    const mutate = useCallback((payload: TPayload) => _mutate({ payload }), [_mutate]);
+
+    const modified_data = useMemo(() => {
+        const p2p_advert_update = data?.p2p_advert_update;
+        if (!p2p_advert_update) return undefined;
+
+        return {
+            ...p2p_advert_update,
+            /** Indicates if this is block trade advert or not. */
+            is_block_trade: Boolean(p2p_advert_update.block_trade),
+            /** The activation status of the advert. */
+            is_active: Boolean(p2p_advert_update.is_active),
+            /** Indicates that this advert will appear on the main advert list. */
+            is_visible: Boolean(p2p_advert_update.is_visible),
+            /** Indicates that the advert has been deleted. */
+            is_deleted: Boolean(p2p_advert_update.deleted),
+        };
+    }, [data?.p2p_advert_update]);
+
+    return {
+        data: modified_data,
+        mutate,
+        ...rest,
+    };
+};
+
+export default useAdvertUpdate;

packages/api/src/hooks/p2p/useAdvertiserRelations.ts

@@ -0,0 +1,33 @@
+import useInvalidateQuery from '../../useInvalidateQuery';
+import useMutation from '../../useMutation';
+import useQuery from '../../useQuery';
+import useAuthorize from '../useAuthorize';
+
+/** This hook returns favourite and blocked advertisers and the mutation function to update the block list of the current user. */
+const useAdvertiserRelations = () => {
+    const { isSuccess } = useAuthorize();
+    const invalidate = useInvalidateQuery();
+    const { data, ...rest } = useQuery('p2p_advertiser_relations', { options: { enabled: isSuccess } });
+    const { mutate, ...mutate_rest } = useMutation('p2p_advertiser_relations', {
+        onSuccess: () => invalidate('p2p_advertiser_relations'),
+    });
+
+    const advertiser_relations = data?.p2p_advertiser_relations;
+
+    return {
+        /** P2P advertiser relations information. */
+        data: advertiser_relations,
+        /** Blocked advertisers by the current user. */
+        blocked_advertisers: advertiser_relations?.blocked_advertisers,
+        /** Favourite advertisers of the current user. */
+        favourite_advertisers: advertiser_relations?.favourite_advertisers,
+
+        /** The mutation function to update (add/remove) the currrent user's block list.  */
+        mutate,
+        /** The mutation related information. */
+        mutation: mutate_rest,
+        ...rest,
+    };
+};
+
+export default useAdvertiserRelations;

packages/api/src/hooks/p2p/useAdvertiserRelationsAddBlocked.ts

@@ -0,0 +1,18 @@
+import { useCallback } from 'react';
+import useAdvertiserRelations from './useAdvertiserRelations';
+
+/** This hook blocks advertisers of the current user by passing the advertiser id. */
+const useAdvertiserRelationsAddBlocked = () => {
+    const { mutate, data, ...rest } = useAdvertiserRelations();
+
+    const addBlockedAdvertiser = useCallback((id: number[]) => mutate({ payload: { add_blocked: id } }), [mutate]);
+
+    return {
+        data,
+        /** Sends a request to block advertiser of the current user by passing the advertiser id. */
+        mutate: addBlockedAdvertiser,
+        ...rest,
+    };
+};
+
+export default useAdvertiserRelationsAddBlocked;