@paperxyz/react-client-sdk - npm Package Compare versions

Comparing version 0.0.1-alpha.3 to 0.0.1-alpha.4

dist/components/PaperCheckout.d.ts

 import React from 'react';
+import { PaymentSuccessResult } from '../interfaces/PaymentSuccessResult';
+import { TransferSuccessResult } from '../interfaces/TransferSuccessResult';
 export declare enum PaperCheckoutDisplay {
+    /**
+     * Open the checkout in a new popup centered over the parent window.
+     */
     POPUP = "POPUP",
+    /**
+     * Open the checkout in a new browser tab.
+     */
     NEW_TAB = "NEW_TAB",
+    /**
+     * Open the checkout in a modal on the parent page with a darkened background.
+     *
+     * NOTE: Pay with Crypto is disabled in this view.
+     */
     MODAL = "MODAL",
+    /**
+     * Open the checkout in a drawer on the right side of the parent page with a darkened background.
+     *
+     * NOTE: Pay with Crypto is disabled in this view.
+     */
     DRAWER = "DRAWER",
+    /**
+     * Embed the checkout directly on the parent page.
+     *
+     * NOTE: Pay with Crypto is disabled in this view.
+     */
     EMBED = "EMBED"
 }
-interface PaperCheckoutProps {
+export interface PaperCheckoutProps {
     checkoutId: string;
     display?: PaperCheckoutDisplay;
-    width?: number;
-    height?: number;
+    options?: {
+        width: number;
+        height: number;
+        quantity?: number;
+        appName?: string;
+        recipientWalletAddress?: string;
+        email?: string;
+    };
+    onPaymentSuccess?: (result: PaymentSuccessResult) => void;
+    onTransferSuccess?: (result: TransferSuccessResult) => void;
     children?: React.ReactNode;
 }
 export declare const PaperCheckout: React.FC<PaperCheckoutProps>;
-export {};

dist/components/PayWithCard.d.ts

@@ -0,3 +1,3 @@
+import React from 'react';
 import { PaperSDKError } from '../interfaces/PaperSDKError';
-import React from 'react';
 import { PaymentSuccessResult } from '../interfaces/PaymentSuccessResult';
@@ -4,0 +4,0 @@ interface PayWithCardProps {

dist/components/VerifyEmail.d.ts

@@ -1,4 +0,4 @@
-import { PaperSDKError } from '../interfaces/PaperSDKError';
-import { PaperUser } from '../interfaces/PaperUser';
-import React from 'react';
+import { PaperSDKError } from "../interfaces/PaperSDKError";
+import { PaperUser } from "../interfaces/PaperUser";
+import React from "react";
 interface VerifyEmailProps {
@@ -5,0 +5,0 @@ emailAddress: string;

dist/index.js

@@ -1,2 +0,2 @@
-var K=Object.create;var C=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames,g=Object.getOwnPropertySymbols,W=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var S=(e,r,o)=>r in e?C(e,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[r]=o,p=(e,r)=>{for(var o in r||(r={}))w.call(r,o)&&S(e,o,r[o]);if(g)for(var o of g(r))I.call(r,o)&&S(e,o,r[o]);return e};var O=(e,r)=>{for(var o in r)C(e,o,{get:r[o],enumerable:!0})},D=(e,r,o,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of V(r))!w.call(e,n)&&n!==o&&C(e,n,{get:()=>r[n],enumerable:!(a=M(r,n))||a.enumerable});return e};var E=(e,r,o)=>(o=e!=null?K(W(e)):{},D(r||!e||!e.__esModule?C(o,"default",{value:e,enumerable:!0}):o,e)),T=e=>D(C({},"__esModule",{value:!0}),e);var H={};O(H,{AddPaymentMethod:()=>$,PaperCheckout:()=>_,PaperCheckoutDisplay:()=>N,PaperSDKProvider:()=>U,PayWithCard:()=>z,VerifyEmail:()=>F,usePaperSDKContext:()=>y});module.exports=T(H);var f=E(require("react"));var c=E(require("react")),k=(0,c.createContext)({chainName:"Polygon",setChainName:()=>{}}),U=({chainName:e,children:r})=>{let[o,a]=(0,c.useState)(e),n=(0,c.useMemo)(()=>({chainName:o,setChainName:a}),[o,a]);return c.default.createElement(k.Provider,{value:n},r)},y=()=>(0,c.useContext)(k);var $=({onSuccess:e,onError:r})=>{let{chainName:o}=y();return(0,f.useEffect)(()=>{let a=n=>{let i=n.data;console.log("data is ",i),i.eventType==="addPaymentMethodError"?(console.error("Error in Paper SDK AddPaymentMethod",i.error),r&&r({code:i.errorCode})):i.eventType==="addPaymentMethodSuccess"&&e()};window.addEventListener("message",a)},[]),f.default.createElement(f.default.Fragment,null,f.default.createElement("iframe",{src:`https://paper.xyz/sdk/v1/add-payment-method?chainName=${o}`}))};var t=E(require("react")),N=(i=>(i.POPUP="POPUP",i.NEW_TAB="NEW_TAB",i.MODAL="MODAL",i.DRAWER="DRAWER",i.EMBED="EMBED",i))(N||{}),_=({checkoutId:e,display:r="POPUP",width:o=400,height:a=800,children:n})=>{let i=`https://paper.xyz/checkout/${e}`,m=n||t.default.createElement("button",{style:{backgroundColor:"#cf3781",padding:"8px 20px 8px 20px",borderRadius:"8px",color:"white",fontWeight:"bold"}},"Buy Now");switch(r){case"POPUP":return t.default.createElement("a",{onClick:()=>{if(!(window!=null&&window.top))return;let s=window.top.outerHeight/2+window.top.screenY-a/2,x=window.top.outerWidth/2+window.top.screenX-o/2;window.open(i,"Paper.xyz Checkout",`toolbar=no,
+var K=Object.create;var g=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames,S=Object.getOwnPropertySymbols,T=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable;var x=(t,r,e)=>r in t?g(t,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[r]=e,p=(t,r)=>{for(var e in r||(r={}))D.call(r,e)&&x(t,e,r[e]);if(S)for(var e of S(r))V.call(r,e)&&x(t,e,r[e]);return t};var I=(t,r)=>{for(var e in r)g(t,e,{get:r[e],enumerable:!0})},k=(t,r,e,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of W(r))!D.call(t,i)&&i!==e&&g(t,i,{get:()=>r[i],enumerable:!(o=M(r,i))||o.enumerable});return t};var E=(t,r,e)=>(e=t!=null?K(T(t)):{},k(r||!t||!t.__esModule?g(e,"default",{value:t,enumerable:!0}):e,t)),O=t=>k(g({},"__esModule",{value:!0}),t);var q={};I(q,{AddPaymentMethod:()=>$,PaperCheckout:()=>B,PaperCheckoutDisplay:()=>A,PaperSDKProvider:()=>U,PayWithCard:()=>z,VerifyEmail:()=>F,usePaperSDKContext:()=>f});module.exports=O(q);var b=E(require("react"));var m=E(require("react")),N=(0,m.createContext)({chainName:"Polygon",setChainName:()=>{}}),U=({chainName:t,children:r})=>{let[e,o]=(0,m.useState)(t),i=(0,m.useMemo)(()=>({chainName:e,setChainName:o}),[e,o]);return m.default.createElement(N.Provider,{value:i},r)},f=()=>(0,m.useContext)(N);var $=({onSuccess:t,onError:r})=>{let{chainName:e}=f();return(0,b.useEffect)(()=>{let o=i=>{let s=i.data;console.log("data is ",s),s.eventType==="addPaymentMethodError"?(console.error("Error in Paper SDK AddPaymentMethod",s.error),r&&r({code:s.errorCode})):s.eventType==="addPaymentMethodSuccess"&&t()};window.addEventListener("message",o)},[]),b.default.createElement(b.default.Fragment,null,b.default.createElement("iframe",{src:`https://paper.xyz/sdk/v1/add-payment-method?chainName=${e}`}))};var a=E(require("react")),A=(s=>(s.POPUP="POPUP",s.NEW_TAB="NEW_TAB",s.MODAL="MODAL",s.DRAWER="DRAWER",s.EMBED="EMBED",s))(A||{}),B=({checkoutId:t,display:r="POPUP",options:e={width:400,height:800},onPaymentSuccess:o,onTransferSuccess:i,children:s})=>{let[y,u]=(0,a.useState)(!1);(0,a.useEffect)(()=>{let w=c=>{let C=c.data;switch(C.eventType){case"paymentSuccess":o&&o({id:C.id});break;case"transferSuccess":i&&i({id:C.id});break;case"modalClosed":u(!1);break;default:}};window.addEventListener("message",w)},[]);let n=new URL(`https://paper.xyz/checkout/${t}`);n.searchParams.append("display",r),e.appName&&n.searchParams.append("app_name",e.appName),e.recipientWalletAddress&&n.searchParams.append("wallet",e.recipientWalletAddress),e.email&&n.searchParams.append("username",e.email),e.quantity&&n.searchParams.append("quantity",e.quantity.toString());let P=s||a.default.createElement("button",{style:{backgroundColor:"#cf3781",padding:"8px 20px 8px 20px",borderRadius:"8px",color:"white",fontWeight:"bold"}},"Buy Now");switch(r){case"POPUP":return a.default.createElement("a",{onClick:()=>{if(!(window!=null&&window.top))return;let c=window.top.outerHeight/2+window.top.screenY-e.height/2,C=window.top.outerWidth/2+window.top.screenX-e.width/2;window.open(n,"Paper Checkout",`toolbar=no,
           location=no,
@@ -7,6 +7,6 @@ status=no,
           resizable=yes,
-          width=${o},
-          height=${a},
-          top=${s},
-          left=${x}`)}},m);case"NEW_TAB":return t.default.createElement("a",{onClick:()=>window.open(i,"_blank")},m);case"MODAL":return t.default.createElement(L,{clickableElement:m,checkoutUrl:i,width:o,height:a});case"DRAWER":return t.default.createElement(B,{clickableElement:m,checkoutUrl:i,width:o});case"EMBED":return t.default.createElement("iframe",{src:i,width:o,height:a});default:return console.error(`Invalid or unimplemented display type: ${r}`),t.default.createElement(t.default.Fragment,null)}},l={overlay:{position:"fixed",top:0,left:0,right:0,bottom:0,margin:0,zIndex:1,overflow:"hidden",display:"flex",visibility:"hidden",opacity:0,transition:"all 0.2s ease"},overlayIsVisible:{visibility:"visible",opacity:1,backdropFilter:"blur(2px)",background:"#0008"},modalOverlay:{alignItems:"center",justifyContent:"center"},drawerOverlay:{justifyContent:"flex-end"},modalDialog:{position:"relative",overflow:"hidden",borderRadius:"8px",visibility:"hidden",opacity:0,top:"5%",transition:"all 0.2s ease"},modalDialogIsVisible:{visibility:"visible",opacity:1,top:0},drawerDialog:{position:"relative",visibility:"hidden",opacity:0,right:"-10%",transition:"all 0.2s ease"},drawerDialogIsVisible:{visibility:"visible",opacity:1,right:0},modalCloseButton:{position:"absolute",top:"0.1em",right:"0.2em",borderRadius:"8px",fontSize:"x-large",padding:"0 0.4em",color:"#888"}},B=({clickableElement:e,checkoutUrl:r,width:o})=>{let[a,n]=(0,t.useState)(!1);return t.default.createElement(t.default.Fragment,null,t.default.createElement("a",{onClick:()=>n(!0)},e),t.default.createElement("div",{className:"paper-overlay",style:p(p(p({},l.overlay),a?l.overlayIsVisible:{}),l.drawerOverlay)},t.default.createElement("div",{className:"paper-drawer",style:p(p({},l.drawerDialog),a?l.drawerDialogIsVisible:{})},t.default.createElement("button",{onClick:()=>n(!1),style:l.modalCloseButton},"\xD7"),t.default.createElement("iframe",{src:r,width:o,height:"100%"}))))},L=({clickableElement:e,checkoutUrl:r,width:o,height:a})=>{let[n,i]=(0,t.useState)(!1);return t.default.createElement(t.default.Fragment,null,t.default.createElement("a",{onClick:()=>i(!0)},e),t.default.createElement("div",{className:"paper-overlay",style:p(p(p({},l.overlay),n?l.overlayIsVisible:{}),l.modalOverlay)},t.default.createElement("div",{className:"paper-modal",style:p(p({},l.modalDialog),n?l.modalDialogIsVisible:{})},t.default.createElement("button",{onClick:()=>i(!1),style:l.modalCloseButton},"\xD7"),t.default.createElement("iframe",{src:r,width:o,height:a}))))};var P=E(require("react"));var b="https://paper.xyz";var z=({checkoutId:e,recipientWalletAddress:r,onSuccess:o,onCancel:a,onError:n})=>{let{chainName:i}=y();return(0,P.useEffect)(()=>{let m=v=>{let s=v.data;console.log("data is ",s),s.eventType==="payWithCardError"?(console.error("Error in Paper SDK PayWithCard",s.error),n&&n({code:s.errorCode})):s.eventType==="payWithCardCancel"?(console.error("Paper SDK PayWithCard cancelled"),a&&a()):s.eventType==="payWithCardSuccess"&&o({transactionHash:s.transactionHash})};window.addEventListener("message",m)},[]),P.default.createElement(P.default.Fragment,null,e&&r&&i&&P.default.createElement("iframe",{src:`${b}/sdk/v1/pay-with-card?checkoutId=${e}&recipientWalletAddress=${r}&chainName=${i}`,width:"100%",height:"100%"}))};var d=E(require("react"));var F=({emailAddress:e,onSuccess:r,onEmailVerificationInitiated:o,onError:a,children:n})=>{let[i,m]=(0,d.useState)(!1),{chainName:v}=y();(0,d.useEffect)(()=>{let x=A=>{let h=A.data;console.log("data is ",h),h.eventType==="verifyEmailEmailVerificationInitiated"?o&&o():h.eventType==="verifyEmailError"?(console.error("Error in Paper SDK VerifyEmail",h.error),a&&a({code:"The email was unable to be verified."})):h.eventType==="verifyEmailSuccess"&&r({emailAddress:h.emailAddress,walletAddress:h.walletAddress})};window.addEventListener("message",x)},[]);let s=()=>{m(!0)};return d.default.createElement(d.default.Fragment,null,e&&i&&d.default.createElement(d.default.Fragment,null,e,d.default.createElement("iframe",{src:`${b}/sdk/v1/verify-email?email=${encodeURIComponent(e)}&chainName=${v}`,style:{width:"0px",height:"0px",visibility:"hidden"}})),n?d.default.createElement("a",{onClick:s},n):d.default.createElement("button",{onClick:s},"Verify Email"))};0&&(module.exports={AddPaymentMethod,PaperCheckout,PaperCheckoutDisplay,PaperSDKProvider,PayWithCard,VerifyEmail,usePaperSDKContext});
+          width=${e.width},
+          height=${e.height},
+          top=${c},
+          left=${C}`)}},P);case"NEW_TAB":return a.default.createElement("a",{onClick:()=>window.open(n,"_blank")},P);case"MODAL":return a.default.createElement(_,{clickableElement:P,checkoutUrl:n.href,width:e.width,height:e.height,isOpen:y,setIsOpen:u});case"DRAWER":return a.default.createElement(L,{clickableElement:P,checkoutUrl:n.href,width:e.width,isOpen:y,setIsOpen:u});case"EMBED":return a.default.createElement("iframe",{src:n.href,width:"100%",height:"100%"});default:return console.error(`Invalid or unimplemented display type: ${r}`),a.default.createElement(a.default.Fragment,null)}},l={overlay:{position:"fixed",top:0,left:0,right:0,bottom:0,margin:0,zIndex:1,overflow:"hidden",display:"flex",visibility:"hidden",opacity:0,transition:"all 0.2s ease"},overlayIsVisible:{visibility:"visible",opacity:1,backdropFilter:"blur(2px)",background:"#0008"},modalOverlay:{alignItems:"center",justifyContent:"center"},drawerOverlay:{justifyContent:"flex-end"},modalDialog:{position:"relative",overflow:"hidden",borderRadius:"8px",visibility:"hidden",opacity:0,top:"5%",transition:"all 0.2s ease"},modalDialogIsVisible:{visibility:"visible",opacity:1,top:0},drawerDialog:{position:"relative",visibility:"hidden",opacity:0,right:"-10%",transition:"all 0.2s ease"},drawerDialogIsVisible:{visibility:"visible",opacity:1,right:0},modalCloseButton:{position:"absolute",top:"0.1em",right:"0.2em",borderRadius:"8px",fontSize:"x-large",padding:"0 0.4em",color:"#888"}},L=({clickableElement:t,checkoutUrl:r,width:e,isOpen:o,setIsOpen:i})=>a.default.createElement(a.default.Fragment,null,a.default.createElement("a",{onClick:()=>i(!0)},t),a.default.createElement("div",{className:"paper-overlay",style:p(p(p({},l.overlay),o?l.overlayIsVisible:{}),l.drawerOverlay)},a.default.createElement("div",{className:"paper-drawer",style:p(p({},l.drawerDialog),o?l.drawerDialogIsVisible:{})},a.default.createElement("button",{onClick:()=>i(!1),style:l.modalCloseButton},"\xD7"),a.default.createElement("iframe",{src:r,width:e,height:"100%"})))),_=({clickableElement:t,checkoutUrl:r,width:e,height:o,isOpen:i,setIsOpen:s})=>a.default.createElement(a.default.Fragment,null,a.default.createElement("a",{onClick:()=>s(!0)},t),a.default.createElement("div",{className:"paper-overlay",style:p(p(p({},l.overlay),i?l.overlayIsVisible:{}),l.modalOverlay)},a.default.createElement("div",{className:"paper-modal",style:p(p({},l.modalDialog),i?l.modalDialogIsVisible:{})},a.default.createElement("button",{onClick:()=>s(!1),style:l.modalCloseButton},"\xD7"),a.default.createElement("iframe",{src:r,width:e,height:o}))));var h=E(require("react"));var z=({checkoutId:t,recipientWalletAddress:r,onSuccess:e,onCancel:o,onError:i})=>{let{chainName:s}=f();return(0,h.useEffect)(()=>{let y=u=>{let n=u.data;console.log("data is ",n),n.eventType==="payWithCardError"?(console.error("Error in Paper SDK PayWithCard",n.error),i&&i({code:n.errorCode})):n.eventType==="payWithCardCancel"?(console.error("Paper SDK PayWithCard cancelled"),o&&o()):n.eventType==="payWithCardSuccess"&&e({id:n.id})};window.addEventListener("message",y)},[]),h.default.createElement(h.default.Fragment,null,t&&r&&s&&h.default.createElement(h.default.Fragment,null,h.default.createElement("iframe",{src:`http://localhost:3000/sdk/v1/pay-with-card?checkoutId=${t}&recipientWalletAddress=${r}&chainName=${s}`})))};var d=E(require("react"));var F=({emailAddress:t,onSuccess:r,onEmailVerificationInitiated:e,onError:o,children:i})=>{let[s,y]=(0,d.useState)(!1),{chainName:u}=f();(0,d.useEffect)(()=>{let P=w=>{let c=w.data;console.log("data is ",c),c.eventType==="verifyEmailEmailVerificationInitiated"?e&&e():c.eventType==="verifyEmailError"?(console.error("Error in Paper SDK VerifyEmail",c.error),o&&o({code:"The email was unable to be verified."})):c.eventType==="verifyEmailSuccess"&&r({emailAddress:c.emailAddress,walletAddress:c.walletAddress})};window.addEventListener("message",P)},[]);let n=()=>{y(!0)};return d.default.createElement(d.default.Fragment,null,t&&s&&d.default.createElement(d.default.Fragment,null,t,d.default.createElement("iframe",{src:`http://localhost:3000/sdk/v1/verify-email?email=${encodeURIComponent(t)}&chainName=${u}`,style:{width:"0px",height:"0px",visibility:"hidden"}})),i?d.default.createElement("a",{onClick:n},i):d.default.createElement("button",{onClick:n},"Verify Email"))};0&&(module.exports={AddPaymentMethod,PaperCheckout,PaperCheckoutDisplay,PaperSDKProvider,PayWithCard,VerifyEmail,usePaperSDKContext});
 //# sourceMappingURL=index.js.map

dist/interfaces/PaperSDKError.d.ts

 export declare type PaperSDKError = {
+    /**
+     * An enum representing the error encountered.
+     * The value is a human-readable, English message describing the error.
+     */
     code: PaperSDKErrorCode;
@@ -3,0 +7,0 @@ };

dist/interfaces/PaperUser.d.ts

 export declare type PaperUser = {
+    /**
+     * The user's email address.
+     * This address is case-insensitive (i.e. different capitalizations map to the same wallet).
+     */
     emailAddress: string;
+    /**
+     * The Paper Wallet address associated with this user's email address.
+     */
     walletAddress: string;
 };

dist/interfaces/PaymentSuccessResult.d.ts

 export interface PaymentSuccessResult {
-    transactionHash: string;
+    /**
+     * A unique ID for this purchase.
+     */
+    id: string;
 }

package.json

 {
   "name": "@paperxyz/react-client-sdk",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.4",
   "description": "Paper.xyz React Client SDK",
@@ -5,0 +5,0 @@ "source": "src/index.ts",

README.md

@@ -1,6 +0,16 @@
-# Paper React SDK
+<p align="center">
+    <br />
+    <a href="https://paper.xyz"><img src="./assets/paper-logo.svg" width="100" alt=""/></a>
+    <br />
+</p>
+<h1 align="center">Paper React SDK</h1>
+<p align="center">
+    <a href="https://www.npmjs.com/package/@paperxyz/react-client-sdk"><img src="https://img.shields.io/github/package-json/v/paperxyz/react-client-sdk?color=red&label=npm&logo=npm" alt="npm version"/></a>
+    <a href="https://discord.com/invite/nqHxSafC"><img alt="Join our Discord!" src="https://img.shields.io/discord/936354866358546453.svg?color=7289da&label=discord&logo=discord&style=flat"/></a>
+</p>
 
-Paper.xyz React SDK (Experimental)
+[Paper](https://paper.xyz) is a developer-first NFT checkout solution that
+easily onboards users without wallets or cryptocurrencies.
 
-https://docs.paper.xyz/react-sdk-experimental/overview
+## [Documentation](https://docs.paper.xyz/react-sdk-experimental/overview)
 
@@ -7,0 +17,0 @@ ## Installation

src/interfaces/PaperSDKError.ts

 export type PaperSDKError = {
+  /**
+   * An enum representing the error encountered.
+   * The value is a human-readable, English message describing the error.
+   */
   code: PaperSDKErrorCode;
@@ -6,6 +10,6 @@ };
 export enum PaperSDKErrorCode {
-  EmailNotVerified = "The email was unable to be verified.",
-  NotEnoughSupply = "There is not enough supply to claim.",
-  AddressNotAllowed = "This address is not on the allowlist.",
-  NoActiveClaimPhase = "There is no active claim phase at the moment.",
+  EmailNotVerified = 'The email was unable to be verified.',
+  NotEnoughSupply = 'There is not enough supply to claim.',
+  AddressNotAllowed = 'This address is not on the allowlist.',
+  NoActiveClaimPhase = 'There is no active claim phase at the moment.',
 }

src/interfaces/PaperUser.ts

 export type PaperUser = {
+  /**
+   * The user's email address.
+   * This address is case-insensitive (i.e. different capitalizations map to the same wallet).
+   */
   emailAddress: string;
+
+  /**
+   * The Paper Wallet address associated with this user's email address.
+   */
   walletAddress: string;
 };

src/interfaces/PaymentSuccessResult.ts

 export interface PaymentSuccessResult {
-  transactionHash: string;
+  /**
+   * A unique ID for this purchase.
+   */
+  id: string;
 }

No alert changes

Improved metrics

Total package byte prevSize

93152

increased by20.76%

Number of package files

28

increased by3.7%

Lines of code

902

increased by45.02%

Number of lines in readme file

28

increased by55.56%

No dependency changes