huseyindeniz / vite-react-dapp-template

Vite React Template for dApp Frontend Development

• 👋 Hi, I’m @huseyindeniz
• 👀 I’m interested in enterprise application development, blockchain and robotics
• 🌱 I’m currently learning phaserjs, unreal engine, solidity
• 💞️ I’m looking to collaborate on nft/blockchain, dotnet core, python, ros/ros2, pytorch, react, react native projects
• 📫 How to reach me https://linkedin.com/in/huseyindenizkivrak/en-us
• 🔗 My E-Portfolio: https://huseyindeniz.net
• 🔗 My Web3 Profile: https://huseyindeniz.avax.sh

vite-react-dapp-template's Issues

Network switch is broken.

While network switch request send to wallet, it shows error but when you retry it works.

Disconnecting wallets doesn't work properly

Describe the bug

If you use the Disconnect button inside the Template's wallet, this seems to only disconnect it internally from the app. If you hit 'connect' again it will reconnect to the same account.

This is perfectly normal behavior.

To connect to a different account you need to disconnect using Metamask's > Connected Sites > disconnect.

Which works.

As soon as you do this, however the Metamask connect in the App pops up. It feels a bit intrusive and I think this should be prevented from happening.

The bug is that after disconnecting either way (App or MM), the EventChannel on listenAccountChange() in Wallet.ts (ethers 6 - I haven't tried 5) is not firing. Thus your app is not aware of the account disconnection.

I understand that you would most likely isProtected your page. But I don't think you should rely on that and I think the listener should be consistent and complete.

To Reproduce
Steps to reproduce the behavior:

1. Connect to account
2. Go to metamask in browser and disconnect account from site
3. In a Page that uses EventChannel on listenAccountChange(), the event doesnt fire so your page is unaware of the change.

Expected behavior
Your pages that use EventChannel on listenAccountChange() should fire when an account is disconnected either in App or via Metamask.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] MacOS 13.6.3
• Browser [e.g. chrome, safari] Brave
• Version [e.g. 22] v1.62.153

Smartphone (please complete the following information):

• Device: [e.g. iPhone6] NA
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Automate versioning

Automate versioning.

Investigate/find/integrate a tool which supports semantic versioning and integrates with GitHub actions easily. Version should be set automatically when a PR is created.

Add Avvy Avatar Support

Avvy domains have avatar option and avatar url's are available via Avvy's ResolutionUtils contract.

Add block explorer

Get user's transactions and list them in User Dashboard page.

Integrate cypress / synpress

If it's possible, integrate cypress/synpress

Consider using RTK createListenerMiddleware instead of Redux Saga

It's a little bit weird to me but RTK team aggressivly recommends using their internal createListenerMiddleware instead of Redux Saga. They claim that it's more useful in most cases. Details are here:

https://redux-toolkit.js.org/api/createListenerMiddleware

Replicate the wallet feature with this middleware and compare it with Redux Saga.

Add Rabby Wallet Support

Rabby wallet is getting more popular. It needs to be added to Supported Web3 Wallets list.

Note: I added Rabby support at the beginning but Avalanche's Core wallet hijacks/overrides ethers BrowserProvider object properties aggressively which causes a problem when Rabby, MM and Core installed at the same time.

Find a way to identify all wallets correctly when MM, Rabby and Core wallet installed at the same time on user's browser.

Integrate a11y

If it's possible, integrate a11y in both eslint and storybook

Integrate Viem

If it's possible integrate Viem as an alternate to Ethers

Supported wallets not shown when no wallet detected.

Supported wallet list and install links should be shown when no wallet found. Currently it shows generic error with error code "no wallet found".

Lang selection fails for 2 chars lang codes

If a browser sends the accepted language as "en", the i18n configuration does not set the language to "en-US", causing the first clicked internal link to fail.

Save access token in wallet store when backend signature activated.

IWalletAccountApi sign method doesn't return anything. When backend login needed, in most cases, this sign method probably will get access token from backend server. This token needs to be saved in wallet store.

• return token in sign method
• save token in signin saga

Integrate Ethers V6

Refactor IWalletApi for supporting more Web3 Wallets

Currently, IWalletAPI implementation is searching/using Metamask only. Refactor loadProvider to support other web3 wallets.
After refactoring it, the following wallets might be integrated as a first iteration in this task.

• Core
• Coinbase

Also add Other Wallets option to support more Web3 wallets.

`path` required for Pages

Describe the bug

Really nice template thanks. However some teething issues. This one is for the documentation.

The documentation at https://huseyindeniz.github.io/react-dapp-template-documentation/docs/tutorial-basics/create-a-page says:

// Home Route
const MyNewPageRoute: PageType = {
  index: true,
  element: <MyNewPage />,
  menuLabel: t("My New Page", { ns: "Menu" }),
  isShownInMainMenu: false,
  isShownInSecondaryMenu: false,
  isProtected: false,
};

But you also need to add path to get the new page to work. For example:

const EventsPageRoute: PageType = {
    index: true,
    path: 'events',
    element: <EventsPage />,
    menuLabel: t('Events', { ns: 'Menu' }),
    isShownInMainMenu: false,
    isShownInSecondaryMenu: true,
    isProtected: false,
  };

It also wouldn't hurt to add some more details to this page. For example:

• isProtected is if Wallet authentication is required
• isShownInXMenu - at least one of these must be true

Integrate Absolute Imports

If it's possible, integrate absolute imports.

Remove ethersV5 support

EthersV6 seems stable. No need to continue supporting ethersv5

ProfileDropdownMenu is not lazy loaded

ProfileDropdownMenu component under ui feature is not lazy loaded on pageload. It should be loaded only when user authenticated.

Remove ens domain support asap!

Network logo should be lazy loaded.

Currently, the NetworkLogo component under the wallet feature loads all supported network logos. It should load only the connected network logo.

• Investigate if there is a lightweight, stable external React package for image lazy loading.
• a proper package exists.
    - install and use it in all image imports.
• package does not exist.
    - Find a way to lazy load network logos in the NetworkLogo component.
    - Investigate other places if multiple unnecessary sync image loads exist, and if so, fix them as well.
    - Consider if the custom solution to this issue could be a shared component under the UI feature. If so, create it and use it.