Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: free registration starknetCC problems #854

Merged
merged 16 commits into from
Jul 22, 2024
Merged

feat: free registration starknetCC problems #854

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3975779
feat: free registration starknetCC problems
Marchand-Nicolas Jul 15, 2024
26b37fa
ready for whitelist
Marchand-Nicolas Jul 15, 2024
f9e86b2
improving connect menu
Marchand-Nicolas Jul 16, 2024
3742fc4
moving to navbar
Marchand-Nicolas Jul 16, 2024
073b621
working for braavos + fix non explicit "loading gas" message
Marchand-Nicolas Jul 16, 2024
55cc919
showing errors in console
Marchand-Nicolas Jul 17, 2024
6caf4e6
disable button if no coupon
Marchand-Nicolas Jul 17, 2024
6fe55db
more detailed error message
Marchand-Nicolas Jul 17, 2024
2a6dbd3
refreshing when switching account
Marchand-Nicolas Jul 17, 2024
f78758c
improving tx validity detection
Marchand-Nicolas Jul 17, 2024
7adc2ad
making code more resilient
Marchand-Nicolas Jul 18, 2024
2deac15
Update hooks/isDeployed.tsx
Marchand-Nicolas Jul 18, 2024
c3f054b
improving deployment data gathering
Marchand-Nicolas Jul 18, 2024
3f2ea09
improving support for argent mobile
Marchand-Nicolas Jul 18, 2024
aa2ba0e
improving support for argent mobile
Marchand-Nicolas Jul 18, 2024
4588a2b
disabling paymaster for argent mobile
Marchand-Nicolas Jul 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/UI/connectButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const ConnectButton: FunctionComponent = () => {
className={styles.btnIcon}
/>
) : null}
<p>Connect wallet</p>
<p className="mx-auto">Connect wallet</p>
{lastConnector ? (
<div
className={styles.arrowDown}
Expand Down
8 changes: 8 additions & 0 deletions components/UI/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import WalletConnect from "./walletConnect";
import ArrowDownIcon from "./iconsComponents/icons/arrowDownIcon";
import errorLottie from "../../public/visuals/errorLottie.json";
import { bigintToStringHex } from "@/utils/stringService";
import { useRouter } from "next/router";

const Navbar: FunctionComponent = () => {
const theme = useTheme();
Expand All @@ -53,6 +54,13 @@ const Navbar: FunctionComponent = () => {
const { starknetIdNavigator } = useContext(StarknetIdJsContext);
const [showWalletConnectModal, setShowWalletConnectModal] =
useState<boolean>(false);
const router = useRouter();

useEffect(() => {
const pageName = router.pathname.split("/")[1];
if (pageName !== "gift" && pageName !== "register") return;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need. Everywhere if mobile => setShowWalletConnectModal(true)

if (isMobile) setShowWalletConnectModal(true);
}, [isMobile, router.pathname]);

const [lastConnector, setLastConnector] = useState<Connector | null>(null);
// could be replaced by a useProfileData from starknet-react when updated
Expand Down
69 changes: 30 additions & 39 deletions components/discount/freeRegisterCheckout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,23 +63,21 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
handleRegister,
data: registerData,
paymasterRewards,
gasTokenPrices,
gasTokenPrice,
loadingGas,
gasMethod,
setGasMethod,
gaslessCompatibility,
setGasTokenPrice,
sponsoredDeploymentAvailable,
maxGasTokenAmount,
loadingDeploymentData,
} = usePaymaster(callData, async (transactionHash) => {
setDomainsMinting((prev) =>
new Map(prev).set(encodedDomain.toString(), true)
);
console.log(transactionHash);
if (transactionHash) setTransactionHash(transactionHash);
});
refreshRewards,
invalidTx,
loadingTypedData,
} = usePaymaster(
callData,
async (transactionHash) => {
setDomainsMinting((prev) =>
new Map(prev).set(encodedDomain.toString(), true)
);
if (transactionHash) setTransactionHash(transactionHash);
},
!coupon
);

useEffect(() => {
if (!registerData?.transaction_hash) return;
Expand All @@ -95,6 +93,11 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
if (address) setTargetAddress(address);
}, [address]);

useEffect(() => {
if (loadingCoupon || !coupon) return;
refreshRewards();
}, [loadingCoupon, coupon, refreshRewards, address]);

useEffect(() => {
// salt must not be empty to preserve privacy
if (!salt) return;
Expand All @@ -104,11 +107,11 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
}, [salt]);

useEffect(() => {
if (signature[0] === null) return;
// Variables
const newTokenId: number = Math.floor(Math.random() * 1000000000000);
setTokenId(newTokenId);
const txMetadataHash = `0x${metadataHash}` as HexString;

const freeRegisterCalls = registrationCalls.getFreeRegistrationCalls(
newTokenId,
encodedDomain,
Expand Down Expand Up @@ -142,11 +145,7 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
}, [transactionHash, tokenId]);

useEffect(() => {
if (!coupon) {
setCouponError("Please enter a coupon code");
setLoadingCoupon(false);
return;
}
if (!coupon) return setLoadingCoupon(false);
const lastSuccessCoupon = localStorage.getItem("lastSuccessCoupon");
if (coupon === lastSuccessCoupon) {
setCouponError("");
Expand Down Expand Up @@ -199,21 +198,7 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
</div>
</div>
<div className={styles.summary}>
<FreeRegisterSummary
duration={duration}
domain={domain}
hasPaymasterRewards={paymasterRewards.length > 0}
gasTokenPrices={gasTokenPrices}
gasTokenPrice={gasTokenPrice}
setGasTokenPrice={setGasTokenPrice}
gasMethod={gasMethod}
setGasMethod={setGasMethod}
paymasterAvailable={
gaslessCompatibility?.isCompatible || sponsoredDeploymentAvailable
}
maxGasTokenAmount={maxGasTokenAmount}
deployed={gaslessCompatibility?.isCompatible}
/>
<FreeRegisterSummary duration={duration} domain={domain} />
<Divider className="w-full" />
<TermCheckbox
checked={termsBox}
Expand All @@ -225,21 +210,27 @@ const FreeRegisterCheckout: FunctionComponent<FreeRegisterCheckoutProps> = ({
disabled={
(domainsMinting.get(encodedDomain) as boolean) ||
!account ||
!coupon ||
!duration ||
!targetAddress ||
!termsBox ||
Boolean(couponError) ||
loadingCoupon ||
loadingGas ||
loadingDeploymentData
loadingDeploymentData ||
loadingTypedData
}
>
{!termsBox
? "Please accept terms & policies"
: couponError
: couponError || !coupon
? "Enter a valid Coupon"
: loadingGas
? "Loading gas"
? invalidTx
? "Invalid signature"
: "Loading gas"
: loadingTypedData
? "Building typed data"
: loadingDeploymentData
? paymasterRewards.length > 0
? "Loading deployment data"
Expand Down
153 changes: 19 additions & 134 deletions components/discount/freeRegisterSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,23 @@ import React, { FunctionComponent } from "react";
import styles from "../../styles/components/registerV3.module.css";
import { getYearlyPrice } from "@/utils/priceService";
import DoneIcon from "../UI/iconsComponents/icons/doneIcon";
import { GasTokenPrice } from "@avnu/gasless-sdk";
import { tokenNames } from "@/utils/altcoinService";
import { shortenDomain } from "@/utils/stringService";
import StyledToolTip from "../UI/styledTooltip";
import { GasMethod } from "@/hooks/paymaster";
import { Alert } from "@mui/material";
import { useAccount } from "@starknet-react/core";

type FreeRegisterSummaryProps = {
duration: number;
domain: string;
hasPaymasterRewards?: boolean;
gasTokenPrices?: GasTokenPrice[];
gasTokenPrice?: GasTokenPrice;
setGasTokenPrice: (price: GasTokenPrice) => void;
gasMethod: GasMethod;
setGasMethod: (method: GasMethod) => void;
paymasterAvailable: boolean;
maxGasTokenAmount?: bigint;
deployed?: boolean;
};

const FreeRegisterSummary: FunctionComponent<FreeRegisterSummaryProps> = ({
domain,
duration,
hasPaymasterRewards,
gasTokenPrices,
gasTokenPrice,
setGasTokenPrice,
gasMethod,
setGasMethod,
paymasterAvailable,
maxGasTokenAmount,
deployed,
}) => {
const { address } = useAccount();

function getMessage() {
return `${Math.floor(duration / 30)} months of domain registration`;
}

const getTokenName = (price: GasTokenPrice) =>
tokenNames[price.tokenAddress as keyof typeof tokenNames] ||
shortenDomain(price.tokenAddress);

return (
<div className={styles.pricesSummary}>
<div className={styles.totalDue}>
Expand All @@ -56,112 +31,22 @@ const FreeRegisterSummary: FunctionComponent<FreeRegisterSummaryProps> = ({
<strong>Free</strong>
</p>
</div>
<div className={styles.gasMethods}>
<button
disabled={gasMethod === "traditional"}
onClick={() => setGasMethod("traditional")}
className={
gasMethod === "traditional"
? styles.gasMethodSelected
: styles.gasMethod
}
type="button"
>
Traditional Transaction
</button>
<StyledToolTip
title={`Allows you to pay less gas and choose other currencies to pay fees. ${
paymasterAvailable
? ""
: "Wallet not compatible. Please deploy it or switch to ArgentX in order to use Paymaster."
}`}
>
<button
onClick={() => setGasMethod("paymaster")}
className={
gasMethod === "paymaster"
? styles.gasMethodSelected
: styles.gasMethod
}
type="button"
disabled={!paymasterAvailable}
>
Gasless Transaction
</button>
</StyledToolTip>
</div>
{gasMethod === "paymaster" ? (
hasPaymasterRewards ? (
<div className="flex items-center gap-2">
<DoneIcon width="24" color="green" />
<p className="text-sm">
No gas fees to pay. You have a{" "}
<a
href="https://doc.avnu.fi/starknet-paymaster/introduction"
target="_blank"
rel="noreferrer noopener"
className="underline"
>
Paymaster
</a>{" "}
reward.
</p>
</div>
) : (
<div className="flex flex-col gap-2 w-full">
<p className="text-sm">
No{" "}
<a
href="https://doc.avnu.fi/starknet-paymaster/introduction"
target="_blank"
rel="noreferrer noopener"
className="underline"
>
Paymaster
</a>{" "}
reward. {deployed ? "Please select a gas token." : ""}
</p>
{deployed ? (
<>
<div className={styles.gasMethods}>
{gasTokenPrices?.map((price) => (
<button
disabled={
price.tokenAddress === gasTokenPrice?.tokenAddress
}
onClick={() => setGasTokenPrice(price)}
key={price.tokenAddress}
className={
price.tokenAddress === gasTokenPrice?.tokenAddress
? styles.gasMethodSelected
: styles.gasMethod
}
type="button"
>
{getTokenName(price)}{" "}
</button>
))}
</div>
{gasTokenPrice ? (
<Alert severity="info">
{maxGasTokenAmount
? `Please make sure to have at least ${maxGasTokenAmount.toString()} ${getTokenName(
gasTokenPrice
)} to prevent transaction failure.`
: `Please make sure to have enough ${getTokenName(
gasTokenPrice
)} to prevent transaction failure.`}
</Alert>
) : null}
</>
) : (
<Alert severity="error">
Your wallet is not deployed. To sponsor its deployment, please
gather rewards.
</Alert>
)}
</div>
)
{address ? (
<div className="flex items-center gap-2">
<DoneIcon width="24" color="green" />
<p className="text-sm">
No gas fees to pay. You have a{" "}
<a
href="https://doc.avnu.fi/starknet-paymaster/introduction"
target="_blank"
rel="noreferrer noopener"
className="underline"
>
Paymaster
</a>{" "}
reward.
</p>
</div>
) : null}
</div>
</div>
Expand Down
Loading