Skip to content

Commit

Permalink
add network icons
Browse files Browse the repository at this point in the history 
Signed-off-by: Ruben <rubdeivis@gmail.com>
  • Loading branch information
@rubenguc
rubenguc committed Mar 24, 2023
1 parent 733e4bc commit 96a5bd6
Show file tree
Hide file tree
Showing 10 changed files with 171 additions and 125 deletions.
Binary file added public/images/astar.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/ethereum.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/kusama.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/moonbeam.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/moonriver.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/polkadot.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/rococo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/shiden.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
232 changes: 133 additions & 99 deletions src/constants/chains.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,42 +59,6 @@ export const MAINNETS: Chain[] = [
logo: "ethereum",
supportedAccounts: [EVM],
},
{
name: "Polygon",
rpc: { evm: "https://polygon-rpc.com" },
addressPrefix: 1,
nativeCurrency: {
name: "Matic",
symbol: "Matic",
decimals: 18,
},
explorer: {
evm: {
name: "etherscan",
url: "https://polygonscan.com/",
},
},
logo: "ethereum",
supportedAccounts: [EVM],
},
{
name: "Binance",
rpc: { evm: "https://bsc-dataseed.binance.org/" },
addressPrefix: 1,
nativeCurrency: {
name: "BNB",
symbol: "BNB",
decimals: 18,
},
explorer: {
evm: {
name: "etherscan",
url: "https://bscscan.com/",
},
},
logo: "ethereum",
supportedAccounts: [EVM],
},
{
name: "Astar",
rpc: {
Expand Down Expand Up @@ -218,7 +182,7 @@ export const TESTNETS: Chain[] = [
url: "https://moonbase.moonscan.io/",
},
},
logo: "moonbase",
logo: "moonbeam",
supportedAccounts: [EVM, WASM],
},
{
Expand All @@ -244,74 +208,74 @@ export const TESTNETS: Chain[] = [
url: "https://shibuya.subscan.io/",
},
},
logo: "shibuya",
logo: "astar",
supportedAccounts: [EVM, WASM],
},
{
name: "Rococo",
rpc: {
wasm: "wss://rococo-rpc.polkadot.io",
},
addressPrefix: 42,
// {
// name: "Rococo",
// rpc: {
// wasm: "wss://rococo-rpc.polkadot.io",
// },
// addressPrefix: 42,

nativeCurrency: {
name: "roc",
symbol: "ROC",
decimals: 12,
},
explorer: {
wasm: {
name: "",
url: "https://rococo.subscan.io/",
},
},
logo: "rococo",
supportedAccounts: [WASM],
},
// nativeCurrency: {
// name: "roc",
// symbol: "ROC",
// decimals: 12,
// },
// explorer: {
// wasm: {
// name: "",
// url: "https://rococo.subscan.io/",
// },
// },
// logo: "rococo",
// supportedAccounts: [WASM],
// },

{
name: "Rococo contracts",
rpc: {
wasm: "wss://rococo-contracts-rpc.polkadot.io",
},
addressPrefix: 42,
// {
// name: "Rococo contracts",
// rpc: {
// wasm: "wss://rococo-contracts-rpc.polkadot.io",
// },
// addressPrefix: 42,

nativeCurrency: {
name: "roc",
symbol: "ROC",
decimals: 12,
},
explorer: {
wasm: {
name: "",
url: "https://rococo.subscan.io/",
},
},
logo: "rococo",
supportedAccounts: [WASM],
},
// nativeCurrency: {
// name: "roc",
// symbol: "ROC",
// decimals: 12,
// },
// explorer: {
// wasm: {
// name: "",
// url: "https://rococo.subscan.io/",
// },
// },
// logo: "rococo",
// supportedAccounts: [WASM],
// },

{
name: "Rockmine",
rpc: {
wasm: "wss://rococo-rockmine-rpc.polkadot.io",
},
addressPrefix: 42,
// {
// name: "Rockmine",
// rpc: {
// wasm: "wss://rococo-rockmine-rpc.polkadot.io",
// },
// addressPrefix: 42,

nativeCurrency: {
name: "roc",
symbol: "ROC",
decimals: 12,
},
explorer: {
wasm: {
name: "",
url: "https://rockmine.subscan.io/",
},
},
logo: "rockmine",
supportedAccounts: [WASM],
},
// nativeCurrency: {
// name: "roc",
// symbol: "ROC",
// decimals: 12,
// },
// explorer: {
// wasm: {
// name: "",
// url: "https://rockmine.subscan.io/",
// },
// },
// logo: "rockmine",
// supportedAccounts: [WASM],
// },
{
name: "Goerli",
rpc: { evm: "https://goerli.infura.io/v3/" },
Expand All @@ -327,11 +291,77 @@ export const TESTNETS: Chain[] = [
url: "https://goerli.etherscan.io/",
},
},
logo: "goerli",
logo: "ethereum",
supportedAccounts: [EVM],
},
];

