Skip to content

Commit

Permalink
added the add mainnet button and changed copy in the wallet support s…
Browse files Browse the repository at this point in the history
…ection
  • Loading branch information
rowkee committed Apr 16, 2024
1 parent 5001ca2 commit fd1eff8
Show file tree
Hide file tree
Showing 4 changed files with 164 additions and 6 deletions.
33 changes: 27 additions & 6 deletions docs/general/wallet-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,46 @@ sidebar_position: 2
description: LUKSO Wallet Support
---

import AddNetworkButton from '../../src/components/AddNetworkButton'

# Wallet Support

## Which wallets are supported on LUKSO?

LUKSO is an EVM-compatible network, meaning **any Ethereum wallet that allows custom networks** can be used to send transactions and store LYX. Please ensure you are using the [Official LUKSO Parameters](https://docs.lukso.tech/networks/mainnet/parameters) when you add the network.
LUKSO is an EVM-compatible network, meaning **any Ethereum wallet that allows custom networks** can be used to send transactions and store LYX.

## How do I add LUKSO to my wallet?

Here you can find guides on how to add a custom network to supported browser wallets:
This depends on which wallet you are using but we have linked to some common wallet's support guides below:

- [**MetaMask**](https://metamask.io/): [How to add a custom network to MetaMask](https://support.metamask.io/hc/en-us/articles/360043227612-How-to-add-a-custom-network-RPC)
- [**Rabby**](https://rabby.io/): [How to set up a custom network provider on Rabby](https://www.quicknode.com/guides/ethereum-development/wallets/how-to-set-a-custom-provider-in-rabby)
- [**Rainbow**](https://rainbow.me/): [How to add a custom network to Rainbow](https://rainbow.me/th/support/extension/custom-networks-on-the-browser-extension)
- [**Coinbase Wallet**](https://www.coinbase.com/wallet): [How to add custom networks on Coinbase Wallet](https://www.coinbase.com/de/learn/wallet/How-to-add-custom-networks-Coinbase-Wallet)
- [**Coinbase Wallet**](https://www.coinbase.com/wallet): [How to add custom networks on Coinbase Wallet](https://www.coinbase.com/en-gb/learn/wallet/How-to-add-custom-networks-Coinbase-Wallet)
- [**Trust Wallet**](https://trustwallet.com/): [How to add a custom network on Trust Wallet](https://community.trustwallet.com/t/how-to-add-a-custom-network-on-the-trust-wallet-mobile-app/626781)

:::info Universal Profiles
Please ensure you are using the [Official LUKSO Parameters](https://docs.lukso.tech/networks/mainnet/parameters) **below**:

If you want to use LUKSO Universal Profiles and get all the benefits from using a [smart account extension](https://medium.com/lukso/aa-is-not-coming-aa-is-here-4d87b12ba11a), <br/> please use the [LUKSO Universal Profile Extension](https://my.universalprofile.cloud).
| Setting | Value |
| --------------------- | ------------------------------------------------- |
| Network Name | LUKSO |
| RPC URL | https://rpc.lukso.gateway.fm |
| Chain ID / Network ID | 42 |
| Currency Symbol | LYX |
| Block explorer URL | https://explorer.execution.mainnet.lukso.network/ |

:::
## Is there a faster way?

Yes 😊, click the button below to do it automatically:
<AddNetworkButton networkName="mainnet"/>

## What about Universal Profiles?

If you want to use LUKSO Universal Profiles (and we recommend you do) to get all the benefits from using a [smart account extension](https://medium.com/lukso/aa-is-not-coming-aa-is-here-4d87b12ba11a), please use the [LUKSO Universal Profile Extension](https://my.universalprofile.cloud).

## What if I get an error?

Check out our FAQ page, and failing that contact us.

## What to do when the transaction fails with a nonce error?

Expand Down
31 changes: 31 additions & 0 deletions src/components/AddNetworkButton/AddNetworkButton.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
.button {
tab-size: 4;
transition: box-shadow 0.3s;

box-sizing: border-box;
border: none;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
margin: 15px 0px 30px 0px;
text-transform: none;
background-color: transparent;
background-image: none;
cursor: pointer;

border-radius: 50px;
border-width: 1px;

padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;

background-color: #fe005b;
color: white;

&:hover {
box-shadow: 0 0 11px rgba(33, 33, 33, 0.7);
border: 0 solid #fe005b;
}
}
74 changes: 74 additions & 0 deletions src/components/AddNetworkButton/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import React from 'react';

import { LUKSO_NETWORK_CONFIGS } from '../../constants.js';

import styles from './AddNetworkButton.module.scss';

/**
*
* @param {*} networkName: either mainnet or testnet
* @returns
*/
export default function AddNetworkButton({ networkName }) {
const addNetwork = async () => {
const ethereum = window.ethereum;

if (!ethereum) {
alert('No extension detected.');
return;
}

try {
await ethereum.request({
method: 'wallet_switchEthereumChain',
params: [
{
chainId:
'0x' +
BigInt(LUKSO_NETWORK_CONFIGS[networkName].chainId).toString(16),
},
],
});
alert(
`Your extension is now connected to LUKSO ${
networkName == 'mainnet' ? 'Mainnet' : 'Testnet'
}`,
);
} catch (switchError) {
// This error code indicates that the chain has not been added to MetaMask.
if (switchError.code === 4902) {
try {
await ethereum.request({
method: 'wallet_addEthereumChain',
params: [
{
chainId:
'0x' +
BigInt(LUKSO_NETWORK_CONFIGS[networkName].chainId).toString(
16,
),
chainName: LUKSO_NETWORK_CONFIGS[networkName].chainName,
rpcUrls: LUKSO_NETWORK_CONFIGS[networkName].rpcUrls,
nativeCurrency: {
name: 'LYX',
symbol: 'LYX',
decimals: 18,
},
},
],
});
} catch (addError) {
alert(addError.message);
}
} else {
alert(switchError.message);
}
}
};

return (
<button className={styles.button} onClick={addNetwork}>
ADD LUKSO {networkName.toUpperCase()}
</button>
);
}
32 changes: 32 additions & 0 deletions src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -152,3 +152,35 @@ a.imageLink img {
display: block; /* removes any default inline spacing */
pointer-events: none; /* disable default zoom */
}

.button {
tab-size: 4;
transition: box-shadow 0.3s;

box-sizing: border-box;
border: none;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
margin: 15px 0px 30px 0px;
text-transform: none;
background-color: transparent;
background-image: none;
cursor: pointer;

border-radius: 50px;
border-width: 1px;

padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;

background-color: #fe005b;
color: white;

&:hover {
box-shadow: 0 0 11px rgba(33, 33, 33, 0.7);
border: 0 solid #fe005b;
}
}

0 comments on commit fd1eff8

Please sign in to comment.