Display account addresses in vara format (#47)

gear-foundation · Jul 1, 2024 · ed7dfa0 · ed7dfa0
1 parent 5ee1f64
commit ed7dfa0
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 10 deletions.
diff --git a/frontend/src/features/collections/components/collection-card/collection-card.tsx b/frontend/src/features/collections/components/collection-card/collection-card.tsx
@@ -1,3 +1,4 @@
+import { getVaraAddress } from '@gear-js/react-hooks';
 import { Identicon } from '@polkadot/react-identicon';
 import { Link, generatePath } from 'react-router-dom';
 
@@ -47,7 +48,7 @@ function CollectionCard({ id, name, collectionBanner, collectionLogo, admin, tok
 
             <div className={styles.user}>
               <Identicon value={admin} size={14} theme="polkadot" />
-              <span className={styles.address}>{admin}</span>
+              <span className={styles.address}>{getVaraAddress(admin)}</span>
             </div>
           </div>
         </div>

diff --git a/frontend/src/features/collections/components/nft-card/nft-card.tsx b/frontend/src/features/collections/components/nft-card/nft-card.tsx
@@ -1,4 +1,4 @@
-import { useBalanceFormat } from '@gear-js/react-hooks';
+import { getVaraAddress, useBalanceFormat } from '@gear-js/react-hooks';
 import { Link, generatePath } from 'react-router-dom';
 
 import { PriceInfoCard, InfoCard } from '@/components';
@@ -35,7 +35,7 @@ function NFTCard({ sales, auctions, ...nft }: Props) {
             <h3 className={styles.name}>{name}</h3>
 
             <p className={styles.owner}>
-              Owned by <span className={styles.address}>{owner}</span>
+              Owned by <span className={styles.address}>{getVaraAddress(owner)}</span>
             </p>
           </div>
         </Link>

diff --git a/frontend/src/features/wallet/components/account-button/account-button.tsx b/frontend/src/features/wallet/components/account-button/account-button.tsx
@@ -1,3 +1,4 @@
+import { getVaraAddress } from '@gear-js/react-hooks';
 import { Button, ButtonProps } from '@gear-js/vara-ui';
 import { Identicon } from '@polkadot/react-identicon';
 
@@ -15,7 +16,7 @@ type Props = {
 function AccountButton({ address, name, color, size, block, onClick }: Props) {
   return (
     <Button onClick={onClick} color={color} size={size} block={block} className={styles.button}>
-      <Identicon value={address} size={16} theme="polkadot" /> <span>{name || address}</span>
+      <Identicon value={address} size={16} theme="polkadot" /> <span>{name || getVaraAddress(address)}</span>
     </Button>
   );
 }

diff --git a/frontend/src/features/wallet/components/wallet-modal/wallet-modal.tsx b/frontend/src/features/wallet/components/wallet-modal/wallet-modal.tsx
@@ -1,5 +1,4 @@
-import { decodeAddress } from '@gear-js/api';
-import { useAccount, useAlert } from '@gear-js/react-hooks';
+import { getVaraAddress, useAccount, useAlert } from '@gear-js/react-hooks';
 import { Button, Modal } from '@gear-js/vara-ui';
 
 import CopySVG from '../../assets/copy.svg?react';
@@ -66,10 +65,10 @@ function WalletModal({ close }: Props) {
       };
 
       const handleCopyClick = () => {
-        const decodedAddress = decodeAddress(address);
+        const encodedAddress = getVaraAddress(address);
 
         navigator.clipboard
-          .writeText(decodedAddress)
+          .writeText(encodedAddress)
           .then(() => {
             close();
             alert.success('Copied');

diff --git a/frontend/src/pages/nft/nft.tsx b/frontend/src/pages/nft/nft.tsx
@@ -1,4 +1,4 @@
-import { useAccount } from '@gear-js/react-hooks';
+import { getVaraAddress, useAccount } from '@gear-js/react-hooks';
 import { Identicon } from '@polkadot/react-identicon';
 import { useState } from 'react';
 import { generatePath, useParams } from 'react-router-dom';
@@ -91,7 +91,7 @@ function NFT() {
 
             {owner ? (
               <p className={styles.ownerText}>
-                Owned by <span className={styles.ownerAddress}>{owner}</span>
+                Owned by <span className={styles.ownerAddress}>{getVaraAddress(owner)}</span>
               </p>
             ) : (
               <Skeleton width="100%" borderRadius="4px" />