();
const [expiredDate, setExpiredDate] = useState(Cookies.get('mintedExpires'));
const [progress, setProgress] = useState(0);
-
+ const [evmDomains, setEvmDomains] = useState([]);
+ const [substrateDomains, setSubstrateDomains] = useState([]);
+ const [selectedNetworkType, setSelectedNetworkType] = useState("");
useEffect(() => {
const timeout = Cookies.get('mintedExpires')
setExpiredDate(timeout)
- getDomains("https://faucet-api-stage.buildwithsygma.com").then(
+ getDomains(BASE_URL).then(
(domains) => {
- setDomains(domains.domains);
+ let evmDomains: Domain[] = [];
+ let substrateDomains: Domain[] = [];
+ Object.values(domains.domains).forEach((domain: Domain) => {
+ if (domain.type === Network.EVM){
+ evmDomains.push(domain)
+ } else if (domain.type === Network.SUBSTRATE){
+ substrateDomains.push(domain)
+ }
+ })
+ setEvmDomains(evmDomains);
+ setSubstrateDomains(substrateDomains);
}
);
}, []);
@@ -73,7 +89,7 @@ function App() {
const setSelectedDomain = (selectedDomain) => {
setsDomain(selectedDomain);
getTokens(
- "https://faucet-api-stage.buildwithsygma.com",
+ BASE_URL,
selectedDomain.id
).then((tokens) => {
setTokens(tokens.tokens);
@@ -90,6 +106,13 @@ function App() {
setsToAddress(event.target.value);
};
+ const handleNetworkTypeChange = (networkType) => {
+ setSelectedNetworkType(networkType);
+ setsDomain(undefined);
+ setTokens([]);
+ setsToken({});
+ };
+
const mint = (e) => {
e.preventDefault();
setsMinting(true);
@@ -98,9 +121,9 @@ function App() {
expires: timeToExpire,
});
mintRequest(
- "https://faucet-api-stage.buildwithsygma.com",
+ BASE_URL,
sDomain.id,
- sToken.address,
+ sToken.resourceID,
toAddress
)
.then((respo) => {
@@ -120,6 +143,8 @@ function App() {
return sDomain !== undefined && sToken.address !== undefined && toAddress !== "";
};
+ const filteredDomains = selectedNetworkType.toLocaleLowerCase() === Network.EVM ? evmDomains : substrateDomains;
+
return (
@@ -130,22 +155,29 @@ function App() {
onSubmit={mint}
>
+
+
+
-
+
- {sToken.address && }
+ {sToken.address && }
diff --git a/src/Faucet/components/DomainSelect.tsx b/src/Faucet/components/DomainSelect.tsx
index 8f4ba51..b45d357 100644
--- a/src/Faucet/components/DomainSelect.tsx
+++ b/src/Faucet/components/DomainSelect.tsx
@@ -5,11 +5,8 @@ import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
-export default function DomainSelect({ domainArray, setSelectedDomain, disabled }) {
- const [domain, setDomain] = React.useState("");
-
+export default function DomainSelect({ domainArray, setSelectedDomain, disabled, selectedDomain}) {
const handleChange = (event) => {
- setDomain(event.target.value);
setSelectedDomain(event.target.value);
};
@@ -21,7 +18,7 @@ export default function DomainSelect({ domainArray, setSelectedDomain, disabled
disabled={disabled}
labelId="domain-select-label"
id="domain-select"
- value={domain}
+ value={selectedDomain || ""}
label="Network"
onChange={handleChange}
required
diff --git a/src/Faucet/components/NetworkSelect.tsx b/src/Faucet/components/NetworkSelect.tsx
new file mode 100644
index 0000000..a421de1
--- /dev/null
+++ b/src/Faucet/components/NetworkSelect.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import Select from "@mui/material/Select";
+
+export default function NetworkSelect({ networkTypes, setSelectedNetworkType }) {
+ const [network, setNetwork] = React.useState("");
+
+ const handleChange = (event) => {
+ setSelectedNetworkType(event.target.value);
+ setNetwork(event.target.value);
+ };
+
+ return (
+
+
+ Network Type
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/Faucet/components/TokenInfo.tsx b/src/Faucet/components/TokenInfo.tsx
index 8658c15..0c936e4 100644
--- a/src/Faucet/components/TokenInfo.tsx
+++ b/src/Faucet/components/TokenInfo.tsx
@@ -2,8 +2,10 @@ import * as React from "react";
import FormControl from "@mui/material/FormControl";
import TextField from "@mui/material/TextField";
import Grid from "@mui/material/Grid";
+import { capName } from "@site/src/utils";
+import { Network } from "@buildwithsygma/sygma-sdk-core";
-export default function TokenInfo({ tokenInfo }) {
+export default function TokenInfo({ tokenInfo, domainType }) {
return (
<>
@@ -11,7 +13,7 @@ export default function TokenInfo({ tokenInfo }) {
@@ -22,7 +24,7 @@ export default function TokenInfo({ tokenInfo }) {
disabled
id="token-type"
label="Type"
- value={tokenInfo.type.toUpperCase()}
+ value={domainType === Network.EVM ? tokenInfo.type.toUpperCase() : capName(tokenInfo.type)}
>
diff --git a/src/Faucet/components/TokenSelect.tsx b/src/Faucet/components/TokenSelect.tsx
index 386dcc9..ac6cab7 100644
--- a/src/Faucet/components/TokenSelect.tsx
+++ b/src/Faucet/components/TokenSelect.tsx
@@ -5,12 +5,9 @@ import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
-export default function TokenSelect({tokenArray, setSelectedToken, disabled}) {
-
- const [token, setToken] = React.useState('');
+export default function TokenSelect({tokenArray, setSelectedToken, disabled, selectedToken}) {
const handleChange = (event) => {
- setToken(event.target.value);
setSelectedToken(event.target.value);
};
@@ -21,7 +18,7 @@ export default function TokenSelect({tokenArray, setSelectedToken, disabled}) {