diff --git a/packages/tradershub/src/screens/CurrencySelector/CurrencyCard.tsx b/packages/tradershub/src/screens/CurrencySelector/CurrencyCard.tsx
index b62f64102752..d2b824bbc641 100644
--- a/packages/tradershub/src/screens/CurrencySelector/CurrencyCard.tsx
+++ b/packages/tradershub/src/screens/CurrencySelector/CurrencyCard.tsx
@@ -1,24 +1,22 @@
import React from 'react';
import { useFormikContext } from 'formik';
import { twMerge } from 'tailwind-merge';
+import { IconComponent } from '@/components';
import { StandaloneCircleInfoRegularIcon as CircleInfoIcon } from '@deriv/quill-icons';
import { Text } from '@deriv-com/ui';
-import { getCurrencyConfig } from '../../helpers/currencyConfig';
-type TCurrencyCard = ReturnType[number];
+type TCurrencyCard = { id: string; info?: boolean; title: string };
-// write docs for the component
/**
* @name CurrencyCard
* @description The CurrencyCard component is used to display the currency card in the currency selector screen.
- * @param {React.ReactNode} icon - The icon of the currency.
* @param {string} id - The id of the currency.
- * @param {boolean} info - The info of the currency.
+ * @param {boolean} info - The flag to display an info for a specific currency.
* @param {string} title - The title of the currency.
* @returns {React.ReactNode}
- * @example
+ * @example
*/
-const CurrencyCard = ({ icon: Icon, id, info, title }: TCurrencyCard) => {
+const CurrencyCard = ({ id, info, title }: TCurrencyCard) => {
const { setFieldValue, values } = useFormikContext<{ currency: string }>();
const isSelected = values.currency === id;
return (
@@ -34,7 +32,7 @@ const CurrencyCard = ({ icon: Icon, id, info, title }: TCurrencyCard) => {
onClick={() => setFieldValue('currency', isSelected ? '' : id)}
type='button'
>
-
+
{info && }
diff --git a/packages/tradershub/src/screens/CurrencySelector/CurrencySelector.tsx b/packages/tradershub/src/screens/CurrencySelector/CurrencySelector.tsx
index d41e19d7cccc..88164fe273c3 100644
--- a/packages/tradershub/src/screens/CurrencySelector/CurrencySelector.tsx
+++ b/packages/tradershub/src/screens/CurrencySelector/CurrencySelector.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { Fragment } from 'react';
import { Form, Formik, FormikValues } from 'formik';
+import { CurrencyTypes } from '@/constants';
import { WizardScreenActions, WizardScreenWrapper } from '@/flows';
-import { CURRENCY_TYPES } from '@/helpers';
+import useCurrencies from '@/hooks/useCurrencies';
import { ACTION_TYPES, useRealAccountCreationContext } from '@/providers';
-import { Divider } from '@deriv-com/ui';
+import { Divider, Loader } from '@deriv-com/ui';
import Currencies from './Currencies';
/**
@@ -13,11 +14,13 @@ import Currencies from './Currencies';
*/
const CurrencySelector = () => {
const { dispatch, helpers, state } = useRealAccountCreationContext();
+ const { data: currencies, isLoading } = useCurrencies();
const handleSubmit = (values: FormikValues) => {
dispatch({ payload: { currency: values.currency }, type: ACTION_TYPES.SET_CURRENCY });
helpers.goToNextStep();
};
+
return (
{
>
{({ values }) => (