wip: ui

tari-project · Nov 20, 2024 · d4b8657 · d4b8657
1 parent 3c33cc0
commit d4b8657
Show file tree

Hide file tree

Showing 15 changed files with 154 additions and 107 deletions.
diff --git a/public/locales/af/sidebar.json b/public/locales/af/sidebar.json
@@ -13,15 +13,16 @@
   "paper-wallet-tooltip-message": "Volg jou XTM oral deur jou Universe beursie met Tari Aurora te sinkroniseer.",
   "paper-wallet-tooltip-title": "Sinkroniseer met Foon",
   "recent-wins": "Onlangse oorwinnings",
+  "rewards": "Rewards",
   "setup-scheduler": "Stel skeduleerder op",
-  "show-history": "Wys geskiedenis",
-  "wallet-balance": "Beursie balans",
   "share": {
+    "button-text": "FLEX & NOOI",
+    "copied": "Skakel Gekopieer!",
     "history-item-button": "Flex & Nooi",
+    "reward": "my beloning",
     "title": "Ek het pas tari gemyn",
-    "winner-pill": "Wenner van blok",
-    "copied": "Skakel Gekopieer!",
-    "button-text": "FLEX & NOOI",
-    "reward": "my beloning"
-  }
+    "winner-pill": "Wenner van blok"
+  },
+  "show-history": "Wys geskiedenis",
+  "wallet-balance": "Beursie balans"
 }
diff --git a/public/locales/cn/sidebar.json b/public/locales/cn/sidebar.json
@@ -13,15 +13,16 @@
   "paper-wallet-tooltip-message": "通过将您的宇宙钱包同步到 Tari Aurora，随时随地跟踪您的 XTM。",
   "paper-wallet-tooltip-title": "与手机同步",
   "recent-wins": "最近的胜利",
+  "rewards": "Rewards",
   "setup-scheduler": "安装计划程序",
-  "show-history": "显示历史记录",
-  "wallet-balance": "钱包余额",
   "share": {
+    "button-text": "炫耀并邀请",
+    "copied": "链接已复制！",
     "history-item-button": "炫耀并邀请",
+    "reward": "我的奖励",
     "title": "我刚刚挖掘了Tari",
-    "winner-pill": "区块赢家",
-    "copied": "链接已复制！",
-    "button-text": "炫耀并邀请",
-    "reward": "我的奖励"
-  }
+    "winner-pill": "区块赢家"
+  },
+  "show-history": "显示历史记录",
+  "wallet-balance": "钱包余额"
 }
diff --git a/public/locales/de/sidebar.json b/public/locales/de/sidebar.json
@@ -13,15 +13,16 @@
   "paper-wallet-tooltip-message": "Verfolgen Sie Ihr XTM überall, indem Sie Ihr Universum-Wallet mit Tari Aurora synchronisieren.",
   "paper-wallet-tooltip-title": "Mit Telefon synchronisieren",
   "recent-wins": "Kürzliche Gewinne",
+  "rewards": "Rewards",
   "setup-scheduler": "Scheduler einrichten",
-  "show-history": "Verlauf anzeigen",
-  "wallet-balance": "Wallet-Balance",
   "share": {
+    "button-text": "FLEX & EINLADEN",
+    "copied": "Link kopiert!",
     "history-item-button": "Flex & Einladen",
+    "reward": "meine Belohnung",
     "title": "Ich habe gerade Tari gemined",
-    "winner-pill": "Gewinner des Blocks",
-    "copied": "Link kopiert!",
-    "button-text": "FLEX & EINLADEN",
-    "reward": "meine Belohnung"
-  }
+    "winner-pill": "Gewinner des Blocks"
+  },
+  "show-history": "Verlauf anzeigen",
+  "wallet-balance": "Wallet-Balance"
 }
