Implement Nft dashboard

package.json

@@ -24,12 +24,14 @@
     "react-content-loader": "^6.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^11.18.6",
+    "react-image": "^2.4.0",
     "react-modal": "^3.15.1",
     "react-number-format": "^5.0.0",
     "react-qr-code": "^2.0.8",
     "react-redux": "^7.2.1",
     "react-router-dom": "^6.4.0",
     "react-select": "^5.4.0",
+    "react-share": "^4.4.1",
     "react-simple-snackbar": "^1.1.11",
     "react-spinners-css": "^2.0.1",
     "react-switch": "^7.0.0",

src/app/components/shareNft/index.tsx

@@ -0,0 +1,73 @@
+import styled, { useTheme } from 'styled-components';
+import {
+  FacebookShareButton, TwitterShareButton, EmailShareButton,
+} from 'react-share';
+import { useTranslation } from 'react-i18next';
+import FBIcon from '@assets/img/nftDashboard/shareNft/facebook-f.svg';
+import EmailIcon from '@assets/img/nftDashboard/shareNft/Envelope.svg';
+import LinkIcon from '@assets/img/nftDashboard/shareNft/Link.svg';
+import TwitterIcon from '@assets/img/nftDashboard/shareNft/Vector.svg';
+import Cross from '@assets/img/dashboard/X.svg';
+import ShareLinkRow from './shareLinkRow';
+
+const Container = styled.button((props) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  justifyContent: 'center',
+  paddingLeft: props.theme.spacing(6),
+  paddingRight: props.theme.spacing(8),
+  paddingTop: props.theme.spacing(8),
+  paddingBottom: props.theme.spacing(8),
+  borderRadius: props.theme.radius(6),
+  width: 260,
+  background: props.theme.colors.background.elevation2,
+}));
+
+const CrossContainer = styled.button(() => ({
+  display: 'flex',
+  alignItems: 'flex-end',
+  justifyContent: 'flex-end',
+  background: 'transparent',
+  width: '100%',
+
+}));
+
+interface Props {
+  url: string;
+  onCrossClick: () => void;
+}
+function ShareDialog({ url, onCrossClick }: Props) {
+  const { t } = useTranslation('translation', { keyPrefix: 'NFT_DASHBOARD_SCREEN' });
+  const theme = useTheme();
+
+  const onCopyPress = () => {
+    navigator.clipboard.writeText(url);
+  };
+
+  return (
+    <Container>
+      <CrossContainer onClick={onCrossClick}>
+        <img src={Cross} alt="cross" width={16} height={16} />
+      </CrossContainer>
+      <FacebookShareButton
+        url={url}
+      >
+        <ShareLinkRow img={FBIcon} background="#4267B2" text={t('FACEBOOK')} />
+      </FacebookShareButton>
+      <TwitterShareButton
+        url={url}
+      >
+        <ShareLinkRow img={TwitterIcon} background="#4D9FEB" text={t('TWITTER')} />
+      </TwitterShareButton>
+      <EmailShareButton url={url}>
+        <ShareLinkRow img={EmailIcon} background="#4C5187" text={t('MAIL')} />
+      </EmailShareButton>
+      <ShareLinkRow onClick={onCopyPress} img={LinkIcon} background={theme.colors.white['400']} text={t('COPY')} />
+    </Container>
+  );
+}
+
+export default ShareDialog;

src/app/components/shareNft/shareLinkRow.tsx

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+
+const RowContainer = styled.button`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: transparent;
+  justify-content: center;
+  padding: 8px;
+  :hover {
+    opacity: 0.8;
+  }
+  :active {
+    opacity: 0.6;
+  }
+`;
+
+interface ImgContainerProps {
+  color: string
+}
+
+const ImgContainer = styled.div<ImgContainerProps>((props) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  background: props.color,
+  width: 32,
+  height: 32,
+  borderRadius: 25,
+  padding: props.theme.spacing(6),
+}));
+
+const Text = styled.h1((props) => ({
+  ...props.theme.body_medium_m,
+  color: props.theme.colors.white['0'],
+  marginLeft: props.theme.spacing(6),
+}));
+
+interface Props {
+  img: string,
+  text: string,
+  background: string
+  onClick?: () => void;
+}
+
+function ShareLinkRow({
+  img, text, background, onClick,
+}: Props) {
+  return (
+    <RowContainer onClick={onClick}>
+      <ImgContainer color={background}>
+        <img src={img} alt="option" />
+      </ImgContainer>
+      <Text>{text}</Text>
+    </RowContainer>
+  );
+}
+
+export default ShareLinkRow;

src/app/components/tabBar/index.tsx

@@ -38,7 +38,7 @@ function BottomTabBar({ tab }:Props) {
   };
 
   const handleNftButtonClick = () => {
-
+    if (tab !== 'nft') { navigate('/nft-dashboard'); }
   };
 
   const handleStackingButtonClick = () => {

src/app/routes/index.tsx

@@ -20,6 +20,7 @@ import Login from '@screens/login';
 import RestoreWallet from '@screens/restoreWallet';
 import ForgotPassword from '@screens/forgotPassword';
 import BackupWalletSteps from '@screens/backupWalletSteps';
+import NftDashboard from '@screens/nftDashboard';
 import Setting from '@screens/settings';
 import FiatCurrencyScreen from '@screens/settings/fiatCurrency';
 import ChangePasswordScreen from '@screens/settings/changePassword';
@@ -111,6 +112,10 @@ const router = createHashRouter([
         path: 'backupWalletSteps',
         element: <BackupWalletSteps />,
       },
+      {
+        path: 'nft-dashboard',
+        element: <NftDashboard />,
+      },
       {
         path: 'settings',
         element: <Setting />,

src/app/screens/accountList/index.tsx

@@ -11,8 +11,6 @@ import { StoreState } from '@stores/index';
 import { Account } from '@stores/wallet/actions/types';
 import { walletFromSeedPhrase } from '@secretkeylabs/xverse-core/wallet';
 import { getBnsName } from '@secretkeylabs/xverse-core/api';
-import { SettingsNetwork } from '@secretkeylabs/xverse-core';
-import { initialNetworksList } from '@utils/constants';
 
 const Container = styled.div`
   display: flex;

src/app/screens/home/balanceCard/index.tsx

@@ -50,7 +50,7 @@ const CurrencyCard = styled.div((props) => ({
   marginLeft: props.theme.spacing(4),
 }));
 
-function BalanceCard(): JSX.Element {
+function BalanceCard() {
   const { t } = useTranslation('translation', { keyPrefix: 'DASHBOARD_SCREEN' });
   const {
     fiatCurrency,