refactor(frontend/ui): merge gear and vara ui wallets (#462)

gear-foundation · Oct 1, 2024 · eaecb67 · eaecb67
1 parent b90c2c4
commit eaecb67
Show file tree

Hide file tree

Showing 92 changed files with 530 additions and 1,854 deletions.
diff --git a/frontend/apps/battleship-zk/package.json b/frontend/apps/battleship-zk/package.json
@@ -16,7 +16,7 @@
     "@gear-js/api": "0.38.1",
     "@gear-js/react-hooks": "0.12.1",
     "@gear-js/ui": "0.5.21",
-    "@gear-js/vara-ui": "0.0.10",
+    "@gear-js/vara-ui": "0.0.11",
     "@mantine/form": "6.0.15",
     "@polkadot/api": "11.0.2",
     "@polkadot/react-identicon": "3.6.4",

diff --git a/frontend/apps/battleship/package.json b/frontend/apps/battleship/package.json
@@ -16,7 +16,7 @@
     "@gear-js/api": "0.38.1",
     "@gear-js/react-hooks": "0.12.1",
     "@gear-js/ui": "0.5.21",
-    "@gear-js/vara-ui": "0.0.10",
+    "@gear-js/vara-ui": "0.0.11",
     "@mantine/form": "6.0.15",
     "@polkadot/api": "11.0.2",
     "@polkadot/react-identicon": "3.6.4",

diff --git a/frontend/apps/galactic-express/src/components/layout/header/Header.module.scss b/frontend/apps/galactic-express/src/components/layout/header/Header.module.scss
@@ -15,6 +15,11 @@
   justify-content: space-between;
   align-items: center;
   margin: auto;
+
+  // overriding vara-ui balance color
+  > div > div > div > p {
+    color: #ffffff !important;
+  }
 }
 
 .walletBalance {

diff --git a/frontend/apps/galactic-express/src/components/layout/header/Header.tsx b/frontend/apps/galactic-express/src/components/layout/header/Header.tsx
@@ -25,16 +25,7 @@ function Header() {
           <GalexSVG />
         </Link>
       }
-      menu={
-        <MenuHandler
-          className={{
-            wallet: {
-              balance: styles.walletBalance,
-            },
-            icon: styles.menuIcon,
-          }}
-        />
-      }
+      menu={<MenuHandler className={{ icon: styles.menuIcon }} />}
       className={{ header: styles.header, content: styles.container }}>
       {isUserAdmin && isRegistration && <CancelGameButton isAdmin={isUserAdmin} participants={participants || []} />}
     </CommonHeader>

diff --git a/...s/galactic-express/src/features/welcome/components/enter-contract-address/RequestGame.tsx b/...s/galactic-express/src/features/welcome/components/enter-contract-address/RequestGame.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { WalletNew as Wallet } from '@dapps-frontend/ui';
+import { Wallet } from '@dapps-frontend/ui';
 import { Button } from '@gear-js/vara-ui';
 import { useDnsProgramIds } from '@dapps-frontend/hooks';
 import { cx } from 'utils';

diff --git a/frontend/apps/nft-marketplace/src/components/layout/header/Header.tsx b/frontend/apps/nft-marketplace/src/components/layout/header/Header.tsx
@@ -14,7 +14,7 @@ function Header() {
         </OnLogin>
       </nav>
 
-      <Wallet />
+      <Wallet variant="gear" />
     </header>
   );
 }

diff --git a/frontend/apps/non-fungible-token/src/components/layout/header/Header.tsx b/frontend/apps/non-fungible-token/src/components/layout/header/Header.tsx
@@ -14,7 +14,7 @@ function Header() {
         {account && <CreateLink />}
       </nav>
 
-      <Wallet />
+      <Wallet variant="gear" />
     </header>
   );
 }

diff --git a/frontend/apps/racing-car-game/src/features/Wallet/components/WalletInfo/WalletInfo.tsx b/frontend/apps/racing-car-game/src/features/Wallet/components/WalletInfo/WalletInfo.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import Identicon from '@polkadot/react-identicon';
-import { VaraBalanceNew as VaraBalance } from '@dapps-frontend/ui';
 import { useDnsProgramIds } from '@dapps-frontend/hooks';
 import { cx } from '@/utils';
 
@@ -9,7 +8,7 @@ import { Button } from '@/ui';
 import { WalletModal } from '../WalletModal';
 import styles from './WalletInfo.module.scss';
 
