Working with Particle Wallet within React Native applications.
projectId
, clientKey
, and appId
, all of which can be retrieved from the Particle dashboard.
@particle-network/rn-wallet
, either through npm or Yarn, depending on your preference.
projectId
, clientKey
, and appId
) within your build.grade
file (generally found at ${project name}/android/app/build.gradle
). These directly link your application’s instance of Particle Connect with the dashboard.
Specifically, within build.gradle
, you’ll need to set four different values:
dataBinding
, this should be enabled with enabled = true
.manifestPlaceholders["PN_PROJECT_ID"]
, the projectId
previously retrieved from the Particle dashboard.manifestPlaceholders["PN_PROJECT_CLIENT_KEY"]
, the clientKey
previously retrieved from the Particle dashboard.manifestPlaceholders["PN_APP_ID"]
, the appId
previously retrieved from the Particle dashboard.ios/{project name}.xcworkspace
.
At the root of your Xcode project, create a new file, ParticleNetwork-Info.plist
. Ensure this is marked under “Target Membership.”
From here, with a fresh ParticleNetwork-Info.plist
file, go ahead and fill it in with the following:
PROJECT_UUID
(projectId
), PROJECT_CLIENT_KEY
(clientKey
), and PROJECT_APP_UUID
(appId
) with the corresponding values retrieved from the Particle dashboard.
Next, you’ll need to head over to your AppDelegate.swift
file to add an import of react_native_particle_connect
, which Particle Wallet depends on in a large capacity.
Additionally, within your application’s application
method (as shown below), you’ll need to include a handler condition derived from ParticleConnectSchemeManager handleUrl:url
. This should be as simple as a YES
(true) return upon a truthy value of ParticleConnectSchemeManager handleUrl:url
.
projectId
(retrieved and configured prior), resulting in a scheme URL that looks something like the following:
Info.plist
file and include the following snippet.
particle_connect
(which, as mentioned, Particle Wallet depends on) is properly imported. Head over to the linked guide to complete this if you have not already.
particleWallet.initWallet
, which takes one parameter, walletMetaData
. This should a DappMetaData
object containing:
walletConnectProjectId
, your WalletConnect project ID retrieved from the WalletConnect dashboard.name
, the name of your project.icon
, your project’s logo - ideally 512x512.url
, the URL of your project’s website.description
, a brief description of your project.redirect
and verifyUrl
.init
, passing in chainInfo
and env
. For more information on Particle Connect, see the Particle Connect React Native SDK.
particleWallet.navigatorWallet
. navigatorWallet
takes one parameter, a binary selection indicating whether tokens or NFTs are displayed within the main wallet page. WalletDisplay.token
sets this to tokens, and WalletDisplay.nft
to NFTs. E.g.:
particleWallet.navigatorTokenReceive
opens a page dedicated to receiving tokens, through both a general address and a QR code. This takes one optional parameter, tokenAddress
, that can change the associated QR code to be specific to a given token, including its icon at the center of the QR code image. E.g.
particleWallet.navigatorTokenSend
, optionally passing in the following parameters to predefine (fill in) specific values within the page:
tokenAddress
, the contract address of the token to be sent, can be set to native
for the default/native network token.toAddress
, the recipient’s address.amount
, the volume of tokenAddress
that’ll be sent to toAddress
.particleWallet.navigatorTokenTransactionRecords
. If you’d like to filter these records only to show entries that include a specific token, then you can pass in a tokenAddress
representing the token to be filtered. E.g.
navigatorTokenSend
, you can use particleWallet.navigatorNFTSend
to prompt a page for sending a specific NFT (defined by a mint
/contractAddress
and tokenId
) to another address. navigatorNFTSend
takes three parameters:
receiverAddress
, the recipient’s address.mint
(also known as contractAddress
), the address of the NFT contract to be sent.tokenId
, the token ID for the specific NFT associated with mint
. This can be set as null
for Solana.particleWallet.navigatorNFTDetails
by passing in mint
(contractAddress
) and the associated tokenId
that you’d like to view. E.g.
ParticleWallet.navigatorBuyCrypto
, passing in several optional parameters to customize the values used within the onramp. Upon calling, this will return a popup or total redirect over to a configuration of https://ramp.particle.network.
The specific parameters that can be used within ParticleWallet.navigatorBuyCrypto
are listed below:
Field | Type | Description |
---|---|---|
walletAddress | string? | (Optional) The wallet address to receive the cryptocurrency, default is current user address. |
cryptoCoin | string? | (Optional) Cryptocurrency denomination. Default is current chain native token symbol. |
fiatCoin | string? | (Optional) Fiat currency denomination. Default is current fiat coin. |
fiatAmt | int? | (Optional) The amount of fiat to be automatically filled in as the purchase volume. |
chainInfo | ChainInfo? | (Optional) The chainInfo, default is current chainInfo. |
fixFiatCoin | boolean | (Optional) Lock selection of fiat coin in the buy menu, default is false. |
fixFiatAmt | boolean | (Optional) Lock selection of fiat amount in the buy menu, default is false. |
fixCryptoCoin | boolean | (Optional) Lock selection of crypto coin in the buy menu, default is false. |
theme | string? | (Optional) The buy page theme, dark or light , default is curreny appearance. |
language | Language? | (Optional) The buy page lanuage, default is current language. |
particleWallet.navigatorSwap
, and optionally passing in the following parameters (can work without them):
Field | Type | Description |
---|---|---|
fromTokenAddress | string? | (Optional) The swap pair from token address |
toTokenAddress | string? | (Optional) The swap pair to token address |
amount | string? | (Optional) The swap from token amount, should pass the minimal unit string, for example 0.01 ETH, it’s decimals is 18, should pass “10000000000000000” |
particleWallet.navigatorDappBrowser
, taking one parameter, url
, which will dictate the specific site opened. E.g.:
ParticleWallet.setSupportChain
, which takes an array of ChainInfo
objects. Each object (representing different chains) will directly enable an additional chain within the wallet interface.
If you add a Testnet to this list and pass it to setSupportChain
, you’ll also need to ensure that ParticleWallet.setShowTestNetwork
is set to true
(by passing in true
). E.g.:
walletType
being used within Particle Wallet. For example, if you’re using Metamask as a wallet type within Particle Wallet and would like to switch to Particle (social logins), this would be the method you’d use. You can initiate this switch through particleWallet.createSelectedWallet
, passing in the new walletType
object (of type WalletType
), and the targeted user address of the current active session. E.g.
WalletType
contains the following:
AuthCore
, Particle Auth Core, an alternative to Particle Auth (Particle
).EvmPrivateKey
, custom EVM wallet imports/exports.SolanaPrivateKey
, custom Solana wallet imports/exports.MetaMask
.Rainbow
.Trust
.ImToken
.Bitget
.WalletConnect
.Phantom
, intended for Solana.Zerion
.Math
.Inch1
, 1inch.Zengo
.Alpha
.Bitpie
.OKX
.TokenPocket
, not supported by iOS.particleWallet.setCustomWalletName
,
Field | Type | Description |
---|---|---|
name | string | Wallet name, for Android, you need call createSelectedWallet to customize the wallet name after particle wallet connected |
icon | string | Wallet icon, a uri such as https://example.com/icon.png |
particleWallet.setCustomLocalizable
. This method only support iOS,
particleWallet
(@particle-network/rn-wallet
). These methods include (but are not limited to):
setSwapDisabled
, whether or not the “Swap” functionality is displayed within the interface. This takes one parameter, either true
or false
, with the default being false
.
setPayDisabled
, whether or not the “Buy” functionality is displayed within the interface. This takes one parameter, either true
or false
, with the default being false
.
setBridgeDisabled
, whether or not the “Bridge” functionality is displayed within the interface. This takes one parameter, either true
or false
, with the default being false
.
setDisplayTokenAddresses
, an synchronous function to set specific token addresses to be displayed in the Particle Wallet. It takes an array of token addresses as a parameter, tokenAddresses
.
setDisplayNFTContractAddresses
, an synchronous function for setting specific NFT contract addresses to be displayed in the Particle Wallet. This function accepts an array of NFT contract addresses, nftContractAddresses
.
setPriorityTokenAddresses
, an synchronous function that prioritizes certain token addresses to appear at the top of lists within the Particle Wallet. It requires an array of token addresses, tokenAddresses
.
setPriorityNFTContractAddresses
, an synchronous function to prioritize specific NFT contract addresses in the Particle Wallet, making them appear at the top of lists. It takes an array of NFT contract addresses, nftContractAddresses
.
setShowLanguageSetting
, an synchronous function to toggle the visibility of the language setting option in the Particle Wallet. It takes a Boolean value, true
or false
.
setShowAppearanceSetting
, an synchronous function that controls the display of the appearance setting in the Particle Wallet. It accepts a Boolean parameter, either true
or false
.
setSupportAddToken
, an synchronous function to toggle the option to add tokens in the Particle Wallet. It takes a Boolean value of true
or false
.
setSupportWalletConnect
, an synchronous function set whether WalletConnect is supported on the wallet page. It takes a boolean value, true
or false
.
setSupportDappBrowser
, configures the availability of the dApp browser feature. It accepts a boolean parameter, true
or false
.