From d03279c147bbeb87e98220a368dbf1d7cd0e735e Mon Sep 17 00:00:00 2001
From: sundr17 <sundoor1992@mail.ru>
Date: Sun, 28 Jan 2024 18:07:52 +0100
Subject: [PATCH] Added required connect wallet message on homepage

---
 public/locales/en/translation.json  |  1 +
 public/locales/ru/translation.json  |  1 +
 src/components/pages/Home/index.tsx | 54 ++++++++++++++++-------------
 src/styles/theme.scss               | 10 ++++++
 4 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 0480af2..91e6cd8 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -67,6 +67,7 @@
   "user_current_percent": "Current profit percent",
   "completeCountdownText": "You won't get a profit until you feed the pets",
   "homepage": {
+    "wallet_not_connected": "Please connect wallet to start your journey",
     "timer": "Until next feed",
     "finish_cycle_button": "Feed",
     "user_current_profit": "Current profit",
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
index 9b7154e..b88bb8c 100644
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@@ -68,6 +68,7 @@
   "user_current_percent": "Текущий процент",
   "completeCountdownText": "Вы не будете получать профит, пока не покормите питомцев",
   "homepage": {
+    "wallet_not_connected": "Пожалуйста, подключите кошелек для покупки вашего питомца",
     "timer": "До следующего кормления",
     "finish_cycle_button": "Кормить",
     "user_current_profit": "Текущий профит",
diff --git a/src/components/pages/Home/index.tsx b/src/components/pages/Home/index.tsx
index 83f9e9b..304a3d1 100644
--- a/src/components/pages/Home/index.tsx
+++ b/src/components/pages/Home/index.tsx
@@ -5,6 +5,7 @@ import { LinkContainer } from 'react-router-bootstrap';
 import Container from 'react-bootstrap/Container';
 import { Col, Row } from 'react-bootstrap';
 import Button from 'react-bootstrap/Button';
+import { useAccount } from 'wagmi';
 
 import { getBoughtData } from '@/services/data/items';
 import ItemsGrid from '@/components/common/ItemsGrid';
@@ -12,35 +13,40 @@ import TokenomicInfo from '@/components/pages/Home/TokenomicInfo';
 
 export default function Home() {
   const { t } = useTranslation();
+  const { isConnected: isWalletConnected } = useAccount();
   const boughtItems = getBoughtData();
 
   return (
     <Container fluid>
       <Row>
-        <Col sm="4">
-          <TokenomicInfo />
-        </Col>
-        <Col>
-          <ItemsGrid
-            items={boughtItems}
-            emptyPlaceholder={(
-              <div>
-                <p>{t('homepage.grid.empty.header')}</p>
-                <p>
-                  <Trans
-                    i18nKey="homepage.grid.empty.body"
-                    components={{
-                      tokenomicLink: <Link to="tokenomics" />,
-                    }}
-                  />
-                </p>
-                <LinkContainer to="/shop">
-                  <Button>{t('homepage.grid.empty.button')}</Button>
-                </LinkContainer>
-              </div>
-            )}
-          />
-        </Col>
+        {isWalletConnected ? (
+          <>
+            <Col sm="4">
+              <TokenomicInfo />
+            </Col>
+            <Col>
+              <ItemsGrid
+                items={boughtItems}
+                emptyPlaceholder={(
+                  <div>
+                    <p>{t('homepage.grid.empty.header')}</p>
+                    <p>
+                      <Trans
+                        i18nKey="homepage.grid.empty.body"
+                        components={{
+                          tokenomicLink: <Link to="tokenomics" />,
+                        }}
+                      />
+                    </p>
+                    <LinkContainer to="/shop">
+                      <Button>{t('homepage.grid.empty.button')}</Button>
+                    </LinkContainer>
+                  </div>
+                )}
+              />
+            </Col>
+          </>
+        ) : <p className="display-8">{t('homepage.wallet_not_connected')}</p>}
       </Row>
     </Container>
   );
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 52a8a8e..6211478 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -3,3 +3,13 @@
 
 // Import Bootstrap and its default variables
 @import 'bootstrap';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/variables';
+
+.display-7 {
+  @include font-size(2rem);
+}
+
+.display-8 {
+  @include font-size(1.5rem);
+}