From d8654e2722a522d8a82c9a3bcae10f8349becdb6 Mon Sep 17 00:00:00 2001 From: Fricoben Date: Tue, 26 Sep 2023 13:04:19 +0200 Subject: [PATCH] feat: add registration modal --- components/UI/registerConfirmationModal.tsx | 68 ++++ components/domains/domainMenu.tsx | 32 -- components/domains/register.tsx | 367 -------------------- components/domains/registerV2.tsx | 5 +- pages/identities.tsx | 5 +- 5 files changed, 72 insertions(+), 405 deletions(-) create mode 100644 components/UI/registerConfirmationModal.tsx delete mode 100644 components/domains/domainMenu.tsx delete mode 100644 components/domains/register.tsx diff --git a/components/UI/registerConfirmationModal.tsx b/components/UI/registerConfirmationModal.tsx new file mode 100644 index 00000000..a7a31012 --- /dev/null +++ b/components/UI/registerConfirmationModal.tsx @@ -0,0 +1,68 @@ +import React, { FunctionComponent } from "react"; +import Lottie from "lottie-react"; +import ModalMessage from "../UI/modalMessage"; +import verifiedLottie from "../../public/visuals/verifiedLottie.json"; +import Button from "./button"; + +type RegisterConfirmationModalProps = { + txHash?: string; + isTxModalOpen: boolean; + closeModal: () => void; +}; + +const RegisterConfirmationModal: FunctionComponent< + RegisterConfirmationModalProps +> = ({ txHash, isTxModalOpen, closeModal }) => { + return ( + closeModal()} + message={ +
+
+ {" "} +

+ window.open( + `https://${ + process.env.NEXT_PUBLIC_IS_TESTNET === "true" + ? "testnet." + : "" + }starkscan.co/tx/${txHash}` + ) + } + > + View transaction on explorer +

+
+
+

+ Refer your friends to Starknet ID and earn{" "} + ETH or STRK ! Each sale made with your referral + link will permit you to earn up to 8$ worth of crypto. +

+
+ +
+
+
+ } + /> + ); +}; + +export default RegisterConfirmationModal; diff --git a/components/domains/domainMenu.tsx b/components/domains/domainMenu.tsx deleted file mode 100644 index fcbc27a7..00000000 --- a/components/domains/domainMenu.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { FunctionComponent, useState } from "react"; -import Details from "./details"; -import DomainTabs from "./domainTabs"; -import Register from "./register"; - -type DomainMenuProps = { - domain: string; - isAvailable?: boolean; -}; - -const DomainMenu: FunctionComponent = ({ - domain, - isAvailable, -}) => { - const [tab, setTab] = useState("one"); - - function changeTab(tab: string): void { - setTab(tab); - } - - return ( -
- -
- {tab == "one" && } - {tab == "two" &&
} -
-
- ); -}; - -export default DomainMenu; diff --git a/components/domains/register.tsx b/components/domains/register.tsx deleted file mode 100644 index b14c5d8b..00000000 --- a/components/domains/register.tsx +++ /dev/null @@ -1,367 +0,0 @@ -import React from "react"; -import { TextField } from "@mui/material"; -import { FunctionComponent, useEffect, useState } from "react"; -import Button from "../UI/button"; -import styles from "../../styles/Home.module.css"; -import { useEtherContract, usePricingContract } from "../../hooks/contracts"; -import { - useAccount, - useContractRead, - useContractWrite, - useTransactionManager, -} from "@starknet-react/core"; -import { utils } from "starknetid.js"; -import { isHexString, numberToString } from "../../utils/stringService"; -import { gweiToEth, hexToDecimal } from "../../utils/feltService"; -import SelectDomain from "./selectDomains"; -import { useDisplayName } from "../../hooks/displayName.tsx"; -import { Abi, Call } from "starknet"; -import TxConfirmationModal from "../UI/txConfirmationModal"; - -type RegisterProps = { - domain: string; - isAvailable?: boolean; -}; - -const Register: FunctionComponent = ({ - domain, - isAvailable, -}) => { - const maxYearsToRegister = 25; - const [targetAddress, setTargetAddress] = useState(""); - const [duration, setDuration] = useState(3); - const [tokenId, setTokenId] = useState(0); - const [callData, setCallData] = useState([]); - const [price, setPrice] = useState("0"); - const [balance, setBalance] = useState("0"); - const [invalidBalance, setInvalidBalance] = useState(false); - const { contract } = usePricingContract(); - const { contract: etherContract } = useEtherContract(); - const [isTxModalOpen, setIsTxModalOpen] = useState(false); - const encodedDomain = utils - .encodeDomain(domain) - .map((element) => element.toString())[0]; - const { data: priceData, error: priceError } = useContractRead({ - address: contract?.address as string, - abi: contract?.abi as Abi, - functionName: "compute_buy_price", - args: [encodedDomain, duration * 365], - }); - const { account, address } = useAccount(); - const { data: userBalanceData, error: userBalanceDataError } = - useContractRead({ - address: etherContract?.address as string, - abi: etherContract?.abi as Abi, - functionName: "balanceOf", - args: [address], - }); - const { writeAsync: execute, data: registerData } = useContractWrite({ - calls: callData, - }); - const hasMainDomain = !useDisplayName(address ?? "", false).startsWith("0x"); - const [domainsMinting, setDomainsMinting] = useState>( - new Map() - ); - const { addTransaction } = useTransactionManager(); - const [sponsor, setSponsor] = useState("0"); - - useEffect(() => { - if (priceError || !priceData) setPrice("0"); - else { - const high = priceData?.["price"].high << BigInt(128); - setPrice((priceData?.["price"].low + high).toString(10)); - } - }, [priceData, priceError]); - - useEffect(() => { - if (userBalanceDataError || !userBalanceData) setBalance("0"); - else { - const high = userBalanceData?.["balance"].high << BigInt(128); - setBalance((userBalanceData?.["balance"].low + high).toString(10)); - } - }, [userBalanceData, userBalanceDataError]); - - useEffect(() => { - if (balance && price) { - if (gweiToEth(balance) > gweiToEth(price)) { - setInvalidBalance(false); - } else { - setInvalidBalance(true); - } - } - }, [balance, price]); - - useEffect(() => { - if (address) { - setTargetAddress(address); - } - }, [address]); - - useEffect(() => { - const referralData = localStorage.getItem("referralData"); - if (referralData) { - const data = JSON.parse(referralData); - if (data.sponsor && data?.expiry >= new Date().getTime()) { - setSponsor(data.sponsor); - } else { - setSponsor("0"); - } - } else { - setSponsor("0"); - } - }, [domain]); - - // Set mulitcalls - useEffect(() => { - if (!isAvailable) return; - const newTokenId: number = Math.floor(Math.random() * 1000000000000); - - if ( - tokenId != 0 && - !hasMainDomain && - hexToDecimal(address) === hexToDecimal(targetAddress) - ) { - setCallData([ - { - contractAddress: process.env.NEXT_PUBLIC_ETHER_CONTRACT as string, - entrypoint: "approve", - calldata: [ - process.env.NEXT_PUBLIC_NAMING_CONTRACT as string, - price, - 0, - ], - }, - { - contractAddress: process.env.NEXT_PUBLIC_NAMING_CONTRACT as string, - entrypoint: "buy", - calldata: [ - numberToString(tokenId), - encodedDomain, - numberToString(duration * 365), - 0, - hexToDecimal(targetAddress), - sponsor, - ], - }, - { - contractAddress: process.env.NEXT_PUBLIC_NAMING_CONTRACT as string, - entrypoint: "set_address_to_domain", - calldata: [1, encodedDomain], - }, - ]); - } else if ( - (tokenId != 0 && hasMainDomain) || - (tokenId != 0 && - !hasMainDomain && - hexToDecimal(address) != hexToDecimal(targetAddress)) - ) { - setCallData([ - { - contractAddress: process.env.NEXT_PUBLIC_ETHER_CONTRACT as string, - entrypoint: "approve", - calldata: [ - process.env.NEXT_PUBLIC_NAMING_CONTRACT as string, - price, - 0, - ], - }, - { - contractAddress: process.env.NEXT_PUBLIC_NAMING_CONTRACT as string, - entrypoint: "buy", - calldata: [ - numberToString(tokenId), - encodedDomain, - numberToString(duration * 365), - 0, - hexToDecimal(targetAddress), - sponsor, - ], - }, - ]); - } else if ( - tokenId === 0 && - !hasMainDomain && - hexToDecimal(address) === hexToDecimal(targetAddress) - ) { - setCallData([ - { - contractAddress: process.env.NEXT_PUBLIC_ETHER_CONTRACT as string, - entrypoint: "approve", - calldata: [ - process.env.NEXT_PUBLIC_NAMING_CONTRACT as string, - price, - 0, - ], - }, - { - contractAddress: process.env - .NEXT_PUBLIC_STARKNETID_CONTRACT as string, - entrypoint: "mint", - calldata: [numberToString(newTokenId)], - }, - { - contractAddress: process.env.NEXT_PUBLIC_NAMING_CONTRACT as string, - entrypoint: "buy", - calldata: [ - numberToString(newTokenId), - encodedDomain, - numberToString(duration * 365), - 0, - hexToDecimal(targetAddress), - sponsor, - ], - }, - { - contractAddress: process.env.NEXT_PUBLIC_NAMING_CONTRACT as string, - entrypoint: "set_address_to_domain", - calldata: [1, encodedDomain], - }, - ]); - } else if ( - (tokenId === 0 && hasMainDomain) || - (tokenId === 0 && - !hasMainDomain && - hexToDecimal(address) != hexToDecimal(targetAddress)) - ) { - setCallData([ - { - contractAddress: process.env.NEXT_PUBLIC_ETHER_CONTRACT as string, - entrypoint: "approve", - calldata: [ - process.env.NEXT_PUBLIC_NAMING_CONTRACT as string, - price, - 0, - ], - }, - { - contractAddress: process.env - .NEXT_PUBLIC_STARKNETID_CONTRACT as string, - entrypoint: "mint", - calldata: [numberToString(newTokenId)], - }, - { - contractAddress: process.env.NEXT_PUBLIC_NAMING_CONTRACT as string, - entrypoint: "buy", - calldata: [ - numberToString(newTokenId), - encodedDomain, - numberToString(duration * 365), - 0, - hexToDecimal(targetAddress), - sponsor, - ], - }, - ]); - } - }, [ - tokenId, - duration, - targetAddress, - isAvailable, - price, - domain, - hasMainDomain, - address, - sponsor, - ]); - - useEffect(() => { - if (!registerData?.transaction_hash) return; - addTransaction({ hash: registerData?.transaction_hash ?? "" }); - setIsTxModalOpen(true); - }, [registerData]); - - function changeAddress(value: string): void { - isHexString(value) ? setTargetAddress(value) : null; - } - - function changeDuration(value: number): void { - setDuration(value); - } - - function changeTokenId(value: number): void { - setTokenId(Number(value)); - } - - if (isAvailable) - return ( -
-
-
- changeAddress(e.target.value)} - color="secondary" - required - /> -
-
- changeDuration(Number(e.target.value))} - InputProps={{ - inputProps: { min: 0, max: maxYearsToRegister }, - }} - defaultValue={duration} - color="secondary" - required - /> -
-
- -
-

- Price:  - - {gweiToEth(price)} ETH - -

-
-
-
- -
-
- setIsTxModalOpen(false)} - title="Your domain is on it's way !" - /> -
- ); - - return

This domain is not available you can’t register it

; -}; - -export default Register; diff --git a/components/domains/registerV2.tsx b/components/domains/registerV2.tsx index 0b8f3072..0d4485fe 100644 --- a/components/domains/registerV2.tsx +++ b/components/domains/registerV2.tsx @@ -23,7 +23,6 @@ import SelectDomain from "./selectDomains"; import { useDisplayName } from "../../hooks/displayName.tsx"; import { Abi, Call } from "starknet"; import { posthog } from "posthog-js"; -import TxConfirmationModal from "../UI/txConfirmationModal"; import styles from "../../styles/components/registerV2.module.css"; import TextField from "../UI/textField"; import UsForm from "./usForm"; @@ -36,6 +35,7 @@ import Wallets from "../UI/wallets"; import registerCalls from "../../utils/registerCalls"; import { computeMetadataHash, generateSalt } from "../../utils/userDataService"; import { getPriceFromDomain } from "../../utils/priceService"; +import RegisterConfirmationModal from "../UI/registerConfirmationModal"; type RegisterV2Props = { domain: string; @@ -378,11 +378,10 @@ const RegisterV2: FunctionComponent = ({ domain, groups }) => { - setIsTxModalOpen(false)} - title="Your domain is on it's way !" /> setWalletModalOpen(false)} diff --git a/pages/identities.tsx b/pages/identities.tsx index 7e9501df..04ef106f 100644 --- a/pages/identities.tsx +++ b/pages/identities.tsx @@ -17,7 +17,7 @@ import Wallets from "../components/UI/wallets"; const Identities: NextPage = () => { const { account, address } = useAccount(); - const [loading, setLoading] = useState(false); + const [loading, setLoading] = useState(true); const [ownedIdentities, setOwnedIdentities] = useState([]); const [externalDomains, setExternalDomains] = useState([]); const [walletModalOpen, setWalletModalOpen] = useState(false); @@ -39,7 +39,6 @@ const Identities: NextPage = () => { useEffect(() => { if (account) { // Our Indexer - setLoading(true); fetch( `${ process.env.NEXT_PUBLIC_SERVER_LINK @@ -48,6 +47,7 @@ const Identities: NextPage = () => { .then((response) => response.json()) .then((data) => { setOwnedIdentities(data.full_ids); + setLoading(false); }); fetch( @@ -58,7 +58,6 @@ const Identities: NextPage = () => { .then((response) => response.json()) .then((data: ExternalDomains) => { setExternalDomains(data.domains); - setLoading(false); }); }