Added required connect wallet message on homepage

SunDr17 · Jan 28, 2024 · d03279c · d03279c
1 parent 33804b3
commit d03279c
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 24 deletions.
diff --git 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
@@ -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
@@ -5,42 +5,48 @@ 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';
 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
@@ -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);
+}