-function WalletInfo({ account, withoutBalance, buttonClassName }: WalletInfoProps) {
+function WalletInfo({ account, buttonClassName }: WalletInfoProps) {
   const { programId } = useDnsProgramIds();
   const [isWalletModalOpen, setIsWalletModalOpen] = useState<boolean>(false);
 
@@ -25,7 +24,6 @@ function WalletInfo({ account, withoutBalance, buttonClassName }: WalletInfoProp
     <>
       {account ? (
         <div className={cx(styles['wallet-info'])}>
-          {!withoutBalance && <VaraBalance />}
           <button className={cx(styles.description)} onClick={handleOpenWalletModal}>
             {programId && (
               <Identicon value={programId} size={21} theme="polkadot" className={cx(styles['description-icon'])} />

diff --git a/frontend/apps/syndote/package.json b/frontend/apps/syndote/package.json
@@ -9,6 +9,7 @@
     "@gear-js/api": "0.38.1",
     "@gear-js/react-hooks": "0.12.1",
     "@gear-js/ui": "0.5.21",
+    "@gear-js/vara-ui": "0.0.11",
     "@mantine/form": "6.0.8",
     "@polkadot/api": "11.0.2",
     "@polkadot/react-identicon": "3.6.4",

diff --git a/frontend/apps/syndote/src/components/layout/header/Header.module.scss b/frontend/apps/syndote/src/components/layout/header/Header.module.scss
@@ -17,10 +17,6 @@
   margin: auto;
 }
 
-.walletBalance {
-  color: #000000;
-}
-
 .menuIcon {
   & svg path {
     fill: #000000;
@@ -39,12 +35,12 @@
 }
 
 .cancelGameButton {
-  background: #F24A4A12;
-  color: #F24A4A;
+  background: #f24a4a12;
+  color: #f24a4a;
   border-radius: 0;
 
   svg path {
-    fill: #F24A4A;
-    stroke: #F24A4A;
+    fill: #f24a4a;
+    stroke: #f24a4a;
   }
-}
+}
diff --git a/frontend/apps/syndote/src/components/layout/header/Header.tsx b/frontend/apps/syndote/src/components/layout/header/Header.tsx
@@ -2,12 +2,12 @@ import { Link } from 'react-router-dom';
 import { Header as CommonHeader, MenuHandler } from '@dapps-frontend/ui';
 import { ReactComponent as VaraSVG } from 'assets/images/icons/logo-vara.svg';
 import { ReactComponent as CrossSVG } from 'assets/images/icons/cross-icon.svg';
-import styles from './Header.module.scss';
 import { Button } from '@gear-js/vara-ui';
 import { useReadGameSessionState, useSyndoteMessage } from 'hooks/metadata';
 import { useAccount } from '@gear-js/react-hooks';
 import clsx from 'clsx';
 import { useQuitGame } from 'hooks/useQuitGame';
+import styles from './Header.module.scss';
 
 function Header() {
   const { state } = useReadGameSessionState();
@@ -43,17 +43,11 @@ function Header() {
               )}
             </>
           )}
-          <MenuHandler
-            className={{
-              wallet: {
-                balance: styles.walletBalance,
-              },
-              icon: styles.menuIcon,
-            }}
-          />
+          <MenuHandler className={{ icon: styles.menuIcon }} />
         </div>
       }
-      className={{ header: styles.header, content: styles.container }}></CommonHeader>
+      className={{ header: styles.header, content: styles.container }}
+    />
   );
 }
 

diff --git a/frontend/apps/syndote/src/pages/welcome/components/request-game/RequestGame.tsx b/frontend/apps/syndote/src/pages/welcome/components/request-game/RequestGame.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { WalletNew as Wallet } from '@dapps-frontend/ui';
+import { Wallet } from '@dapps-frontend/ui';
 import { Button } from '@gear-js/vara-ui';
 import { useAtom } from 'jotai';
 import { IS_LOADING } from 'atoms';

diff --git a/frontend/apps/tamagotchi-battle/src/components/layout/header/account/account.tsx b/frontend/apps/tamagotchi-battle/src/components/layout/header/account/account.tsx
@@ -18,7 +18,7 @@ export const AccountComponent = () => {
         </Link>
       )}
 
-      <Wallet />
+      <Wallet variant="gear" />
     </div>
   );
 };
