Usage
Import the package:
Create your ReownAppKitModal()
instance, which is your primary class for opening, closing, disconnecting, etc.
Be sure to update the project ID and metadata with your own.
Initialization
In order to initialize ReownAppKitModal()
instance you must provide a projectId and a metadata.
Alternatively, ReownAppKitModal()
allows you to create an instance by passing a ReownAppKit()
object as follows:
The metadata
object should contain your dApp’s name, description, url and icon. Redirect object is optional but highly recommended. See next session why.
Redirect to your dApp
AppKit’s metadata object contains a redirect
option that should be used by the wallet to redirected back to your dapp after connection.
But in order for the redirect mechanism to work you would also need to add the following in the iOS and Android native sides:
- Locate your
Info.plist
file underyour_project/ios/Runner/
folder. - Locate the
<key>CFBundleURLTypes</key>
section. - Add your schema as
<dict>
entry within the<array>
object as follows.
- Locate your
Info.plist
file underyour_project/ios/Runner/
folder. - Locate the
<key>CFBundleURLTypes</key>
section. - Add your schema as
<dict>
entry within the<array>
object as follows.
- Locate your
AndroidManifest.xml
file underyour_project/android/app/src/main/
folder. - Locate the
<Activity .MainActivity
inside<application />
scope. - Add the following intent
Available Buttons
AppKitModalConnectButton
to open modal and connect to a wallet or through social options
AppKitModalNetworkSelectButton
to select an available network
AppKitModalAccountButton
to open account screen once connected
AppKitModalAddressButton
shows the address on the current selected network
AppKitModalBalanceButton
shows wallet balance on the current selected network
To connect to a wallet you can either use AppKitModalConnectButton
or AppKitModalNetworkSelectButton
.
AppKitModalNetworkSelectButton
will allow the user to pre-select a Network before connecting while AppKitModalConnectButton
will directly show available wallets and social options.
Once connected, AppKitModalConnectButton
will serve as Disconnect button while AppKitModalAccountButton
will show basic account data such as balance and address and will be used to open Account screen.
Quick example:
AppKitModalAccountButton
is composed by AppKitModalBalanceButton
and AppKitModalAddressButton
and you can use these separately from AppKitModalAccountButton
Custom Buttons
If you like you can also override AppKit’s buttons by using the custom:
property as follows
openModalView()
method can accept a “startWidget” argument that you can leverage to open specifics screens of the modal:
Was this page helpful?