Skip to content

Commit

Permalink
Grammarly Clarity rewrites applied
Browse files Browse the repository at this point in the history
  • Loading branch information
@Karkunow
Karkunow committed Feb 22, 2024
1 parent b8d4c69 commit cf5ead8
Show file tree
Hide file tree
Showing 7 changed files with 84 additions and 82 deletions.
34 changes: 17 additions & 17 deletions docs/onboard/integration-example.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ In this article, we will go through the development of a simple [Web3Modal](http

### Create a simple React app

To start, let's create a React application by using `create-react-app`. Of course, you can just use your already existing codebase instead, we're doing this just for demonstration purposes.
To start, let's create a React application by using `create-react-app`. Of course, you can use your existing codebase instead. We're doing this just for demonstration purposes.
You will need to run in your terminal:

```bash
Expand All @@ -16,18 +16,18 @@ cd aurora-pass-example
npm start
```

Your React app will be running now at `http://localhost:3000`, just open that link in your browser to see the UI.
You can read more about the `create-react-app` [here](https://create-react-app.dev/docs/getting-started/), in case you want to learn more details.
Your React app will be running now at `http://localhost:3000`. Just open that link in your browser to see the UI.
You can read more about the `create-react-app` [here](https://create-react-app.dev/docs/getting-started/) for more details.

### Add Aurora Promo Widget

We have talked about the Promo Widget [before](/onboard/promo-widget), but now it is time to try it in practice.
You need to follow the code [here](/onboard/promo-widget) to add the Promo Widget popup to your DApp.
We have discussed the Promo Widget [before](/onboard/promo-widget), but now it is time to try it in practice.
You need to look at the code [here](/onboard/promo-widget) to add the Promo Widget popup to your DApp.
After this, we can add Web3Modal to the project.

### Adding Web3Modal

We will follow the [Web3Model Wagmi v2 documentation](https://docs.walletconnect.com/web3modal/react/about?platform=wagmi) closely here.
We will closely follow the [Web3Model Wagmi v2 documentation](https://docs.walletconnect.com/web3modal/react/about?platform=wagmi) here.

#### Import libraries and get projectId

Expand All @@ -37,7 +37,7 @@ First, let's add some new packages to the project:
npm install @web3modal/[email protected] wagmi viem @tanstack/react-query
```

Let's sign up now at [WalletConnect Cloud](https://cloud.walletconnect.com/sign-in) to get a WalletConnect `projectId`. You will get some random string like `4aee871f7a80f1ff5c7892226bd3ascd`.
Now, sign up at [WalletConnect Cloud](https://cloud.walletconnect.com/sign-in) to get a WalletConnect `projectId`. You will get some random string like `4aee871f7a80f1ff5c7892226bd3ascd`.

#### Add Web3Modal component

Expand Down Expand Up @@ -84,7 +84,7 @@ export default function Web3Modal({ children }) {
}
```

Now, we can use the Web3Modal component in our App. First of all, notice that we need to wrap into it the part of the App using the `wagmi` hooks. In this case, we wrapping it fully into it:
Now, we can use the Web3Modal component in our app. First, notice that we need to wrap the part of the app into it using the `wagmi` hooks. In this case, we are wrapping it fully into it:

```jsx title="aurora-pass-example/src/App.js"

Expand All @@ -103,12 +103,12 @@ function App() {
}
```

But we haven't displayed the popup yet. How can we do it?
But we still need to display the popup. How can we do it?

#### Displaying Web3Modal

To open the wallets popup, let's use `useWeb3Modal` hook inside the App component, to be more specific – the `open` function it provides.
We also need to edit a bit our old `openWidget` function to accept `onComplete` argument, and pass there the `open` function:
To open the wallets popup, let's use the `useWeb3Modal` hook inside the App component, to be more specific – the `open` function it provides.
We also need to edit a bit our old `openWidget` function to accept the `onComplete` argument and pass there the `open` function:

```jsx title="aurora-pass-example/src/App.js"
import { useWeb3Modal } from '@web3modal/wagmi/react';
Expand Down Expand Up @@ -143,13 +143,13 @@ function App() {
}
```

You can also safely remove the `openWeb3Modal` function we have had previously with just a placeholder alert in there.
You can also safely remove the `openWeb3Modal` function we previously had with just a placeholder alert.

If you go into your App now, you will be able to see the WalletConnect popup appearing after you click 'Skip' button in the AuroraPass widget:
If you go into your App now, you will be able to see the WalletConnect popup appearing after you click the 'Skip' button in the AuroraPass widget:

![wc_default_modal](/img/wc_default_modal.png)

But, it won't contain the AuroraPass yet. Let's add it there.
But it will still need to contain the AuroraPass. Let's add it there.

### Add AuroraPass to your wallet list

Expand All @@ -172,11 +172,11 @@ If we re-open the Web3Modal now, we will see the AuroraPass wallet there:

![wc_ap_visible](/img/wc_ap_visible.png)

Now, we can try connecting our wallet, via the QR code:
Now, we can try connecting our wallet via the QR code:

![wc_ap_qr](/img/wc_ap_qr.png)

But we won't see if the connection was successful yet, because we don't have anything to display that. The popup will just close and we will see the App's initial screen:
But we won't see if the connection was successful yet because we need something to display that. The popup will close, and we will see the App's initial screen:

![wc_ap_connected_no_ui](/img/wc_ap_connected_no_ui.png)

Expand Down Expand Up @@ -228,4 +228,4 @@ And the corresponding account after we've connected via the Web3Modal to the DAp

Congratulations on completing your first AuroraPass integration!

If you still have some questions, please contact our team via [Discord](https://discord.com/invite/dEFJBz8HQV) by opening a support ticket there.
If you still have questions, please get in touch with our [Support Team](https://discord.com/invite/dEFJBz8HQV) by opening a support ticket there.
24 changes: 12 additions & 12 deletions docs/onboard/introduction.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ title: "Introduction"

# Aurora Pass

Aurora Pass is a mobile cryptocurrency wallet that makes it easier than ever to manage your Aurora Mainnet and Aurora Chain assets and use any DApps across these chains.
It helps also to onboard your users, even if they are not familiar with the Web3 ecosystem yet.
Aurora Pass is a mobile cryptocurrency wallet that makes your interactions with Aurora or any of the Aurora Chains easier than ever, whether transferring your assets or using a DApp.
It also helps onboard your users, even ones unfamiliar with the Web3 ecosystem.

## Key Features

Expand All @@ -18,34 +18,34 @@ It helps also to onboard your users, even if they are not familiar with the Web3

## Integration

Connecting Aurora Pass to a DApp is done the same way as every other EVM wallet implementing a [WalletConnect v2](https://docs.walletconnect.com/).
See more info on how to configure or add WalletConnect [here](/onboard/wallet-connect).
Connecting Aurora Pass to a DApp is done like every other EVM wallet implementing a [WalletConnect v2](https://docs.walletconnect.com/).
See more info on configuring or adding WalletConnect [here](/onboard/wallet-connect).

You can follow the step-by-step [integration example](/onboard/integration-example) to understand better how different components work together.

## Promo Widget

To allow new users to install Aurora Pass quickly, you can add a [promo widget](/onboard/promo-widget) to your DApp.
Add a [Promo Widget](/onboard/promo-widget) to your DApp to allow new users to install Aurora Pass quickly.
It will direct a user to download the Aurora Pass application on a mobile phone in the most convenient way.

It is optional to add it to your DApp. Otherwise, you will need to implement some other way to lead users to the installation of the wallet.
So, we advise everyone to use it as an onboarding entry point in their DApps.
We advise everyone to use it as an onboarding entry point in their DApps.

## Free transactions

Aurora Pass requires a login with an email or Apple/Google auth which will provide them with free transactions on Aurora Mainnet.
Aurora Pass requires a login with an email or Apple/Google auth, which will provide them with free transactions on Aurora Mainnet.
The basic plan for Aurora Pass users is 50 free transactions per month. This feature is achieved by using the Gasless Management feature of Aurora Chains.
At the same time, DApps can also pay for their users’ EOA transaction fees by getting their own gasless deal using the same mechanism.
At the same time, DApps can also pay for their users’ EOA transaction fees by getting their own gasless deal using our Gasless Management product.

If the monthly free transaction limit is reached or the transaction is not sponsored by a DApp, a pack of transactions can be purchased from within the Aurora Pass app.
Right now, there is only one transaction pack available: 500 free transactions for a price of around $4.99.
Currently, only one transaction pack is available: 500 free transactions for around $4.99 (the price can depend on the country).

## Security

Aurora Pass is a non-custodial crypto wallet which means that the user will be given a 12-word recovery seed phrase that grants them access to their assets.
Aurora Pass is a non-custodial crypto wallet, meaning the user will be given a 12-word recovery seed phrase that grants them access to their assets.

Users won’t have to save that seed phrase on signup as it is securely saved on the device, but can choose to export it at any time.
This provides better onboarding while providing them with the ownership of their assets in a non-custodial way.
Users won’t have to save that seed phrase on signup as it is securely saved on the device but can choose to export it anytime.
Excluding such details provides better onboarding while also giving users the ownership of their assets in a non-custodial way.

The seed phrase is the only way to recover access to the wallet in case of loss or when installing the wallet on a new device.

Expand Down
19 changes: 10 additions & 9 deletions docs/onboard/promo-widget.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,21 @@ title: "Promo Widget"

# Promo Widget

If you develop a DApp – you will need a way to get your users to install the Aurora Pass application on their phone. We have created a widget to simplify this step.
If you develop a DApp, you will need a way to get your users to install the Aurora Pass application on their phones. We have created a widget to simplify this step.
This modal leads a user to download the wallet application for iOS or Android by scanning a QR code:

![ap_widget_qr_and_main](/img/ap_widget_qr_and_main.png)

Users can always say that they already have the wallet installed and this popup won't be shown for them next time.
Users can always say they already have the wallet installed, and this popup won't be shown for them next time.

## Quick integration guide

1. Load a script from this [link](https://pass.auroracloud.dev/promo.js), and import it to your project.
2. This adds a function to the `window` object called `openPromo`.
3. To open the widget, call `window.openPromo` and pass the `onComplete` function as a parameter `window.openPromo({ onComplete: function })`
4. You can also check if the function is available before calling it `window.openPromo ? window.openPromo({ onComplete: function }) : function()`
5. Optionally, you can hide the _Update your app_ header by passing the `hideUpdateAppBlock` variable via `config` argument: `window.openPromo({ onComplete: () => {...}, config: {hideUpdateAppBlock: true}})`
5. Optionally, you can hide the _Update your app_ header by passing the `hideUpdateAppBlock` variable via the `config` argument:
`window.openPromo({ onComplete: () => {...}, config: {hideUpdateAppBlock: true}})`

You can also find the same instructions [here](https://pass.auroracloud.dev/).
A more detailed example of integration is below.
Expand Down Expand Up @@ -47,7 +48,7 @@ function App() {
```

:::note
We assume that the project we're working on here is a default `create-react-app` application to simplify things. You can read more about it [here](https://create-react-app.dev/docs/getting-started/).
We assume the project we're working on here is a default `create-react-app` application to simplify things. You can read more about it [here](https://create-react-app.dev/docs/getting-started/).
:::

Then, let's add a function `openModal` to display our Promo Widget just after the imports somewhere:
Expand All @@ -66,7 +67,7 @@ const openWidget = () => {
...
```

Now, we can set the `onClick` attribute of one of our UI components to display the modal. We can just re-use the already existing `App-link` element to use `openWidget` function:
Now, we can set the `onClick` attribute of one of our UI components to display the modal. We can re-use the already existing `App-link` element to use the `openWidget` function:

```jsx title="aurora-pass-example/src/App.js"

Expand All @@ -90,19 +91,19 @@ function App() {
}
```

If you click on `Open Promo` link, you will be able to see the Promo Widget now:
If you click on the `Open Promo` link, you will be able to see the Promo Widget now:
![ap_widget_example_1](/img/ap_widget_example_1.png)

And then, if you click further on the 'Skip, I have a wallet' button, you will see the placeholder message about Web3Modal:
![ap_widget_example_1](/img/ap_widget_example_2.png)

Now, you can also take a look at the bigger [integration example here](/onboard/integration-example) to learn how to add Web3Modal to your project.
You can also look at the more extensive [integration example here](/onboard/integration-example) to learn how to add Web3Modal to your project.
Or go directly to the section of [adding the Web3Modal](/onboard/integration-example#adding-web3modal) if you came here from that page.

### What should be called in onComplete function?
### What should be called in the `onComplete` function?

The widget calls any function you pass to it. So you could pass anything to it, whether that’s opening Web3Modal or RainbowKit popups or any other function.
But, it works best and is meant to be used with WebModal v3 since the modal is styled in the same style.
But it works best and is meant to be used with WebModal v3 since the modal is styled similarly.

## Examples of integration

Expand Down
39 changes: 20 additions & 19 deletions docs/onboard/troubleshooting.md
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,58 @@
---
title: Troubleshooting
title: Troubleshooting
---

### I have sent my tokens to the wrong wallet - can I recover them?

Aurora Pass does not currently support other EVM chains and L2s, except Aurora and Aurora Chains.
Sometimes by mistake, users can send assets to their address on those non-supported networks instead.
Sometimes, by mistake, users can send assets to their address on those non-supported networks instead.

E.g, suppose you have sent your assets to some of your Ethereum addresses.
E.g., suppose you have sent your assets to some of your Ethereum addresses.

Then, if you have a private key of that address or a seed phrase - these tokens can be easily recovered by importing your address into a compatible wallet, e.g., MetaMask.
After that, you will be able to bridge them back from Aurora to your Ethereum address. Or transfer the tokens to any other address on Aurora, like your AuroraPass address.
These tokens can be quickly recovered by importing your address into a compatible wallet, e.g., MetaMask, using your private key or a seed phrase.
After that, you can bridge them back from Aurora to your Ethereum address. Or transfer the tokens to any other address on Aurora, like your AuroraPass address.

In case if you have transferred them to a CEX address, you won't be able to recover these tokens, if that CEX doesn't support Aurora yet. Currently, we support Coinbase, KuCoin and Gate.io CEXes.
If you have transferred them to a CEX address, you can only recover these tokens if that CEX supports Aurora later. Currently, we support Coinbase, KuCoin, and Gate.io CEXes.

### I can't find the token [XYZ] in my wallet – can I add it somehow?

- If you are a developer, please add a PR to [this repository](https://github.com/aurora-is-near/bridge-assets) following [this example](https://github.com/aurora-is-near/bridge-assets/pull/273/files).
- If you are a user, please contact our [Support Team](https://discord.gg/dEFJBz8HQV) via Discord and we will help you to resolve this issue.
- If you are a user, don't hesitate to get in touch with our [Support Team](https://discord.gg/dEFJBz8HQV) via Discord, and we will help you resolve this issue.

### I have paid for my transaction pack but got no transactions added

Please, contact our [Support [Team](https://discord.gg/dEFJBz8HQV), and we will help you to get your transaction pack.
Please get in touch with our [Support Team](https://discord.gg/dEFJBz8HQV), and we will help you get your transaction pack.

### I can't see my balances in Aurora Pass

Sometimes such a situation could happen because of some local restrictions in your country of residence. Please, try using another internet connection or VPN to solve the issue.
Sometimes, such a situation could happen because of local restrictions in your country of residence. Try using another internet connection or VPN to solve the issue.

### I get the 'Pairing failed: Pairing already exists' error while connecting to a DApp

This error looks like this:
![ap_pairing_error.png](/img/ap_pairing_error.png)

This error means that DApp is already using some existing pairing but the wallet doesn't know it was disconnected, so there is some non-sync state between them.
This error means that DApp is already using some existing pairing, but the wallet doesn't know it was disconnected, so there is some non-sync state between them.

To fix it, please try to follow the next steps:

1. Try to disconnect all previously connected wallets from that DApp.
2. Re-connect with your AuroraPass wallet to a DApp.

In case the problem persists, please contact our [Support Team](https://discord.gg/dEFJBz8HQV).
If the problem persists, please get in touch with our [Support Team](https://discord.gg/dEFJBz8HQV).

### I see symbols like 0xab4... during signing a DApp transaction in Aurora Pass - what do they mean?
### I see symbols like 0xab4... while signing a DApp transaction in Aurora Pass - what do they mean?

If you are a user, please contact either the DApp support team or the [Aurora Support Team](https://discord.gg/dEFJBz8HQV) and ask them to verify the contracts used in that DApp.
If you are a user, don't hesitate to get in touch with either the DApp support team or the [Aurora Support Team](https://discord.gg/dEFJBz8HQV) and ask them to verify the contracts used in that DApp.

If you are a developer, make sure to verify your DApp contracts in [Aurora Explorer](https://explorer.aurora.dev/).
This will make sure that a user sees nicely formatted information - function name and its arguments' names while using the Aurora Pass wallet.
If you are a developer, verify your DApp contracts in [Aurora Explorer](https://explorer.aurora.dev/). We're using Blockscout
so that you can read more about it [here](https://docs.blockscout.com/for-users/verifying-a-smart-contract).
Verifying your contracts will ensure that a user sees nicely formatted information - function name and its arguments' names while using the Aurora Pass wallet.

In the case of having a non-verified contract, a user will see a non-decoded function name and arguments, which will look incomprehensible and unclear.
In a non-verified contract, a user will see a non-decoded function name and arguments, which will look incomprehensible and unclear.

So, we advise you to verify all (or most) of your contracts, which gives your users a better understanding of their interactions with your product via Aurora Pass.
We advise you to verify all (or most) of your contracts, which gives your users a better understanding of their interactions with your product via Aurora Pass.

### I have a problem, which is not on the list
### I have a problem which is not on the list

Please, contact our [Support Team](https://discord.gg/dEFJBz8HQV) on Discord and open a ticket describing your problem.
Please get in touch with our [Support Team](https://discord.gg/dEFJBz8HQV) on Discord and open a ticket describing your problem.
Loading

0 comments on commit cf5ead8

Please sign in to comment.