Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nanofuxion/ans-for-all
A drop in module/API to allows developers to leverage decentdotland's ANS(Arweave Name Service) in react apps
https://github.com/nanofuxion/ans-for-all
Last synced: about 2 months ago
JSON representation
A drop in module/API to allows developers to leverage decentdotland's ANS(Arweave Name Service) in react apps
- Host: GitHub
- URL: https://github.com/nanofuxion/ans-for-all
- Owner: nanofuxion
- License: mit
- Created: 2022-05-21T11:05:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-01T13:49:59.000Z (about 2 years ago)
- Last Synced: 2023-03-06T02:28:23.260Z (almost 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 336 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
@decentdotland/ans-for-all
A drop in module to utilize the ANS (Arweave Name Service) in react apps
## Usage:
Add it to your project:
```console
yarn add ans-for-all
```
### How to use ans-for-all in your React app:
```jsx
//App.js | index.js
import React from 'react';
import { AnsProvider, Badge, ANSContext } from 'ans-for-all';
//see example code below at "Custom badge"
import { Custom_Badge } from './components/custom';
//wrap the root component with
export default function Home() {
return (
)
}
export function Name() {
/*
get ans provider variables:
{
walletConnected, address,
ansData, shortenAddress,
arconnectConnect, arconnectDisconnect
}
*/
const {
address,
walletConnected,
ansData,
} = useAns();
return (
walletConnected ?
<>
Welcome {ansData?.currentLabel}
Your wallet address is: {address}
> :
<>
Please Login using an Arweave Wallet
>
)
}
```
## API
### <AnsProvider />
This is the provider component. It should be placed above all components using `useAns()`.
### useAns
This is the hook to be used throughout the app. It returns an object containing:
- [walletConnected](#walletconnected)
- [address](#address)
- [ansData](#ansdata)
- [shortenAddress](#shortenaddress)
- [arconnectConnect](#arconnectconnect)
- [arconnectDisconnect](#arconnectdisconnect)
## walletConnected
- State of the Arconnect/Finnie wallet.
-
## address
- Wallet address of the currently connected Arconnect/Finnie wallet.
## ansData
Returns:
- address_color: The ANS profile color.
- currentLabel: The current ANS label in use.
- avatar: The TXID for the ANS Avatar Image.
## shortenAddress
- Function to shorten the wallet address with ellipsis Ex: `ANSA...ANSA`
## arconnectConnect
- Function used to request connecting site to ArConnect.
## arconnectDisconnect
- Function used to request disconnecting site from ArConnect.
# Custom Badge Example:
```jsx
// components/custom.jsx
import * as React from 'react';
import { useAns } from 'ans-for-all';
export const Default_Badge = () => {
const {
walletConnected,
address,
ansData,
shortenAddress,
arconnectConnect,
arconnectDisconnect
} = useAns();
return (
<>
{(walletConnected && (
<>
{ansData?.currentLabel ? `${ansData?.currentLabel}.ar` : shortenAddress(address)}
{(ansData?.avatar === "") ?
:
}
>
)) || (
{"ANS login"}
)}
>
)
}
```
## Examples
To run the examples, switch to the respective directories. Run `npm install` or `yarn install`, Then run `npm start dev` or `yarn dev`.
## License
This project is licensed under the [MIT license](./LICENSE)