diff --git a/public/locales/en/sidebar.json b/public/locales/en/sidebar.json
@@ -1,27 +1,28 @@
 {
-    "auto-miner": "Auto Miner",
-    "auto-miner-description": "Auto miner will turn on your miner when your machine is idle",
-    "block": "Block",
-    "hide-history": "Hide history",
-    "history-hide-button": "Hide History",
-    "history-show-button": "History",
-    "lost-connection": "Lost connection to the Tari Network. Reconnecting..",
-    "mining-schedules": "Mining Schedules",
-    "mining-schedules-description": "Schedule your mining activity",
-    "next-milestone": "Next Milestone",
-    "paper-wallet-button": "Sync with Phone",
-    "paper-wallet-tooltip-message": "Track your XTM balance anywhere by syncing Universe with Tari Aurora.",
-    "paper-wallet-tooltip-title": "Sync with Phone",
-    "recent-wins": "Recent wins",
-    "setup-scheduler": "Setup Scheduler",
-    "show-history": "Show history",
-    "wallet-balance": "Wallet Balance",
-    "share": {
-        "history-item-button": "Flex & Invite",
-        "title": "I just mined tari",
-        "winner-pill": "Winner of block",
-        "copied": "Link Copied!",
-        "button-text": "FLEX & INVITE",
-        "reward": "my reward"
-    }
-}
+  "auto-miner": "Auto Miner",
+  "auto-miner-description": "Auto miner will turn on your miner when your machine is idle",
+  "block": "Block",
+  "hide-history": "Hide history",
+  "history-hide-button": "Hide History",
+  "history-show-button": "History",
+  "lost-connection": "Lost connection to the Tari Network. Reconnecting..",
+  "mining-schedules": "Mining Schedules",
+  "mining-schedules-description": "Schedule your mining activity",
+  "next-milestone": "Next Milestone",
+  "paper-wallet-button": "Sync with Phone",
+  "paper-wallet-tooltip-message": "Track your XTM balance anywhere by syncing Universe with Tari Aurora.",
+  "paper-wallet-tooltip-title": "Sync with Phone",
+  "recent-wins": "Recent wins",
+  "rewards": "Rewards",
+  "setup-scheduler": "Setup Scheduler",
+  "share": {
+    "button-text": "FLEX & INVITE",
+    "copied": "Link Copied!",
+    "history-item-button": "Flex & Invite",
+    "reward": "my reward",
+    "title": "I just mined tari",
+    "winner-pill": "Winner of block"
+  },
+  "show-history": "Show history",
+  "wallet-balance": "Wallet Balance"
+}
diff --git a/public/locales/fr/sidebar.json b/public/locales/fr/sidebar.json
@@ -13,15 +13,16 @@
   "paper-wallet-tooltip-message": "Suivez votre XTM partout en synchronisant votre portefeuille Universe avec Tari Aurora.",
   "paper-wallet-tooltip-title": "Synchroniser avec le téléphone",
   "recent-wins": "Gains récents",
+  "rewards": "Rewards",
   "setup-scheduler": "Configurer le planificateur",
-  "show-history": "Afficher l\"historique",
-  "wallet-balance": "Solde du portefeuille",
   "share": {
+    "button-text": "FLEX & INVITER",
+    "copied": "Lien copié !",
     "history-item-button": "Flex & Inviter",
+    "reward": "ma récompense",
     "title": "Je viens de miner du tari",
-    "winner-pill": "Gagnant du bloc",
-    "copied": "Lien copié !",
-    "button-text": "FLEX & INVITER",
-    "reward": "ma récompense"
-  }
+    "winner-pill": "Gagnant du bloc"
+  },
+  "show-history": "Afficher l\"historique",
+  "wallet-balance": "Solde du portefeuille"
 }
diff --git a/public/locales/hi/sidebar.json b/public/locales/hi/sidebar.json
@@ -13,15 +13,16 @@
   "paper-wallet-tooltip-message": "अपने यूनिवर्स वॉलेट को तारी ऑरोरा से सिंक करके कहीं भी अपने XTM को ट्रैक करें।",
   "paper-wallet-tooltip-title": "फोन के साथ सिंक करें",
   "recent-wins": "हाल की जीत",
+  "rewards": "Rewards",
   "setup-scheduler": "शेड्यूलर सेटअप करें",
-  "show-history": "इतिहास दिखाएं",
-  "wallet-balance": "वॉलेट शेष",
   "share": {
+    "button-text": "फ्लेक्स और आमंत्रित करें",
+    "copied": "लिंक कॉपी हो गया!",
     "history-item-button": "फ्लेक्स और आमंत्रित करें",
+    "reward": "मेरा इनाम",
     "title": "मैंने अभी तारी माइन किया",
-    "winner-pill": "ब्लॉक का विजेता",
-    "copied": "लिंक कॉपी हो गया!",
-    "button-text": "फ्लेक्स और आमंत्रित करें",
-    "reward": "मेरा इनाम"
-  }
+    "winner-pill": "ब्लॉक का विजेता"
+  },
+  "show-history": "इतिहास दिखाएं",
+  "wallet-balance": "वॉलेट शेष"
 }
diff --git a/public/locales/id/sidebar.json b/public/locales/id/sidebar.json
@@ -13,15 +13,16 @@
   "paper-wallet-tooltip-message": "Lacak XTM Anda di mana saja dengan menyinkronkan dompet Universe Anda ke Tari Aurora.",
   "paper-wallet-tooltip-title": "Sinkronkan dengan Ponsel",
   "recent-wins": "Kemenangan terbaru",
