@reef-knot/core-react 1.8.0 → 2.0.0

package/dist/_virtual/_tslib.js

@@ -0,0 +1,31 @@
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+export { __awaiter };

package/dist/components/AutoConnect.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Chain } from 'wagmi';
+import type { WalletAdapterData } from '@reef-knot/types';
+export declare const AutoConnect: ({ children, autoConnect, walletDataList, chains, }: {
+    children: React.ReactNode;
+    autoConnect: boolean;
+    walletDataList: WalletAdapterData[];
+    chains: Chain[];
+}) => React.JSX.Element;
+//# sourceMappingURL=AutoConnect.d.ts.map

package/dist/components/AutoConnect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoConnect.d.ts","sourceRoot":"","sources":["../../src/components/AutoConnect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAG1D,eAAO,MAAM,WAAW;cAMZ,MAAM,SAAS;iBACZ,OAAO;oBACJ,iBAAiB,EAAE;YAC3B,KAAK,EAAE;uBAKhB,CAAC"}

package/dist/components/AutoConnect.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useAutoConnect } from '../hooks/useAutoConnect.js';
+
+const AutoConnect = ({
+  children,
+  autoConnect,
+  walletDataList,
+  chains
+}) => {
+  useAutoConnect(autoConnect, walletDataList, chains);
+  return React.createElement(React.Fragment, null, children);
+};
+
+export { AutoConnect };

package/dist/context/acceptTermsModal.d.ts

@@ -1,14 +1,17 @@
-import React, { FC } from 'react';
+import React from 'react';
+export type AcceptTermsModal = {
+    isVisible: boolean;
+    setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+    onContinue: () => void;
+    setOnContinue: React.Dispatch<React.SetStateAction<() => void>>;
+    error?: Error;
+    setError: React.Dispatch<React.SetStateAction<Error | undefined>>;
+};
 export type AcceptTermsModalContextValue = {
-    acceptTermsModal: {
-        isVisible: boolean;
-        setVisible: React.Dispatch<React.SetStateAction<boolean>>;
-        onContinue: () => void;
-        setOnContinue: React.Dispatch<React.SetStateAction<() => void>>;
-        error?: Error;
-        setError: React.Dispatch<React.SetStateAction<Error | undefined>>;
-    };
+    acceptTermsModal: AcceptTermsModal;
 };
 export declare const AcceptTermsModalContext: React.Context<AcceptTermsModalContextValue>;
-export declare const AcceptTermsModalContextProvider: FC;
+export declare const AcceptTermsModalContextProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
 //# sourceMappingURL=acceptTermsModal.d.ts.map

