Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

change Alpha->BETA mode&add full name of Extension #650

Merged
merged 4 commits into from
Sep 29, 2023
Merged

change Alpha->BETA mode&add full name of Extension #650

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
973f0ef
change Alpha->BETA mode&add full name of Extension
biancabuzea200 Sep 29, 2023
5dce2af
fix broken link
biancabuzea200 Sep 29, 2023
0e8e96a
Merge branch 'fixNaming' of https://github.com/lukso-network/docs int…
biancabuzea200 Sep 29, 2023
64e9ed4
Merge branch 'main' into fixNaming
Hugoo Sep 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/guides/browser-extension/_category_.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
label: '🧩 Browser Extension'
label: '🧩 UP Browser Extension'
collapsed: true
position: 2
2 changes: 1 addition & 1 deletion docs/guides/browser-extension/create-a-universal-profile.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ sidebar_position: 2
# Create a Universal Profile

:::danger
The UP Browser Extension is currently in the **development alpha** version. DO NOT use this in production!
The UP Browser Extension is currently in the **BETA Phase** version. DO NOT use this in production!
:::

#### 1. Launch the extension and create your profile. You will have to validate your Twitter and Discord profiles.
Expand Down
170 changes: 9 additions & 161 deletions docs/guides/browser-extension/install-browser-extension.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,26 @@ sidebar_position: 1
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Install the UP Browser Extension
# Install the Universal Profile (UP) Browser Extension

:::danger