+  "rewards": "Rewards",
   "setup-scheduler": "Atur Penjadwal",
-  "show-history": "Tampilkan riwayat",
-  "wallet-balance": "Saldo Dompet",
   "share": {
+    "button-text": "PAMER & UNDANG",
+    "copied": "Tautan Tersalin!",
     "history-item-button": "Pamer & Undang",
+    "reward": "hadiah saya",
     "title": "Saya baru saja menambang tari",
-    "winner-pill": "Pemenang blok",
-    "copied": "Tautan Tersalin!",
-    "button-text": "PAMER & UNDANG",
-    "reward": "hadiah saya"
-  }
+    "winner-pill": "Pemenang blok"
+  },
+  "show-history": "Tampilkan riwayat",
+  "wallet-balance": "Saldo Dompet"
 }
diff --git a/public/locales/ja/sidebar.json b/public/locales/ja/sidebar.json
@@ -13,15 +13,16 @@
   "paper-wallet-tooltip-message": "Tari AuroraにUniverseウォレットを同期して、どこでもXTMを追跡できます。",
   "paper-wallet-tooltip-title": "電話と同期",
   "recent-wins": "最近の勝利",
+  "rewards": "Rewards",
   "setup-scheduler": "スケジューラの設定",
-  "show-history": "履歴を表示",
-  "wallet-balance": "ウォレット残高",
   "share": {
+    "button-text": "フレックス＆招待",
+    "copied": "リンクをコピーしました！",
     "history-item-button": "フレックス＆招待",
+    "reward": "私の報酬",
     "title": "Tariをマイニングしました",
-    "winner-pill": "ブロックの勝者",
-    "copied": "リンクをコピーしました！",
-    "button-text": "フレックス＆招待",
-    "reward": "私の報酬"
-  }
+    "winner-pill": "ブロックの勝者"
+  },
+  "show-history": "履歴を表示",
+  "wallet-balance": "ウォレット残高"
 }
diff --git a/public/locales/ko/sidebar.json b/public/locales/ko/sidebar.json
@@ -13,15 +13,16 @@
   "paper-wallet-tooltip-message": "Universe 지갑을 Tari Aurora에 동기화하여 어디서든 XTM을 추적하세요.",
   "paper-wallet-tooltip-title": "휴대폰과 동기화",
   "recent-wins": "최근 승리",
+  "rewards": "Rewards",
   "setup-scheduler": "스케줄러 설정",
-  "show-history": "기록 보기",
-  "wallet-balance": "지갑 잔액",
   "share": {
+    "button-text": "자랑하고 초대하기",
+    "copied": "링크가 복사되었습니다!",
     "history-item-button": "자랑하고 초대하기",
+    "reward": "내 보상",
     "title": "방금 타리를 채굴했습니다",
-    "winner-pill": "블록 승자",
-    "copied": "링크가 복사되었습니다!",
-    "button-text": "자랑하고 초대하기",
-    "reward": "내 보상"
-  }
+    "winner-pill": "블록 승자"
+  },
+  "show-history": "기록 보기",
+  "wallet-balance": "지갑 잔액"
 }
diff --git a/public/locales/pl/sidebar.json b/public/locales/pl/sidebar.json
@@ -13,15 +13,16 @@
   "paper-wallet-tooltip-message": "Śledź swoje XTM wszędzie, synchronizując portfel Universe z Tari Aurora.",
   "paper-wallet-tooltip-title": "Synchronizuj z telefonem",
   "recent-wins": "Ostanie wygrane",
+  "rewards": "Rewards",
   "setup-scheduler": "Ustawienia harmonogramu",
-  "show-history": "Pokaż historię",
-  "wallet-balance": "Saldo portfela",
   "share": {
+    "button-text": "POCHWAL SIĘ I ZAPROŚ",
+    "copied": "Link skopiowany!",
     "history-item-button": "Pochwal się i zaproś",
+    "reward": "moja nagroda",
     "title": "Właśnie wykopałem tari",
-    "winner-pill": "Zwycięzca bloku",
-    "copied": "Link skopiowany!",
-    "button-text": "POCHWAL SIĘ I ZAPROŚ",
-    "reward": "moja nagroda"
-  }
+    "winner-pill": "Zwycięzca bloku"
+  },
+  "show-history": "Pokaż historię",
+  "wallet-balance": "Saldo portfela"
 }