package/dist/context/acceptTermsModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"acceptTermsModal.d.ts","sourceRoot":"","sources":["../../src/context/acceptTermsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,EAAE,EAAqB,MAAM,OAAO,CAAC;AAEpE,MAAM,MAAM,4BAA4B,GAAG;IACzC,gBAAgB,EAAE;QAChB,SAAS,EAAE,OAAO,CAAC;QACnB,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;QAC1D,UAAU,EAAE,MAAM,IAAI,CAAC;QACvB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC;QAChE,KAAK,CAAC,EAAE,KAAK,CAAC;QACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC;KACnE,CAAC;CACH,CAAC;AAKF,eAAO,MAAM,uBAAuB,6CAKF,CAAC;AAEnC,eAAO,MAAM,+BAA+B,EAAE,EA8B7C,CAAC"}
+{"version":3,"file":"acceptTermsModal.d.ts","sourceRoot":"","sources":["../../src/context/acceptTermsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1D,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC;IAChE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC;CACnE,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG;IACzC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC,CAAC;AAKF,eAAO,MAAM,uBAAuB,6CAKF,CAAC;AAEnC,eAAO,MAAM,+BAA+B;cAGhC,MAAM,SAAS;uBA+B1B,CAAC"}

package/dist/context/reefKnot.d.ts

@@ -1,11 +1,13 @@
-import React, { FC } from 'react';
+import React, { FC, ReactNode } from 'react';
 import { WalletAdapterData } from '@reef-knot/types';
 import { Chain } from 'wagmi/chains';
 export interface ReefKnotContextProps {
     rpc: Record<number, string>;
     walletconnectProjectId?: string;
     chains: Chain[];
-    defaultChain?: Chain;
+    defaultChain: Chain;
+    autoConnect?: boolean;
+    children?: ReactNode;
 }
 export type ReefKnotContextValue = {
     rpc: Record<number, string>;

package/dist/context/reefKnot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reefKnot.d.ts","sourceRoot":"","sources":["../../src/context/reefKnot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,EAAE,EAAW,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAKrC,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,cAAc,EAAE,iBAAiB,EAAE,CAAC;IACpC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,eAAe,qCAA4C,CAAC;AAEzE,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,oBAAoB,CA8B7C,CAAC"}
+{"version":3,"file":"reefKnot.d.ts","sourceRoot":"","sources":["../../src/context/reefKnot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,EAAE,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAMrC,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,YAAY,EAAE,KAAK,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,cAAc,EAAE,iBAAiB,EAAE,CAAC;IACpC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,eAAe,qCAA4C,CAAC;AAEzE,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,oBAAoB,CAuC7C,CAAC"}

package/dist/context/reefKnot.js

@@ -2,6 +2,7 @@ import React, { createContext, useMemo } from 'react';
 import { WCWarnBannerContextProvider } from '@reef-knot/ui-react';
 import { getWalletDataList } from '../walletData/index.js';
 import { AcceptTermsModalContextProvider } from './acceptTermsModal.js';
+import { AutoConnect } from '../components/AutoConnect.js';
 
 const ReefKnotContext = createContext({});
 const ReefKnot = ({
@@ -9,6 +10,7 @@ const ReefKnot = ({
   walletconnectProjectId,
   chains,
   defaultChain,
+  autoConnect = true,
   children
 }) => {
   const walletDataList = getWalletDataList({
@@ -24,7 +26,11 @@ const ReefKnot = ({
   }), [rpc, walletDataList, chains]);
   return React.createElement(ReefKnotContext.Provider, {
     value: contextValue
-  }, React.createElement(AcceptTermsModalContextProvider, null, React.createElement(WCWarnBannerContextProvider, null, children)));
+  }, React.createElement(AcceptTermsModalContextProvider, null, React.createElement(WCWarnBannerContextProvider, null, React.createElement(AutoConnect, {
+    autoConnect: autoConnect,
+    walletDataList: walletDataList,
+    chains: chains
+  }, children))));
 };
 
 export { ReefKnot, ReefKnotContext };

package/dist/helpers/checkTermsAccepted.d.ts

@@ -0,0 +1,2 @@
+export declare const checkTermsAccepted: () => boolean;
+//# sourceMappingURL=checkTermsAccepted.d.ts.map

package/dist/helpers/checkTermsAccepted.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkTermsAccepted.d.ts","sourceRoot":"","sources":["../../src/helpers/checkTermsAccepted.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,eAK9B,CAAC"}

package/dist/helpers/checkTermsAccepted.js

@@ -0,0 +1,11 @@
+import { LS_KEY_TERMS_ACCEPTANCE } from '../constants/localStorage.js';
+
+const checkTermsAccepted = () => {
+  var _a;
+  if (typeof window !== 'undefined') {
+    return ((_a = window.localStorage) === null || _a === void 0 ? void 0 : _a.getItem(LS_KEY_TERMS_ACCEPTANCE)) === 'true';
+  }
+  return false;
+};
+
+export { checkTermsAccepted };

package/dist/helpers/getUnsupportedChainError.d.ts

@@ -0,0 +1,3 @@
+import { Chain } from 'wagmi/chains';
+export declare const getUnsupportedChainError: (supportedChains: Chain[]) => Error;
+//# sourceMappingURL=getUnsupportedChainError.d.ts.map

package/dist/helpers/getUnsupportedChainError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getUnsupportedChainError.d.ts","sourceRoot":"","sources":["../../src/helpers/getUnsupportedChainError.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAErC,eAAO,MAAM,wBAAwB,oBAAqB,KAAK,EAAE,UAahE,CAAC"}

package/dist/helpers/getUnsupportedChainError.js

@@ -0,0 +1,13 @@
+const getUnsupportedChainError = supportedChains => {
+  // Get names of supported chains to suggest them in case of "unsupported network" error
+  const supportedChainsNames = (() => {
+    const chains = supportedChains.map(({
+      name
+    }) => name).filter(chainName => chainName !== 'unknown');
+    const lastChain = chains.pop();
+    return [chains.join(', '), lastChain].filter(chain => chain).join(' or ');
+  })();
+  return new Error(`Unsupported chain. Please switch to ${supportedChainsNames} in your wallet.`);
+};
+
+export { getUnsupportedChainError };

package/dist/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useReefKnotContext';
+export * from './useAutoConnect';
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC"}

package/dist/hooks/useAutoConnect.d.ts

@@ -0,0 +1,4 @@
+import { Chain } from 'wagmi';
+import { WalletAdapterData } from '@reef-knot/types';
+export declare const useAutoConnect: (autoConnectEnabled: boolean, walletDataList: WalletAdapterData[], chains: Chain[]) => void;
+//# sourceMappingURL=useAutoConnect.d.ts.map

package/dist/hooks/useAutoConnect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutoConnect.d.ts","sourceRoot":"","sources":["../../src/hooks/useAutoConnect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AA+FrD,eAAO,MAAM,cAAc,uBACL,OAAO,kBACX,iBAAiB,EAAE,UAC3B,KAAK,EAAE,SA0ChB,CAAC"}

package/dist/hooks/useAutoConnect.js

@@ -0,0 +1,115 @@
+import { __awaiter } from '../_virtual/_tslib.js';
+import { useClient, useAccount } from 'wagmi';
+import { connect, disconnect } from 'wagmi/actions';
+import { useRef, useContext, useEffect } from 'react';
+import { AcceptTermsModalContext } from '../context/acceptTermsModal.js';
+import { getUnsupportedChainError } from '../helpers/getUnsupportedChainError.js';
+import { checkTermsAccepted } from '../helpers/checkTermsAccepted.js';
+
+const connectAndHandleErrors = (connector, supportedChains, acceptTermsModal) => __awaiter(void 0, void 0, void 0, function* () {
+  var _a, _b, _c, _d;
+  let connectResult = null;
+  let connectError;
+  try {
+    connectResult = yield connect({
+      connector
+    });
+  } catch (e) {
+    connectResult = null; // ensure that connectResult is empty in case of an error
+    connectError = e;
+  }
+  if (connectResult === null || connectResult === void 0 ? void 0 : connectResult.chain.unsupported) {
+    // No errors during connection, but the chain is unsupported.
+    // This case is considered as error for now, and we explicitly call disconnect() here.
+    // This logic comes from previously used web3-react connection logic, which wasn't reworked yet after web3-react removal.
+    // web3-react logic was: if a chain is unsupported – break the connection, throw an error
+    // wagmi logic is: if a chain is unsupported – connect anyway, without errors, set `chain.unsupported` flag to true.
+    // So, here we are trying to mimic the legacy logic, because we are not ready to rework it yet.
+    connectResult = null;
+    connectError = getUnsupportedChainError(supportedChains);
+    yield disconnect();
+    // A user may change a chain in a wallet app, prepare for that event.
+    // There is a strong recommendation in the MetaMask documentation
+    // to reload the page upon chain changes, unless there is a good reason not to.
+    // This looks like a good general approach.
+    const provider = yield connector.getProvider();
+    provider.once('chainChanged', () => {
+      var _a;
+      return (_a = globalThis.window) === null || _a === void 0 ? void 0 : _a.location.reload();
+    });
+  }
+  if (connectError) {
+    (_a = acceptTermsModal.setError) === null || _a === void 0 ? void 0 : _a.call(acceptTermsModal, connectError);
+    (_b = acceptTermsModal.setVisible) === null || _b === void 0 ? void 0 : _b.call(acceptTermsModal, true);
+  } else {
+    (_c = acceptTermsModal.setVisible) === null || _c === void 0 ? void 0 : _c.call(acceptTermsModal, false);
+    (_d = acceptTermsModal.setError) === null || _d === void 0 ? void 0 : _d.call(acceptTermsModal, undefined);
+  }
+  return {
+    connectResult,
+    connectError
+  };
+});
+const connectEagerly = (adapters, acceptTermsModal, supportedChains) => __awaiter(void 0, void 0, void 0, function* () {
+  var _e, _f, _g;
+  const isTermsAccepted = checkTermsAccepted();
+  let connectResult = null;
+  let connectError;
+  const continueConnection = connector => __awaiter(void 0, void 0, void 0, function* () {
+    ({
+      connectResult,
+      connectError
+    } = yield connectAndHandleErrors(connector, supportedChains, acceptTermsModal));
+  });
+  for (const adapter of adapters) {
+    if ((_e = adapter.detector) === null || _e === void 0 ? void 0 : _e.call(adapter)) {
+      // wallet is detected
+      if (!isTermsAccepted) {
+        // Terms of service were not accepted previously.
+        // So, for legal reasons, we must ask a user to accept the terms before connecting.
+        const onContinue = () => void continueConnection(adapter.connector);
+        (_f = acceptTermsModal.setOnContinue) === null || _f === void 0 ? void 0 : _f.call(acceptTermsModal, () => onContinue);
+        (_g = acceptTermsModal.setVisible) === null || _g === void 0 ? void 0 : _g.call(acceptTermsModal, true);
+      } else {
+        yield continueConnection(adapter.connector);
+      }
+      break; // no need to iterate over all other adapters if at least one was detected
+    }
+  }
+  return {
+    connectResult,
+    connectError
+  };
+});
+const useAutoConnect = (autoConnectEnabled, walletDataList, chains) => {
+  const isAutoConnectCalled = useRef(false);
+  const client = useClient();
+  const {
+    isConnected
+  } = useAccount();
+  const {
+    acceptTermsModal
+  } = useContext(AcceptTermsModalContext);
+  const autoConnectOnlyAdapters = walletDataList.filter(adapter => adapter.autoConnectOnly);
+  useEffect(() => {
+    // Don't auto-connect if already connected or if the auto-connect feature is disabled or if already tried to auto-connect.
+    if (isConnected || !autoConnectEnabled || isAutoConnectCalled.current) return;
+    void (() => __awaiter(void 0, void 0, void 0, function* () {
+      // The current logic is to try auto-connect only once, even if an error happened and connection was not successful.
+      isAutoConnectCalled.current = true;
+      // Try to eagerly connect wallets that are meant to be used only with auto-connection.
+      // For example, wallets with dApp browsers, or using iframes to open dApps.
+      const {
+        connectResult,
+        connectError
+      } = yield connectEagerly(autoConnectOnlyAdapters, acceptTermsModal, chains);
+      // If still not connected and there were no errors and the terms of service are accepted,
+      // call the default wagmi autoConnect method, which attempts to connect to the last used connector.
+      if (!connectResult && !connectError && checkTermsAccepted()) {
+        yield client.autoConnect();
+      }
+    }))();
+  }, [autoConnectOnlyAdapters, autoConnectEnabled, client, isConnected, walletDataList, acceptTermsModal, chains]);
+};
+
+export { useAutoConnect };

package/dist/index.js

@@ -1,5 +1,6 @@
 export { getConnectors, getWalletDataList } from './walletData/index.js';
 export { useReefKnotContext } from './hooks/useReefKnotContext.js';
+export { useAutoConnect } from './hooks/useAutoConnect.js';
 export { ReefKnot, ReefKnotContext } from './context/reefKnot.js';
 export { AcceptTermsModalContext, AcceptTermsModalContextProvider } from './context/acceptTermsModal.js';
 export { LS_KEY_TERMS_ACCEPTANCE } from './constants/localStorage.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reef-knot/core-react",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -36,10 +36,14 @@
     "dev": "dev=on rollup -c -w",
     "lint": "eslint --ext ts,tsx,js,mjs ."
   },
+  "dependencies": {
+    "ua-parser-js": "1.0.33"
+  },
   "devDependencies": {
-    "@reef-knot/wallets-list": "^1.10.0",
-    "@reef-knot/types": "^1.4.0",
-    "@reef-knot/ui-react": "^1.0.7",
+    "@reef-knot/wallets-list": "^1.12.0",
+    "@reef-knot/types": "^1.5.0",
+    "@reef-knot/ui-react": "^1.0.8",
+    "@types/ua-parser-js": "^0.7.36",
     "eslint-config-custom": "*",
     "react": "18.2.0",
     "wagmi": "^0.12.19"