Fix account balance on network change (#1431)

Co-authored-by: sergey filyanin <[email protected]>

.github/workflows/e2e-tests.yaml

@@ -90,6 +90,10 @@ jobs:
         with:
           cmd: install
 
+      - name: Install additional dependencies rollup-linux-x64-gnu
+        if: steps.check_file_changed.outputs.frontend_changed == 'True'
+        run : sudo yarn add @rollup/rollup-linux-x64-gnu
+
       - name: Build frontend pkg
         if: steps.check_file_changed.outputs.frontend_changed == 'True'
         run: sudo yarn build:frontend

idea/frontend/.eslintrc

@@ -42,7 +42,13 @@
 
       "rules": {
         "@typescript-eslint/no-unsafe-enum-comparison": "off",
-        "@typescript-eslint/no-floating-promises": "off"
+        "@typescript-eslint/no-floating-promises": "off",
+        "react/display-name": "off",
+        "import/no-named-as-default": "off",
+
+        // airbnb cfg
+        "no-shadow": "error",
+        "no-shadow-restricted-names": "error"
       }
     }
   ]

idea/frontend/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@gear-js/api": "0.34.0",
-    "@gear-js/react-hooks": "0.8.1",
+    "@gear-js/react-hooks": "workspace:^",
     "@gear-js/ui": "0.5.19",
     "@hcaptcha/react-hcaptcha": "1.8.1",
     "@mantine/form": "7.1.2",
@@ -66,7 +66,7 @@
     "sass": "1.69.1",
     "typescript": "5.2.2",
     "vite": "4.4.11",
-    "vite-plugin-eslint": "1.8.1",
+    "vite-plugin-checker": "0.6.2",
     "vite-plugin-node-polyfills": "0.15.0",
     "vite-plugin-svgr": "4.1.0"
   },

idea/frontend/src/app/providers/modal/consts.ts

@@ -1,5 +1,4 @@
 import { NetworkModal } from '@/widgets/networkModal';
-import { AccountsModal } from '@/widgets/accountsModal';
 import { TransactionModal } from '@/widgets/transactionModal';
 import { UploadFileModal } from '@/widgets/uploadFileModal';
 import { UploadMetadataModal } from '@/widgets/uploadMetadataModal';
