diff --git a/packages/wallets/package-lock.json b/packages/wallets/package-lock.json
new file mode 100644
index 000000000000..7498356f9edc
--- /dev/null
+++ b/packages/wallets/package-lock.json
@@ -0,0 +1,192 @@
+{
+ "name": "@deriv/wallets",
+ "version": "1.0.0",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "@deriv/wallets",
+ "version": "1.0.0",
+ "dependencies": {
+ "@deriv/api": "^1.0.0",
+ "embla-carousel-react": "^8.0.0-rc12",
+ "react": "^17.0.2"
+ },
+ "devDependencies": {
+ "typescript": "^4.6.3"
+ }
+ },
+ "../api": {
+ "name": "@deriv/api",
+ "version": "1.0.0",
+ "dependencies": {
+ "@deriv/shared": "^1.0.0",
+ "@deriv/utils": "^1.0.0",
+ "@tanstack/react-query": "^4.28.0",
+ "@tanstack/react-query-devtools": "^4.28.0",
+ "react": "^17.0.2"
+ },
+ "devDependencies": {
+ "@deriv/api-types": "^1.0.118",
+ "@testing-library/react": "^12.0.0",
+ "@testing-library/react-hooks": "^7.0.2",
+ "@testing-library/user-event": "^13.5.0",
+ "typescript": "^4.6.3"
+ }
+ },
+ "../api/node_modules/@deriv/shared": {
+ "resolved": "../shared",
+ "link": true
+ },
+ "../api/node_modules/@deriv/utils": {
+ "resolved": "../utils",
+ "link": true
+ },
+ "../shared": {
+ "name": "@deriv/shared",
+ "version": "1.0.0",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "@deriv/api-types": "^1.0.118",
+ "@deriv/translations": "^1.0.0",
+ "@types/js-cookie": "^3.0.1",
+ "@types/react-loadable": "^5.5.6",
+ "canvas-toBlob": "^1.0.0",
+ "extend": "^3.0.2",
+ "i18next": "^22.4.6",
+ "js-cookie": "^2.2.1",
+ "mobx": "^6.6.1",
+ "moment": "^2.29.2",
+ "object.fromentries": "^2.0.0",
+ "react": "^17.0.2",
+ "react-loadable": "^5.5.0"
+ },
+ "devDependencies": {
+ "@babel/eslint-parser": "^7.17.0",
+ "@babel/preset-react": "^7.16.7",
+ "@types/jsdom": "^20.0.0",
+ "@types/react": "^18.0.7",
+ "@types/react-dom": "^18.0.0",
+ "jsdom": "^21.1.1",
+ "moment": "^2.29.2",
+ "typescript": "^4.6.3"
+ },
+ "engines": {
+ "node": "18.x"
+ }
+ },
+ "../shared/node_modules/@deriv/translations": {
+ "resolved": "../translations",
+ "link": true
+ },
+ "../translations": {
+ "name": "@deriv/translations",
+ "version": "1.0.0",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "commander": "^3.0.2",
+ "crc-32": "^1.2.0",
+ "glob": "^7.1.5",
+ "i18next": "^22.4.6",
+ "prop-types": "^15.7.2",
+ "react": "^17.0.2",
+ "react-i18next": "^11.11.0"
+ },
+ "devDependencies": {
+ "@babel/eslint-parser": "^7.17.0",
+ "@babel/preset-react": "^7.16.7",
+ "@xmldom/xmldom": "^0.8.4",
+ "cross-env": "^5.2.0"
+ },
+ "engines": {
+ "node": "18.x"
+ }
+ },
+ "../utils": {
+ "name": "@deriv/utils",
+ "version": "1.0.0",
+ "devDependencies": {
+ "@deriv/api-types": "^1.0.118",
+ "typescript": "^4.6.3"
+ }
+ },
+ "node_modules/@deriv/api": {
+ "resolved": "../api",
+ "link": true
+ },
+ "node_modules/embla-carousel": {
+ "version": "8.0.0-rc12",
+ "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.0-rc12.tgz",
+ "integrity": "sha512-/Xkf5zp9gs9Y45lSAT1Witn+r+o+EtoIIZg4V2lYTCaaqdDTxyO0Ddn+z00ya38JGNZrGH9U8wLGK5Hi76CRxw=="
+ },
+ "node_modules/embla-carousel-react": {
+ "version": "8.0.0-rc12",
+ "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.0.0-rc12.tgz",
+ "integrity": "sha512-Tyd9TNH9i8bb/0S9/WZsmEvfZm8jlFU9sgaWNNgLzbPsUtz/L6UTYuRGOBDOt2oh6VPhaL1G8vRuOAuH81G5Cg==",
+ "dependencies": {
+ "embla-carousel": "8.0.0-rc12",
+ "embla-carousel-reactive-utils": "8.0.0-rc12"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.1 || ^18.0.0"
+ }
+ },
+ "node_modules/embla-carousel-reactive-utils": {
+ "version": "8.0.0-rc12",
+ "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.0.0-rc12.tgz",
+ "integrity": "sha512-sHYqMYW2qk9UXNMLoBmo4PRe+8qOW8CJDDqfkMB0WlSfrzgi9fCc36nArQz6k9olHsVfEc3haw00KiqRBvVwEg==",
+ "peerDependencies": {
+ "embla-carousel": "8.0.0-rc12"
+ }
+ },
+ "node_modules/js-tokens": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+ },
+ "node_modules/loose-envify": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+ "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+ "dependencies": {
+ "js-tokens": "^3.0.0 || ^4.0.0"
+ },
+ "bin": {
+ "loose-envify": "cli.js"
+ }
+ },
+ "node_modules/object-assign": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+ "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/react": {
+ "version": "17.0.2",
+ "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+ "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+ "dependencies": {
+ "loose-envify": "^1.1.0",
+ "object-assign": "^4.1.1"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/typescript": {
+ "version": "4.9.5",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+ "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+ "dev": true,
+ "bin": {
+ "tsc": "bin/tsc",
+ "tsserver": "bin/tsserver"
+ },
+ "engines": {
+ "node": ">=4.2.0"
+ }
+ }
+ }
+}
diff --git a/packages/wallets/package.json b/packages/wallets/package.json
index 0e2aac1a5022..9719e0e68127 100644
--- a/packages/wallets/package.json
+++ b/packages/wallets/package.json
@@ -5,6 +5,7 @@
"main": "src/index.tsx",
"dependencies": {
"@deriv/api": "^1.0.0",
+ "embla-carousel-react": "^8.0.0-rc12",
"react": "^17.0.2"
},
"devDependencies": {
diff --git a/packages/wallets/src/AppContent.tsx b/packages/wallets/src/AppContent.tsx
index 8e113263805f..362923fad06e 100644
--- a/packages/wallets/src/AppContent.tsx
+++ b/packages/wallets/src/AppContent.tsx
@@ -1,10 +1,12 @@
import React from 'react';
import WalletList from './components/WalletList';
+import WalletsCarousel from './components/WalletCarousel';
const AppContent: React.FC = () => {
return (
+
);
};
diff --git a/packages/wallets/src/components/AccountsList/AccountsList.scss b/packages/wallets/src/components/AccountsList/AccountsList.scss
new file mode 100644
index 000000000000..6ae8d85677e2
--- /dev/null
+++ b/packages/wallets/src/components/AccountsList/AccountsList.scss
@@ -0,0 +1,5 @@
+.accounts-list {
+ height: 60vh;
+ width: 100vw;
+ margin-top: 2rem;
+}
diff --git a/packages/wallets/src/components/AccountsList/AccountsList.tsx b/packages/wallets/src/components/AccountsList/AccountsList.tsx
new file mode 100644
index 000000000000..2839ada6fb10
--- /dev/null
+++ b/packages/wallets/src/components/AccountsList/AccountsList.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+type TAccountsListProps = {
+ data: {
+ text: string;
+ background: string;
+ };
+};
+
+const AccountsList = ({ data }: TAccountsListProps) => {
+ return (
+
+ AccountsList
+
+ );
+};
+
+export default AccountsList;
diff --git a/packages/wallets/src/components/AccountsList/index.ts b/packages/wallets/src/components/AccountsList/index.ts
new file mode 100644
index 000000000000..4db422e5d758
--- /dev/null
+++ b/packages/wallets/src/components/AccountsList/index.ts
@@ -0,0 +1,4 @@
+import AccountsList from './AccountsList';
+import './AccountsList.scss';
+
+export default AccountsList;
diff --git a/packages/wallets/src/components/WalletCarousel/WalletsCarousel.scss b/packages/wallets/src/components/WalletCarousel/WalletsCarousel.scss
new file mode 100644
index 000000000000..2e554dacf007
--- /dev/null
+++ b/packages/wallets/src/components/WalletCarousel/WalletsCarousel.scss
@@ -0,0 +1,19 @@
+.wallets-carousel {
+ background-color: #f2f3f4;
+ width: 100vw;
+ padding: 2rem;
+
+ &__container {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 2.4rem;
+ }
+}
+
+.wallet-card {
+ width: 100%;
+ height: 13rem;
+ border-radius: 10%;
+}
diff --git a/packages/wallets/src/components/WalletCarousel/WalletsCarousel.tsx b/packages/wallets/src/components/WalletCarousel/WalletsCarousel.tsx
new file mode 100644
index 000000000000..1ca1d19a7b4e
--- /dev/null
+++ b/packages/wallets/src/components/WalletCarousel/WalletsCarousel.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import AccountsList from '../AccountsList';
+
+const WalletsCarousel = () => {
+ const [emblaRef, emblaApi] = useEmblaCarousel({ skipSnaps: true, containScroll: false });
+ const data = [
+ {
+ text: 'BTC',
+ background: 'yellow',
+ },
+ {
+ text: 'ETH',
+ background: 'blue',
+ },
+ {
+ text: 'USDT',
+ background: 'red',
+ },
+ ];
+
+ const [active_index, setActiveIndex] = useState(0);
+
+ React.useEffect(() => {
+ emblaApi?.scrollTo(active_index);
+ }, [active_index, emblaApi]);
+
+ React.useEffect(() => {
+ emblaApi?.on('select', () => {
+ const scroll_snap_index = emblaApi.selectedScrollSnap();
+ setActiveIndex(scroll_snap_index);
+ });
+ }, [emblaApi]);
+
+ return (
+
+
+
+ {data.map(item => (
+
+ {item.text}
+
+ ))}
+
+