diff --git a/frontend/apps/tamagotchi-battle/src/pages/home.tsx b/frontend/apps/tamagotchi-battle/src/pages/home.tsx
@@ -49,7 +49,7 @@ export const Home = () => {
               <StartDisclaimer fileName="tamagotchi" wikiPath="Gaming/tamagotchi" className="m-auto mt-9" />
             </div>
           ) : (
-            <Wallet />
+            <Wallet variant="gear" />
           )}
         </div>
       </div>

diff --git a/frontend/apps/tamagotchi/src/components/layout/header/header.tsx b/frontend/apps/tamagotchi/src/components/layout/header/header.tsx
@@ -9,7 +9,7 @@ export const Header = () => {
         <SpriteIcon name="logo" width={180} height={44} className="h-10" />
       </Link>
 
-      <Wallet />
+      <Wallet variant="gear" />
     </header>
   );
 };
diff --git a/frontend/apps/tamagotchi/src/components/sections/home-create-section/home-create-section.tsx b/frontend/apps/tamagotchi/src/components/sections/home-create-section/home-create-section.tsx
@@ -51,7 +51,7 @@ export const HomeCreateSection = () => {
                 <CreateTamagotchiForm />{' '}
               </div>
             ) : (
-              <Wallet />
+              <Wallet variant="gear" />
             )}
           </div>
         )}

diff --git a/frontend/apps/tequila-train/src/components/layout/header/header.module.scss b/frontend/apps/tequila-train/src/components/layout/header/header.module.scss
@@ -1,6 +1,6 @@
 .header {
   position: relative;
-  z-index: 40;
+  z-index: 5;
   padding: 20px;
 
   &__container {

diff --git a/frontend/apps/tequila-train/src/components/sections/login-section/login-section.tsx b/frontend/apps/tequila-train/src/components/sections/login-section/login-section.tsx
@@ -1,4 +1,4 @@
-import { WalletNew } from '@dapps-frontend/ui';
+import { Wallet } from '@dapps-frontend/ui';
 
 export const LoginSection = () => {
   return (
@@ -18,12 +18,10 @@ export const LoginSection = () => {
         </div>
         <div className="basis-[540px] grow lg:grow-0">
           <h2 className="text-[32px] leading-none font-bold tracking-[0.08em] text-black">Welcome to Tequila Train </h2>
-          <p className="mt-3 text-[#555756] tracking-[0.08em]">
-            Connect your wallet to start
-          </p>
+          <p className="mt-3 text-[#555756] tracking-[0.08em]">Connect your wallet to start</p>
 
           <div className="mt-6">
-            <WalletNew />
+            <Wallet />
           </div>
         </div>
       </div>

diff --git a/frontend/apps/tic-tac-toe/src/pages/home.tsx b/frontend/apps/tic-tac-toe/src/pages/home.tsx
@@ -2,7 +2,7 @@ import { useAccount } from '@gear-js/react-hooks';
 import { EzTransactionsSwitch } from '@dapps-frontend/ez-transactions';
 import { useGame } from '@/features/tic-tac-toe/hooks';
 import { Game, Welcome } from '@/features/tic-tac-toe';
-import { WalletNew as Wallet } from '@dapps-frontend/ui';
+import { Wallet } from '@dapps-frontend/ui';
 import { GameStartButton } from '@/features/tic-tac-toe/components/game-start-button';
 import { Loader } from '@/components';
 import { SIGNLESS_ALLOWED_ACTIONS } from '@/app/consts';

diff --git a/frontend/apps/vara-man/package.json b/frontend/apps/vara-man/package.json
@@ -18,7 +18,7 @@
     "@gear-js/api": "0.38.1",
     "@gear-js/react-hooks": "0.12.1",
     "@gear-js/ui": "0.5.26",
-    "@gear-js/vara-ui": "0.0.10",
+    "@gear-js/vara-ui": "0.0.11",
     "@headlessui/react": "1.7.13",
     "@mantine/form": "6.0.19",
     "@polkadot/api": "11.0.2",

diff --git a/frontend/apps/vara-man/src/components/sections/home/home-register.tsx b/frontend/apps/vara-man/src/components/sections/home/home-register.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useAccount, useAlert } from '@gear-js/react-hooks';
 import { useNavigate, NavigateFunction } from 'react-router-dom';
 import { ArrowRight, Search } from 'lucide-react';
-import { WalletNew } from '@dapps-frontend/ui/';
+import { Wallet } from '@dapps-frontend/ui/';
 import IntroImage from '@/assets/images/welcome.png';
 import { Icons } from '@/components/ui/icons';
 import { EzTransactionsSwitch, useEzTransactions } from '@dapps-frontend/ez-transactions';
@@ -92,7 +92,7 @@ export function HomeRegister() {
             </p>
 
             <div className="mt-3">
-              <WalletNew />
+              <Wallet />
             </div>
           </div>
         )}

diff --git a/frontend/apps/varatube/src/components/layout/header/Header.module.scss b/frontend/apps/varatube/src/components/layout/header/Header.module.scss
@@ -1,20 +1,25 @@
 @use '@gear-js/ui/variables' as *;
 
 .header {
-    @media screen and (max-width: 767px) {
-      background: #1A1A1F;
-      position: relative;
-    }
+  @media screen and (max-width: 767px) {
+    background: #1a1a1f;
+    position: relative;
+  }
 }
 
 .content {
   @media screen and (max-width: 767px) {
     padding: 0 26px;
   }
+
+  // overriding vara-ui balance color
+  > div > div > div > p {
+    color: #fff !important;
+  }
 }
 
 .logo {
-  max-width: 150px
+  max-width: 150px;
 }
 
 .link {
@@ -33,11 +38,12 @@
 }
 
 .mobileMenuWrapper {
-  background: #1A1A1F;
-  background: linear-gradient(180deg, rgba(26,26,31,1) 0%, rgba(0,0,0,1) 60%);
+  background: #1a1a1f;
+  background: linear-gradient(180deg, rgba(26, 26, 31, 1) 0%, rgba(0, 0, 0, 1) 60%);
 }
 
-.menuOptionsIcon,.menuOptionsItem {
+.menuOptionsIcon,
+.menuOptionsItem {
   @media screen and (max-width: 767px) {
     color: #fff;
 
@@ -56,4 +62,4 @@
     fill: #fff;
     stroke: #fff;
   }
-}
+}
diff --git a/frontend/apps/varatube/src/components/layout/header/Header.tsx b/frontend/apps/varatube/src/components/layout/header/Header.tsx
@@ -25,9 +25,6 @@ function Header() {
               item: styles.menuOptionsItem,
               nativeIcon: styles.menuOptionsIcon,
             },
-            wallet: {
-              balance: styles.balance,
-            },
           }}
         />
       }