@@ -8,7 +7,6 @@ import { TransferBalanceModal } from '@/widgets/transferBalanceModal';
 
 const MODALS = {
   network: NetworkModal,
-  accounts: AccountsModal,
   metadata: UploadMetadataModal,
   uploadFile: UploadFileModal,
   transaction: TransactionModal,

idea/frontend/src/features/voucher/ui/is-prepaid-checkbox/is-prepaid-checkbox.tsx

@@ -1,6 +1,6 @@
 import { HexString } from '@gear-js/api';
 import { InputWrapper, Checkbox } from '@gear-js/ui';
-import { useAccount, useBalanceFormat, useVoucher } from '@gear-js/react-hooks';
+import { useBalanceFormat, useVoucher } from '@gear-js/react-hooks';
 import { FieldRenderProps, useField } from 'react-final-form';
 
 import styles from './is-prepaid-checkbox.module.scss';
@@ -10,13 +10,14 @@ type Props = {
 };
 
 const IsPrepaidCheckbox = ({ programId }: Props) => {
-  const { account } = useAccount();
   const { isVoucherExists, voucherBalance } = useVoucher(programId);
-  const { getFormattedBalanceValue } = useBalanceFormat();
+  const { getFormattedBalance } = useBalanceFormat();
 
   const field = useField('isPrepaid', { type: 'checkbox' });
   const input = field.input as Omit<FieldRenderProps<HTMLInputElement>, 'type'>; // assert cuz Checkbox type is 'switch' | undefined
 
+  const formattedBalance = voucherBalance ? getFormattedBalance(voucherBalance) : undefined;
+
   return isVoucherExists ? (
     <InputWrapper
       id="voucher"
@@ -29,7 +30,7 @@ const IsPrepaidCheckbox = ({ programId }: Props) => {
         <Checkbox label="Use voucher" {...input} />
 
         <span className={styles.value}>
-          ( {voucherBalance && getFormattedBalanceValue(voucherBalance).toFixed()} {account?.balance.unit})
+          ( {formattedBalance?.value} {formattedBalance?.unit})
         </span>
       </div>
     </InputWrapper>

idea/frontend/src/features/voucher/ui/voucher-table/voucher-table.tsx

@@ -1,5 +1,5 @@
 import { HexString } from '@gear-js/api';
-import { useAccount, useBalanceFormat, useVoucher } from '@gear-js/react-hooks';
+import { useBalanceFormat, useVoucher } from '@gear-js/react-hooks';
 
 import VoucherPlaceholderSVG from '@/features/voucher/assets/voucher-placeholder.svg?react';
 import { ContentLoader } from '@/shared/ui/contentLoader';
@@ -14,12 +14,12 @@ type Props = {
 };
 
 const VoucherTable = withAccount(({ programId }: Props) => {
-  const { account } = useAccount();
-  const { getFormattedBalanceValue } = useBalanceFormat();
-
   const { isVoucherReady, isVoucherExists, voucherBalance } = useVoucher(programId);
+  const { getFormattedBalance } = useBalanceFormat();
+
   const status = isVoucherExists ? BulbStatus.Success : BulbStatus.Error;
   const text = isVoucherExists ? 'Available' : 'Not available';
+  const balance = voucherBalance ? getFormattedBalance(voucherBalance) : undefined;
 
   return isVoucherReady ? (
     <Table>
@@ -28,8 +28,8 @@ const VoucherTable = withAccount(({ programId }: Props) => {
       </TableRow>
 
       <TableRow name="Amount">
-        <span className={styles.balance}>{voucherBalance && getFormattedBalanceValue(voucherBalance).toFixed()}</span>
-        <span>{account?.balance.unit}</span>
+        <span className={styles.balance}>{balance?.value}</span>
+        <span>{balance?.unit}</span>
       </TableRow>
     </Table>
   ) : (

idea/frontend/src/features/wallet/consts.ts

@@ -0,0 +1,17 @@
+import { Entries } from '@/shared/types';
+
+import PolkadotSVG from './assets/polkadot.svg?react';
+import SubwalletSVG from './assets/subwallet.svg?react';
+import TalismanSVG from './assets/talisman.svg?react';
+import EnkryptSVG from './assets/enkrypt.svg?react';
+
+const WALLET = {
+  'polkadot-js': { name: 'Polkadot JS', SVG: PolkadotSVG },
+  'subwallet-js': { name: 'SubWallet', SVG: SubwalletSVG },
+  talisman: { name: 'Talisman', SVG: TalismanSVG },
+  enkrypt: { name: 'Enkrypt', SVG: EnkryptSVG },
+};
+
+const WALLETS = Object.entries(WALLET) as Entries<typeof WALLET>;
+
+export { WALLET, WALLETS };

idea/frontend/src/features/wallet/hooks/index.ts

@@ -0,0 +1,21 @@
+import { useAccount } from '@gear-js/react-hooks';
+import { useState } from 'react';
+
+import { WALLET } from '../consts';
+import { WalletId } from '../types';
+
+function useWallet() {
+  const { account, accounts } = useAccount();
+
+  const [walletId, setWalletId] = useState(account?.meta.source as WalletId | undefined);
+  const wallet = walletId ? WALLET[walletId] : undefined;
+
+  const getWalletAccounts = (id: WalletId) => accounts?.filter(({ meta }) => meta.source === id);
+  const walletAccounts = walletId ? getWalletAccounts(walletId) : undefined;
+
+  const resetWalletId = () => setWalletId(undefined);
+
+  return { wallet, walletAccounts, setWalletId, resetWalletId, getWalletAccounts };
+}
+
+export { useWallet };

idea/frontend/src/features/wallet/index.ts

@@ -0,0 +1,3 @@
+import { Wallet } from './ui';
+
+export { Wallet };

idea/frontend/src/shared/ui/accountButton/AccountButton.tsx → idea/frontend/src/features/wallet/ui/account-button/account-button.tsx

@@ -2,7 +2,7 @@ import Identicon from '@polkadot/react-identicon';
 import clsx from 'clsx';
 import { buttonStyles } from '@gear-js/ui';
 
-import styles from './AccountButton.module.scss';
+import styles from './account-button.module.scss';
 
 type Props = {
   name?: string;

idea/frontend/src/features/wallet/ui/account-button/index.ts

@@ -0,0 +1,3 @@
+import { AccountButton } from './account-button';
+
+export { AccountButton };

idea/frontend/src/features/wallet/ui/accounts-modal/accounts-modal.module.scss

@@ -0,0 +1,129 @@
+@use '@gear-js/ui/breakpoints' as *;
+@use '@gear-js/ui/variables' as ui;
+@use '@gear-js/ui/headings' as *;
+@use '@/shared/assets/styles/variables' as *;
+@use '@/shared/assets/styles/mixins' as *;
+
+.simplebar {
+  @include customSimplebar;
+  max-height: 50vh;
+  margin-right: -16px;
+
+  :global(.simplebar-content) {
+    margin-right: 16px;
+  }
+}
+
+.modal {
+  position: relative;
+
+  &:not(.empty) {
+    padding-bottom: 102px;
+  }
+}
+
+.footer {
+  position: absolute; // workaround cuz footer has different bg color
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 24px 32px;
+  border-radius: 0 0 $borderRadiusMedium $borderRadiusMedium;
+  display: flex;
+  background-color: $bgColor4;
+}
+
+.logoutButton {
+  margin-left: auto;
+}
+
+.list {
+  @include childrenMargin(16px);
+
+  .accountButton {
+    width: 100%;
+    font-weight: 500;
+    text-transform: uppercase;
+    padding: 16px 40px;
+
+    &.active {
+      background: $successColor;
+    }
+  }
+
+  .accountName {
+    font-size: $fontSizeMedium;
+    padding: 0 5px;
+  }
+
+  .accountIcon {
+    @include md {
+      display: none !important;
+    }
+  }
+}
+
+.accountItem {
+  @include childrenMargin(10px, right);
+
+  display: flex;
+  align-items: center;
+
+  .accountButton {
+    flex: 1 1;
+
+    &.active {
+      cursor: default;
+      background-color: $successColor;
+
+      &:hover {
+        background-color: $successColor;
+      }
+    }
+  }
+}
+
+.button {
+  display: flex;
+  justify-content: space-between;
+  background-color: ui.$buttonColorLight;
+  letter-spacing: 0.08em;
+
+  span {
+    display: flex;
+    align-items: center;
+  }
+
+  &:hover {
+    background-color: ui.$buttonColorLightHover;
+  }
+
+  &:not(.enabled) {
+    pointer-events: none;
+
+    .status {
+      opacity: 0.6;
+    }
+  }
+
+  .status {
+    text-align: right;
+
+    &Text {
+      font-size: 12px;
+      line-height: 14px;
+    }
+
+    &Accounts {
+      font-size: 10px;
+      line-height: 10px;
+      color: $successColor;
+    }
+  }
+
+  .connectIcon {
+    width: 12px;
+    height: 12px;
+    margin-left: 7px;
+  }
+}