The UP Browser Extenstion is a **ALPHA DEVELOPER PREVIEW**. This is not intended to be used by non developers. And DO NOT use this in production!
The current UP Browser Extenstion deploys profiles on the [Testnet](http://docs.lukso.tech/networks/testnet/parameters).
The UP Browser Extension is a **BETA Phase**. DO NOT use this in production!
The current UP Browser Extension deploys profiles on the [Testnet](http://docs.lukso.tech/networks/testnet/parameters). Please DO NOT SEND any real funds to your TESTNET Universal Profile, as doing so will result in loss of funds.

:::

:::note
If you have **MetaMask** installed, _right click on both_ MetaMask and UP Extension and select _"This Can Read and Change Site Data > When you Click the Extension"_. Then you you can select for every website which extension you use. By closing the tab you can reset this selection.
If you have **MetaMask** installed, _right click on both_ MetaMask and UP Extension and select _"This Can Read and Change Site Data > When you Click the Extension"_. Then you can select for every website which extension you use. By closing the tab you can reset this selection.

**It is important not to forget the previous step. Otherwise, it might conflict with the UP Browser Extension, and this might prevent you from finalising the setup process.**

<img width="400" src="https://user-images.githubusercontent.com/232662/192822200-392b19f1-321b-4a59-928a-f71876bec6f3.png" />
:::

This guide will teach you how to download and install the Universal Profile browser extension on Chrome, Edge, Opera, or Brave.
Currently, the UP Browser Extension is supported on **Chrome and Brave browsers**. This guide will teach you how to download and install the UP Browser Extension on **Chrome and Brave**.

You can test the browser extension with the following example dApps (Or any other dApp, that runs on the [Testnet](http://docs.lukso.tech/networks/testnet/parameters)):
You can test the UP Browser Extension with the following example dApps (Or any other dApp, that runs on the [Testnet](http://docs.lukso.tech/networks/testnet/parameters)):

- [up-test-dapp.lukso.tech](https://up-test-dapp.lukso.tech)
- [examples.lukso.tech](https://examples.lukso.tech)
Expand All @@ -34,166 +34,14 @@ Projects built by the LUKSO community:

- [universal.page](https://universal.page/) - Create a customizable website to showcase and sell digital assets on
LUKSO.
- [relayer-frontend.vercel.app](https://relayer-frontend.vercel.app/) - A relayer that lets you used your staking rewards to pay for your transaction fees.
- [relayer-frontend.vercel.app](https://relayer-frontend.vercel.app/) - A relayer that lets you use your staking rewards to pay for your transaction fees.

More are coming 🚀

## Download the extension
## Download and install the extension

Click on link below to download the extension, based on the browser to which you want to install it.
Download and install the extension from the **Chrome Store**.

### :inbox_tray: **[Download from Chrome Web Store](https://chrome.google.com/webstore/detail/universal-profiles/abpickdkkbnbcoepogfhkhennhfhehfn) (Chrome / Brave)**

### :inbox_tray: **[Download Archive](https://storage.googleapis.com/up-browser-extension/universalprofile-extension-v1.5.0-mv2.zip) (All other browsers)**

## Unpack the archive

Open your download folder and unpack the ZIP archive by opening the file.

## Install the extension

<Tabs>
<TabItem value="chrome" label="Chrome / Brave">

## 1. Simply download the extension from the [Chrome Store](https://chrome.google.com/webstore/detail/universal-profiles/abpickdkkbnbcoepogfhkhennhfhehfn)

![Chrome Store view](/img/extension/chrome-store.png)

</TabItem>
<TabItem value="edge" label="Edge">

#### 1. Open the extension page in your browser.

<Tabs>
<TabItem value="edge-settings" label="Using Settings">

![Step 1 - Edge: Extension Settings](/img/extension/edge1.png)

</TabItem>
<TabItem value="edge-menu" label="Using Menu Bar">

![Step 1 - Edge: Extension Menu Bar](/img/extension/edge2.png)

</TabItem>
<TabItem value="edge-url" label="Using URL">

Type `edge://extensions` into the searchbar to open the extension page.

</TabItem>
</Tabs>

#### 2. Enable the browser's developer mode.

On the left side, turn the _Developer mode_ slider to the right side.

![Step 2 - Edge: Load Extension](/img/extension/edge3.png)

#### 3. Load the extension from the folder.

Click _Load unpacked_ pointing to the extracted ZIP archive of the extension.<br/>

![Step 3 - Edge: Load Extension](/img/extension/edge3.png)

#### 4. Launch the extension.

Click on the extension icon.

![Step 4 - Edge: Open Extension](/img/extension/edge4.png)

</TabItem>
<TabItem value="opera" label="Opera">

#### 1. Open the extension page in your browser.

<Tabs>
<TabItem value="opera-shortcut" label="Using Shortcut">

Press and hold `cmd+shift+e` or `ctrl+shift+e` on your keyboard.

</TabItem>
<TabItem value="opera-menu" label="Using Menu Bar">

![Step 1 - Opera: Menu Bar](/img/extension/opera1.png)

</TabItem>
<TabItem value="opera-url" label="Using URL">

Type `opera://extensions` into the searchbar to open the extension page.

</TabItem>
</Tabs>

#### 2. Enable the browser's developer mode.

![Step 2 - Opera: Enable Developer Mode](/img/extension/opera2.png)

#### 3. Load the extension from the folder.

Click _Load unpacked_ pointing to the extracted ZIP archive of the extension.<br/>

![Step 3 - Opera: Load Extension](/img/extension/opera3.png)

#### 4. Pin the extension.

Pin the extension through the extension icon.

![Step 4 - Opera: Pin Extension](/img/extension/opera4.png)

#### 5. Launch the extension.

Open the extension by clicking its icon from the menu bar.

![Step 5 - Opera: Open Extension](/img/extension/opera5.png)

</TabItem>
<TabItem value="firefox" label="Firefox">

:::note
This installation process is for **Firefox Developer Edition** (or **Firefox Nightly**) only, as the standard Firefox only allows the installation of temporary developer add-ons.
:::

#### 1. Disable requiring xpi signature

Type `about://config` into the searchbar to open the configuration page.

![Step 1a - Firefox: about:config](/img/extension/firefox1.png)

Click _Accept Risk and Continue_ when promped with _Proceed with Caution_ warning.

Next, set the `xpinstall.signatures.required` to false.

![Step 1b - Firefox: about:config](/img/extension/firefox2.png)

#### 2. Open the addons section

<Tabs>
<TabItem value="firefox-menu" label="Using Menu Bar">

![Step 2 - Firefox: Menu Bar](/img/extension/firefox3.png)

</TabItem>
<TabItem value="firefox-url" label="Using URL">

Type `about://addons` into the searchbar to open the extension page.

</TabItem>
</Tabs>

#### 3. Load the extension from the zip file

Click on the settings wheel and then click on _Install Add-on From File_ pointing to the ZIP archive of the extension.<br/>

![Step 3a - Firefox: Load Extension](/img/extension/firefox4.png)

Click _Add_ when prompted with a question to add the unverified extension.

![Step 3b - Firefox: Accept Extension](/img/extension/firefox5.png)

#### 4. Launch the extension

Open the extension by clicking its icon from the menu bar.

![Step 4 - Firefox: Open Extension](/img/extension/firefox6.png)

</TabItem>
</Tabs>
2 changes: 1 addition & 1 deletion docs/guides/browser-extension/interact-with-dapp.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import TabItem from '@theme/TabItem';

:::danger

The UP Browser Extenstion is currently in the **development alpha** version. DO NOT use this in production!
The UP Browser Extenstion is currently in the **BETA Phase** version. DO NOT use this in production!

:::

Expand Down
8 changes: 4 additions & 4 deletions docs/guides/browser-extension/sign-arbitrary-messages.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ If you want to authenticate a user, please refer to the [Sign-In with Ethereum](

:::

This article explains how to request a signature from the [LUKSO browser extension](../browser-extension/install-browser-extension.md).
This article explains how to request a signature from the [LUKSO UP Browser Extension](../browser-extension/install-browser-extension.md).

<div style={{textAlign: 'center'}}>
<img
Expand All @@ -25,7 +25,7 @@ This article explains how to request a signature from the [LUKSO browser extensi

## 1. Initialize a blockchain provider

The browser extension injects a global API into the website that is visited. This API is available under `window.ethereum`. You can use this object to initialise your [web3.js](https://web3js.readthedocs.io/en/v1.8.0/) or [Ethers.js](https://docs.ethers.io/v5/) library.
The UP Browser Extension injects a global API into the website that is visited. This API is available under `window.ethereum`. You can use this object to initialise your [web3.js](https://web3js.readthedocs.io/en/v1.8.0/) or [Ethers.js](https://docs.ethers.io/v5/) library.

<Tabs groupId="provider">
<TabItem value="ethers" label="Ethers.js">
Expand All @@ -50,7 +50,7 @@ const web3 = new Web3(window.ethereum);

## 2. Get the Universal Profile address

A call to `requestAccounts` will open the extension popup and prompt the user to select her or his Universal Profile to interact with your Dapp. The LUKSO browser extension will send the Universal Profile address back to your Dapp (which is the address of the [`LSP0 - ERC725 Account`](../../standards/universal-profile/lsp0-erc725account.md) smart contract).
A call to `requestAccounts` will open the extension popup and prompt the user to select her or his Universal Profile to interact with your Dapp. The UP Browser Extension will send the Universal Profile address back to your Dapp (which is the address of the [`LSP0 - ERC725 Account`](../../standards/universal-profile/lsp0-erc725account.md) smart contract).

<Tabs groupId="provider">
<TabItem value="ethers" label="Ethers.js">
Expand Down Expand Up @@ -93,7 +93,7 @@ const upAddress = accounts[0];

## 3. Sign the message

Once you have access to the Universal Profile address, you can request a signature. The browser extension will sign the message with the controller key used by the extension (a smart contract can't sign).
Once you have access to the Universal Profile address, you can request a signature. The UP Browser Extension will sign the message with the controller key used by the extension (a smart contract can't sign).

<Tabs groupId="provider">
<TabItem value="ethers" label="Ethers.js">
Expand Down
8 changes: 4 additions & 4 deletions docs/guides/browser-extension/sign-in-with-ethereum.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import TabItem from '@theme/TabItem';

# Sign-In with Ethereum

The [LUKSO Browser Extension](./install-browser-extension.md) is compatible with [EIP-4361: Sign-In with Ethereum](https://eips.ethereum.org/EIPS/eip-4361).
Therefore, if the message you want to sign complies with this standard, the LUKSO Browser Extension will show a custom login screen.
The [LUKSO UP Browser Extension](./install-browser-extension.md) is compatible with [EIP-4361: Sign-In with Ethereum](https://eips.ethereum.org/EIPS/eip-4361).
Therefore, if the message you want to sign complies with this standard, the LUKSO UP Browser Extension will show a custom login screen.

<div style={{textAlign: 'center'}}>
<img
Expand All @@ -20,7 +20,7 @@ Therefore, if the message you want to sign complies with this standard, the LUKS

## 1. Get the Universal Profile address

The browser extension injects the Universal Profile smart contract address into the page. We need this address to generate the message to sign.
The UP Browser Extension injects the Universal Profile smart contract address into the page. We need this address to generate the message to sign.

<Tabs groupId="provider">
<TabItem value="ethers" label="Ethers.js">
Expand Down Expand Up @@ -146,7 +146,7 @@ Resources:

## 3. Sign the message

Once you have access to the Universal Profile address, you can request a signature. The browser extension will sign the message with the controller key used by the extension (a smart contract can't sign).
Once you have access to the Universal Profile address, you can request a signature. The UP Browser Extension will sign the message with the controller key used by the extension (a smart contract can't sign).

<Tabs groupId="provider">
<TabItem value="ethers" label="Ethers.js">
Expand Down
4 changes: 2 additions & 2 deletions docs/guides/browser-extension/web3-onboard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@

![web3-onboard-view](/img/extension/web3-onboard.png)

Web3-onboard configuration allows the detection of the Universal Profiles (UP) Extension, along with any other installed browser extensions. Developers can integrate it into their Dapp to handle the routing for the different browser extensions.
Web3-onboard configuration allows the detection of the [Universal Profile (UP) Browser Extension](<(https://chrome.google.com/webstore/detail/universal-profiles/abpickdkkbnbcoepogfhkhennhfhehfn?hl=en)>), along with any other installed browser extensions. Developers can integrate it into their Dapp to handle the routing for the different browser extensions.

Web3-onboard is an open-source, framework-agnostic JavaScript library to onboard users to web3 apps. This package can be used to integrate LUKSO [Universal Profiles Extension](https://chrome.google.com/webstore/detail/universal-profiles/abpickdkkbnbcoepogfhkhennhfhehfn?hl=en) support into web3-onboard's "Connect Wallet" modal. With this module, **the LUKSO Universal Profile Extension option will be shown even if the extension is not installed on the user's browser**. If selected the user will be taken to a download screen where they can install the extension.
Web3-onboard is an open-source, framework-agnostic JavaScript library to onboard users to web3 apps. This package can be used to integrate the UP Browser Extension support into web3-onboard's "Connect Wallet" modal. With this module, **the UP Browser Extension option will be shown even if the extension is not installed on the user's browser**. If selected the user will be taken to a download screen where they can install the extension.

### Installation

Expand Down
Loading