From 83ba53eeb5d0f1845e7734ad8bdcba7800af39e9 Mon Sep 17 00:00:00 2001
From: AlexeyPonomarenko <alexey.a.ponomarenko@gmail.com>
Date: Wed, 20 Apr 2022 00:45:30 +0300
Subject: [PATCH] test(tests): another portion of tests

---
 .../AccountButton/AccountButton.tsx           |   2 +-
 .../DisconnectButton/DisconnectButton.tsx     |   2 +-
 .../tests/DisconnectButton.spec.tsx           |  11 +
 .../MyAccountButton.module.scss               |   0
 .../MyAccountButton.tsx                       |   0
 .../{MyAccount => MyAccountButton}/index.ts   |   0
 .../tests/MyAccountButton.spec.tsx            |  18 +
 .../components/WalletButton/WalletButton.tsx  |   2 +-
 .../WalletButton/tests/WalletButton.spec.tsx  |  21 +
 .../tests/WalletDescription.spec.tsx          |  19 +
 .../WalletIcon/tests/WalletIcon.spec.tsx      |  37 +
 .../tests/WalletSelectionModal.spec.tsx       |  36 +
 .../tests/WalletWithAccounts.spec.tsx         |  39 +
 .../components/WalletsList/WalletsList.tsx    |   4 +-
 .../WalletsList/tests/WalletsList.spec.tsx    |  25 +
 .../components/tests/AccountButton.spec.tsx   | 151 +++
 astro_2.0/components/Chip/Chip.tsx            |  12 +-
 astro_2.0/components/Chip/tests/Chip.spec.tsx |  17 +
 constants/countryPhoneCodes.ts                | 913 ++++++++++++++++++
 19 files changed, 1298 insertions(+), 11 deletions(-)
 create mode 100644 astro_2.0/components/AppHeader/components/AccountButton/components/DisconnectButton/tests/DisconnectButton.spec.tsx
 rename astro_2.0/components/AppHeader/components/AccountButton/components/{MyAccount => MyAccountButton}/MyAccountButton.module.scss (100%)
 rename astro_2.0/components/AppHeader/components/AccountButton/components/{MyAccount => MyAccountButton}/MyAccountButton.tsx (100%)
 rename astro_2.0/components/AppHeader/components/AccountButton/components/{MyAccount => MyAccountButton}/index.ts (100%)
 create mode 100644 astro_2.0/components/AppHeader/components/AccountButton/components/MyAccountButton/tests/MyAccountButton.spec.tsx
 create mode 100644 astro_2.0/components/AppHeader/components/AccountButton/components/WalletButton/tests/WalletButton.spec.tsx
 create mode 100644 astro_2.0/components/AppHeader/components/AccountButton/components/WalletDescription/tests/WalletDescription.spec.tsx
 create mode 100644 astro_2.0/components/AppHeader/components/AccountButton/components/WalletIcon/tests/WalletIcon.spec.tsx
 create mode 100644 astro_2.0/components/AppHeader/components/AccountButton/components/WalletSelectionModal/tests/WalletSelectionModal.spec.tsx
 create mode 100644 astro_2.0/components/AppHeader/components/AccountButton/components/WalletWithAccounts/tests/WalletWithAccounts.spec.tsx
 create mode 100644 astro_2.0/components/AppHeader/components/AccountButton/components/WalletsList/tests/WalletsList.spec.tsx
 create mode 100644 astro_2.0/components/AppHeader/components/AccountButton/components/tests/AccountButton.spec.tsx
 create mode 100644 astro_2.0/components/Chip/tests/Chip.spec.tsx
 create mode 100644 constants/countryPhoneCodes.ts

diff --git a/astro_2.0/components/AppHeader/components/AccountButton/AccountButton.tsx b/astro_2.0/components/AppHeader/components/AccountButton/AccountButton.tsx
index e2e1ed485..f16f04981 100644
--- a/astro_2.0/components/AppHeader/components/AccountButton/AccountButton.tsx
+++ b/astro_2.0/components/AppHeader/components/AccountButton/AccountButton.tsx
@@ -8,7 +8,7 @@ import { AppFooter } from 'astro_2.0/components/AppFooter';
 import { GenericDropdown } from 'astro_2.0/components/GenericDropdown';
 
 import { WalletType } from 'types/config';
-import { WalletIcon } from 'astro_2.0/components/AppHeader/components/AccountButton/components/WalletIcon/WalletIcon';
+import { WalletIcon } from 'astro_2.0/components/AppHeader/components/AccountButton/components/WalletIcon';
 import { useModal } from 'components/modal';
 import { WalletSelectionModal } from 'astro_2.0/components/AppHeader/components/AccountButton/components/WalletSelectionModal';
 import { WalletsList } from 'astro_2.0/components/AppHeader/components/AccountButton/components/WalletsList';
