@txnlab/use-wallet-ui-react 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -4
- package/dist/cjs/index.cjs +1 -1
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/style.css +909 -916
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -89,7 +89,7 @@ function App() {
|
|
|
89
89
|
That's it! You now have a fully functional wallet connection system with:
|
|
90
90
|
|
|
91
91
|
- Clean, accessible UI components
|
|
92
|
-
- NFD
|
|
92
|
+
- NFD integration
|
|
93
93
|
- ALGO balance display
|
|
94
94
|
- Account switching
|
|
95
95
|
- Dark/light mode support
|
|
@@ -148,7 +148,7 @@ The library supports two styling approaches:
|
|
|
148
148
|
|
|
149
149
|
### Option 1: Using Tailwind CSS (Recommended)
|
|
150
150
|
|
|
151
|
-
Using Tailwind CSS provides the richest customization experience:
|
|
151
|
+
Using [Tailwind CSS](https://tailwindcss.com/) provides the richest customization experience:
|
|
152
152
|
|
|
153
153
|
- Full access to Tailwind's utility classes for customization
|
|
154
154
|
- Hover, focus, and active states with simple modifiers
|
|
@@ -383,11 +383,12 @@ function Profile() {
|
|
|
383
383
|
|
|
384
384
|
// Access NFD properties
|
|
385
385
|
const name = nfdQuery.data?.name
|
|
386
|
-
const
|
|
386
|
+
const userProperties = nfdQuery.data?.properties?.userDefined
|
|
387
387
|
|
|
388
388
|
return (
|
|
389
389
|
<div>
|
|
390
390
|
<h2>{name || 'No NFD found'}</h2>
|
|
391
|
+
<p>{userProperties?.bio || 'No bio'}</p>
|
|
391
392
|
</div>
|
|
392
393
|
)
|
|
393
394
|
}
|
|
@@ -512,7 +513,7 @@ function CustomWalletButton() {
|
|
|
512
513
|
|
|
513
514
|
## Integration with Tanstack Query
|
|
514
515
|
|
|
515
|
-
This library uses Tanstack Query internally for data fetching. If your application already uses Tanstack Query, you can integrate the two to avoid duplicate caches:
|
|
516
|
+
This library uses [Tanstack Query](https://tanstack.com/query/latest) internally for data fetching. If your application already uses Tanstack Query, you can integrate the two to avoid duplicate caches:
|
|
516
517
|
|
|
517
518
|
```jsx
|
|
518
519
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|