OCT-2001: Transactions tile does not have correct empty state impleme…

…nted (#453)

## Description

## Definition of Done

1. [ ] If required, the desciption of your change is added to the [QA
changelog](https://www.notion.so/octantapp/Changelog-for-the-QA-d96fa3b411cf488bb1d8d9a598d88281)
2. [ ] Acceptance criteria are met.
3. [ ] PR is manually tested before the merge by developer(s).
    - [ ] Happy path is manually checked.
4. [ ] PR is manually tested by QA when their assistance is required
(1).
- [ ] Octant Areas & Test Cases are checked for impact and updated if
required (2).
5. [ ] Unit tests are added unless there is a reason to omit them.
6. [ ] Automated tests are added when required.
7. [ ] The code is merged.
8. [ ] Tech documentation is added / updated, reviewed and approved
(including mandatory approval by a code owner, should such exist for
changed files).
    - [ ] BE: Swagger documentation is updated.
9. [ ] When required by QA:
    - [ ] Deployed to the relevant environment.
    - [ ] Passed system tests.

---

(1) Developer(s) in coordination with QA decide whether it's required.
For small tickets introducing small changes QA assistance is most
probably not required.

(2) [Octant Areas & Test
Cases](https://docs.google.com/spreadsheets/d/1cRe6dxuKJV3a4ZskAwWEPvrFkQm6rEfyUCYwLTYw_Cc).

client/src/components/Home/HomeGridTransactions/TransactionsList/TransactionsList.module.scss

@@ -1,10 +1,12 @@
-.emptyHistoryInfo {
-  height: 7.2rem;
-  padding: 0 $historyHorizontalPadding;
-  display: flex;
-  align-items: center;
+.image {
+  width: 16rem;
+  margin: 1.6rem 0 3rem;
+}
+
+.info {
   color: $color-octant-grey5;
   font-size: $font-size-14;
-  font-weight: $font-weight-semibold;
-  width: 100%;
+  font-weight: $font-weight-bold;
+  text-align: center;
+  line-height: 2rem;
 }

client/src/components/Home/HomeGridTransactions/TransactionsList/TransactionsList.tsx

@@ -1,18 +1,22 @@
 import React, { FC, Fragment } from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 
 import TransactionsListItem from 'components/Home/HomeGridTransactions/TransactionsListItem';
+import Img from 'components/ui/Img';
 
 import styles from './TransactionsList.module.scss';
 import TransactionsListProps from './types';
 
 const TransactionsList: FC<TransactionsListProps> = ({ history }) => {
-  const { t } = useTranslation('translation', {
-    keyPrefix: 'components.home.homeGridTransactions.transactionsList',
-  });
-
   if (!history?.length) {
-    return <div className={styles.emptyHistoryInfo}>{t('emptyHistory')}</div>;
+    return (
+      <div>
+        <Img alt="swept" className={styles.image} src="/images/swept.webp" />
+        <div className={styles.info}>
+          <Trans i18nKey="components.home.homeGridTransactions.transactionsList.empty" />
+        </div>
+      </div>
+    );
   }
 
   return (

client/src/locales/en/translation.json

@@ -182,7 +182,7 @@
           }
         },
         "transactionsList": {
-          "emptyHistory": "You haven’t made any transactions yet"
+          "empty": "No transaction history yet. <br/>Lock some GLM to get started"
         },
         "transactionsListItem": {
           "allocatedRewards": "Allocated rewards",