diff --git a/package.json b/package.json index a0c10e6..b8ffc27 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@esbuild-plugins/node-globals-polyfill": "^0.2.3", "@holonym-foundation/utils": "^1.0.1", "@holonym-foundation/zokrates-js-fork": "1.1.42", - "@paypal/react-paypal-js": "^7.8.2", + "@paypal/react-paypal-js": "^8.1.3", "@tanstack/react-query": "^4.22.0", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.2.0", diff --git a/src/components/issuance/GovernmentIDIssuance/GovIDPayment.tsx b/src/components/issuance/GovernmentIDIssuance/GovIDPayment.tsx index ee26423..579f52a 100644 --- a/src/components/issuance/GovernmentIDIssuance/GovIDPayment.tsx +++ b/src/components/issuance/GovernmentIDIssuance/GovIDPayment.tsx @@ -3,14 +3,17 @@ import { tokenSymbolToCurrency } from "../../../constants"; import CryptoPaymentScreen from "./CryptoPaymentScreen"; import PaymentOptions from "./PaymentOptions"; import { SupportedChainIdsForIDVPayment } from "../../../types"; +import PayPalPaymentScreen from "./PayPalPaymentScreen"; const GovIDPayment = ({ - onPaymentSuccess + onPaymentSuccess, + onPayPalSyuccess }: { onPaymentSuccess: (data: { chainId?: number, txHash?: string}) => void + onPayPalSyuccess: (data: { username?: string; txId?: string }) => void }) => { const [selectedPage, setSelectedPage] = useState<"options" | "fiat" | "crypto">("options"); - const [selectedToken, setSelectedToken] = useState<"ETH" | "FTM">(); + const [selectedToken, setSelectedToken] = useState<"ETH" | "FTM" | "FIAT">(); const [selectedChainId, setSelectedChainId] = useState(); return ( @@ -34,6 +37,13 @@ const GovIDPayment = ({ /> )} + {selectedPage === "fiat" && selectedToken && ( + setSelectedPage("options")} + /> + )} + ); }; diff --git a/src/components/issuance/GovernmentIDIssuance/PayPalPaymentScreen.tsx b/src/components/issuance/GovernmentIDIssuance/PayPalPaymentScreen.tsx new file mode 100644 index 0000000..b1ca57d --- /dev/null +++ b/src/components/issuance/GovernmentIDIssuance/PayPalPaymentScreen.tsx @@ -0,0 +1,51 @@ +import { useState } from "react"; +import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js"; + +const PayPalPaymentScreen = (props: { + onPaymentSuccess: (data: { username?: string; txId?: string }) => void; + onBack: () => void; +}) => { + + return ( + <> +
+

Payment Options

+ + + + +
+ +
+
+ + ); +}; + +export default PayPalPaymentScreen; diff --git a/src/components/issuance/GovernmentIDIssuance/PaymentOptions.tsx b/src/components/issuance/GovernmentIDIssuance/PaymentOptions.tsx index 5d46081..8b207d0 100644 --- a/src/components/issuance/GovernmentIDIssuance/PaymentOptions.tsx +++ b/src/components/issuance/GovernmentIDIssuance/PaymentOptions.tsx @@ -17,7 +17,7 @@ const PaymentOptions = ({ }: { onSelectOption: ( fiat: boolean, - symbol: "ETH" | "FTM", + symbol: "ETH" | "FTM" | "FIAT", chainId: SupportedChainIdsForIDVPayment ) => void; }) => { @@ -74,8 +74,12 @@ const PaymentOptions = ({ }) { + event.preventDefault(); + onSelectOption(true, "FIAT", 0); + }} > Pay In Fiat (coming soon) diff --git a/src/constants/index.ts b/src/constants/index.ts index 8025ef9..7a80315 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -85,6 +85,10 @@ export const tokenSymbolToCurrency = { name: "Fantom", symbol: "FTM", }, + FIAT: { + name: "PayPal", + symbol: "FIAT", + } } export const stateAbbreviations = { diff --git a/src/types.d.ts b/src/types.d.ts index 67ae2ef..ea2f197 100644 --- a/src/types.d.ts +++ b/src/types.d.ts @@ -292,4 +292,4 @@ export type Currency = { symbol: string; }; -export type SupportedChainIdsForIDVPayment = 10 | 250 | 420 +export type SupportedChainIdsForIDVPayment = 10 | 250 | 420 | 0 diff --git a/yarn.lock b/yarn.lock index 7b8f47a..810a08c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2344,19 +2344,19 @@ dependencies: mirada "^0.0.15" -"@paypal/paypal-js@^5.1.6": - version "5.1.6" - resolved "https://registry.yarnpkg.com/@paypal/paypal-js/-/paypal-js-5.1.6.tgz#8ec59f4cc016addb3de41511f70950fd0359ffdb" - integrity sha512-1upF06pv0AUtTftRVSra44p8ibqGa3ruKLArvdhpZla25zcrND7R+nDUIMrJ0iteVYZowhujZStFs6NoruExfg== +"@paypal/paypal-js@^7.0.0": + version "7.0.2" + resolved "https://registry.yarnpkg.com/@paypal/paypal-js/-/paypal-js-7.0.2.tgz#d45e13781be30fcfd707a8a44289d4db67c33b4a" + integrity sha512-ZCOS5P3syfA9MYEq501N93pKpr8ZsXw9jun/rLNS7WNphao0ckfreqTCO5EoXcdceZVPS66H0IgG7PKn/jbBKQ== dependencies: promise-polyfill "^8.3.0" -"@paypal/react-paypal-js@^7.8.2": - version "7.8.3" - resolved "https://registry.yarnpkg.com/@paypal/react-paypal-js/-/react-paypal-js-7.8.3.tgz#a5ca30a6db6a16776a447976c168f6b7438b1fb9" - integrity sha512-7sD5JFA0IH9kysyGFv5DTmtPn54vLWZ0DLhdjUvsjqZnoEs11mJJJlTsTA7MkIO3jBAJOWlfoA4wLYzmy68C4g== +"@paypal/react-paypal-js@^8.1.3": + version "8.1.3" + resolved "https://registry.yarnpkg.com/@paypal/react-paypal-js/-/react-paypal-js-8.1.3.tgz#2a46bd864eee02efada370ca50fab5a5bf38f4ff" + integrity sha512-hEm27iYP/UHS3XPBhDdiK2U4PH1FxrOD5O3f9tstAVLJd82l/laCjq751HiESSm63PVOoFeKE41Fe1mYGab+oA== dependencies: - "@paypal/paypal-js" "^5.1.6" + "@paypal/paypal-js" "^7.0.0" "@paypal/sdk-constants" "^1.0.122" "@paypal/sdk-constants@^1.0.122":