diff --git a/public/locales/ru/sidebar.json b/public/locales/ru/sidebar.json
@@ -13,15 +13,16 @@
   "paper-wallet-tooltip-message": "Отслеживайте свои XTM в любом месте, синхронизируя кошелек Universe с Tari Aurora.",
   "paper-wallet-tooltip-title": "Синхронизировать с телефоном",
   "recent-wins": "Последние выигрыши",
+  "rewards": "Rewards",
   "setup-scheduler": "Настройка планировщика",
-  "show-history": "Показать историю",
-  "wallet-balance": "Баланс кошелька",
   "share": {
+    "button-text": "ПОХВАСТАТЬСЯ И ПРИГЛАСИТЬ",
+    "copied": "Ссылка скопирована!",
     "history-item-button": "Похвастаться и пригласить",
+    "reward": "моя награда",
     "title": "Я только что намайнил Tari",
-    "winner-pill": "Победитель блока",
-    "copied": "Ссылка скопирована!",
-    "button-text": "ПОХВАСТАТЬСЯ И ПРИГЛАСИТЬ",
-    "reward": "моя награда"
-  }
+    "winner-pill": "Победитель блока"
+  },
+  "show-history": "Показать историю",
+  "wallet-balance": "Баланс кошелька"
 }
diff --git a/public/locales/tr/sidebar.json b/public/locales/tr/sidebar.json
@@ -13,15 +13,16 @@
   "paper-wallet-tooltip-message": "Universe cüzdanınızı Tari Aurora ile senkronize ederek XTM\"inizi her yerde takip edin.",
   "paper-wallet-tooltip-title": "Telefonla Senkronize Et",
   "recent-wins": "Son Kazançlar",
+  "rewards": "Rewards",
   "setup-scheduler": "Kurulum Planlayıcısı",
-  "show-history": "Geçmişi göster",
-  "wallet-balance": "Cüzdan Bakiyesi",
   "share": {
+    "button-text": "GÖSTER VE DAVET ET",
+    "copied": "Bağlantı Kopyalandı!",
     "history-item-button": "Göster ve Davet Et",
+    "reward": "ödülüm",
     "title": "Az önce tari madenciliği yaptım",
-    "winner-pill": "Blok Kazananı",
-    "copied": "Bağlantı Kopyalandı!",
-    "button-text": "GÖSTER VE DAVET ET",
-    "reward": "ödülüm"
-  }
+    "winner-pill": "Blok Kazananı"
+  },
+  "show-history": "Geçmişi göster",
+  "wallet-balance": "Cüzdan Bakiyesi"
 }
diff --git a/src/containers/main/SideBar/components/Wallet/Wallet.styles.ts b/src/containers/main/SideBar/components/Wallet/Wallet.styles.ts
@@ -112,7 +112,7 @@ export const CornerButton = styled('button')`
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(7px);
 
-    padding: 0 8px;
+    padding: 0 8px 0 3px;
 
     display: flex;
     align-items: center;
@@ -121,19 +121,35 @@ export const CornerButton = styled('button')`
     cursor: pointer;
     transition: all 0.2s ease;
     pointer-events: all;
+    gap: 3px;
 
     &:hover {
         border: 1px solid rgba(156, 156, 156, 0.18);
         background: rgba(255, 255, 255, 0.3);
     }
 `;
-
+export const CornerButtonBadge = styled.div`
+    border-radius: 50%;
+    background-color: ${({ theme }) => theme.colors.brightRed[500]};
+    height: 13px;
+    min-width: 13px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    span {
+        display: flex;
+        font-weight: 600;
+        font-size: 10px;
+        text-align: center;
+        line-height: 10px;
+        height: 11px;
+    }
+`;
 export const SidebarCover = styled(m.div)`
     position: absolute;
     inset: 0;
     z-index: 1;
     background: rgba(0, 0, 0, 0.3);
 
     cursor: pointer;
-    z-index: 1;
 `;
diff --git a/src/containers/main/SideBar/components/Wallet/Wallet.tsx b/src/containers/main/SideBar/components/Wallet/Wallet.tsx
@@ -4,6 +4,7 @@ import CharSpinner from '@app/components/CharSpinner/CharSpinner.tsx';
 import {
     BalanceVisibilityButton,
     CornerButton,
+    CornerButtonBadge,
     ScrollMask,
     SidebarCover,
     WalletBalance,
@@ -90,7 +91,10 @@ export default function Wallet() {
                     )}
                     {balance ? (
                         <CornerButton onClick={handleShowClick}>
-                            {!showHistory ? t('show-history') : t('hide-history')}
+                            <CornerButtonBadge>
+                                <span>2</span>
+                            </CornerButtonBadge>
+                            {!showHistory ? t('rewards') : t('hide-history')}
                         </CornerButton>
                     ) : null}
                 </WalletCornerButtons>