diff --git a/frontend/apps/w3bstreaming/package.json b/frontend/apps/w3bstreaming/package.json
@@ -21,7 +21,7 @@
     "@gear-js/api": "0.38.1",
     "@gear-js/react-hooks": "0.12.1",
     "@gear-js/ui": "0.5.21",
-    "@gear-js/vara-ui": "0.0.10",
+    "@gear-js/vara-ui": "0.0.11",
     "@headlessui/react": "1.7.17",
     "@mantine/form": "6.0.15",
     "@polkadot/api": "11.0.2",

diff --git a/frontend/apps/w3bstreaming/src/pages/MainPage/components/IntrodutionInfo/IntrodutionInfo.tsx b/frontend/apps/w3bstreaming/src/pages/MainPage/components/IntrodutionInfo/IntrodutionInfo.tsx
@@ -1,4 +1,4 @@
-import { WalletNew as Wallet } from '@dapps-frontend/ui';
+import { Wallet } from '@dapps-frontend/ui';
 import styles from './IntrodutionInfo.module.scss';
 import mainFrame from '@/assets/icons/main-page-frame.png';
 import animImg from '@/assets/icons/main-page-wara-anim.png';

diff --git a/frontend/packages/ez-transactions/package.json b/frontend/packages/ez-transactions/package.json
@@ -16,7 +16,7 @@
     "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@gear-js/vara-ui": "0.0.10",
+    "@gear-js/vara-ui": "0.0.11",
     "@polkadot/keyring": "12.6.2",
     "@polkadot/react-identicon": "3.6.4",
     "@polkadot/types": "11.0.2",

diff --git a/frontend/packages/ui/package.json b/frontend/packages/ui/package.json
@@ -16,7 +16,7 @@
     "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@gear-js/vara-ui": "0.0.10",
+    "@gear-js/vara-ui": "0.0.11",
     "@headlessui/react": "1.7.17",
     "@polkadot/react-identicon": "3.6.4",
     "@radix-ui/react-scroll-area": "1.0.5",