RC 0.5.5 (#43)

0.5.5

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vitedapp",
   "private": true,
-  "version": "0.5.4",
+  "version": "0.5.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/features/ui/components/Layout/Copyright/Copyright.tsx

@@ -8,7 +8,7 @@ import reactDappTemplateLogo from '../../../assets/images/react-dapp-template-lo
 export const Copyright: React.FC = React.memo(() => {
   return (
     <Box>
-      <Tooltip label="Powered by React dApp Template (Vite) v0.5.4">
+      <Tooltip label="Powered by React dApp Template (Vite) v0.5.5">
         <Button
           as={Link}
           href="https://github.com/huseyindeniz/vite-react-dapp-template"

src/features/wallet/chains/avalanche.ts

@@ -9,7 +9,7 @@ export const AvalancheChain: Network = {
     decimals: 18,
   },
   rpcUrls: ['https://api.avax.network/ext/bc/C/rpc'],
-  blockExplorerUrls: ['https://avascan.info/blockchain/c'],
+  blockExplorerUrls: ['https://snowtrace.io'],
   addressExplorerUrl: 'address',
   transactionExplorerUrl: 'tx',
   multicallAddress: '',

src/features/wallet/components/ConnectionModal/CheckSign/CheckSign.tsx

@@ -6,6 +6,7 @@ import { AccountSignState } from '../../../models/account/types/AccountSignState
 import { NotSigned } from './NotSigned';
 import { Signed } from './Signed';
 import { SignFailed } from './SignFailed';
+import { SignInitialized } from './SignInitialized';
 import { SignRejected } from './SignRejected';
 import { SignRequested } from './SignRequested';
 import { SignTimedOut } from './SignTimedOut';
@@ -29,6 +30,8 @@ export const CheckSign: React.FC<CheckSignProps> = ({
   switch (stepState) {
     case AccountSignState.NOT_SIGNED:
       return <NotSigned onSign={onSign} onDisconnect={onDisconnect} />;
+    case AccountSignState.SIGN_INITIALIZED:
+      return <SignInitialized />;
     case AccountSignState.SIGN_REQUESTED:
       return <SignRequested signCounter={signCounter} />;
     case AccountSignState.SIGN_REJECTED:

src/features/wallet/components/ConnectionModal/CheckSign/NotSigned.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { AlertMessage } from '@/features/ui/components/AlertMessage/AlertMessage';
 
 import { SignButton } from './SignButtonProps';
+import { WhySignNeeded } from './WhySignNeeded';
 
 export interface NotSignedProps {
   onSign: (message: string) => void;
@@ -24,7 +25,12 @@ export const NotSigned: React.FC<NotSignedProps> = ({
             'In order to use this app, you need to sign the login request in your wallet.'
           )}
         </Box>
-        <SignButton onSign={onSign} onDisconnect={onDisconnect} />
+        <Box>
+          <SignButton onSign={onSign} onDisconnect={onDisconnect} />
+        </Box>
+        <Box>
+          <WhySignNeeded />
+        </Box>
       </VStack>
     </AlertMessage>
   );

src/features/wallet/components/ConnectionModal/CheckSign/SignInitialized.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { Box, Progress, VStack } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+
+import { AlertMessage } from '@/features/ui/components/AlertMessage/AlertMessage';
+
+export const SignInitialized: React.FC = () => {
+  const { t } = useTranslation('FeatureWallet');
+  return (
+    <AlertMessage status="info" title={t('Preparing Sign Request')}>
+      <VStack>
+        <Box w="full">
+          <Progress isIndeterminate color="blue.400" size={'lg'} />
+        </Box>
+      </VStack>
+    </AlertMessage>
+  );
+};

src/features/wallet/components/ConnectionModal/CheckSign/WhySignNeeded.tsx

@@ -0,0 +1,81 @@
+import {
+  Box,
+  Button,
+  Heading,
+  Link,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  VStack,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { FiExternalLink } from 'react-icons/fi';
+
+export const WhySignNeeded: React.FC = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <>
+      <Button
+        size="xs"
+        colorScheme="yellow"
+        onClick={onOpen}
+        fontWeight={'normal'}
+      >
+        Why On Earth I'd Sign With My Wallet? Is it safe?
+      </Button>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Why Sign Needed? Is it Safe?</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <VStack>
+              <Heading fontSize="sm" fontWeight={'normal'}>
+                🔐 Why Personal Sign? Ensuring Your Security
+              </Heading>
+              <Box>
+                Connecting your Web3 wallet? You'll encounter a request for
+                personal sign-in. It's different from eth sign and designed for
+                your safety.
+              </Box>
+              <Heading fontSize="xs" fontWeight={'normal'}>
+                Personal Sign: Safe and Secure
+              </Heading>
+              <Box>
+                Personal sign verifies your wallet without enabling
+                transactions—entirely secure, no risk to your funds. We use it
+                solely to confirm wallet authenticity.
+              </Box>
+              <Heading fontSize="xs" fontWeight={'normal'}>
+                Eth Sign: Beware of Risks
+              </Heading>
+              <Box>
+                Eth sign is risky, allowing external access to drain your
+                wallet. We don't request it—avoid signing eth requests on
+                unfamiliar sites to protect your assets.
+              </Box>
+              <Box>
+                <Button
+                  as={Link}
+                  href="https://docs.metamask.io/wallet/how-to/sign-data/#use-personal_sign"
+                  isExternal
+                  variant="ghost"
+                  size="xs"
+                  rightIcon={<FiExternalLink />}
+                  fontWeight={'normal'}
+                >
+                  More Info
+                </Button>
+              </Box>
+            </VStack>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};

src/features/wallet/components/NetworkLogo/NetworkLogo.tsx

@@ -2,38 +2,12 @@ import React from 'react';
 
 import { Image } from '@chakra-ui/react';
 
-import imageEthereumMainnet from '../../assets/images/chains/1.webp';
-import imageSepolia from '../../assets/images/chains/11155111.webp';
-import imageGanache from '../../assets/images/chains/1337.webp';
-import imagePolygon from '../../assets/images/chains/137.webp';
-import imageHardhat from '../../assets/images/chains/31337.webp';
-import imageAvalancheFuji from '../../assets/images/chains/43113.webp';
-import imageAvalanche from '../../assets/images/chains/43114.webp';
-import imageGoerli from '../../assets/images/chains/5.webp';
-import imageBsc from '../../assets/images/chains/56.webp';
-import imagePolygonMumbai from '../../assets/images/chains/80001.webp';
-import imageBscTest from '../../assets/images/chains/97.webp';
-
 export interface NetworkLogoProps {
   networkId: number;
   networkName: string;
   boxSize?: string;
 }
 
-const imagesNetwork: Record<number, string> = {
-  43114: imageAvalanche,
-  43113: imageAvalancheFuji,
-  56: imageBsc,
-  97: imageBscTest,
-  1: imageEthereumMainnet,
-  1337: imageGanache,
-  11155111: imageSepolia,
-  5: imageGoerli,
-  31337: imageHardhat,
-  137: imagePolygon,
-  80001: imagePolygonMumbai,
-};
-
 export const NetworkLogo: React.FC<NetworkLogoProps> = ({
   networkId,
   networkName,
@@ -43,7 +17,7 @@ export const NetworkLogo: React.FC<NetworkLogoProps> = ({
     <Image
       boxSize={boxSize}
       objectFit="cover"
-      src={imagesNetwork[networkId]}
+      src={`assets/images/chains/${networkId}.webp`}
       alt={networkName}
     />
   );

src/features/wallet/components/ProfileDropdownMenu/DropdownMenu.stories.tsx

@@ -17,13 +17,13 @@ export const Default: Story = { args: {} };
 export const Address: Story = {
   args: {
     address: '0x0000000000000000000000000000000000000000',
-    ensOrAddressTruncated: '0x0000...0000',
+    domainOrAddressTruncated: '0x0000...0000',
   },
 };
 
 export const Ens: Story = {
   args: {
     address: '0x0000000000000000000000000000000000000000',
-    ensOrAddressTruncated: 'mockEnsName.eth',
+    domainOrAddressTruncated: 'mockEnsName.eth',
   },
 };

src/features/wallet/components/ProfileDropdownMenu/DropdownMenu.tsx

@@ -12,6 +12,7 @@ import {
   HStack,
   VStack,
   Link,
+  Avatar,
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { FaExternalLinkAlt } from 'react-icons/fa';
@@ -28,7 +29,8 @@ import { Identicon } from './Identicon';
 
 export interface DropdownMenuProps {
   address: string;
-  ensOrAddressTruncated: string;
+  domainOrAddressTruncated: string;
+  avatarURL: string;
   currentNetwork: Network | null;
   connectedWallet: Web3Wallet | null;
   addressExplorerUrl: string | undefined;
@@ -39,7 +41,8 @@ export interface DropdownMenuProps {
 
 export const DropdownMenu: React.FC<DropdownMenuProps> = ({
   address,
-  ensOrAddressTruncated,
+  domainOrAddressTruncated,
+  avatarURL,
   currentNetwork,
   connectedWallet,
   addressExplorerUrl,
@@ -75,18 +78,26 @@ export const DropdownMenu: React.FC<DropdownMenuProps> = ({
             />
           ) : null}
           <Text color="white" fontSize="md" fontWeight="medium" mr="2">
-            {ensOrAddressTruncated}
+            {domainOrAddressTruncated}
           </Text>
-          <Identicon size={24} account={address} />
+          {avatarURL !== '' ? (
+            <Avatar name={address} src={avatarURL} size="sm" />
+          ) : (
+            <Identicon size={24} account={address} />
+          )}
         </HStack>
       </MenuButton>
       <MenuList alignItems="center" m={0}>
         <VStack align="center">
           <Box>
-            <Identicon size={64} account={address} />
+            {avatarURL !== '' ? (
+              <Avatar name={address} src={avatarURL} size="lg" />
+            ) : (
+              <Identicon size={64} account={address} />
+            )}
           </Box>
           <Box>
-            <Text>{ensOrAddressTruncated}</Text>
+            <Text>{domainOrAddressTruncated}</Text>
           </Box>
         </VStack>
         <MenuDivider />

src/features/wallet/components/ProfileDropdownMenu/ProfileDropdownMenu.tsx

@@ -26,8 +26,9 @@ export const ProfileDropdownMenu: React.FC = () => {
   );
 
   const [addressExplorerUrl, setAddressExplorerUrl] = useState<string>('');
-  const [ensOrAddressTruncated, setensOrAddressTruncated] =
+  const [domainOrAddressTruncated, setDomainOrAddressTruncated] =
     useState<string>('');
+  const [avatarURL, setAvatarURL] = useState<string>('');
 
   useEffect(() => {
     if (currentNetwork) {
@@ -43,13 +44,14 @@ export const ProfileDropdownMenu: React.FC = () => {
         account.domainName && account.domainName !== ''
           ? account.domainName
           : account.shortAddress;
-      setensOrAddressTruncated(
+      setDomainOrAddressTruncated(
         domainNameOrAddress && domainNameOrAddress.length > 20
           ? domainNameOrAddress?.slice(0, 4) +
               '...' +
               domainNameOrAddress?.slice(-6)
           : domainNameOrAddress
       );
+      setAvatarURL(account.avatarURL ?? '');
     }
   }, [account]);
 
@@ -73,7 +75,8 @@ export const ProfileDropdownMenu: React.FC = () => {
   return account && account.address && account.address !== '' ? (
     <DropdownMenu
       address={account.address}
-      ensOrAddressTruncated={ensOrAddressTruncated ?? ''}
+      domainOrAddressTruncated={domainOrAddressTruncated ?? ''}
+      avatarURL={avatarURL}
       currentNetwork={currentNetwork}
       connectedWallet={connectedWallet}
       addressExplorerUrl={addressExplorerUrl}

src/features/wallet/components/WalletLogo/WalletLogo.tsx

@@ -4,22 +4,12 @@ import { Image } from '@chakra-ui/react';
 
 import { SupportedWallets } from '@/services/interfaces/IWalletProviderApi';
 
-import coinbaseLogo from '../../assets/images/wallets/coinbase.webp';
-import coreLogo from '../../assets/images/wallets/core.webp';
-import metamaskLogo from '../../assets/images/wallets/metamask.webp';
-
 export interface WalletLogoProps {
   wallet: SupportedWallets;
   label: string;
   boxSize?: string;
 }
 
-const imagesWallet: Record<SupportedWallets, string> = {
-  metamask: metamaskLogo,
-  core: coreLogo,
-  coinbase: coinbaseLogo,
-};
-
 export const WalletLogo: React.FC<WalletLogoProps> = ({
   wallet,
   label,
@@ -29,7 +19,7 @@ export const WalletLogo: React.FC<WalletLogoProps> = ({
     <Image
       boxSize={boxSize}
       objectFit="cover"
-      src={imagesWallet[wallet]}
+      src={`assets/images/wallets/${wallet}.webp`}
       alt={label}
     />
   );

src/features/wallet/config.ts

@@ -11,8 +11,8 @@ import { PolygonMumbaiChain } from './chains/polygonMumbai';
 import { SepoliaChain } from './chains/sepolia';
 import { Network } from './models/network/types/Network';
 import { Web3Wallet } from './models/provider/types/Web3Wallet';
+import { Coinbase } from './web3Wallets/coinbase';
 import { Core } from './web3Wallets/core';
-import { Coinbase } from './web3Wallets/corinbase';
 import { Metamask } from './web3Wallets/metamask';
 
 export const SUPPORTED_NETWORKS: Network[] = [

src/features/wallet/models/account/actionEffects/disconnectWallet.test.ts

@@ -12,10 +12,12 @@ const mockWalletResetApi: IWalletAccountApi = {
   isUnlocked: jest.fn(),
   unlock: jest.fn(),
   isSigned: jest.fn(),
+  prepareSignMessage: jest.fn(),
   sign: jest.fn(),
   getAccount: jest.fn(),
   isDomainNameSupported: jest.fn(),
   getDomainName: jest.fn(),
+  getAvatarURL: jest.fn(),
   listenAccountChange: jest.fn(),
   handleAccountChange: jest.fn(),
   reset: jest.fn(),

src/features/wallet/models/account/actionEffects/loadAccount.test.ts

@@ -14,10 +14,12 @@ const mockWalletAccountApi: IWalletAccountApi = {
   isUnlocked: jest.fn(),
   unlock: jest.fn(),
   isSigned: jest.fn(),
+  prepareSignMessage: jest.fn(),
   sign: jest.fn(),
   getAccount: jest.fn(),
   isDomainNameSupported: jest.fn(),
   getDomainName: jest.fn(),
+  getAvatarURL: jest.fn(),
   listenAccountChange: jest.fn(),
   handleAccountChange: jest.fn(),
   reset: jest.fn(),