React API
Last updated
Was this helpful?
Last updated
Was this helpful?
This module allows for interacting with aragonAPI with . is used under the hood, so being familiar with it can be useful.
This is a simple example demonstrating how we can use @aragon/api-react
to connect an app's frontend to its contract, fetch some data from its state (appState
), and trigger an action on it (api.increment(1)
). The full API is detailed below.
Install it alongside @aragon/api
:
Before using any Hook provided, you need to declare this component to connect the app. It is generally a good idea to do it near the top level of your React tree. It should only be declared once.
Example
A React Hook that returns the data needed to interact with the app contract.
It returns an object containing the following entries:
api
Example:
appState
Example:
connectedAccount
The connected Ethereum account. Its value is ""
(empty string) when there is no account connected.
Example:
currentApp
Details about the current app. Once loaded, it returns a single object with the following keys:
abi
: the app's ABI
appAddress
: the app's contract address
appId
: the app's appId
appImplementationAddress
: the app's implementation contract address, if any (only available if this app is a proxied AragonApp)
identifier
: the app's identifier, if any
isForwarder
: whether the app is a forwarder
kernelAddress
: the app's attached Kernel address (i.e. organization address)
name
: the app's name, if available
roles
(experimental): an array of this app's roles
Each app detail also includes an icon(size)
function, that allows you to query for the app's icon (if available) based on a preferred size.
Its value is null
until it gets loaded.
Example:
guiStyle
The GUI style sent by the client. It contains two entries: appearance
and theme
.
appearance
is currently one of light
or dark
. Other values could be passed in the future (e.g. black
for OLED screens). It is always present and should be respected by apps to display a corresponding theme, unless theme
is present.
Example:
installedApps
The complete list of apps installed in the organization. Its value is an empty array ([]
) until the list of apps are loaded.
Each object in the array holds the same keys as currentApp
.
Example:
network
Example:
path
/ requestPath()
The app's current path. Its value is "/"
by default.
Use requestPath()
to request the app be navigated to another path. Note that the navigation request may be rejected, and in that case the path
will stay constant.
Example:
This Hook returns the same data as the api
entry from the useAragonApi()
hook.
This Hook returns the same data as the appState
entry from the useAppState()
hook.
This Hook returns the same data as the connectedAccount
entry from the useAragonApi()
hook.
This Hook returns the same data as the currentApp
entry from the useAragonApi()
hook.
This Hook returns the same data as the guiStyle
entry from the useAragonApi()
hook.
This Hook returns the same data as the installedApps
entry from the useAragonApi()
hook.
This Hook returns the same data as the network
entry from the useAragonApi()
hook.
This Hook returns an array holding two values from the useAragonApi()
hook:
path
, and
requestPath
It has an optional reducer
prop, which lets you process the state coming from the . If not provided, the state is passed as-is.
As with any React Hook, please ensure that you follow the .
This is the current instance. Use it to call methods on the contract.
The app state, after having passed the state through the reducer
prop of AragonApi
.
theme
contains an entire theme object () that should be applied to the app. It is optional and apps should respect it when present. If not possible, apps should respect the value of appearance
.
Complete example if you are using :
An representing the current network using its id
and type
entries. Its value is null
until it gets loaded.