react-plaid-link - npm Package Compare versions

Comparing version 3.3.2 to 3.4.0-beta.0

CHANGELOG.md

 # Changelog
 
+## 3.4.0-beta.0
+
+- Add `useEthereumProvider` hook for use with Wallet Onboard [#283](https://github.com/plaid/react-plaid-link/pull/283)
+
 ## 3.3.2
 
-- Add `tranfer_status` to `PlaidLinkOnSuccessMetadata` type [#252](https://github.com/plaid/react-plaid-link/pull/252)
+- Add `transfer_status` to `PlaidLinkOnSuccessMetadata` type [#252](https://github.com/plaid/react-plaid-link/pull/252)
 - Allow React 18 in `peerDependencies` [#256](https://github.com/plaid/react-plaid-link/pull/256)
@@ -7,0 +11,0 @@

dist/index.d.ts

@@ -69,6 +69,6 @@ /// <reference types="react" />
 type PlaidLinkOnLoad = () => void;
-interface CommonPlaidLinkOptions {
+interface CommonPlaidLinkOptions<T> {
     // A function that is called when a user has successfully connecter an Item.
     // The function should expect two arguments, the public_key and a metadata object
-    onSuccess: PlaidLinkOnSuccess;
+    onSuccess: T;
     // A callback that is called when a user has specifically exited Link flow
@@ -88,3 +88,3 @@ onExit?: PlaidLinkOnExit;
  */
-type PlaidLinkOptionsWithPublicKey = CommonPlaidLinkOptions & {
+type PlaidLinkOptionsWithPublicKey = CommonPlaidLinkOptions<PlaidLinkOnSuccess> & {
     // The public_key associated with your account; available from
@@ -123,3 +123,3 @@ // the Plaid dashboard (https://dashboard.plaid.com)
 };
-type PlaidLinkOptionsWithLinkToken = CommonPlaidLinkOptions & {
+type PlaidLinkOptionsWithLinkToken = CommonPlaidLinkOptions<PlaidLinkOnSuccess> & {
     // Provide a link_token associated with your account. Create one
@@ -140,8 +140,10 @@ // using the /link/token/create endpoint.
 };
-interface Plaid {
+interface PlaidHandler {
     open: () => void;
     exit: (force?: boolean) => void;
-    create: (config: PlaidLinkOptions) => Plaid;
     destroy: () => void;
 }
+interface Plaid extends PlaidHandler {
+    create: (config: PlaidLinkOptions) => PlaidHandler;
+}
 declare global {
@@ -169,2 +171,2 @@ interface Window {
 declare const PlaidLink: React.FC<PlaidLinkPropTypes>;
-export { usePlaidLink, PlaidLink, PlaidAccount, PlaidInstitution, PlaidLinkError, PlaidLinkOnSuccessMetadata, PlaidLinkOnExitMetadata, PlaidLinkOnEventMetadata, PlaidLinkOnSuccess, PlaidLinkOnExit, PlaidLinkStableEvent, PlaidLinkOnEvent, PlaidLinkOnLoad, PlaidLinkOptionsWithPublicKey, PlaidLinkOptionsWithLinkToken, PlaidLinkOptions, PlaidLinkPropTypes, Plaid };
+export { usePlaidLink, PlaidLink, PlaidAccount, PlaidInstitution, PlaidLinkError, PlaidLinkOnSuccessMetadata, PlaidLinkOnExitMetadata, PlaidLinkOnEventMetadata, PlaidLinkOnSuccess, PlaidLinkOnExit, PlaidLinkStableEvent, PlaidLinkOnEvent, PlaidLinkOnLoad, CommonPlaidLinkOptions, PlaidLinkOptionsWithPublicKey, PlaidLinkOptionsWithLinkToken, PlaidLinkOptions, PlaidLinkPropTypes, PlaidHandler, Plaid };

dist/index.esm.d.ts

@@ -69,6 +69,6 @@ /// <reference types="react" />
 type PlaidLinkOnLoad = () => void;
-interface CommonPlaidLinkOptions {
+interface CommonPlaidLinkOptions<T> {
     // A function that is called when a user has successfully connecter an Item.
     // The function should expect two arguments, the public_key and a metadata object
-    onSuccess: PlaidLinkOnSuccess;
+    onSuccess: T;
     // A callback that is called when a user has specifically exited Link flow
@@ -88,3 +88,3 @@ onExit?: PlaidLinkOnExit;
  */
-type PlaidLinkOptionsWithPublicKey = CommonPlaidLinkOptions & {
+type PlaidLinkOptionsWithPublicKey = CommonPlaidLinkOptions<PlaidLinkOnSuccess> & {
     // The public_key associated with your account; available from
@@ -123,3 +123,3 @@ // the Plaid dashboard (https://dashboard.plaid.com)
 };
-type PlaidLinkOptionsWithLinkToken = CommonPlaidLinkOptions & {
+type PlaidLinkOptionsWithLinkToken = CommonPlaidLinkOptions<PlaidLinkOnSuccess> & {
     // Provide a link_token associated with your account. Create one
@@ -140,8 +140,10 @@ // using the /link/token/create endpoint.
 };
-interface Plaid {
+interface PlaidHandler {
     open: () => void;
     exit: (force?: boolean) => void;
-    create: (config: PlaidLinkOptions) => Plaid;
     destroy: () => void;
 }
+interface Plaid extends PlaidHandler {
+    create: (config: PlaidLinkOptions) => PlaidHandler;
+}
 declare global {
@@ -169,2 +171,2 @@ interface Window {
 declare const PlaidLink: React.FC<PlaidLinkPropTypes>;
-export { usePlaidLink, PlaidLink, PlaidAccount, PlaidInstitution, PlaidLinkError, PlaidLinkOnSuccessMetadata, PlaidLinkOnExitMetadata, PlaidLinkOnEventMetadata, PlaidLinkOnSuccess, PlaidLinkOnExit, PlaidLinkStableEvent, PlaidLinkOnEvent, PlaidLinkOnLoad, PlaidLinkOptionsWithPublicKey, PlaidLinkOptionsWithLinkToken, PlaidLinkOptions, PlaidLinkPropTypes, Plaid };
+export { usePlaidLink, PlaidLink, PlaidAccount, PlaidInstitution, PlaidLinkError, PlaidLinkOnSuccessMetadata, PlaidLinkOnExitMetadata, PlaidLinkOnEventMetadata, PlaidLinkOnSuccess, PlaidLinkOnExit, PlaidLinkStableEvent, PlaidLinkOnEvent, PlaidLinkOnLoad, CommonPlaidLinkOptions, PlaidLinkOptionsWithPublicKey, PlaidLinkOptionsWithLinkToken, PlaidLinkOptions, PlaidLinkPropTypes, PlaidHandler, Plaid };

dist/index.esm.js

@@ -318,3 +318,3 @@ import react, { useState, useEffect } from 'react';
 
-var createPlaid = function createPlaid(options) {
+var createPlaidHandler = function createPlaidHandler(config, creator) {
   var state = {
@@ -330,4 +330,3 @@ plaid: null,
 
-  var config = renameKeyInObject(options, 'publicKey', 'key');
-  state.plaid = window.Plaid.create(_objectSpread2(_objectSpread2({}, config), {}, {
+  state.plaid = creator(_objectSpread2(_objectSpread2({}, config), {}, {
     onExit: function onExit(error, metadata) {
@@ -379,2 +378,6 @@ state.open = false;
 };
+var createPlaid = function createPlaid(options, creator) {
+  var config = renameKeyInObject(options, 'publicKey', 'key');
+  return createPlaidHandler(config, creator);
+};
 
@@ -450,3 +453,3 @@ var PLAID_LINK_STABLE_URL = 'https://cdn.plaid.com/link/v2/stable/link-initialize.js';
       }
-    }));
+    }), window.Plaid.create);
     setPlaid(next); // destroy the Plaid iframe factory
@@ -453,0 +456,0 @@

dist/index.js

@@ -325,3 +325,3 @@ 'use strict';
 
-var createPlaid = function createPlaid(options) {
+var createPlaidHandler = function createPlaidHandler(config, creator) {
   var state = {
@@ -337,4 +337,3 @@ plaid: null,
 
-  var config = renameKeyInObject(options, 'publicKey', 'key');
-  state.plaid = window.Plaid.create(_objectSpread2(_objectSpread2({}, config), {}, {
+  state.plaid = creator(_objectSpread2(_objectSpread2({}, config), {}, {
     onExit: function onExit(error, metadata) {
@@ -386,2 +385,6 @@ state.open = false;
 };
+var createPlaid = function createPlaid(options, creator) {
+  var config = renameKeyInObject(options, 'publicKey', 'key');
+  return createPlaidHandler(config, creator);
+};
 
@@ -457,3 +460,3 @@ var PLAID_LINK_STABLE_URL = 'https://cdn.plaid.com/link/v2/stable/link-initialize.js';
       }
-    }));
+    }), window.Plaid.create);
     setPlaid(next); // destroy the Plaid iframe factory
@@ -460,0 +463,0 @@

dist/index.umd.d.ts

@@ -69,6 +69,6 @@ /// <reference types="react" />
 type PlaidLinkOnLoad = () => void;
-interface CommonPlaidLinkOptions {
+interface CommonPlaidLinkOptions<T> {
     // A function that is called when a user has successfully connecter an Item.
     // The function should expect two arguments, the public_key and a metadata object
-    onSuccess: PlaidLinkOnSuccess;
+    onSuccess: T;
     // A callback that is called when a user has specifically exited Link flow
@@ -88,3 +88,3 @@ onExit?: PlaidLinkOnExit;
  */
-type PlaidLinkOptionsWithPublicKey = CommonPlaidLinkOptions & {
+type PlaidLinkOptionsWithPublicKey = CommonPlaidLinkOptions<PlaidLinkOnSuccess> & {
     // The public_key associated with your account; available from
@@ -123,3 +123,3 @@ // the Plaid dashboard (https://dashboard.plaid.com)
 };
-type PlaidLinkOptionsWithLinkToken = CommonPlaidLinkOptions & {
+type PlaidLinkOptionsWithLinkToken = CommonPlaidLinkOptions<PlaidLinkOnSuccess> & {
     // Provide a link_token associated with your account. Create one
@@ -140,8 +140,10 @@ // using the /link/token/create endpoint.
 };
-interface Plaid {
+interface PlaidHandler {
     open: () => void;
     exit: (force?: boolean) => void;
-    create: (config: PlaidLinkOptions) => Plaid;
     destroy: () => void;
 }
+interface Plaid extends PlaidHandler {
+    create: (config: PlaidLinkOptions) => PlaidHandler;
+}
 declare global {
@@ -169,2 +171,2 @@ interface Window {
 declare const PlaidLink: React.FC<PlaidLinkPropTypes>;
-export { usePlaidLink, PlaidLink, PlaidAccount, PlaidInstitution, PlaidLinkError, PlaidLinkOnSuccessMetadata, PlaidLinkOnExitMetadata, PlaidLinkOnEventMetadata, PlaidLinkOnSuccess, PlaidLinkOnExit, PlaidLinkStableEvent, PlaidLinkOnEvent, PlaidLinkOnLoad, PlaidLinkOptionsWithPublicKey, PlaidLinkOptionsWithLinkToken, PlaidLinkOptions, PlaidLinkPropTypes, Plaid };
+export { usePlaidLink, PlaidLink, PlaidAccount, PlaidInstitution, PlaidLinkError, PlaidLinkOnSuccessMetadata, PlaidLinkOnExitMetadata, PlaidLinkOnEventMetadata, PlaidLinkOnSuccess, PlaidLinkOnExit, PlaidLinkStableEvent, PlaidLinkOnEvent, PlaidLinkOnLoad, CommonPlaidLinkOptions, PlaidLinkOptionsWithPublicKey, PlaidLinkOptionsWithLinkToken, PlaidLinkOptions, PlaidLinkPropTypes, PlaidHandler, Plaid };

dist/index.umd.js

@@ -324,3 +324,3 @@ (function (global, factory) {
 
-  var createPlaid = function createPlaid(options) {
+  var createPlaidHandler = function createPlaidHandler(config, creator) {
     var state = {
@@ -336,4 +336,3 @@ plaid: null,
 
-    var config = renameKeyInObject(options, 'publicKey', 'key');
-    state.plaid = window.Plaid.create(_objectSpread2(_objectSpread2({}, config), {}, {
+    state.plaid = creator(_objectSpread2(_objectSpread2({}, config), {}, {
       onExit: function onExit(error, metadata) {
@@ -385,2 +384,6 @@ state.open = false;
   };
+  var createPlaid = function createPlaid(options, creator) {
+    var config = renameKeyInObject(options, 'publicKey', 'key');
+    return createPlaidHandler(config, creator);
+  };
 
@@ -456,3 +459,3 @@ var PLAID_LINK_STABLE_URL = 'https://cdn.plaid.com/link/v2/stable/link-initialize.js';
         }
-      }));
+      }), window.Plaid.create);
       setPlaid(next); // destroy the Plaid iframe factory
@@ -459,0 +462,0 @@

dist/index.umd.min.d.ts

@@ -69,6 +69,6 @@ /// <reference types="react" />
 type PlaidLinkOnLoad = () => void;
-interface CommonPlaidLinkOptions {
+interface CommonPlaidLinkOptions<T> {
     // A function that is called when a user has successfully connecter an Item.
     // The function should expect two arguments, the public_key and a metadata object
-    onSuccess: PlaidLinkOnSuccess;
+    onSuccess: T;
     // A callback that is called when a user has specifically exited Link flow
@@ -88,3 +88,3 @@ onExit?: PlaidLinkOnExit;
  */
-type PlaidLinkOptionsWithPublicKey = CommonPlaidLinkOptions & {
+type PlaidLinkOptionsWithPublicKey = CommonPlaidLinkOptions<PlaidLinkOnSuccess> & {
     // The public_key associated with your account; available from
@@ -123,3 +123,3 @@ // the Plaid dashboard (https://dashboard.plaid.com)
 };
-type PlaidLinkOptionsWithLinkToken = CommonPlaidLinkOptions & {
+type PlaidLinkOptionsWithLinkToken = CommonPlaidLinkOptions<PlaidLinkOnSuccess> & {
     // Provide a link_token associated with your account. Create one
@@ -140,8 +140,10 @@ // using the /link/token/create endpoint.
 };
-interface Plaid {
+interface PlaidHandler {
     open: () => void;
     exit: (force?: boolean) => void;
-    create: (config: PlaidLinkOptions) => Plaid;
     destroy: () => void;
 }
+interface Plaid extends PlaidHandler {
+    create: (config: PlaidLinkOptions) => PlaidHandler;
+}
 declare global {
@@ -169,2 +171,2 @@ interface Window {
 declare const PlaidLink: React.FC<PlaidLinkPropTypes>;
-export { usePlaidLink, PlaidLink, PlaidAccount, PlaidInstitution, PlaidLinkError, PlaidLinkOnSuccessMetadata, PlaidLinkOnExitMetadata, PlaidLinkOnEventMetadata, PlaidLinkOnSuccess, PlaidLinkOnExit, PlaidLinkStableEvent, PlaidLinkOnEvent, PlaidLinkOnLoad, PlaidLinkOptionsWithPublicKey, PlaidLinkOptionsWithLinkToken, PlaidLinkOptions, PlaidLinkPropTypes, Plaid };
+export { usePlaidLink, PlaidLink, PlaidAccount, PlaidInstitution, PlaidLinkError, PlaidLinkOnSuccessMetadata, PlaidLinkOnExitMetadata, PlaidLinkOnEventMetadata, PlaidLinkOnSuccess, PlaidLinkOnExit, PlaidLinkStableEvent, PlaidLinkOnEvent, PlaidLinkOnLoad, CommonPlaidLinkOptions, PlaidLinkOptionsWithPublicKey, PlaidLinkOptionsWithLinkToken, PlaidLinkOptions, PlaidLinkPropTypes, PlaidHandler, Plaid };

dist/index.umd.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).PlaidLink={},e.React)}(this,(function(e,t){"use strict";var n="default"in t?t.default:t;function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,i=[],l=!0,a=!1;try{for(n=n.call(e);!(l=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);l=!0);}catch(e){a=!0,o=e}finally{try{l||null==n.return||n.return()}finally{if(a)throw o}}return i}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return u(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var c="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function d(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function f(e,t){return e(t={exports:{}},t.exports),t.exports}var s=f((function(e,t){var r=c&&c.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.scripts=void 0,t.scripts={};var o=function(e){var n=document.querySelector('script[src="'+e+'"]');if(n)return t.scripts[e]={loading:!1,error:null,scriptEl:n}};t.default=function(e){var l=e.src,a=e.checkForExisting,u=void 0!==a&&a,c=r(e,["src","checkForExisting"]),d=l?t.scripts[l]:void 0;!d&&u&&l&&i&&(d=o(l));var f=(0,n.useState)(d?d.loading:Boolean(l)),s=f[0],p=f[1],y=(0,n.useState)(d?d.error:null),b=y[0],v=y[1];return(0,n.useEffect)((function(){if(i&&l&&s&&!b){var e;!(d=t.scripts[l])&&u&&(d=o(l)),d?e=d.scriptEl:((e=document.createElement("script")).src=l,Object.keys(c).forEach((function(t){void 0===e[t]?e.setAttribute(t,c[t]):e[t]=c[t]})),d=t.scripts[l]={loading:!0,error:null,scriptEl:e});var n=function(){d&&(d.loading=!1),p(!1)},r=function(e){d&&(d.error=e),v(e)};return e.addEventListener("load",n),e.addEventListener("error",r),document.body.appendChild(e),function(){e.removeEventListener("load",n),e.removeEventListener("error",r)}}}),[l]),[s,b]};var i="undefined"!=typeof window&&void 0!==window.document}));d(s);s.scripts;var p,y=f((function(e,t){var n=c&&c.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.scripts=t.default=void 0,Object.defineProperty(t,"default",{enumerable:!0,get:function(){return n(s).default}}),Object.defineProperty(t,"scripts",{enumerable:!0,get:function(){return s.scripts}})})),b=d(y),v=(y.scripts,function(e){var t={plaid:null,open:!1,onExitCallback:null};if("undefined"==typeof window||!window.Plaid)throw new Error("Plaid not loaded");var n,r,l,a,u=(n=e,r="publicKey",l="key",a={},delete Object.assign(a,n,i({},l,n[r]))[r],a);t.plaid=window.Plaid.create(o(o({},u),{},{onExit:function(e,n){t.open=!1,u.onExit&&u.onExit(e,n),t.onExitCallback&&t.onExitCallback()}}));return{open:function(){t.plaid&&(t.open=!0,t.onExitCallback=null,t.plaid.open())},exit:function(e,n){t.open&&t.plaid?(t.onExitCallback=n,t.plaid.exit(e),e&&e.force&&(t.open=!1)):n&&n()},destroy:function(){t.plaid&&(t.plaid.destroy(),t.plaid=null)}}}),O=function(){},E=function(e){var n=a(b({src:"https://cdn.plaid.com/link/v2/stable/link-initialize.js",checkForExisting:!0}),2),r=n[0],i=n[1],l=a(t.useState(null),2),u=l[0],c=l[1],d=a(t.useState(!1),2),f=d[0],s=d[1],p=(e.product||[]).slice().sort().join(",");t.useEffect((function(){if(!r&&(e.token||e.publicKey)){if(!i&&window.Plaid){null!=u&&u.exit({force:!0},(function(){return u.destroy()}));var t=v(o(o({},e),{},{onLoad:function(){s(!0),e.onLoad&&e.onLoad()}}));return c(t),function(){return t.exit({force:!0},(function(){return t.destroy()}))}}console.error("Error loading Plaid",i)}}),[r,i,e.publicKey,e.token,p]);return{error:i,ready:null!=u&&(!r||f),exit:u?u.exit:O,open:u?u.open:function(){e.token||console.warn("react-plaid-link: You cannot call open() without a valid token supplied to usePlaidLink. This is a no-op.")}}},g=["children","style","className"],m=function(e){var t=e.children,r=e.style,i=e.className,a=l(e,g),u=E(o({},a)),c=u.error,d=u.open;return n.createElement("button",{disabled:Boolean(c),type:"button",className:i,style:o({padding:"6px 4px",outline:"none",background:"#FFFFFF",border:"2px solid #F1F1F1",borderRadius:"4px"},r),onClick:function(){return d()}},t)};m.displayName="PlaidLink",(p=e.PlaidLinkStableEvent||(e.PlaidLinkStableEvent={})).OPEN="OPEN",p.EXIT="EXIT",p.HANDOFF="HANDOFF",p.SELECT_INSTITUTION="SELECT_INSTITUTION",p.ERROR="ERROR",e.PlaidLink=m,e.usePlaidLink=E,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).PlaidLink={},e.React)}(this,(function(e,t){"use strict";var n="default"in t?t.default:t;function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,i=[],l=!0,a=!1;try{for(n=n.call(e);!(l=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);l=!0);}catch(e){a=!0,o=e}finally{try{l||null==n.return||n.return()}finally{if(a)throw o}}return i}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return u(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var c="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function f(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function d(e,t){return e(t={exports:{}},t.exports),t.exports}var s=d((function(e,t){var r=c&&c.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.scripts=void 0,t.scripts={};var o=function(e){var n=document.querySelector('script[src="'+e+'"]');if(n)return t.scripts[e]={loading:!1,error:null,scriptEl:n}};t.default=function(e){var l=e.src,a=e.checkForExisting,u=void 0!==a&&a,c=r(e,["src","checkForExisting"]),f=l?t.scripts[l]:void 0;!f&&u&&l&&i&&(f=o(l));var d=(0,n.useState)(f?f.loading:Boolean(l)),s=d[0],p=d[1],y=(0,n.useState)(f?f.error:null),b=y[0],v=y[1];return(0,n.useEffect)((function(){if(i&&l&&s&&!b){var e;!(f=t.scripts[l])&&u&&(f=o(l)),f?e=f.scriptEl:((e=document.createElement("script")).src=l,Object.keys(c).forEach((function(t){void 0===e[t]?e.setAttribute(t,c[t]):e[t]=c[t]})),f=t.scripts[l]={loading:!0,error:null,scriptEl:e});var n=function(){f&&(f.loading=!1),p(!1)},r=function(e){f&&(f.error=e),v(e)};return e.addEventListener("load",n),e.addEventListener("error",r),document.body.appendChild(e),function(){e.removeEventListener("load",n),e.removeEventListener("error",r)}}}),[l]),[s,b]};var i="undefined"!=typeof window&&void 0!==window.document}));f(s);s.scripts;var p,y=d((function(e,t){var n=c&&c.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.scripts=t.default=void 0,Object.defineProperty(t,"default",{enumerable:!0,get:function(){return n(s).default}}),Object.defineProperty(t,"scripts",{enumerable:!0,get:function(){return s.scripts}})})),b=f(y),v=(y.scripts,function(e,t){var n,r,l,a;return function(e,t){var n={plaid:null,open:!1,onExitCallback:null};if("undefined"==typeof window||!window.Plaid)throw new Error("Plaid not loaded");n.plaid=t(o(o({},e),{},{onExit:function(t,r){n.open=!1,e.onExit&&e.onExit(t,r),n.onExitCallback&&n.onExitCallback()}}));return{open:function(){n.plaid&&(n.open=!0,n.onExitCallback=null,n.plaid.open())},exit:function(e,t){n.open&&n.plaid?(n.onExitCallback=t,n.plaid.exit(e),e&&e.force&&(n.open=!1)):t&&t()},destroy:function(){n.plaid&&(n.plaid.destroy(),n.plaid=null)}}}((n=e,r="publicKey",l="key",a={},delete Object.assign(a,n,i({},l,n[r]))[r],a),t)}),O=function(){},E=function(e){var n=a(b({src:"https://cdn.plaid.com/link/v2/stable/link-initialize.js",checkForExisting:!0}),2),r=n[0],i=n[1],l=a(t.useState(null),2),u=l[0],c=l[1],f=a(t.useState(!1),2),d=f[0],s=f[1],p=(e.product||[]).slice().sort().join(",");t.useEffect((function(){if(!r&&(e.token||e.publicKey)){if(!i&&window.Plaid){null!=u&&u.exit({force:!0},(function(){return u.destroy()}));var t=v(o(o({},e),{},{onLoad:function(){s(!0),e.onLoad&&e.onLoad()}}),window.Plaid.create);return c(t),function(){return t.exit({force:!0},(function(){return t.destroy()}))}}console.error("Error loading Plaid",i)}}),[r,i,e.publicKey,e.token,p]);return{error:i,ready:null!=u&&(!r||d),exit:u?u.exit:O,open:u?u.open:function(){e.token||console.warn("react-plaid-link: You cannot call open() without a valid token supplied to usePlaidLink. This is a no-op.")}}},g=["children","style","className"],m=function(e){var t=e.children,r=e.style,i=e.className,a=l(e,g),u=E(o({},a)),c=u.error,f=u.open;return n.createElement("button",{disabled:Boolean(c),type:"button",className:i,style:o({padding:"6px 4px",outline:"none",background:"#FFFFFF",border:"2px solid #F1F1F1",borderRadius:"4px"},r),onClick:function(){return f()}},t)};m.displayName="PlaidLink",(p=e.PlaidLinkStableEvent||(e.PlaidLinkStableEvent={})).OPEN="OPEN",p.EXIT="EXIT",p.HANDOFF="HANDOFF",p.SELECT_INSTITUTION="SELECT_INSTITUTION",p.ERROR="ERROR",e.PlaidLink=m,e.usePlaidLink=E,Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "react-plaid-link",
-  "version": "3.3.2",
+  "version": "3.4.0-beta.0",
   "description": "A React component for Plaid Link",
@@ -8,2 +8,3 @@ "registry": "https://registry.npmjs.org",
     "dist",
+    "web3",
     "src",
@@ -106,3 +107,3 @@ "LICENSE"
     "typescript": "^3.8.3",
-    "xyz": "0.5.x"
+    "xyz": "^4.0.x"
   },
@@ -109,0 +110,0 @@ "tags": [

README.md

@@ -123,2 +123,65 @@ # react-plaid-link [![npm version](https://badge.fury.io/js/react-plaid-link.svg)](http://badge.fury.io/js/react-plaid-link)
 
+### Usage with Wallet Onboard
+
+Plaid [Wallet Onboard](https://plaid.com/wallet-onboard/) uses similar patterns. See the [Wallet Onboard docs](https://plaid.com/docs/wallet-onboard/) for a holistic understanding on configuration and usage.
+
+ℹ️ See a full source code example of using hooks with Wallet Onboard:
+
+- [examples/web3.tsx](examples/web3.tsx): minimal example of using hooks
+- [src/types/web3.ts][types] for exported types.
+
+```tsx
+import { useEthereumProvider } from 'react-plaid-link/web3';
+
+// ...
+
+const onSuccess = useCallback(
+  async provider => {
+    const accounts = await provider.request({
+      method: 'eth_accounts',
+    });
+    setAccounts(accounts);
+  },
+  [setAccounts]
+);
+
+const { open, ready } = useEthereumProvider({
+  token:
+    'https://plaid.com/docs/wallet-onboard/add-to-app/#enable-wallet-onboard-and-retrieve-a-link-token',
+  chain: {
+    chainId: '0x1',
+    rpcUrl: '',
+  },
+  onSuccess,
+});
+
+return (
+  <button onClick={() => open()} disabled={!ready}>
+    Connect wallet
+  </button>
+);
+```
+
+#### `useEthereumProvider` arguments
+
+| key                   | type                                                                         |
+| --------------------- | ---------------------------------------------------------------------------- |
+| `token`               | `string \| null`                                                             |
+| `chain`               | `ChainOption`                                                                |
+| `onSuccess`           | `(provider: EIP1193Provider) => void`                                        |
+| `onExit`              | `(error: null \| PlaidLinkError, metadata: PlaidLinkOnExitMetadata) => void` |
+| `onLoad`              | `() => void`                                                                 |
+| `receivedRedirectUri` | `string \| null \| undefined`                                                |
+
+#### `useEthereumProvider` return value
+
+| key                          | type                                                                          |
+| ---------------------------- | ----------------------------------------------------------------------------- |
+| `open`                       | `() => void`                                                                  |
+| `ready`                      | `boolean`                                                                     |
+| `error`                      | `ErrorEvent \| null`                                                          |
+| `getCurrentEthereumProvider` | `(chainOption: ChainOption) => Promise<EIP1193Provider \| null \| undefined>` |
+| `isProviderActive`           | `(provider: EIP1193Provider) => Promise<boolean>`                             |
+| `disconnectEthereumProvider` | `(provider: EIP1193Provider) => Promise<void>`                                |
+
 ## Using the pre-built component instead of the usePlaidLink hook
@@ -125,0 +188,0 @@

src/factory.ts

@@ -1,3 +0,9 @@
-import { PlaidLinkOptions, Plaid } from './types';
+import {
+  PlaidLinkOptions,
+  PlaidHandler,
+  CommonPlaidLinkOptions,
+} from './types';
 
+import { EthereumOnboardingOptions } from './types/web3';
+
 export interface PlaidFactory {
@@ -10,3 +16,3 @@ open: Function;
 interface FactoryInternalState {
-  plaid: Plaid | null;
+  plaid: PlaidHandler | null;
   open: boolean;
@@ -29,3 +35,6 @@ onExitCallback: Function | null;
  */
-export const createPlaid = (options: PlaidLinkOptions) => {
+const createPlaidHandler = <T extends CommonPlaidLinkOptions<{}>>(
+  config: T,
+  creator: (config: T) => PlaidHandler
+) => {
   const state: FactoryInternalState = {
@@ -42,9 +51,3 @@ plaid: null,
 
-  const config = renameKeyInObject(
-    options,
-    'publicKey',
-    'key'
-  ) as PlaidLinkOptions;
-
-  state.plaid = window.Plaid.create({
+  state.plaid = creator({
     ...config,
@@ -94,1 +97,21 @@ onExit: (error, metadata) => {
 };
+
+export const createWeb3Plaid = (
+  options: EthereumOnboardingOptions,
+  creator: (options: EthereumOnboardingOptions) => PlaidHandler
+) => {
+  return createPlaidHandler(options, creator);
+};
+
+export const createPlaid = (
+  options: PlaidLinkOptions,
+  creator: (options: PlaidLinkOptions) => PlaidHandler
+) => {
+  const config = renameKeyInObject(
+    options,
+    'publicKey',
+    'key'
+  ) as PlaidLinkOptions;
+
+  return createPlaidHandler(config, creator);
+};

src/types/index.ts

@@ -88,6 +88,6 @@ import React from 'react';
 
-interface CommonPlaidLinkOptions {
+export interface CommonPlaidLinkOptions<T> {
   // A function that is called when a user has successfully connecter an Item.
   // The function should expect two arguments, the public_key and a metadata object
-  onSuccess: PlaidLinkOnSuccess;
+  onSuccess: T;
   // A callback that is called when a user has specifically exited Link flow
@@ -108,3 +108,5 @@ onExit?: PlaidLinkOnExit;
  */
-export type PlaidLinkOptionsWithPublicKey = CommonPlaidLinkOptions & {
+export type PlaidLinkOptionsWithPublicKey = CommonPlaidLinkOptions<
+  PlaidLinkOnSuccess
+> & {
   // The public_key associated with your account; available from
@@ -142,3 +144,5 @@ // the Plaid dashboard (https://dashboard.plaid.com)
 
-export type PlaidLinkOptionsWithLinkToken = CommonPlaidLinkOptions & {
+export type PlaidLinkOptionsWithLinkToken = CommonPlaidLinkOptions<
+  PlaidLinkOnSuccess
+> & {
   // Provide a link_token associated with your account. Create one
@@ -164,9 +168,12 @@ // using the /link/token/create endpoint.
 
-export interface Plaid {
+export interface PlaidHandler {
   open: () => void;
   exit: (force?: boolean) => void;
-  create: (config: PlaidLinkOptions) => Plaid;
   destroy: () => void;
 }
 
+export interface Plaid extends PlaidHandler {
+  create: (config: PlaidLinkOptions) => PlaidHandler;
+}
+
 declare global {
@@ -173,0 +180,0 @@ interface Window {

src/usePlaidLink.ts

@@ -63,9 +63,12 @@ import { useEffect, useState } from 'react';
 
-    const next = createPlaid({
-      ...options,
-      onLoad: () => {
-        setIframeLoaded(true);
-        options.onLoad && options.onLoad();
+    const next = createPlaid(
+      {
+        ...options,
+        onLoad: () => {
+          setIframeLoaded(true);
+          options.onLoad && options.onLoad();
+        },
       },
-    });
+      window.Plaid.create
+    );
 
@@ -72,0 +75,0 @@ setPlaid(next);

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

166131

increased by56.26%

Number of package files

27

increased by50%

Lines of code

3930

increased by63.75%

Number of lines in readme file

220

increased by40.13%

Worsened metrics

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes