diff --git a/package.json b/package.json
index bafd647dbd..5583d8e4fe 100644
--- a/package.json
+++ b/package.json
@@ -39,9 +39,9 @@
"@mui/icons-material": "^5.8.4",
"@mui/lab": "^5.0.0-alpha.72",
"@mui/material": "^5.5.0",
- "@pushprotocol/restapi": "1.7.17",
+ "@pushprotocol/restapi": "1.7.18",
"@pushprotocol/socket": "0.5.3",
- "@pushprotocol/uiweb": "1.3.2",
+ "@pushprotocol/uiweb": "1.3.5",
"@reduxjs/toolkit": "^1.7.1",
"@testing-library/dom": "^9.0.1",
"@testing-library/jest-dom": "^4.2.4",
diff --git a/public/svg/Cyber.svg b/public/svg/Cyber.svg
new file mode 100644
index 0000000000..6447cfadb7
--- /dev/null
+++ b/public/svg/Cyber.svg
@@ -0,0 +1,13 @@
+
diff --git a/src/components/Faucets.jsx b/src/components/Faucets.jsx
deleted file mode 100644
index 7084e3f84b..0000000000
--- a/src/components/Faucets.jsx
+++ /dev/null
@@ -1,180 +0,0 @@
-// React + Web3 Essentials
-import React, { useRef } from "react";
-
-// External Packages
-import styled, { useTheme } from 'styled-components';
-
-// Internal Components
-import { useClickAway } from "hooks/useClickAway";
-import { Image, Item, ItemH } from '../primaries/SharedStyling';
-import Dropdown from "./Dropdown";
-
-// Faucet URLs
-const Faucets = () => {
- const theme = useTheme();
- const toggleArrowRef = useRef(null);
- const dropdownRef = useRef(null);
-
- const [showDropdown, setShowDropdown] = React.useState(false);
-
- useClickAway(toggleArrowRef,dropdownRef, () => {
- setShowDropdown(false);
- });
-
- const dropdownValues = [
- {
- id: "11155111",
- value: "Sepolia",
- title: "Sepolia Faucet",
- function: () => {},
- link: "https://sepoliafaucet.com/",
- },
- {
- id: "80002",
- value: "Polygon",
- title: "Amoy Faucet",
- function: () => {},
- link: "https://faucet.polygon.technology/",
- },
- {
- id: "97",
- value: "BNB",
- title: "BNB Faucet",
- function: () => {},
- link: "https://testnet.bnbchain.org/faucet-smart",
- },
- {
- id: "11155420",
- value: "Optimism",
- title: "Optimism Sepolia Faucet",
- function: () => {},
- link: "https://faucet.quicknode.com/optimism/sepolia",
- },
- {
- id: "2442",
- value: "Polygon zkEVM",
- title: "Polygon zkEVM Bridge",
- function: () => {},
- link: "https://faucet.polygon.technology/"
- },
- {
- id: "421614",
- value: "Arbitrum",
- title: "Arbitrum Testnet Faucet",
- function: () => {},
- link: "https://faucet.quicknode.com/arbitrum/sepolia"
- },
- {
- id: "123",
- value: "Fuse",
- title: "Fuse Sparknet Faucet",
- function: () => {},
- link: "https://chaindrop.org/?chainid=123&token=0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee"
- }
- ];
-
- // render
- return (
-
- setShowDropdown(!showDropdown)} ref={toggleArrowRef}>
-
-
-
- Testnet Faucets
-
-
-
-
- {showDropdown && (
- -
-
-
- )}
-
- );
-}
-
-// Export Default
-export default Faucets;
-
-// css styles
-const Container = styled.button`
- position:relative;
- margin: 0;
- padding: 0;
- background: none;
- border: 0;
- outline: 0;
- min-width: 230px;
-
- @media (max-width: 768px)
- {
- width: 100%;
- // padding: 0 0px 0px 0px;
- }
-`
-
-const ItemHBar = styled.div`
- padding: 0 20px 0 0px;
-`
-const Faucet = styled.div`
- margin: 0px 10px;
- padding: 5px 15px;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- font-weight: 400;
- border: 1px solid ${props => props.theme.faucetBorder};
- font-size: 15px;
- background: ${props => props.theme.faucetBg};
- color: ${props => props.theme.faucetText};
- border-radius: 20px;
- &:hover {
- opacity: 0.9;
- cursor: pointer;
- pointer: hand;
- }
- &:active {
- opacity: 0.75;
- cursor: pointer;
- pointer: hand;
- }
-
- @media (max-width: 768px){
- border-radius: 37px;
- flex: 1;
- justify-content: flex-start;
- }
-`
-const ToggleArrowImg = styled.div`
- margin-left: auto;
- filter: ${props => props.theme.faucetFilter};
- &:hover {
- cursor: pointer;
- }
- .down {
- transform: rotate(-180deg);
- transition: transform 0.25s;
- }
-
- .up {
- transform: rotate(-360deg);
- transition: transform 0.25s;
- }
-`;
diff --git a/src/components/Faucets.tsx b/src/components/Faucets.tsx
new file mode 100644
index 0000000000..d61bb36196
--- /dev/null
+++ b/src/components/Faucets.tsx
@@ -0,0 +1,203 @@
+// React + Web3 Essentials
+import React, { useRef } from 'react';
+
+// External Packages
+import styled, { useTheme } from 'styled-components';
+
+// Internal Components
+import { useClickAway } from 'hooks/useClickAway';
+import { Image, Item } from '../primaries/SharedStyling';
+import Dropdown from './Dropdown';
+
+type FaucetListType = {
+ id: string;
+ value: string;
+ title: string;
+ function: VoidFunction;
+ link: string;
+};
+
+// Faucet URLs
+const Faucets = () => {
+ const theme = useTheme();
+ const toggleArrowRef = useRef(null);
+ const dropdownRef = useRef(null);
+
+ const [showDropdown, setShowDropdown] = React.useState(false);
+
+ useClickAway(toggleArrowRef, dropdownRef, () => {
+ setShowDropdown(false);
+ });
+
+ const faucetList: FaucetListType[] = [
+ {
+ id: '11155111',
+ value: 'Sepolia',
+ title: 'Sepolia Faucet',
+ function: () => {},
+ link: 'https://sepoliafaucet.com/',
+ },
+ {
+ id: '80002',
+ value: 'Polygon',
+ title: 'Amoy Faucet',
+ function: () => {},
+ link: 'https://faucet.polygon.technology/',
+ },
+ {
+ id: '97',
+ value: 'BNB',
+ title: 'BNB Faucet',
+ function: () => {},
+ link: 'https://testnet.bnbchain.org/faucet-smart',
+ },
+ {
+ id: '11155420',
+ value: 'Optimism',
+ title: 'Optimism Sepolia Faucet',
+ function: () => {},
+ link: 'https://faucet.quicknode.com/optimism/sepolia',
+ },
+ {
+ id: '2442',
+ value: 'Polygon zkEVM',
+ title: 'Polygon zkEVM Bridge',
+ function: () => {},
+ link: 'https://faucet.polygon.technology/',
+ },
+ {
+ id: '421614',
+ value: 'Arbitrum',
+ title: 'Arbitrum Testnet Faucet',
+ function: () => {},
+ link: 'https://faucet.quicknode.com/arbitrum/sepolia',
+ },
+ {
+ id: '123',
+ value: 'Fuse',
+ title: 'Fuse Sparknet Faucet',
+ function: () => {},
+ link: 'https://chaindrop.org/?chainid=123&token=0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
+ },
+ {
+ id: '111557560',
+ value: 'Cyber',
+ title: 'Cyber Faucet',
+ function: () => {},
+ link: 'https://cyber-testnet.testnets.rollbridge.app/',
+ },
+ ];
+
+ // render
+ return (
+
+ setShowDropdown(!showDropdown)}
+ ref={toggleArrowRef}
+ >
+
+
+
+ Testnet Faucets
+
+
+
+
+ {showDropdown && (
+ -
+
+
+ )}
+
+ );
+};
+
+// Export Default
+export default Faucets;
+
+// css styles
+const Container = styled.button`
+ position: relative;
+ margin: 0;
+ padding: 0;
+ background: none;
+ border: 0;
+ outline: 0;
+ min-width: 230px;
+
+ @media (max-width: 768px) {
+ width: 100%;
+ // padding: 0 0px 0px 0px;
+ }
+`;
+
+const ItemHBar = styled.div`
+ padding: 0 20px 0 0px;
+`;
+const Faucet = styled.div`
+ margin: 0px 10px;
+ padding: 5px 15px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ font-weight: 400;
+ border: 1px solid ${(props) => props.theme.faucetBorder};
+ font-size: 15px;
+ background: ${(props) => props.theme.faucetBg};
+ color: ${(props) => props.theme.faucetText};
+ border-radius: 20px;
+ &:hover {
+ opacity: 0.9;
+ cursor: pointer;
+ pointer: hand;
+ }
+ &:active {
+ opacity: 0.75;
+ cursor: pointer;
+ pointer: hand;
+ }
+
+ @media (max-width: 768px) {
+ border-radius: 37px;
+ flex: 1;
+ justify-content: flex-start;
+ }
+`;
+const ToggleArrowImg = styled.div`
+ margin-left: auto;
+ filter: ${(props) => props.theme.faucetFilter};
+ &:hover {
+ cursor: pointer;
+ }
+ .down {
+ transform: rotate(-180deg);
+ transition: transform 0.25s;
+ }
+
+ .up {
+ transform: rotate(-360deg);
+ transition: transform 0.25s;
+ }
+`;
diff --git a/src/components/VerifyAlias.jsx b/src/components/VerifyAlias.tsx
similarity index 61%
rename from src/components/VerifyAlias.jsx
rename to src/components/VerifyAlias.tsx
index 58476b9ef3..787b827fb5 100644
--- a/src/components/VerifyAlias.jsx
+++ b/src/components/VerifyAlias.tsx
@@ -17,7 +17,16 @@ import { useAccount } from 'hooks';
// Internal Configs
import { abis, appConfig, CHAIN_DETAILS } from 'config/index.js';
-import GLOBALS from "config/Globals";
+import GLOBALS from 'config/Globals';
+
+type FaucetType = {
+ label: string;
+ url: string;
+};
+
+type FaucetsInfo = {
+ [key: number]: FaucetType;
+};
const VerifyAlias = ({ aliasEthAccount, setAliasVerified }) => {
const theme = useTheme();
@@ -31,32 +40,36 @@ const VerifyAlias = ({ aliasEthAccount, setAliasVerified }) => {
const [success, setSuccess] = useState(false);
const mainAddress = aliasEthAccount;
- const Faucets = {
+ const Faucets: FaucetsInfo = {
80002: {
- label: "Amoy MATIC",
- url: "https://faucet.polygon.technology/"
+ label: 'Amoy MATIC',
+ url: 'https://faucet.polygon.technology/',
},
97: {
- label: "Testnet BNB",
- url: "https://testnet.bnbchain.org/faucet-smart"
+ label: 'Testnet BNB',
+ url: 'https://testnet.bnbchain.org/faucet-smart',
},
11155420: {
- label: "Sepolia OpETH",
- url: "https://faucet.quicknode.com/optimism/sepolia"
+ label: 'Sepolia OpETH',
+ url: 'https://faucet.quicknode.com/optimism/sepolia',
},
2442: {
- label: "Polygon zkEVM ETH",
- url: "https://faucet.polygon.technology/"
+ label: 'Polygon zkEVM ETH',
+ url: 'https://faucet.polygon.technology/',
},
421614: {
- label: "Sepolia ArbETH",
- url: "https://faucet.quicknode.com/arbitrum/sepolia"
+ label: 'Sepolia ArbETH',
+ url: 'https://faucet.quicknode.com/arbitrum/sepolia',
},
123: {
- label: "Fuse SPARK",
- url: "https://chaindrop.org/?chainid=123&token=0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee"
- }
- }
+ label: 'Fuse SPARK',
+ url: 'https://chaindrop.org/?chainid=123&token=0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
+ },
+ 111557560: {
+ label: 'Cyber ETH',
+ url: 'https://cyber-testnet.testnets.rollbridge.app/',
+ },
+ };
const checkAlias = async () => {
if (mainAddress == aliasEthAccount) {
@@ -65,7 +78,7 @@ const VerifyAlias = ({ aliasEthAccount, setAliasVerified }) => {
};
const checkAliasVerification = async () => {
- const { aliasVerified } = await getAliasDetails({account,chainId}).then(( data ) => {
+ const { aliasVerified } = await getAliasDetails({ account, chainId }).then((data) => {
if (data) {
dispatch(setAliasVerified(data.is_alias_verified));
return { aliasVerified: data['is_alias_verified'] };
@@ -112,7 +125,12 @@ const VerifyAlias = ({ aliasEthAccount, setAliasVerified }) => {
};
return (
- -
+
-
{
color={theme.default.secondaryColor}
>
You will need{' '}
-
+
{Faucets[chainId].label}
{' '}
to proceed.
@@ -158,17 +179,51 @@ const VerifyAlias = ({ aliasEthAccount, setAliasVerified }) => {
{!success &&
(loading ? (
-
-
-
+
-
+
-
+
{loading}
) : (
- -
-