huseyindeniz / vite-react-dapp-template Goto Github PK
View Code? Open in Web Editor NEWVite React Template for dApp Frontend Development
Home Page: https://huseyindeniz.github.io/react-dapp-template-documentation/
License: MIT License
Vite React Template for dApp Frontend Development
Home Page: https://huseyindeniz.github.io/react-dapp-template-documentation/
License: MIT License
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:
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):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
Currently, the NetworkLogo component under the wallet feature loads all supported network logos. It should load only the connected network logo.
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.
Also add Other Wallets option to support more Web3 wallets.
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.
Get user's transactions and list them in User Dashboard page.
If it's possible, integrate cypress/synpress
Supported wallet list and install links should be shown when no wallet found. Currently it shows generic error with error code "no wallet found".
If it's possible, integrate Viem as an alternate to Ethers
If it's possible, integrate absolute imports.
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 requiredisShownInXMenu
- at least one of these must be trueIt'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.
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.
If it's possible, integrate a11y in both eslint and storybook
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.
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.
ProfileDropdownMenu component under ui feature is not lazy loaded on pageload. It should be loaded only when user authenticated.
EthersV6 seems stable. No need to continue supporting ethersv5
Avvy domains have avatar option and avatar url's are available via Avvy's ResolutionUtils contract.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.