// export const LOCAL = [
// {
// name: "Eth goerly alchemy",
// rpc: {
// evm: "https://eth-goerli.g.alchemy.com/v2/5_BItbroYpOXQnEhKDDFOoctfqifxjoH",
// },
// addressPrefix: 0,

// nativeCurrency: {
// name: "ETH",
// symbol: "ETH",
// decimals: 18,
// },
// explorer: {
// evm: {
// name: "",
// url: "https://goerli.etherscan.io/",
// },
// },
// logo: "rococo",
// supportedAccounts: [EVM],
// },
// {
// name: "Relay",
// rpc: {
// wasm: "ws://127.0.0.1:9900/",
// },
// addressPrefix: 42,

// nativeCurrency: {
// name: "roc",
// symbol: "ROC",
// decimals: 12,
// },
// explorer: {
// wasm: {
// name: "",
// url: "",
// },
// },
// logo: "rococo",
// supportedAccounts: [WASM],
// },
// {
// name: "Parachain",
// rpc: {
// wasm: "ws://127.0.0.1:9920/",
// },
// addressPrefix: 42,

// nativeCurrency: {
// name: "roc",
// symbol: "ROC",
// decimals: 12,
// },
// explorer: {
// wasm: {
// name: "",
// url: "",
// },
// },
// logo: "rococo",
// supportedAccounts: [WASM],
// },
// ];

export const CHAINS = [
{
name: "mainnets",
Expand All @@ -341,6 +371,10 @@ export const CHAINS = [
name: "testnets",
chains: TESTNETS,
},
// {
// name: "local",
// chains: LOCAL,
// },
];

export const DEFAULT_WASM_CHAIN = CHAINS[0].chains[0];
Expand Down
64 changes: 38 additions & 26 deletions src/pages/balance/components/ChainSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,12 @@ export const ChainSelector = () => {
data-testid="chain-button"
className="flex gap-2 items-center rounded-full bg-black bg-opacity-20 px-4 py-2 text-sm font-medium text-white hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
>
<img
src={`/images/${selectedChain.logo}.png`}
width={24}
height={24}
className="object-cover rounded-full"
/>
<p>{selectedChain?.name}</p>
<BsChevronDown />
</Menu.Button>
Expand All @@ -106,40 +112,46 @@ export const ChainSelector = () => {
<div className="flex flex-col gap-1">
{Object.keys(chains).map((spec) => (
<div key={spec}>
{chains[
spec as "mainnets" | "testnets" | "custom"
].length > 0 && (
{chains[spec as "mainnets" | "testnets" | "custom"].length >
0 && (
<div className="flex items-center gap-3 whitespace-nowrap">
<p className="text-[#808385] text-lg">
{t(`chain_selector.${spec}`)}
</p>
<div className="h-[1px] w-full bg-[#343A40]" />
</div>
)}
{chains[
spec as "mainnets" | "testnets" | "custom"
].map((chain, index) => (
<Menu.Item key={index.toString()}>
{({ close }) => (
<div
className="flex gap-2 cursor-pointer items-center hover:bg-custom-green-bg hover:bg-opacity-40 py-2 px-4 rounded-xl"
onClick={() => {
selecteNetwork(chain, close);
}}
>
<div className="w-5 h-5 rounded-full bg-gray-400" />
<div className="flex gap-3 items-center">
<p className="text-xl">{chain.name}</p>
{chain.name === selectedChain?.name && (
<p className="text-[#56DF53]">
{t("chain_selector.connected")}
</p>
)}
{chains[spec as "mainnets" | "testnets" | "custom"].map(
(chain, index) => (
<Menu.Item key={index.toString()}>
{({ close }) => (
<div
className="flex gap-2 cursor-pointer items-center hover:bg-custom-green-bg hover:bg-opacity-40 py-2 px-4 rounded-xl"
onClick={() => {
selecteNetwork(chain, close);
}}
>
<img
src={`/images/${chain.logo}.png`}
width={30}
height={30}
alt={chain.name}
className="object-cover rounded-full"
/>
{/* <div className="w-5 h-5 rounded-full bg-gray-400" /> */}
<div className="flex gap-3 items-center">
<p className="text-xl">{chain.name}</p>
{chain.name === selectedChain?.name && (
<p className="text-[#56DF53]">
{t("chain_selector.connected")}
</p>
)}
</div>
</div>
</div>
)}
</Menu.Item>
))}
)}
</Menu.Item>
)
)}
</div>
))}
</div>
Expand Down

0 comments on commit 96a5bd6

Please sign in to comment.