diff --git a/docs/03-sygma-sdk/04-Examples/01-Basic-ERC-20-Token-Transfers/03-Substrate-EVM-example.md b/docs/03-sygma-sdk/04-Examples/01-Basic-ERC-20-Token-Transfers/03-Substrate-EVM-example.md index 6dd62ac..fe64cb3 100644 --- a/docs/03-sygma-sdk/04-Examples/01-Basic-ERC-20-Token-Transfers/03-Substrate-EVM-example.md +++ b/docs/03-sygma-sdk/04-Examples/01-Basic-ERC-20-Token-Transfers/03-Substrate-EVM-example.md @@ -22,7 +22,12 @@ Before running the script, ensure that you have the following: - The 12-word mnemonic for your Substrate development wallet - An Ethereum wallet to receive tokens into (the example presets an existing wallet address already) - A Substrate provider (in case the hardcoded WSS within the script does not work) -- A Substrate development wallet funded with `sygUSD` tokens; you will need to run the [EVM-to-Substrate example](02-EVM-Substrate-example.md) first to preload `sygUSD` tokens into a Substrate wallet +- A Substrate development wallet funded with `sygUSD` tokens + +import App from '../../../../src/Faucet/App'; + + +
:::danger We make use of the dotenv module to manage Substrate's private mnemonics with environment variables. Please note that accidentally committing a .env file containing private mnemonics to a wallet with real funds, onto GitHub, could result in the complete loss of your funds. **Never expose your private keys.** diff --git a/src/Faucet/App.tsx b/src/Faucet/App.tsx index 87a5808..9ba0e96 100644 --- a/src/Faucet/App.tsx +++ b/src/Faucet/App.tsx @@ -17,16 +17,20 @@ import TokenInfo from "./components/TokenInfo"; import TxHashLabel from "./components/TxHashLabel"; import ErrorDialog from "./components/ErrorDialog"; import Progress from "./components/Progress"; +import NetworkSelect from "./components/NetworkSelect"; import { getDomains, getTokens, mintRequest } from "./services/ConfigService"; import { sygmaTheme } from "./themes/SygmaTheme"; +import { Domain, Network } from "@buildwithsygma/sygma-sdk-core"; +import { capName } from "../utils"; // Timeout interval for timer const TIMEOUT = 60 //seconds +const BASE_URL = "https://faucet-api-stage.buildwithsygma.com" + function App() { - const [domains, setDomains] = useState([]); const [tokens, setTokens] = useState([]); const [sDomain, setsDomain] = useState(); const [sToken, setsToken] = useState({}); @@ -37,14 +41,26 @@ function App() { const [serverError, setServerError] = useState(); 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}) {