-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5 from ardriveapp/PE-5162_redeem
feat: add a redeem page PE-5162
- Loading branch information
Showing
8 changed files
with
215 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,131 @@ | ||
| export function RedeemPage() { | ||
| import { useEffect, useState } from "react"; | ||
| import { ErrMsgCallbackAsProps } from "../types"; | ||
| import { redeemGift } from "../utils/redeemGift"; | ||
| import { ardriveAppUrl } from "../constants"; | ||
| import { Page } from "./Page"; | ||
| import { useLocation } from "react-router-dom"; | ||
|
|
||
| function RedeemForm({ errorCallback }: ErrMsgCallbackAsProps) { | ||
| const [destinationAddress, setDestinationAddress] = useState(""); | ||
| const [recipientEmail, setRecipientEmail] = useState(""); | ||
| const [redemptionCode, setRedemptionCode] = useState(""); | ||
|
|
||
| const location = useLocation(); | ||
|
|
||
| useEffect(() => { | ||
| const urlParams = new URLSearchParams(location.search); | ||
|
|
||
| const redemptionCodeParam = urlParams.get("id"); | ||
| const recipientEmailParam = urlParams.get("email"); | ||
| const destinationAddressParam = urlParams.get("destinationAddress"); | ||
|
|
||
| if (redemptionCodeParam) { | ||
| setRedemptionCode(redemptionCodeParam); | ||
| } | ||
| if (recipientEmailParam) { | ||
| setRecipientEmail(recipientEmailParam); | ||
| } | ||
| if (destinationAddressParam) { | ||
| setDestinationAddress(destinationAddressParam); | ||
| } | ||
| }, [location.search]); | ||
|
|
||
| const canSubmitForm = | ||
| !!destinationAddress && !!recipientEmail && !!redemptionCode; | ||
|
|
||
| const handleSubmit = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => { | ||
| e.preventDefault(); | ||
|
|
||
| if (!canSubmitForm) { | ||
| return; | ||
| } | ||
|
|
||
| redeemGift({ redemptionCode, destinationAddress, recipientEmail }) | ||
| .then(() => { | ||
| // TODO: Success Modal or Page | ||
| console.log("Gift redeemed!"); | ||
| alert("Gift redeemed, redirecting to ArDrive App!"); | ||
|
|
||
| setTimeout(() => { | ||
| console.log("Redirecting to ArDrive app..."); | ||
| window.location.href = ardriveAppUrl; | ||
| }, 2000); | ||
| }) | ||
| .catch((err) => { | ||
| errorCallback(`Error redeeming gift: ${err.message}`); | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <p>TODO</p> | ||
| <h1>Redeem Turbo Credits</h1> | ||
| <p> | ||
| Enter the address of the Arweave wallet you would like to redeem your | ||
| Turbo Credits to. | ||
| </p> | ||
| <form className="form"> | ||
| <div className="form-section"> | ||
| <label className="form-label">Destination Address*</label> | ||
| <input | ||
| type="text" | ||
| className="form-input" | ||
| id="destination-address" | ||
| placeholder="Enter the destination address here" | ||
| value={destinationAddress} | ||
| onChange={(e) => { | ||
| setDestinationAddress(e.target.value); | ||
| }} | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="form-section"> | ||
| <label className="form-label">Redemption Code*</label> | ||
| <input | ||
| type="text" | ||
| className="form-input" | ||
| id="redemption-code" | ||
| placeholder="Enter the redemption code here" | ||
| value={redemptionCode} | ||
| onChange={(e) => { | ||
| setRedemptionCode(e.target.value); | ||
| }} | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="form-section"> | ||
| <label className="form-label">Recipient email address*</label> | ||
| <input | ||
| type="email" | ||
| className="form-input" | ||
| id="recipient-email" | ||
| placeholder="Confirm your email address here" | ||
| value={recipientEmail} | ||
| onChange={(e) => { | ||
| setRecipientEmail(e.target.value); | ||
| }} | ||
| /> | ||
| </div> | ||
| <button | ||
| type="submit" | ||
| className="proceed-button" | ||
| onClick={(e) => handleSubmit(e)} | ||
| disabled={!canSubmitForm} | ||
| > | ||
| Redeem | ||
| </button> | ||
| </form> | ||
|
|
||
| <div> | ||
| <br></br> | ||
| <span> | ||
| If you do not have an Arweave wallet, you can create one in{" "} | ||
| <a href={ardriveAppUrl}>ArDrive App</a>. | ||
| </span> | ||
| </div> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export const RedeemPage = () => ( | ||
| <Page page={(e) => <RedeemForm errorCallback={e} />} /> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import { paymentServiceUrl } from "../constants"; | ||
|
|
||
| export async function redeemGift({ | ||
| destinationAddress, | ||
| recipientEmail, | ||
| redemptionCode, | ||
| }: { | ||
| redemptionCode: string; | ||
| recipientEmail: string; | ||
| destinationAddress: string; | ||
| }): Promise<void> { | ||
| // TODO: Support redeeming gifts on turbo sdk | ||
| // return TurboFactory.unauthenticated(turboConfig) | ||
| // .redeemGift(redemptionCode, recipientEmail, destinationAddress) | ||
| const response = await fetch( | ||
| `${paymentServiceUrl}/v1/redeem/?email=${recipientEmail}&id=${redemptionCode}&destinationAddress=${destinationAddress}`, | ||
| ); | ||
| if (!response.ok) throw new Error("Failed to redeem gift"); | ||
| } |