diff --git a/astro_2.0/components/AppHeader/components/AccountButton/components/DisconnectButton/DisconnectButton.tsx b/astro_2.0/components/AppHeader/components/AccountButton/components/DisconnectButton/DisconnectButton.tsx
index c548071ac..7c2359b7e 100644
--- a/astro_2.0/components/AppHeader/components/AccountButton/components/DisconnectButton/DisconnectButton.tsx
+++ b/astro_2.0/components/AppHeader/components/AccountButton/components/DisconnectButton/DisconnectButton.tsx
@@ -13,7 +13,7 @@ export const DisconnectButton: React.FC<DisconnectButtonProps> = ({
 }) => {
   return (
     <AccountPopupItem
-      onClick={() => logout()}
+      onClick={logout}
       className={styles.menuButton}
       content={<div className={styles.disconnectText}>Disconnect</div>}
       icon={
diff --git a/astro_2.0/components/AppHeader/components/AccountButton/components/DisconnectButton/tests/DisconnectButton.spec.tsx b/astro_2.0/components/AppHeader/components/AccountButton/components/DisconnectButton/tests/DisconnectButton.spec.tsx
new file mode 100644
index 000000000..775b27db9
--- /dev/null
+++ b/astro_2.0/components/AppHeader/components/AccountButton/components/DisconnectButton/tests/DisconnectButton.spec.tsx
@@ -0,0 +1,11 @@
+import { render } from 'jest/testUtils';
+
+import { DisconnectButton } from 'astro_2.0/components/AppHeader/components/AccountButton/components/DisconnectButton';
+
+describe('DisconnectButton', () => {
+  it('Should render component', () => {
+    const { getByText } = render(<DisconnectButton logout={() => 0} />);
+
+    expect(getByText('Disconnect')).toBeTruthy();
+  });
+});
diff --git a/astro_2.0/components/AppHeader/components/AccountButton/components/MyAccount/MyAccountButton.module.scss b/astro_2.0/components/AppHeader/components/AccountButton/components/MyAccountButton/MyAccountButton.module.scss
similarity index 100%
rename from astro_2.0/components/AppHeader/components/AccountButton/components/MyAccount/MyAccountButton.module.scss
rename to astro_2.0/components/AppHeader/components/AccountButton/components/MyAccountButton/MyAccountButton.module.scss
diff --git a/astro_2.0/components/AppHeader/components/AccountButton/components/MyAccount/MyAccountButton.tsx b/astro_2.0/components/AppHeader/components/AccountButton/components/MyAccountButton/MyAccountButton.tsx
similarity index 100%
rename from astro_2.0/components/AppHeader/components/AccountButton/components/MyAccount/MyAccountButton.tsx
rename to astro_2.0/components/AppHeader/components/AccountButton/components/MyAccountButton/MyAccountButton.tsx
diff --git a/astro_2.0/components/AppHeader/components/AccountButton/components/MyAccount/index.ts b/astro_2.0/components/AppHeader/components/AccountButton/components/MyAccountButton/index.ts
similarity index 100%
rename from astro_2.0/components/AppHeader/components/AccountButton/components/MyAccount/index.ts
rename to astro_2.0/components/AppHeader/components/AccountButton/components/MyAccountButton/index.ts
diff --git a/astro_2.0/components/AppHeader/components/AccountButton/components/MyAccountButton/tests/MyAccountButton.spec.tsx b/astro_2.0/components/AppHeader/components/AccountButton/components/MyAccountButton/tests/MyAccountButton.spec.tsx
new file mode 100644
index 000000000..ab6d1466a
--- /dev/null
+++ b/astro_2.0/components/AppHeader/components/AccountButton/components/MyAccountButton/tests/MyAccountButton.spec.tsx
@@ -0,0 +1,18 @@
+import { render } from 'jest/testUtils';
+import { fireEvent } from '@testing-library/dom';
+
+import { MyAccountButton } from 'astro_2.0/components/AppHeader/components/AccountButton/components/MyAccountButton';
+
+describe('MyAccountButton', () => {
+  it('Should handle click properly ', () => {
+    const closeDropdown = jest.fn();
+
+    const { getByRole } = render(
+      <MyAccountButton closeDropdown={closeDropdown} />
+    );
+
+    fireEvent.click(getByRole('button'));
+
+    expect(closeDropdown).toBeCalled();
+  });
+});
diff --git a/astro_2.0/components/AppHeader/components/AccountButton/components/WalletButton/WalletButton.tsx b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletButton/WalletButton.tsx
index c9890f3df..c7474deb6 100644
--- a/astro_2.0/components/AppHeader/components/AccountButton/components/WalletButton/WalletButton.tsx
+++ b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletButton/WalletButton.tsx
@@ -1,4 +1,4 @@
-import { WalletIcon } from 'astro_2.0/components/AppHeader/components/AccountButton/components/WalletIcon/WalletIcon';
+import { WalletIcon } from 'astro_2.0/components/AppHeader/components/AccountButton/components/WalletIcon';
 import { WalletType } from 'types/config';
 import { WalletDescription } from 'astro_2.0/components/AppHeader/components/AccountButton/components/WalletDescription';
 import { AccountPopupItem } from 'astro_2.0/components/AppHeader/components/AccountButton/components/AccountPopupItem';
diff --git a/astro_2.0/components/AppHeader/components/AccountButton/components/WalletButton/tests/WalletButton.spec.tsx b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletButton/tests/WalletButton.spec.tsx
new file mode 100644
index 000000000..c1dc2bae7
--- /dev/null
+++ b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletButton/tests/WalletButton.spec.tsx
@@ -0,0 +1,21 @@
+import { render } from 'jest/testUtils';
+
+import { WalletButton } from 'astro_2.0/components/AppHeader/components/AccountButton/components/WalletButton';
+
+describe('WalletButton', () => {
+  it('Should render component', () => {
+    const name = 'Wallet Name';
+
+    const { getByText } = render(
+      <WalletButton
+        url=""
+        type=""
+        name={name}
+        walletType={0}
+        onClick={() => 0}
+      />
+    );
+
+    expect(getByText(name)).toBeTruthy();
+  });
+});
diff --git a/astro_2.0/components/AppHeader/components/AccountButton/components/WalletDescription/tests/WalletDescription.spec.tsx b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletDescription/tests/WalletDescription.spec.tsx
new file mode 100644
index 000000000..d07d270f5
--- /dev/null
+++ b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletDescription/tests/WalletDescription.spec.tsx
@@ -0,0 +1,19 @@
+import { render } from 'jest/testUtils';
+
+import { WalletDescription } from 'astro_2.0/components/AppHeader/components/AccountButton/components/WalletDescription';
+
+describe('WalletDescription', () => {
+  it('Should render component', () => {
+    const name = 'Wallet name';
+    const type = 'Wallet type';
+    const url = 'Wallet url';
+
+    const { getByText } = render(
+      <WalletDescription name={name} type={type} url={url} />
+    );
+
+    expect(getByText(name)).toBeTruthy();
+    expect(getByText(type, { exact: false })).toBeTruthy();
+    expect(getByText(url)).toBeTruthy();
+  });
+});
diff --git a/astro_2.0/components/AppHeader/components/AccountButton/components/WalletIcon/tests/WalletIcon.spec.tsx b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletIcon/tests/WalletIcon.spec.tsx
new file mode 100644
index 000000000..f99e5cf6a
--- /dev/null
+++ b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletIcon/tests/WalletIcon.spec.tsx
@@ -0,0 +1,37 @@
+import { render } from 'jest/testUtils';
+
+import { WalletIcon } from 'astro_2.0/components/AppHeader/components/AccountButton/components/WalletIcon';
+
+jest.mock('astro_2.0/components/NearIcon', () => {
+  return {
+    NearIcon: () => <div>NearIcon</div>,
+  };
+});
+
+jest.mock('astro_2.0/components/SenderIcon', () => {
+  return {
+    SenderIcon: () => <div>SenderIcon</div>,
+  };
+});
+
+describe('WalletIcon', () => {
+  it('Should render Near icon', () => {
+    const { getByText } = render(<WalletIcon walletType={0} isSelected />);
+
+    expect(getByText('NearIcon')).toBeTruthy();
+  });
+
+  it('Should render Sender icon', () => {
+    const { getByText } = render(
+      <WalletIcon walletType={1} isSelected={false} />
+    );
+
+    expect(getByText('SenderIcon')).toBeTruthy();
+  });
+
+  it('Should render Near icon by default', () => {
+    const { getByText } = render(<WalletIcon walletType={3} isSelected />);
+
+    expect(getByText('NearIcon')).toBeTruthy();
+  });
+});
diff --git a/astro_2.0/components/AppHeader/components/AccountButton/components/WalletSelectionModal/tests/WalletSelectionModal.spec.tsx b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletSelectionModal/tests/WalletSelectionModal.spec.tsx
new file mode 100644
index 000000000..8513f71f5
--- /dev/null
+++ b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletSelectionModal/tests/WalletSelectionModal.spec.tsx
@@ -0,0 +1,36 @@
+import { render } from 'jest/testUtils';
+import { fireEvent } from '@testing-library/dom';
+
+import { WalletSelectionModal } from 'astro_2.0/components/AppHeader/components/AccountButton/components/WalletSelectionModal';
+
+jest.mock('components/modal', () => {
+  return {
+    Modal: ({ children }: { children: unknown }) => children,
+  };
+});
+
+describe('WalletSelectionModal', () => {
+  it('Should sign in Near wallet', () => {
+    const signIn = jest.fn();
+
+    const { getAllByRole } = render(
+      <WalletSelectionModal isOpen onClose={() => 0} signIn={signIn} />
+    );
+
+    fireEvent.click(getAllByRole('button')[0]);
+
+    expect(signIn).toBeCalledWith(0);
+  });
+
+  it('Should sign in Sender wallet', () => {
+    const signIn = jest.fn();
+
+    const { getAllByRole } = render(
+      <WalletSelectionModal isOpen onClose={() => 0} signIn={signIn} />
+    );
+
+    fireEvent.click(getAllByRole('button')[2]);
+
+    expect(signIn).toBeCalledWith(1);
+  });
+});
diff --git a/astro_2.0/components/AppHeader/components/AccountButton/components/WalletWithAccounts/tests/WalletWithAccounts.spec.tsx b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletWithAccounts/tests/WalletWithAccounts.spec.tsx
new file mode 100644
index 000000000..7c9bda2de
--- /dev/null
+++ b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletWithAccounts/tests/WalletWithAccounts.spec.tsx
@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+import { render } from 'jest/testUtils';
+
+import { useAuthContext } from 'context/AuthContext';
+
+import { WalletWithAccounts } from 'astro_2.0/components/AppHeader/components/AccountButton/components/WalletWithAccounts';
+
+jest.mock('context/AuthContext', () => {
+  return {
+    useAuthContext: jest.fn(() => ({})),
+  };
+});
+
+describe('WalletWithAccounts', () => {
+  it('Should render component', () => {
+    // @ts-ignore
+    useAuthContext.mockImplementation(() => ({
+      accountId: '1',
+    }));
+
+    const { getByText } = render(
+      <WalletWithAccounts
+        wallet={{
+          id: 0,
+          name: 'NEAR',
+          type: 'NEAR',
+          url: 'url',
+        }}
+        isSelected
+        accounts={['2', '1', '3']}
+        switchAccountHandler={() => () => 0}
+        switchWalletHandler={() => () => 0}
+      />
+    );
+
+    expect(getByText('NEAR')).toBeTruthy();
+  });
+});
diff --git a/astro_2.0/components/AppHeader/components/AccountButton/components/WalletsList/WalletsList.tsx b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletsList/WalletsList.tsx
index 81370756a..6b6851b20 100644
--- a/astro_2.0/components/AppHeader/components/AccountButton/components/WalletsList/WalletsList.tsx
+++ b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletsList/WalletsList.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { MyAccountButton } from 'astro_2.0/components/AppHeader/components/AccountButton/components/MyAccount';
+import { MyAccountButton } from 'astro_2.0/components/AppHeader/components/AccountButton/components/MyAccountButton';
 import { WalletType } from 'types/config';
 import { DisconnectButton } from 'astro_2.0/components/AppHeader/components/AccountButton/components/DisconnectButton';
 import { WalletMeta } from 'services/sputnik/SputnikNearService/services/types';
@@ -7,7 +7,7 @@ import { WalletWithAccounts } from 'astro_2.0/components/AppHeader/components/Ac
 import { WalletButton } from 'astro_2.0/components/AppHeader/components/AccountButton/components/WalletButton';
 import styles from './WalletsList.module.scss';
 
-interface WalletsListProps {
+export interface WalletsListProps {
   logoutHandler: () => Promise<void>;
   availableNearAccounts: string[];
   availableWallets: WalletMeta[];
diff --git a/astro_2.0/components/AppHeader/components/AccountButton/components/WalletsList/tests/WalletsList.spec.tsx b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletsList/tests/WalletsList.spec.tsx
new file mode 100644
index 000000000..19f24850c
--- /dev/null
+++ b/astro_2.0/components/AppHeader/components/AccountButton/components/WalletsList/tests/WalletsList.spec.tsx
@@ -0,0 +1,25 @@
+import { render } from 'jest/testUtils';
+
+import { WalletMeta } from 'services/sputnik/SputnikNearService/services/types';
+import { WalletsList } from 'astro_2.0/components/AppHeader/components/AccountButton/components/WalletsList';
+
+describe('WalletsList', () => {
+  it('Should render component', () => {
+    const wallets = ([
+      { id: 'NEAR' },
+      { id: 'SENDER' },
+    ] as unknown) as WalletMeta[];
+
+    render(
+      <WalletsList
+        logoutHandler={() => Promise.resolve()}
+        availableNearAccounts={[]}
+        availableWallets={wallets}
+        selectedWallet={0}
+        switchAccountHandler={() => () => 0}
+        switchWalletHandler={() => () => 0}
+        closeDropdownHandler={() => 0}
+      />
+    );
+  });
+});
diff --git a/astro_2.0/components/AppHeader/components/AccountButton/components/tests/AccountButton.spec.tsx b/astro_2.0/components/AppHeader/components/AccountButton/components/tests/AccountButton.spec.tsx
new file mode 100644
index 000000000..995d93f69
--- /dev/null
+++ b/astro_2.0/components/AppHeader/components/AccountButton/components/tests/AccountButton.spec.tsx
@@ -0,0 +1,151 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
+
+import React, { ReactNode } from 'react';
+import { render } from 'jest/testUtils';
+import { fireEvent } from '@testing-library/dom';
+
+import { WalletType } from 'types/config';
+import { WalletsListProps } from 'astro_2.0/components/AppHeader/components/AccountButton/components/WalletsList';
+
+import { useAuthContext } from 'context/AuthContext';
+
+import { GenericDropdown } from 'astro_2.0/components/GenericDropdown';
+import { AccountButton } from 'astro_2.0/components/AppHeader/components/AccountButton';
+
+const accountId = 'My account Id';
+
+const context = {
+  accountId: 'My account Id',
+  nearService: {
+    getWalletType: () => 0,
+    availableWallets: () => [],
+  },
+};
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useState: jest.fn(() => []),
+  };
+});
+
+jest.mock('context/AuthContext', () => {
+  return {
+    useAuthContext: jest.fn(() => context),
+  };
+});
+
+jest.mock(
+  'astro_2.0/components/AppHeader/components/AccountButton/components/WalletsList',
+  () => {
+    return {
+      WalletsList: ({
+        switchWalletHandler,
+        switchAccountHandler,
+        closeDropdownHandler,
+      }: WalletsListProps) => {
+        return (
+          <div>
+            <div onClick={closeDropdownHandler}>closeDropdownHandler</div>
+            {/* @ts-ignore */}
+            <div onClick={switchWalletHandler('New Wallet')}>
+              switchWalletHandler
+            </div>
+            <div onClick={switchAccountHandler('New Account')}>
+              switchAccountHandler
+            </div>
+          </div>
+        );
+      },
+    };
+  }
+);
+
+jest.mock('astro_2.0/components/GenericDropdown', () => {
+  return {
+    GenericDropdown: jest.fn(),
+  };
+});
+
+jest.mock('next-i18next', () => ({
+  // this mock makes sure any components using the translate hook does not generate warnings in console
+  useTranslation: () => {
+    return {
+      t: (str: string): string => str,
+    };
+  },
+}));
+
+describe('AccountButton', () => {
+  it('Should render component', () => {
+    // @ts-ignore
+    GenericDropdown.mockImplementation(({ parent }: { parent: ReactNode }) => (
+      <div>{parent}</div>
+    ));
+
+    const { getByText } = render(<AccountButton />);
+
+    expect(getByText(accountId)).toBeTruthy();
+  });
+
+  it('Should close dropdown', () => {
+    const setOpen = jest.fn();
+
+    // @ts-ignore
+    GenericDropdown.mockImplementation(
+      ({ children }: { children: ReactNode }) => <div>{children}</div>
+    );
+
+    jest
+      .spyOn(React, 'useState')
+      .mockImplementationOnce(() => [false, setOpen]);
+
+    const { getByText } = render(<AccountButton />);
+
+    fireEvent.click(getByText('closeDropdownHandler'));
+
+    expect(setOpen).toBeCalledWith(false);
+  });
+
+  it('Should switch account', () => {
+    const switchAccount = jest.fn();
+
+    // @ts-ignore
+    useAuthContext.mockImplementation(() => ({
+      ...context,
+      switchAccount,
+    }));
+
+    // @ts-ignore
+    GenericDropdown.mockImplementation(
+      ({ children }: { children: ReactNode }) => <div>{children}</div>
+    );
+
+    const { getByText } = render(<AccountButton />);
+
+    fireEvent.click(getByText('switchAccountHandler'));
+
+    expect(switchAccount).toBeCalledWith(WalletType.NEAR, 'New Account');
+  });
+
+  it('Should switch wallet', () => {
+    const switchWallet = jest.fn();
+
+    // @ts-ignore
+    useAuthContext.mockImplementation(() => ({
+      ...context,
+      switchWallet,
+    }));
+
+    // @ts-ignore
+    GenericDropdown.mockImplementation(
+      ({ children }: { children: ReactNode }) => <div>{children}</div>
+    );
+
+    const { getByText } = render(<AccountButton />);
+
+    fireEvent.click(getByText('switchWalletHandler'));
+
+    expect(switchWallet).toBeCalledWith('New Wallet');
+  });
+});
diff --git a/astro_2.0/components/Chip/Chip.tsx b/astro_2.0/components/Chip/Chip.tsx
index 49a9b6bd4..f0abbb976 100644
--- a/astro_2.0/components/Chip/Chip.tsx
+++ b/astro_2.0/components/Chip/Chip.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 import cn from 'classnames';
 
 import { IconButton } from 'components/button/IconButton';
@@ -12,14 +12,14 @@ export interface ChipProps {
 }
 
 export const Chip: FC<ChipProps> = ({ className, onRemove, name }) => {
+  const remove = useCallback(() => {
+    onRemove(name);
+  }, [name, onRemove]);
+
   return (
     <div className={cn(styles.chip, className)}>
       <div className={styles.name}>{name}</div>
-      <IconButton
-        className={styles.iconButton}
-        onClick={() => onRemove(name)}
-        icon="close"
-      />
+      <IconButton className={styles.iconButton} onClick={remove} icon="close" />
     </div>
   );
 };
diff --git a/astro_2.0/components/Chip/tests/Chip.spec.tsx b/astro_2.0/components/Chip/tests/Chip.spec.tsx
new file mode 100644
index 000000000..d84143c49
--- /dev/null
+++ b/astro_2.0/components/Chip/tests/Chip.spec.tsx
@@ -0,0 +1,17 @@
+import { render } from 'jest/testUtils';
+import { fireEvent } from '@testing-library/dom';
+
+import { Chip } from 'astro_2.0/components/Chip';
+
+describe('Chip', () => {
+  it('Should call remove callback', () => {
+    const name = 'My Name';
+    const onRemove = jest.fn();
+
+    const { getByRole } = render(<Chip name={name} onRemove={onRemove} />);
+
+    fireEvent.click(getByRole('button'));
+
+    expect(onRemove).toBeCalledWith(name);
+  });
+});
diff --git a/constants/countryPhoneCodes.ts b/constants/countryPhoneCodes.ts
new file mode 100644
index 000000000..2e2edfaa9
--- /dev/null
+++ b/constants/countryPhoneCodes.ts
@@ -0,0 +1,913 @@
+export const COUNTRY_PHONE_CODES = [
+  { dialCode: '+1', flag: '🇨🇦', code: 'CA', name: 'Canada' },
+  {
+    dialCode: '+1',
+    flag: '🇺🇸',
+    code: 'US',
+    name: 'United States',
+  },
+  { dialCode: '+1242', flag: '🇧🇸', code: 'BS', name: 'Bahamas' },
+  {
+    dialCode: '+1246',
+    flag: '🇧🇧',
+    code: 'BB',
+    name: 'Barbados',
+  },
+  { dialCode: '+1264', flag: '🇦🇮', code: 'AI', name: 'Anguilla' },
+  {
+    dialCode: '+1268',
+    flag: '🇦🇬',
+    code: 'AG',
+    name: 'Antigua and Barbuda',
+  },
+  {
+    dialCode: '+1284',
+    flag: '🇻🇬',
+    code: 'VG',
+    name: 'Virgin Islands, British',
+  },
+  {
+    dialCode: '+1340',
+    flag: '🇻🇮',
+    code: 'VI',
+    name: 'Virgin Islands, U.S.',
+  },
+  { dialCode: '+1441', flag: '🇧🇲', code: 'BM', name: 'Bermuda' },
+  {
+    dialCode: '+1473',
+    flag: '🇬🇩',
+    code: 'GD',
+    name: 'Grenada',
+  },
+  {
+    dialCode: '+1649',
+    flag: '🇹🇨',
+    code: 'TC',
+    name: 'Turks and Caicos Islands',
+  },
+  {
+    dialCode: '+1664',
+    flag: '🇲🇸',
+    code: 'MS',
+    name: 'Montserrat',
+  },
+  {
+    dialCode: '+1670',
+    flag: '🇲🇵',
+    code: 'MP',
+    name: 'Northern Mariana Islands',
+  },
+  {
+    dialCode: '+1671',
+    flag: '🇬🇺',
+    code: 'GU',
+    name: 'Guam',
+  },
+  { dialCode: '+1684', flag: '🇦🇸', code: 'AS', name: 'American Samoa' },
+  {
+    dialCode: '+1758',
+    flag: '🇱🇨',
+    code: 'LC',
+    name: 'Saint Lucia',
+  },
+  { dialCode: '+1767', flag: '🇩🇲', code: 'DM', name: 'Dominica' },
+  {
+    dialCode: '+1784',
+    flag: '🇻🇨',
+    code: 'VC',
+    name: 'Saint Vincent and the Grenadines',
+  },
+  { dialCode: '+1849', flag: '🇩🇴', code: 'DO', name: 'Dominican Republic' },
+  {
+    dialCode: '+1868',
+    flag: '🇹🇹',
+    code: 'TT',
+    name: 'Trinidad and Tobago',
+  },
+  { dialCode: '+1869', flag: '🇰🇳', code: 'KN', name: 'Saint Kitts and Nevis' },
+  {
+    dialCode: '+1876',
+    flag: '🇯🇲',
+    code: 'JM',
+    name: 'Jamaica',
+  },
+  { dialCode: '+1939', flag: '🇵🇷', code: 'PR', name: 'Puerto Rico' },
+  {
+    dialCode: '+20',
+    flag: '🇪🇬',
+    code: 'EG',
+    name: 'Egypt',
+  },
+  { dialCode: '+211', flag: '🇸🇸', code: 'SS', name: 'South Sudan' },
+  {
+    dialCode: '+212',
+    flag: '🇲🇦',
+    code: 'MA',
+    name: 'Morocco',
+  },
+  { dialCode: '+213', flag: '🇩🇿', code: 'DZ', name: 'Algeria' },
+  {
+    dialCode: '+216',
+    flag: '🇹🇳',
+    code: 'TN',
+    name: 'Tunisia',
+  },
+  { dialCode: '+218', flag: '🇱🇾', code: 'LY', name: 'Libyan Arab Jamahiriya' },
+  {
+    dialCode: '+220',
+    flag: '🇬🇲',
+    code: 'GM',
+    name: 'Gambia',
+  },
+  { dialCode: '+221', flag: '🇸🇳', code: 'SN', name: 'Senegal' },
+  {
+    dialCode: '+222',
+    flag: '🇲🇷',
+    code: 'MR',
+    name: 'Mauritania',
+  },
+  { dialCode: '+223', flag: '🇲🇱', code: 'ML', name: 'Mali' },
+  {
+    dialCode: '+224',
+    flag: '🇬🇳',
+    code: 'GN',
+    name: 'Guinea',
+  },
+  { dialCode: '+225', flag: '🇨🇮', code: 'CI', name: "Cote d'Ivoire" },
+  {
+    dialCode: '+226',
+    flag: '🇧🇫',
+    code: 'BF',
+    name: 'Burkina Faso',
+  },
+  { dialCode: '+227', flag: '🇳🇪', code: 'NE', name: 'Niger' },
+  {
+    dialCode: '+228',
+    flag: '🇹🇬',
+    code: 'TG',
+    name: 'Togo',
+  },
+  { dialCode: '+229', flag: '🇧🇯', code: 'BJ', name: 'Benin' },
+  {
+    dialCode: '+230',
+    flag: '🇲🇺',
+    code: 'MU',
+    name: 'Mauritius',
+  },
+  { dialCode: '+231', flag: '🇱🇷', code: 'LR', name: 'Liberia' },
+  {
+    dialCode: '+232',
+    flag: '🇸🇱',
+    code: 'SL',
+    name: 'Sierra Leone',
+  },
+  { dialCode: '+233', flag: '🇬🇭', code: 'GH', name: 'Ghana' },
+  {
+    dialCode: '+234',
+    flag: '🇳🇬',
+    code: 'NG',
+    name: 'Nigeria',
+  },
+  { dialCode: '+235', flag: '🇹🇩', code: 'TD', name: 'Chad' },
+  {
+    dialCode: '+236',
+    flag: '🇨🇫',
+    code: 'CF',
+    name: 'Central African Republic',
+  },
+  { dialCode: '+237', flag: '🇨🇲', code: 'CM', name: 'Cameroon' },
+  {
+    dialCode: '+238',
+    flag: '🇨🇻',
+    code: 'CV',
+    name: 'Cape Verde',
+  },
+  { dialCode: '+239', flag: '🇸🇹', code: 'ST', name: 'Sao Tome and Principe' },
+  {
+    dialCode: '+240',
+    flag: '🇬🇶',
+    code: 'GQ',
+    name: 'Equatorial Guinea',
+  },
+  { dialCode: '+241', flag: '🇬🇦', code: 'GA', name: 'Gabon' },
+  {
+    dialCode: '+242',
+    flag: '🇨🇬',
+    code: 'CG',
+    name: 'Congo',
+  },
+  {
+    dialCode: '+243',
+    flag: '🇨🇩',
+    code: 'CD',
+    name: 'Congo, The Democratic Republic of the Congo',
+  },
+  { dialCode: '+244', flag: '🇦🇴', code: 'AO', name: 'Angola' },
+  {
+    dialCode: '+245',
+    flag: '🇬🇼',
+    code: 'GW',
+    name: 'Guinea-Bissau',
+  },
+  {
+    dialCode: '+246',
+    flag: '🇮🇴',
+    code: 'IO',
+    name: 'British Indian Ocean Territory',
+  },
+  {
+    dialCode: '+248',
+    flag: '🇸🇨',
+    code: 'SC',
+    name: 'Seychelles',
+  },
+  { dialCode: '+249', flag: '🇸🇩', code: 'SD', name: 'Sudan' },
+  {
+    dialCode: '+250',
+    flag: '🇷🇼',
+    code: 'RW',
+    name: 'Rwanda',
+  },
+  { dialCode: '+251', flag: '🇪🇹', code: 'ET', name: 'Ethiopia' },
+  {
+    dialCode: '+252',
+    flag: '🇸🇴',
+    code: 'SO',
+    name: 'Somalia',
+  },
+  { dialCode: '+253', flag: '🇩🇯', code: 'DJ', name: 'Djibouti' },
+  {
+    dialCode: '+254',
+    flag: '🇰🇪',
+    code: 'KE',
+    name: 'Kenya',
+  },
+  {
+    dialCode: '+255',
+    flag: '🇹🇿',
+    code: 'TZ',
+    name: 'Tanzania, United Republic of Tanzania',
+  },
+  { dialCode: '+256', flag: '🇺🇬', code: 'UG', name: 'Uganda' },
+  {
+    dialCode: '+257',
+    flag: '🇧🇮',
+    code: 'BI',
+    name: 'Burundi',
+  },
+  { dialCode: '+258', flag: '🇲🇿', code: 'MZ', name: 'Mozambique' },
+  {
+    dialCode: '+260',
+    flag: '🇿🇲',
+    code: 'ZM',
+    name: 'Zambia',
+  },
+  { dialCode: '+261', flag: '🇲🇬', code: 'MG', name: 'Madagascar' },
+  {
+    dialCode: '+262',
+    flag: '🇹🇫',
+    code: 'TF',
+    name: 'French Southern Territories',
+  },
+  { dialCode: '+262', flag: '🇾🇹', code: 'YT', name: 'Mayotte' },
+  {
+    dialCode: '+262',
+    flag: '🇷🇪',
+    code: 'RE',
+    name: 'Reunion',
+  },
+  { dialCode: '+263', flag: '🇿🇼', code: 'ZW', name: 'Zimbabwe' },
+  {
+    dialCode: '+264',
+    flag: '🇳🇦',
+    code: 'NA',
+    name: 'Namibia',
+  },
+  { dialCode: '+265', flag: '🇲🇼', code: 'MW', name: 'Malawi' },
+  {
+    dialCode: '+266',
+    flag: '🇱🇸',
+    code: 'LS',
+    name: 'Lesotho',
+  },
+  { dialCode: '+267', flag: '🇧🇼', code: 'BW', name: 'Botswana' },
+  {
+    dialCode: '+268',
+    flag: '🇸🇿',
+    code: 'SZ',
+    name: 'Swaziland',
+  },
+  { dialCode: '+269', flag: '🇰🇲', code: 'KM', name: 'Comoros' },
+  {
+    dialCode: '+27',
+    flag: '🇿🇦',
+    code: 'ZA',
+    name: 'South Africa',
+  },
+  {
+    dialCode: '+290',
+    flag: '🇸🇭',
+    code: 'SH',
+    name: 'Saint Helena, Ascension and Tristan Da Cunha',
+  },
+  { dialCode: '+291', flag: '🇪🇷', code: 'ER', name: 'Eritrea' },
+  {
+    dialCode: '+297',
+    flag: '🇦🇼',
+    code: 'AW',
+    name: 'Aruba',
+  },
+  { dialCode: '+298', flag: '🇫🇴', code: 'FO', name: 'Faroe Islands' },
+  {
+    dialCode: '+299',
+    flag: '🇬🇱',
+    code: 'GL',
+    name: 'Greenland',
+  },
+  { dialCode: '+30', flag: '🇬🇷', code: 'GR', name: 'Greece' },
+  {
+    dialCode: '+31',
+    flag: '🇳🇱',
+    code: 'NL',
+    name: 'Netherlands',
+  },
+  { dialCode: '+32', flag: '🇧🇪', code: 'BE', name: 'Belgium' },
+  {
+    dialCode: '+33',
+    flag: '🇫🇷',
+    code: 'FR',
+    name: 'France',
+  },
+  { dialCode: '+34', flag: '🇪🇸', code: 'ES', name: 'Spain' },
+  {
+    dialCode: '+345',
+    flag: '🇰🇾',
+    code: 'KY',
+    name: 'Cayman Islands',
+  },
+  { dialCode: '+350', flag: '🇬🇮', code: 'GI', name: 'Gibraltar' },
+  {
+    dialCode: '+351',
+    flag: '🇵🇹',
+    code: 'PT',
+    name: 'Portugal',
+  },
+  { dialCode: '+352', flag: '🇱🇺', code: 'LU', name: 'Luxembourg' },
+  {
+    dialCode: '+353',
+    flag: '🇮🇪',
+    code: 'IE',
+    name: 'Ireland',
+  },
+  { dialCode: '+354', flag: '🇮🇸', code: 'IS', name: 'Iceland' },
+  {
+    dialCode: '+355',
+    flag: '🇦🇱',
+    code: 'AL',
+    name: 'Albania',
+  },
+  { dialCode: '+356', flag: '🇲🇹', code: 'MT', name: 'Malta' },
+  {
+    dialCode: '+357',
+    flag: '🇨🇾',
+    code: 'CY',
+    name: 'Cyprus',
+  },
+  { dialCode: '+358', flag: '🇦🇽', code: 'AX', name: 'Åland Islands' },
+  {
+    dialCode: '+358',
+    flag: '🇫🇮',
+    code: 'FI',
+    name: 'Finland',
+  },
+  { dialCode: '+359', flag: '🇧🇬', code: 'BG', name: 'Bulgaria' },
+  {
+    dialCode: '+36',
+    flag: '🇭🇺',
+    code: 'HU',
+    name: 'Hungary',
+  },
+  { dialCode: '+370', flag: '🇱🇹', code: 'LT', name: 'Lithuania' },
+  {
+    dialCode: '+371',
+    flag: '🇱🇻',
+    code: 'LV',
+    name: 'Latvia',
+  },
+  { dialCode: '+372', flag: '🇪🇪', code: 'EE', name: 'Estonia' },
+  {
+    dialCode: '+373',
+    flag: '🇲🇩',
+    code: 'MD',
+    name: 'Moldova',
+  },
+  { dialCode: '+374', flag: '🇦🇲', code: 'AM', name: 'Armenia' },
+  {
+    dialCode: '+375',
+    flag: '🇧🇾',
+    code: 'BY',
+    name: 'Belarus',
+  },
+  { dialCode: '+376', flag: '🇦🇩', code: 'AD', name: 'Andorra' },
+  {
+    dialCode: '+377',
+    flag: '🇲🇨',
+    code: 'MC',
+    name: 'Monaco',
+  },
+  { dialCode: '+378', flag: '🇸🇲', code: 'SM', name: 'San Marino' },
+  {
+    dialCode: '+379',
+    flag: '🇻🇦',
+    code: 'VA',
+    name: 'Holy See (Vatican City State)',
+  },
+  { dialCode: '+380', flag: '🇺🇦', code: 'UA', name: 'Ukraine' },
+  {
+    dialCode: '+381',
+    flag: '🇷🇸',
+    code: 'RS',
+    name: 'Serbia',
+  },
+  { dialCode: '+382', flag: '🇲🇪', code: 'ME', name: 'Montenegro' },
+  {
+    dialCode: '+383',
+    flag: '🇽🇰',
+    code: 'XK',
+    name: 'Kosovo',
+  },
+  { dialCode: '+385', flag: '🇭🇷', code: 'HR', name: 'Croatia' },
+  {
+    dialCode: '+386',
+    flag: '🇸🇮',
+    code: 'SI',
+    name: 'Slovenia',
+  },
+  { dialCode: '+387', flag: '🇧🇦', code: 'BA', name: 'Bosnia and Herzegovina' },
+  {
+    dialCode: '+389',
+    flag: '🇲🇰',
+    code: 'MK',
+    name: 'Macedonia',
+  },
+  { dialCode: '+39', flag: '🇮🇹', code: 'IT', name: 'Italy' },
+  {
+    dialCode: '+40',
+    flag: '🇷🇴',
+    code: 'RO',
+    name: 'Romania',
+  },
+  { dialCode: '+41', flag: '🇨🇭', code: 'CH', name: 'Switzerland' },
+  {
+    dialCode: '+420',
+    flag: '🇨🇿',
+    code: 'CZ',
+    name: 'Czech Republic',
+  },
+  { dialCode: '+421', flag: '🇸🇰', code: 'SK', name: 'Slovakia' },
+  {
+    dialCode: '+423',
+    flag: '🇱🇮',
+    code: 'LI',
+    name: 'Liechtenstein',
+  },
+  { dialCode: '+43', flag: '🇦🇹', code: 'AT', name: 'Austria' },
+  {
+    dialCode: '+44',
+    flag: '🇬🇬',
+    code: 'GG',
+    name: 'Guernsey',
+  },
+  { dialCode: '+44', flag: '🇮🇲', code: 'IM', name: 'Isle of Man' },
+  {
+    dialCode: '+44',
+    flag: '🇯🇪',
+    code: 'JE',
+    name: 'Jersey',
+  },
+  { dialCode: '+44', flag: '🇬🇧', code: 'GB', name: 'United Kingdom' },
+  {
+    dialCode: '+45',
+    flag: '🇩🇰',
+    code: 'DK',
+    name: 'Denmark',
+  },
+  { dialCode: '+46', flag: '🇸🇪', code: 'SE', name: 'Sweden' },
+  {
+    dialCode: '+47',
+    flag: '🇧🇻',
+    code: 'BV',
+    name: 'Bouvet Island',
+  },
+  { dialCode: '+47', flag: '🇳🇴', code: 'NO', name: 'Norway' },
+  {
+    dialCode: '+47',
+    flag: '🇸🇯',
+    code: 'SJ',
+    name: 'Svalbard and Jan Mayen',
+  },
+  { dialCode: '+48', flag: '🇵🇱', code: 'PL', name: 'Poland' },
+  {
+    dialCode: '+49',
+    flag: '🇩🇪',
+    code: 'DE',
+    name: 'Germany',
+  },
+  {
+    dialCode: '+500',
+    flag: '🇫🇰',
+    code: 'FK',
+    name: 'Falkland Islands (Malvinas)',
+  },
+  {
+    dialCode: '+500',
+    flag: '🇬🇸',
+    code: 'GS',
+    name: 'South Georgia and the South Sandwich Islands',
+  },
+  { dialCode: '+501', flag: '🇧🇿', code: 'BZ', name: 'Belize' },
+  {
+    dialCode: '+502',
+    flag: '🇬🇹',
+    code: 'GT',
+    name: 'Guatemala',
+  },
+  { dialCode: '+503', flag: '🇸🇻', code: 'SV', name: 'El Salvador' },
+  {
+    dialCode: '+504',
+    flag: '🇭🇳',
+    code: 'HN',
+    name: 'Honduras',
+  },
+  { dialCode: '+505', flag: '🇳🇮', code: 'NI', name: 'Nicaragua' },
+  {
+    dialCode: '+506',
+    flag: '🇨🇷',
+    code: 'CR',
+    name: 'Costa Rica',
+  },
+  { dialCode: '+507', flag: '🇵🇦', code: 'PA', name: 'Panama' },
+  {
+    dialCode: '+508',
+    flag: '🇵🇲',
+    code: 'PM',
+    name: 'Saint Pierre and Miquelon',
+  },
+  { dialCode: '+509', flag: '🇭🇹', code: 'HT', name: 'Haiti' },
+  {
+    dialCode: '+51',
+    flag: '🇵🇪',
+    code: 'PE',
+    name: 'Peru',
+  },
+  { dialCode: '+52', flag: '🇲🇽', code: 'MX', name: 'Mexico' },
+  {
+    dialCode: '+53',
+    flag: '🇨🇺',
+    code: 'CU',
+    name: 'Cuba',
+  },
+  { dialCode: '+54', flag: '🇦🇷', code: 'AR', name: 'Argentina' },
+  {
+    dialCode: '+55',
+    flag: '🇧🇷',
+    code: 'BR',
+    name: 'Brazil',
+  },
+  { dialCode: '+56', flag: '🇨🇱', code: 'CL', name: 'Chile' },
+  {
+    dialCode: '+57',
+    flag: '🇨🇴',
+    code: 'CO',
+    name: 'Colombia',
+  },
+  {
+    dialCode: '+58',
+    flag: '🇻🇪',
+    code: 'VE',
+    name: 'Venezuela, Bolivarian Republic of Venezuela',
+  },
+  { dialCode: '+590', flag: '🇬🇵', code: 'GP', name: 'Guadeloupe' },
+  {
+    dialCode: '+590',
+    flag: '🇧🇱',
+    code: 'BL',
+    name: 'Saint Barthelemy',
+  },
+  { dialCode: '+590', flag: '🇲🇫', code: 'MF', name: 'Saint Martin' },
+  {
+    dialCode: '+591',
+    flag: '🇧🇴',
+    code: 'BO',
+    name: 'Bolivia, Plurinational State of bolivia',
+  },
+  { dialCode: '+592', flag: '🇬🇾', code: 'GY', name: 'Guyana' },
+  {
+    dialCode: '+593',
+    flag: '🇪🇨',
+    code: 'EC',
+    name: 'Ecuador',
+  },
+  { dialCode: '+594', flag: '🇬🇫', code: 'GF', name: 'French Guiana' },
+  {
+    dialCode: '+595',
+    flag: '🇵🇾',
+    code: 'PY',
+    name: 'Paraguay',
+  },
+  { dialCode: '+596', flag: '🇲🇶', code: 'MQ', name: 'Martinique' },
+  {
+    dialCode: '+597',
+    flag: '🇸🇷',
+    code: 'SR',
+    name: 'Suriname',
+  },
+  { dialCode: '+598', flag: '🇺🇾', code: 'UY', name: 'Uruguay' },
+  {
+    dialCode: '+599',
+    flag: '',
+    code: 'AN',
+    name: 'Netherlands Antilles',
+  },
+  { dialCode: '+60', flag: '🇲🇾', code: 'MY', name: 'Malaysia' },
+  {
+    dialCode: '+61',
+    flag: '🇦🇺',
+    code: 'AU',
+    name: 'Australia',
+  },
+  { dialCode: '+61', flag: '🇨🇽', code: 'CX', name: 'Christmas Island' },
+  {
+    dialCode: '+61',
+    flag: '🇨🇨',
+    code: 'CC',
+    name: 'Cocos (Keeling) Islands',
+  },
+  { dialCode: '+62', flag: '🇮🇩', code: 'ID', name: 'Indonesia' },
+  {
+    dialCode: '+63',
+    flag: '🇵🇭',
+    code: 'PH',
+    name: 'Philippines',
+  },
+  { dialCode: '+64', flag: '🇳🇿', code: 'NZ', name: 'New Zealand' },
+  {
+    dialCode: '+64',
+    flag: '🇵🇳',
+    code: 'PN',
+    name: 'Pitcairn',
+  },
+  { dialCode: '+65', flag: '🇸🇬', code: 'SG', name: 'Singapore' },
+  {
+    dialCode: '+66',
+    flag: '🇹🇭',
+    code: 'TH',
+    name: 'Thailand',
+  },
+  { dialCode: '+670', flag: '🇹🇱', code: 'TL', name: 'Timor-Leste' },
+  {
+    dialCode: '+672',
+    flag: '🇦🇶',
+    code: 'AQ',
+    name: 'Antarctica',
+  },
+  {
+    dialCode: '+672',
+    flag: '🇭🇲',
+    code: 'HM',
+    name: 'Heard Island and Mcdonald Islands',
+  },
+  { dialCode: '+672', flag: '🇳🇫', code: 'NF', name: 'Norfolk Island' },
+  {
+    dialCode: '+673',
+    flag: '🇧🇳',
+    code: 'BN',
+    name: 'Brunei Darussalam',
+  },
+  { dialCode: '+674', flag: '🇳🇷', code: 'NR', name: 'Nauru' },
+  {
+    dialCode: '+675',
+    flag: '🇵🇬',
+    code: 'PG',
+    name: 'Papua New Guinea',
+  },
+  { dialCode: '+676', flag: '🇹🇴', code: 'TO', name: 'Tonga' },
+  {
+    dialCode: '+677',
+    flag: '🇸🇧',
+    code: 'SB',
+    name: 'Solomon Islands',
+  },
+  { dialCode: '+678', flag: '🇻🇺', code: 'VU', name: 'Vanuatu' },
+  {
+    dialCode: '+679',
+    flag: '🇫🇯',
+    code: 'FJ',
+    name: 'Fiji',
+  },
+  { dialCode: '+680', flag: '🇵🇼', code: 'PW', name: 'Palau' },
+  {
+    dialCode: '+681',
+    flag: '🇼🇫',
+    code: 'WF',
+    name: 'Wallis and Futuna',
+  },
+  { dialCode: '+682', flag: '🇨🇰', code: 'CK', name: 'Cook Islands' },
+  {
+    dialCode: '+683',
+    flag: '🇳🇺',
+    code: 'NU',
+    name: 'Niue',
+  },
+  { dialCode: '+685', flag: '🇼🇸', code: 'WS', name: 'Samoa' },
+  {
+    dialCode: '+686',
+    flag: '🇰🇮',
+    code: 'KI',
+    name: 'Kiribati',
+  },
+  { dialCode: '+687', flag: '🇳🇨', code: 'NC', name: 'New Caledonia' },
+  {
+    dialCode: '+688',
+    flag: '🇹🇻',
+    code: 'TV',
+    name: 'Tuvalu',
+  },
+  { dialCode: '+689', flag: '🇵🇫', code: 'PF', name: 'French Polynesia' },
+  {
+    dialCode: '+690',
+    flag: '🇹🇰',
+    code: 'TK',
+    name: 'Tokelau',
+  },
+  {
+    dialCode: '+691',
+    flag: '🇫🇲',
+    code: 'FM',
+    name: 'Micronesia, Federated States of Micronesia',
+  },
+  { dialCode: '+692', flag: '🇲🇭', code: 'MH', name: 'Marshall Islands' },
+  {
+    dialCode: '+7',
+    flag: '🇰🇿',
+    code: 'KZ',
+    name: 'Kazakhstan',
+  },
+  { dialCode: '+7', flag: '🇷🇺', code: 'RU', name: 'Russia' },
+  {
+    dialCode: '+81',
+    flag: '🇯🇵',
+    code: 'JP',
+    name: 'Japan',
+  },
+  {
+    dialCode: '+82',
+    flag: '🇰🇷',
+    code: 'KR',
+    name: 'Korea, Republic of South Korea',
+  },
+  {
+    dialCode: '+84',
+    flag: '🇻🇳',
+    code: 'VN',
+    name: 'Vietnam',
+  },
+  {
+    dialCode: '+850',
+    flag: '🇰🇵',
+    code: 'KP',
+    name: "Korea, Democratic People's Republic of Korea",
+  },
+  { dialCode: '+852', flag: '🇭🇰', code: 'HK', name: 'Hong Kong' },
+  {
+    dialCode: '+853',
+    flag: '🇲🇴',
+    code: 'MO',
+    name: 'Macao',
+  },
+  { dialCode: '+855', flag: '🇰🇭', code: 'KH', name: 'Cambodia' },
+  {
+    dialCode: '+856',
+    flag: '🇱🇦',
+    code: 'LA',
+    name: 'Laos',
+  },
+  { dialCode: '+86', flag: '🇨🇳', code: 'CN', name: 'China' },
+  {
+    dialCode: '+880',
+    flag: '🇧🇩',
+    code: 'BD',
+    name: 'Bangladesh',
+  },
+  { dialCode: '+886', flag: '🇹🇼', code: 'TW', name: 'Taiwan' },
+  {
+    dialCode: '+90',
+    flag: '🇹🇷',
+    code: 'TR',
+    name: 'Turkey',
+  },
+  { dialCode: '+91', flag: '🇮🇳', code: 'IN', name: 'India' },
+  {
+    dialCode: '+92',
+    flag: '🇵🇰',
+    code: 'PK',
+    name: 'Pakistan',
+  },
+  { dialCode: '+93', flag: '🇦🇫', code: 'AF', name: 'Afghanistan' },
+  {
+    dialCode: '+94',
+    flag: '🇱🇰',
+    code: 'LK',
+    name: 'Sri Lanka',
+  },
+  { dialCode: '+95', flag: '🇲🇲', code: 'MM', name: 'Myanmar' },
+  {
+    dialCode: '+960',
+    flag: '🇲🇻',
+    code: 'MV',
+    name: 'Maldives',
+  },
+  { dialCode: '+961', flag: '🇱🇧', code: 'LB', name: 'Lebanon' },
+  {
+    dialCode: '+962',
+    flag: '🇯🇴',
+    code: 'JO',
+    name: 'Jordan',
+  },
+  { dialCode: '+963', flag: '🇸🇾', code: 'SY', name: 'Syrian Arab Republic' },
+  {
+    dialCode: '+964',
+    flag: '🇮🇶',
+    code: 'IQ',
+    name: 'Iraq',
+  },
+  { dialCode: '+965', flag: '🇰🇼', code: 'KW', name: 'Kuwait' },
+  {
+    dialCode: '+966',
+    flag: '🇸🇦',
+    code: 'SA',
+    name: 'Saudi Arabia',
+  },
+  { dialCode: '+967', flag: '🇾🇪', code: 'YE', name: 'Yemen' },
+  {
+    dialCode: '+968',
+    flag: '🇴🇲',
+    code: 'OM',
+    name: 'Oman',
+  },
+  {
+    dialCode: '+970',
+    flag: '🇵🇸',
+    code: 'PS',
+    name: 'Palestinian Territory, Occupied',
+  },
+  { dialCode: '+971', flag: '🇦🇪', code: 'AE', name: 'United Arab Emirates' },
+  {
+    dialCode: '+972',
+    flag: '🇮🇱',
+    code: 'IL',
+    name: 'Israel',
+  },
+  { dialCode: '+973', flag: '🇧🇭', code: 'BH', name: 'Bahrain' },
+  {
+    dialCode: '+974',
+    flag: '🇶🇦',
+    code: 'QA',
+    name: 'Qatar',
+  },
+  { dialCode: '+975', flag: '🇧🇹', code: 'BT', name: 'Bhutan' },
+  {
+    dialCode: '+976',
+    flag: '🇲🇳',
+    code: 'MN',
+    name: 'Mongolia',
+  },
+  { dialCode: '+977', flag: '🇳🇵', code: 'NP', name: 'Nepal' },
+  {
+    dialCode: '+98',
+    flag: '🇮🇷',
+    code: 'IR',
+    name: 'Iran, Islamic Republic of Persian Gulf',
+  },
+  { dialCode: '+992', flag: '🇹🇯', code: 'TJ', name: 'Tajikistan' },
+  {
+    dialCode: '+993',
+    flag: '🇹🇲',
+    code: 'TM',
+    name: 'Turkmenistan',
+  },
+  { dialCode: '+994', flag: '🇦🇿', code: 'AZ', name: 'Azerbaijan' },
+  {
+    dialCode: '+995',
+    flag: '🇬🇪',
+    code: 'GE',
+    name: 'Georgia',
+  },
+  { dialCode: '+996', flag: '🇰🇬', code: 'KG', name: 'Kyrgyzstan' },
+  {
+    dialCode: '+998',
+    flag: '🇺🇿',
+    code: 'UZ',
+    name: 'Uzbekistan',
+  },
+];