Add example page for Next app router and DaisyUI #26
Conversation
|
@Maxtho8 is attempting to deploy a commit to the useWeb3 Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| }, [txSuccess, txError]) | ||
|
|
||
| const formatBalance = (balance: string) => { | ||
| return Number.parseFloat(Number.parseFloat(balance).toFixed(2)).toExponential() |
There was a problem hiding this comment.
Your balance comes in wei (1e18). You probably want to convert this different.
e.g. Viem offers utils to parse/format units. See https://viem.sh/docs/utilities/formatEther
There was a problem hiding this comment.
No, wagmi returns the balance in Ether as a floating point number (the response is a string), for example, '0.123456789'. How do you prefer that I format the balance?
There was a problem hiding this comment.
I think your input param shouldn't be of type string, but a bigint
See https://wagmi.sh/react/api/hooks/useBalance#data
Values are typically denominated in wei (1e18 decimals) and you'd format using the util functions I shared before.
This is how it currently looks like (I have a balance of 0.585 ETH)
There was a problem hiding this comment.
Ok, I made changes, what do you think ?
packages/app/src/utils/network.ts
Outdated
There was a problem hiding this comment.
I agree a local/hardhat chains might be useful, but I don't think it should be added by default for all builds.
e.g. only add if process.env.NODE_ENV !== 'production'
There was a problem hiding this comment.
export const ETH_CHAINS = [
mainnet,
sepolia,
polygon,
optimism,
arbitrum,
process.env.NODE_ENV != 'production' ? hardhat : undefined,
]Like this ?
There was a problem hiding this comment.
I think it would technically work, as you'd never select it, but you are adding a undefined item to the array. It would be better to e.g.
let chains = [ mainnet, sepolia, polygon, optimism, arbitrum ]
if (process.env.NODE_ENV !== 'production') chains.push(hardhat)
export const ETH_CHAINS = chains
packages/app/src/app/layout.tsx
Outdated
| @@ -15,6 +16,7 @@ export default function RootLayout(props: PropsWithChildren) { | |||
| <html lang='en'> | |||
| <body> | |||
| <Web3Provider> | |||
| <ToastContainer /> | |||
There was a problem hiding this comment.
It would be better to create a dedicated 'ToastProvider'.
That allows you to abstract the module away and standardize default functions there.
E.g. import react-toastify and the css at the provider (not in the components)
import { toast } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
And expose a default toast() function from the provider which calls the react-toastify toast.
This makes it easier for future upgrades, or changing the module without going through all the components that use/import it.
There was a problem hiding this comment.
I understand, I created a context for toast, you can check it here
|
Hi @Maxtho8 this is great! Thanks you for contributing. Also keep in mind that I've upgrading wagmi/viem and Web3Modal to their next major version. Happy to chat if you need anything |
|
Hi @wslyvh! Thank you for your feedback. Yes, your comments make sense. I understand the utility of not embedding react-toastify in every file but rather in a provider. I hope my fix is better. However, I didn't fully understand the part about the format of balances. I successfully merged wagmi V2 without any issues, my PR is up to date. I also fixed the example pages to align with the recommendations of wagmi V2. |
|
Great to hear wagmi v2 merged successfully and thanks for the updates! Only one minor issue with balance formatting. Let me know if you need more context |
|
Cool, this looks good! Thanks for the updates 2 more small nitpickings.. and 2) there's a type in one of the toasts: sucessful => successful |
fix : typo
|
Hi, |
|
Awesome! Thanks again for the PR, nice work 🙏 |
This PR, inspired by #4.
Two examples pages are added using Next.js app router and DaisyUI with tailwind :
Send Ether transaction
Send ERC20 transaction
react-toastify is added