fix(wallet-connect): theme variant prop name (#1650)

idea/frontend/src/widgets/header/ui/topSide/TopSide.tsx

@@ -38,7 +38,7 @@ const TopSide = () => {
         <BalanceDropdown />
 
         <OnboardingTooltip index={0}>
-          <Wallet variant="gear" displayBalance={false} />
+          <Wallet theme="gear" displayBalance={false} />
         </OnboardingTooltip>
       </div>
     </div>

utils/wallet-connect/README.md

@@ -40,7 +40,7 @@ function Header() {
       <Logo />
 
       <Wallet
-        variant="vara" // 'vara' (default) or 'gear' theme variation
+        theme="vara" // 'vara' (default) or 'gear' theme variation
         displayBalance={true} // true (default) or false
       />
     </header>
@@ -52,22 +52,22 @@ export { Header };
 
 ## Vara UI Theme
 
-Wallet is available in two theme variations - `vara` and `gear`.
-
-Be aware that in order for `vara` variation to work as expected, `@gear-js/vara-ui` should be installed with configured global styles:
+Be aware that in order for `vara` theme to work as expected, `@gear-js/vara-ui` package should be installed with configured global styles:
 
 ```jsx
 import { Wallet } from '@gear-js/wallet-connect';
 import '@gear-js/vara-ui/dist/style.css';
 
 function VaraWallet() {
-  return <Wallet variant="vara" />;
+  return <Wallet theme="vara" />;
 }
 
 export { VaraWallet };
 ```
 
-In order for `gear` variation to work as expected, `@gear-js/ui` should be installed with configured global `index.scss`:
+## Gear UI Theme
+
+In order for `gear` theme to work as expected, `@gear-js/ui` package should be installed with configured global `index.scss`:
 
 ```scss
 @use '@gear-js/ui/resets';
@@ -79,7 +79,7 @@ import { Wallet } from '@gear-js/wallet-connect';
 import './index.scss';
 
 function GearWallet() {
-  return <Wallet variant="gear" />;
+  return <Wallet theme="gear" />;
 }
 
 export { GearWallet };

utils/wallet-connect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gear-js/wallet-connect",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "React library to connect Substrate based wallets to Gear dApps",
   "author": "Gear Technologies",

utils/wallet-connect/src/components/balance/balance.tsx

@@ -5,10 +5,10 @@ import { ReactComponent as VaraSVG } from '../../assets/vara.svg';
 import styles from './balance.module.scss';
 
 type Props = {
-  variant: 'gear' | 'vara';
+  theme: 'gear' | 'vara';
 };
 
-function Balance({ variant }: Props) {
+function Balance({ theme }: Props) {
   const { isApiReady } = useApi();
   const { account } = useAccount();
   const { getFormattedBalance } = useBalanceFormat();
@@ -22,7 +22,7 @@ function Balance({ variant }: Props) {
     <div className={styles.balance}>
       <VaraSVG />
 
-      <p className={cx(styles.text, styles[variant])}>
+      <p className={cx(styles.text, styles[theme])}>
         <span className={styles.value}>{balance.value}</span>
         <span className={styles.unit}>{balance.unit}</span>
       </p>

utils/wallet-connect/src/components/wallet-modal/wallet-modal.tsx

@@ -11,17 +11,17 @@ import { UI_CONFIG } from '../ui-config';
 import styles from './wallet-modal.module.scss';
 
 type Props = {
-  variant?: 'gear' | 'vara';
+  theme?: 'gear' | 'vara';
   close: () => void;
 };
 
-function WalletModal({ variant = 'vara', close }: Props) {
+function WalletModal({ theme = 'vara', close }: Props) {
   const alert = useAlert();
   const { wallets, isAnyWallet, account, login, logout } = useAccount();
   const { wallet, walletAccounts, setWalletId, resetWalletId } = useWallet();
 
-  const variantCn = styles[variant];
-  const { WalletButton, AccountButton, Button, Modal } = UI_CONFIG[variant];
+  const themeClassName = styles[theme];
+  const { WalletButton, AccountButton, Button, Modal } = UI_CONFIG[theme];
 
   const getWallets = () =>
     WALLETS.map(([id, { SVG, name }]) => {
@@ -40,9 +40,9 @@ function WalletModal({ variant = 'vara', close }: Props) {
             onClick={() => (isConnected ? setWalletId(id) : connect?.())}
             disabled={!isEnabled}>
             <span className={styles.status}>
-              <span className={cx(styles.statusText, variantCn)}>{isConnected ? 'Enabled' : 'Disabled'}</span>
+              <span className={cx(styles.statusText, themeClassName)}>{isConnected ? 'Enabled' : 'Disabled'}</span>
 
-              {isConnected && <span className={cx(styles.statusAccounts, variantCn)}>{accountsStatus}</span>}
+              {isConnected && <span className={cx(styles.statusAccounts, themeClassName)}>{accountsStatus}</span>}
             </span>
           </WalletButton>
         </li>
@@ -76,7 +76,7 @@ function WalletModal({ variant = 'vara', close }: Props) {
             icon={CopySVG}
             color="transparent"
             onClick={handleCopyClick}
-            className={cx(styles.copyButton, variantCn)}
+            className={cx(styles.copyButton, themeClassName)}
           />
         </li>
       );
@@ -91,11 +91,11 @@ function WalletModal({ variant = 'vara', close }: Props) {
   const render = () => {
     if (!isAnyWallet)
       return IS_MOBILE_DEVICE ? (
-        <p className={cx(styles.text, variantCn)}>
+        <p className={cx(styles.text, themeClassName)}>
           To use this application on mobile devices, open this page inside compatible wallets like Nova or SubWallet.
         </p>
       ) : (
-        <p className={cx(styles.text, variantCn)}>
+        <p className={cx(styles.text, themeClassName)}>
           A compatible wallet was not found or is disabled. Install it following the{' '}
           <a href="https://wiki.vara-network.io/docs/account/create-account/" target="_blank" rel="noreferrer">
             instructions
@@ -108,7 +108,7 @@ function WalletModal({ variant = 'vara', close }: Props) {
     if (walletAccounts.length) return <ul className={styles.list}>{getAccounts()}</ul>;
 
     return (
-      <p className={cx(styles.text, variantCn)}>
+      <p className={cx(styles.text, themeClassName)}>
         No accounts found. Please open your extension and create a new account or import existing.
       </p>
     );
@@ -120,7 +120,7 @@ function WalletModal({ variant = 'vara', close }: Props) {
     return (
       <div className={styles.footer}>
         <WalletButton.Change SVG={wallet.SVG} name={wallet.name} onClick={resetWalletId}>
-          <EditSVG className={cx(styles.editIcon, variantCn)} />
+          <EditSVG className={cx(styles.editIcon, themeClassName)} />
         </WalletButton.Change>
 
         {account && (
@@ -129,7 +129,7 @@ function WalletModal({ variant = 'vara', close }: Props) {
             text="Logout"
             color="transparent"
             onClick={handleLogoutButtonClick}
-            className={cx(styles.logoutButton, variantCn)}
+            className={cx(styles.logoutButton, themeClassName)}
           />
         )}
       </div>

utils/wallet-connect/src/components/wallet/wallet.tsx

@@ -7,27 +7,27 @@ import { UI_CONFIG } from '../ui-config';
 import styles from './wallet.module.scss';
 
 type Props = {
-  variant?: 'gear' | 'vara';
+  theme?: 'gear' | 'vara';
   displayBalance?: boolean;
 
   // temp solution to support responsiveness in dApps MenuHandler, until it's supported here
   accountButtonClassName?: string;
 };
 
-function Wallet({ variant = 'vara', displayBalance = true, accountButtonClassName }: Props) {
+function Wallet({ theme = 'vara', displayBalance = true, accountButtonClassName }: Props) {
   const { account, isAccountReady } = useAccount();
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const openModal = () => setIsModalOpen(true);
   const closeModal = () => setIsModalOpen(false);
 
   if (!isAccountReady) return null;
-  const { Button, AccountButton } = UI_CONFIG[variant];
+  const { Button, AccountButton } = UI_CONFIG[theme];
 
   return (
     <>
       <div className={styles.wallet}>
-        {displayBalance && <Balance variant={variant} />}
+        {displayBalance && <Balance theme={theme} />}
 
         {account ? (
           <div className={accountButtonClassName}>
@@ -38,7 +38,7 @@ function Wallet({ variant = 'vara', displayBalance = true, accountButtonClassNam
         )}
       </div>
 
-      {isModalOpen && <WalletModal variant={variant} close={closeModal} />}
+      {isModalOpen && <WalletModal theme={theme} close={closeModal} />}
     </>
   );
 }

utils/wallet-connect/src/preview/index.tsx

@@ -23,7 +23,7 @@ function App() {
 
       <div>
         <h1>Gear</h1>
-        <Wallet variant="gear" />
+        <Wallet theme="gear" />
       </div>
     </main>
   );