@onepercentio/one-ui 0.1.6 → 0.2.1

package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.stories.d.ts

@@ -1,47 +1,70 @@
-import React, { ComponentProps } from "react";
-import WalletConnectionWrapper from "./WalletConnectionWrapper";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<{
-        allowedChainId: number;
-        ProviderUnavailable?: React.FunctionComponent<{}> | undefined;
-        ChainIdInvalid?: React.FunctionComponent<{
-            changeChainId: () => void;
-        }> | undefined;
-        Content: React.FunctionComponent<import("./WalletConnectionWrapper").WalletConnectionProps>;
-    } & React.RefAttributes<{
-        connect: () => Promise<void>;
-        disconnect: () => void;
-    }>>;
-};
-export default _default;
-export declare const BasicUsage: {
-    (args: ComponentProps<typeof WalletConnectionWrapper>): JSX.Element;
-    args: {
-        allowedChainId: number;
-        ProviderUnavailable?: React.FunctionComponent<{}> | undefined;
-        ChainIdInvalid?: React.FunctionComponent<{
-            changeChainId: () => void;
-        }> | undefined;
-        Content: React.FunctionComponent<import("./WalletConnectionWrapper").WalletConnectionProps>;
-    } & React.RefAttributes<{
-        connect: () => Promise<void>;
-        disconnect: () => void;
-    }>;
-};
-export declare const UsageWithActionProps: {
-    (args: ComponentProps<typeof WalletConnectionWrapper>): JSX.Element;
-    args: {
-        allowedChainId: number;
-        ProviderUnavailable?: React.FunctionComponent<{}> | undefined;
-        ChainIdInvalid?: React.FunctionComponent<{
-            changeChainId: () => void;
-        }> | undefined;
-        Content: React.FunctionComponent<import("./WalletConnectionWrapper").WalletConnectionProps>;
-        ref?: React.Ref<{
-            connect: () => Promise<void>;
-            disconnect: () => void;
-        }> | undefined;
-        key?: React.Key | null | undefined;
-    };
-};
+import React, { ComponentProps } from "react";
+import WalletConnectionWrapper from "./WalletConnectionWrapper";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<{
+        chain: {
+            id: number;
+            rpcUrl: string;
+            explorerUrl: string;
+            name: string;
+            currency: string;
+        };
+        ProviderUnavailable?: React.FunctionComponent<{}> | undefined;
+        ChainIdInvalid?: React.FunctionComponent<{
+            changeChainId: () => void;
+        }> | undefined;
+        Content: React.FunctionComponent<import("./WalletConnectionWrapper").WalletConnectionProps>;
+    } & {
+        children?: React.ReactNode;
+    } & React.RefAttributes<{
+        connect: () => Promise<void>;
+        disconnect: () => void;
+    }>>;
+};
+export default _default;
+export declare const BasicUsage: {
+    (args: ComponentProps<typeof WalletConnectionWrapper>): JSX.Element;
+    args: {
+        chain: {
+            id: number;
+            rpcUrl: string;
+            explorerUrl: string;
+            name: string;
+            currency: string;
+        };
+        ProviderUnavailable?: React.FunctionComponent<{}> | undefined;
+        ChainIdInvalid?: React.FunctionComponent<{
+            changeChainId: () => void;
+        }> | undefined;
+        Content: React.FunctionComponent<import("./WalletConnectionWrapper").WalletConnectionProps>;
+    } & {
+        children?: React.ReactNode;
+    } & React.RefAttributes<{
+        connect: () => Promise<void>;
+        disconnect: () => void;
+    }>;
+};
+export declare const UsageWithActionProps: {
+    (args: ComponentProps<typeof WalletConnectionWrapper>): JSX.Element;
+    args: {
+        chain: {
+            id: number;
+            rpcUrl: string;
+            explorerUrl: string;
+            name: string;
+            currency: string;
+        };
+        ProviderUnavailable?: React.FunctionComponent<{}> | undefined;
+        ChainIdInvalid?: React.FunctionComponent<{
+            changeChainId: () => void;
+        }> | undefined;
+        Content: React.FunctionComponent<import("./WalletConnectionWrapper").WalletConnectionProps>;
+        children?: React.ReactNode;
+        ref?: React.Ref<{
+            connect: () => Promise<void>;
+            disconnect: () => void;
+        }> | undefined;
+        key?: React.Key | null | undefined;
+    };
+};

package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.stories.js

@@ -1,56 +1,65 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UsageWithActionProps = exports.BasicUsage = void 0;
-const react_1 = __importDefault(require("react"));
-const WalletConnectionWrapper_1 = __importDefault(require("./WalletConnectionWrapper"));
-const AdaptiveDialog_1 = __importDefault(require("../AdaptiveDialog"));
-const Button_1 = __importDefault(require("../Button"));
-exports.default = {
-    title: "Wallet Connection Wrapper",
-    component: WalletConnectionWrapper_1.default,
-};
-const BasicUsage = (args) => {
-    return (react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({}, args, { Content: ({ error, loading, isChainIdValid, isProviderAvailable, isConnectedAndValidChain, connect, disconnect, changeChainId, }) => (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("h1", null, "The content prop will receive the props of control for handling wallet connection"),
-            react_1.default.createElement("h3", null, "You can test this component by using metamask"),
-            react_1.default.createElement("p", null,
-                react_1.default.createElement("b", null, "Is connected and valid chain: "),
-                " ",
-                String(isConnectedAndValidChain)),
-            react_1.default.createElement("p", null,
-                "Error: ",
-                String(error)),
-            react_1.default.createElement("p", null,
-                "Loading: ",
-                String(loading)),
-            react_1.default.createElement("p", null,
-                "Valid chain (",
-                args.allowedChainId,
-                "): ",
-                String(isChainIdValid)),
-            react_1.default.createElement("p", null,
-                "Provider available (",
-                String(isProviderAvailable),
-                ")"),
-            react_1.default.createElement("h2", null, "actions"),
-            react_1.default.createElement("button", { onClick: connect }, "Connect"),
-            react_1.default.createElement("button", { onClick: disconnect }, "Disconnect"),
-            react_1.default.createElement("button", { onClick: changeChainId }, "Change chain id (to the chain id defined on prop)"))) })));
-};
-exports.BasicUsage = BasicUsage;
-const UsageWithActionProps = (args) => {
-    return (react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({}, args, { ProviderUnavailable: () => (react_1.default.createElement(AdaptiveDialog_1.default, { open: true }, "Do something when the provider is not available")), ChainIdInvalid: ({ changeChainId }) => (react_1.default.createElement(AdaptiveDialog_1.default, { open: true },
-            "Some action when the chain id is invalid",
-            react_1.default.createElement(Button_1.default, { variant: "filled", onClick: changeChainId }, "This action come as prop"))), Content: ({ connect }) => (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("h1", null, "You can also delegate the handling to the props, check the story for more details"),
-            react_1.default.createElement("button", { onClick: connect }, "Connect"))) })));
-};
-exports.UsageWithActionProps = UsageWithActionProps;
-exports.BasicUsage.args = {
-    allowedChainId: 80001, ///MUMBAI
-};
-exports.UsageWithActionProps.args = Object.assign({}, exports.BasicUsage.args);
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UsageWithActionProps = exports.BasicUsage = void 0;
+const react_1 = __importDefault(require("react"));
+const WalletConnectionWrapper_1 = __importDefault(require("./WalletConnectionWrapper"));
+const AdaptiveDialog_1 = __importDefault(require("../AdaptiveDialog"));
+const Button_1 = __importDefault(require("../Button"));
+exports.default = {
+    title: "Wallet Connection Wrapper",
+    component: WalletConnectionWrapper_1.default,
+};
+const BasicUsage = (args) => {
+    return (react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({}, args, { Content: ({ chainId, error, loading, isChainIdValid, isProviderAvailable, isConnectedAndValidChain, connect, disconnect, changeChainId, }) => (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("h1", null, "The content prop will receive the props of control for handling wallet connection"),
+            react_1.default.createElement("h3", null, "You can test this component by using metamask"),
+            react_1.default.createElement("p", null,
+                react_1.default.createElement("b", null, "Is connected and valid chain: "),
+                " ",
+                String(isConnectedAndValidChain)),
+            react_1.default.createElement("p", null,
+                "Error: ",
+                String(error)),
+            react_1.default.createElement("p", null,
+                "Loading: ",
+                String(loading)),
+            react_1.default.createElement("p", null,
+                "Valid chain (",
+                args.chain.id,
+                "): ",
+                String(isChainIdValid),
+                " (",
+                chainId,
+                ")"),
+            react_1.default.createElement("p", null,
+                "Provider available (",
+                String(isProviderAvailable),
+                ")"),
+            react_1.default.createElement("h2", null, "actions"),
+            react_1.default.createElement("button", { onClick: connect }, "Connect"),
+            react_1.default.createElement("button", { onClick: disconnect }, "Disconnect"),
+            react_1.default.createElement("button", { onClick: changeChainId }, "Change chain id (to the chain id defined on prop)"))) })));
+};
+exports.BasicUsage = BasicUsage;
+const UsageWithActionProps = (args) => {
+    return (react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({}, args, { ProviderUnavailable: () => (react_1.default.createElement(AdaptiveDialog_1.default, { open: true }, "Do something when the provider is not available")), ChainIdInvalid: ({ changeChainId }) => (react_1.default.createElement(AdaptiveDialog_1.default, { open: true },
+            "Some action when the chain id is invalid",
+            react_1.default.createElement(Button_1.default, { variant: "filled", onClick: changeChainId }, "This action come as prop"))), Content: ({ connect }) => (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("h1", null, "You can also delegate the handling to the props, check the story for more details"),
+            react_1.default.createElement("button", { onClick: connect }, "Connect"))) })));
+};
+exports.UsageWithActionProps = UsageWithActionProps;
+exports.BasicUsage.args = {
+    chain: {
+        id: 80001,
+        name: "Polygon Testnet",
+        rpcUrl: "https://rpc-mumbai.matic.today/",
+        explorerUrl: "https://mumbai.polygonscan.com/",
+        currency: "MATIC",
+    },
+};
+exports.UsageWithActionProps.args = Object.assign({}, exports.BasicUsage.args);
 //# sourceMappingURL=WalletConnectionWrapper.stories.js.map

package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"WalletConnectionWrapper.stories.js","sourceRoot":"","sources":["../../../src/components/WalletConnectionWrapper/WalletConnectionWrapper.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAgE;AAChE,wFAAgE;AAGhE,uEAA+C;AAC/C,uDAA+B;AAE/B,kBAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,iCAAuB;CACnC,CAAC;AAEK,MAAM,UAAU,GAAG,CACxB,IAAoD,EACpD,EAAE;IACF,OAAO,CACL,8BAAC,iCAAuB,oBAClB,IAAI,IACR,OAAO,EAAE,CAAC,EACR,KAAK,EACL,OAAO,EACP,cAAc,EACd,mBAAmB,EACnB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,aAAa,GACd,EAAE,EAAE,CAAC,CACJ;YACE,8HAGK;YACL,0FAAsD;YACtD;gBACE,0EAAqC;gBAAC,GAAG;gBACxC,MAAM,CAAC,wBAAwB,CAAC,CAC/B;YACJ;;gBAAW,MAAM,CAAC,KAAK,CAAC,CAAK;YAC7B;;gBAAa,MAAM,CAAC,OAAO,CAAC,CAAK;YACjC;;gBACgB,IAAI,CAAC,cAAc;;gBAAK,MAAM,CAAC,cAAc,CAAC,CAC1D;YACJ;;gBAAwB,MAAM,CAAC,mBAAmB,CAAC;oBAAM;YACzD,oDAAgB;YAChB,0CAAQ,OAAO,EAAE,OAAO,cAAkB;YAC1C,0CAAQ,OAAO,EAAE,UAAU,iBAAqB;YAChD,0CAAQ,OAAO,EAAE,aAAa,wDAErB,CACR,CACJ,IACD,CACH,CAAC;AACJ,CAAC,CAAC;AA1CW,QAAA,UAAU,cA0CrB;AAEK,MAAM,oBAAoB,GAAG,CAClC,IAAoD,EACpD,EAAE;IACF,OAAO,CACL,8BAAC,iCAAuB,oBAClB,IAAI,IACR,mBAAmB,EAAE,GAAG,EAAE,CAAC,CACzB,8BAAC,wBAAc,IAAC,IAAI,4DAEH,CAClB,EACD,cAAc,EAAE,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CACrC,8BAAC,wBAAc,IAAC,IAAI;;YAElB,8BAAC,gBAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,aAAa,+BAEtC,CACM,CAClB,EACD,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CACxB;YACE,8HAGK;YACL,0CAAQ,OAAO,EAAE,OAAO,cAAkB,CACzC,CACJ,IACD,CACH,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,oBAAoB,wBA8B/B;AAEF,kBAAU,CAAC,IAAI,GAAG;IAChB,cAAc,EAAE,KAAK,EAAE,SAAS;CACiB,CAAC;AAEpD,4BAAoB,CAAC,IAAI,qBACpB,kBAAU,CAAC,IAAI,CACnB,CAAC"}
+{"version":3,"file":"WalletConnectionWrapper.stories.js","sourceRoot":"","sources":["../../../src/components/WalletConnectionWrapper/WalletConnectionWrapper.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA8C;AAC9C,wFAAgE;AAChE,uEAA+C;AAC/C,uDAA+B;AAE/B,kBAAe;IACb,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,iCAAuB;CACnC,CAAC;AAEK,MAAM,UAAU,GAAG,CACxB,IAAoD,EACpD,EAAE;IACF,OAAO,CACL,8BAAC,iCAAuB,oBAClB,IAAI,IACR,OAAO,EAAE,CAAC,EACR,OAAO,EACP,KAAK,EACL,OAAO,EACP,cAAc,EACd,mBAAmB,EACnB,wBAAwB,EACxB,OAAO,EACP,UAAU,EACV,aAAa,GACd,EAAE,EAAE,CAAC,CACJ;YACE,8HAGK;YACL,0FAAsD;YACtD;gBACE,0EAAqC;gBAAC,GAAG;gBACxC,MAAM,CAAC,wBAAwB,CAAC,CAC/B;YACJ;;gBAAW,MAAM,CAAC,KAAK,CAAC,CAAK;YAC7B;;gBAAa,MAAM,CAAC,OAAO,CAAC,CAAK;YACjC;;gBACgB,IAAI,CAAC,KAAK,CAAC,EAAE;;gBAAK,MAAM,CAAC,cAAc,CAAC;;gBAAI,OAAO;oBAC/D;YACJ;;gBAAwB,MAAM,CAAC,mBAAmB,CAAC;oBAAM;YACzD,oDAAgB;YAChB,0CAAQ,OAAO,EAAE,OAAO,cAAkB;YAC1C,0CAAQ,OAAO,EAAE,UAAU,iBAAqB;YAChD,0CAAQ,OAAO,EAAE,aAAa,wDAErB,CACR,CACJ,IACD,CACH,CAAC;AACJ,CAAC,CAAC;AA3CW,QAAA,UAAU,cA2CrB;AAEK,MAAM,oBAAoB,GAAG,CAClC,IAAoD,EACpD,EAAE;IACF,OAAO,CACL,8BAAC,iCAAuB,oBAClB,IAAI,IACR,mBAAmB,EAAE,GAAG,EAAE,CAAC,CACzB,8BAAC,wBAAc,IAAC,IAAI,4DAEH,CAClB,EACD,cAAc,EAAE,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CACrC,8BAAC,wBAAc,IAAC,IAAI;;YAElB,8BAAC,gBAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,aAAa,+BAEtC,CACM,CAClB,EACD,OAAO,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CACxB;YACE,8HAGK;YACL,0CAAQ,OAAO,EAAE,OAAO,cAAkB,CACzC,CACJ,IACD,CACH,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,oBAAoB,wBA8B/B;AAEF,kBAAU,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE;QACL,EAAE,EAAE,KAAK;QACT,IAAI,EAAE,iBAAiB;QACvB,MAAM,EAAE,iCAAiC;QACzC,WAAW,EAAE,iCAAiC;QAC9C,QAAQ,EAAE,OAAO;KAClB;CACgD,CAAC;AAEpD,4BAAoB,CAAC,IAAI,qBACpB,kBAAU,CAAC,IAAI,CACnB,CAAC"}

package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.test.js

@@ -1,137 +1,137 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (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());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const react_2 = require("@testing-library/react");
-const WalletConnectionWrapper_1 = __importDefault(require("./WalletConnectionWrapper"));
-const utils_1 = require("../../__test__/utils");
-const ProviderMock = jest.spyOn(require("use-wallet"), "UseWalletProvider");
-const useWalletMock = jest
-    .spyOn(require("use-wallet"), "useWallet")
-    .mockImplementation(() => ({}));
-const MockContent = () => null;
-const defaultProps = {
-    Content: MockContent,
-};
-beforeEach(() => {
-    jest.clearAllMocks();
-    localStorage.removeItem("auto_connect");
-});
-it("Should auto connect the connection after the user connects", () => __awaiter(void 0, void 0, void 0, function* () {
-    const connectCb = jest.fn(() => { });
-    useWalletMock.mockImplementation(() => (Object.assign({ isConnected: () => false, connect: connectCb, reset: () => { } }, {})));
-    global.window.ethereum = {};
-    function getAutoConnectFlag() {
-        return !!localStorage.getItem("auto_connect");
-    }
-    expect(getAutoConnectFlag()).toBeFalsy();
-    const ref = (0, react_1.createRef)();
-    (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ ref: ref }, defaultProps)));
-    expect(ProviderMock).toHaveBeenCalledTimes(1);
-    yield (0, react_2.act)(() => __awaiter(void 0, void 0, void 0, function* () {
-        yield ref.current.connect();
-    }));
-    expect(connectCb).toHaveBeenCalledTimes(1);
-    (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ ref: ref }, defaultProps)));
-    yield (0, react_2.act)(() => (0, utils_1.WaitTimeout)(100));
-    expect(ProviderMock).toHaveBeenCalledTimes(2);
-    expect(getAutoConnectFlag()).toBeTruthy();
-    expect(connectCb).toHaveBeenCalledTimes(2);
-    ref.current.disconnect();
-    (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ ref: ref }, defaultProps)));
-    expect(ProviderMock).toHaveBeenCalledTimes(3);
-    expect(getAutoConnectFlag()).toBeFalsy();
-    expect(connectCb).toHaveBeenCalledTimes(2);
-}));
-it("Should warn when there is no provider available", () => {
-    useWalletMock.mockImplementation(() => (Object.assign({ isConnected: () => false }, {})));
-    delete window.ethereum;
-    const { container } = (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ ProviderUnavailable: () => react_1.default.createElement("h1", null, "Provider unavailable") }, defaultProps)));
-    expect(container.textContent).toEqual("Provider unavailable");
-    window.ethereum = {};
-    const { container: continer2 } = (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ ProviderUnavailable: () => react_1.default.createElement("h1", null, "Provider unavailable") }, defaultProps)));
-    expect(continer2.textContent).not.toEqual("Provider unavailable");
-});
-it("Should warn when the chainId is not the correct one", () => {
-    const requestMock = jest.fn();
-    window.ethereum = {
-        request: requestMock,
-    };
-    useWalletMock.mockImplementation(() => (Object.assign({ chainId: 56, isConnected: () => true }, {})));
-    const { container } = (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ allowedChainId: 56, ChainIdInvalid: () => react_1.default.createElement("h1", null, "Invalid") }, defaultProps)));
-    expect(container.textContent).not.toContain("Invalid");
-    const resetMock = jest.fn();
-    const connectMock = jest.fn();
-    useWalletMock.mockImplementation(() => (Object.assign({ chainId: "UNEXPECTED", reset: resetMock, connect: connectMock, isConnected: () => true }, {})));
-    const ui = jest.fn(({ changeChainId }) => (react_1.default.createElement("h1", null, "Invalid")));
-    const { container: container2 } = (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ allowedChainId: 56, ChainIdInvalid: ui }, defaultProps)));
-    expect(container2.textContent).toContain("Invalid");
-    // When the user clicks the change chain
-    ui.mock.calls.slice(-1)[0][0].changeChainId();
-    expect(resetMock).toHaveBeenCalled();
-    expect(connectMock).toHaveBeenCalled();
-    expect(requestMock).toHaveBeenCalledWith({
-        method: "wallet_switchEthereumChain",
-        params: [
-            {
-                chainId: `0x38`,
-            },
-        ],
-    });
-});
-it("Should warn when the connection fails", () => __awaiter(void 0, void 0, void 0, function* () {
-    useWalletMock.mockImplementation(() => (Object.assign({ chainId: "UNEXPECTED", isConnected: () => false, connect: () => Promise.reject() }, {})));
-    window.ethereum = {};
-    const ref = (0, react_1.createRef)();
-    const mockComp = jest.fn((props) => (props.error ? "Error" : props.loading ? "Loading" : "OK"));
-    const { findByText } = (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ ref: ref }, defaultProps, { Content: mockComp })));
-    (0, react_2.act)(() => {
-        ref.current.connect();
-    });
-    yield findByText("Error");
-}));
-// This cenario is given by the useWallet hook .isConnected()
-//it("Should notify when the user connects", () => {});
-describe("BUGFIX", () => {
-    it("Should not validate chainId if not connected yet", () => {
-        window.ethereum = {};
-        useWalletMock.mockImplementation(() => (Object.assign({ chainId: undefined, isConnected: () => false }, {})));
-        const { container, findByText } = (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ allowedChainId: 90, ChainIdInvalid: () => react_1.default.createElement("p", null, "Invalid") }, defaultProps)));
-        expect(container.textContent).not.toContain("Invalid");
-    });
-});
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_2 = require("@testing-library/react");
+const WalletConnectionWrapper_1 = __importDefault(require("./WalletConnectionWrapper"));
+const utils_1 = require("../../__test__/utils");
+const ProviderMock = jest.spyOn(require("use-wallet"), "UseWalletProvider");
+const useWalletMock = jest
+    .spyOn(require("use-wallet"), "useWallet")
+    .mockImplementation(() => ({}));
+const MockContent = () => null;
+const defaultProps = {
+    Content: MockContent,
+};
+beforeEach(() => {
+    jest.clearAllMocks();
+    localStorage.removeItem("auto_connect");
+});
+it("Should auto connect the connection after the user connects", () => __awaiter(void 0, void 0, void 0, function* () {
+    const connectCb = jest.fn(() => { });
+    useWalletMock.mockImplementation(() => (Object.assign({ isConnected: () => false, connect: connectCb, reset: () => { } }, {})));
+    global.window.ethereum = {};
+    function getAutoConnectFlag() {
+        return !!localStorage.getItem("auto_connect");
+    }
+    expect(getAutoConnectFlag()).toBeFalsy();
+    const ref = (0, react_1.createRef)();
+    (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ ref: ref }, defaultProps)));
+    expect(ProviderMock).toHaveBeenCalledTimes(1);
+    yield (0, react_2.act)(() => __awaiter(void 0, void 0, void 0, function* () {
+        yield ref.current.connect();
+    }));
+    expect(connectCb).toHaveBeenCalledTimes(1);
+    (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ ref: ref }, defaultProps)));
+    yield (0, react_2.act)(() => (0, utils_1.WaitTimeout)(100));
+    expect(ProviderMock).toHaveBeenCalledTimes(2);
+    expect(getAutoConnectFlag()).toBeTruthy();
+    expect(connectCb).toHaveBeenCalledTimes(2);
+    ref.current.disconnect();
+    (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ ref: ref }, defaultProps)));
+    expect(ProviderMock).toHaveBeenCalledTimes(3);
+    expect(getAutoConnectFlag()).toBeFalsy();
+    expect(connectCb).toHaveBeenCalledTimes(2);
+}));
+it("Should warn when there is no provider available", () => {
+    useWalletMock.mockImplementation(() => (Object.assign({ isConnected: () => false }, {})));
+    delete window.ethereum;
+    const { container } = (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ ProviderUnavailable: () => react_1.default.createElement("h1", null, "Provider unavailable") }, defaultProps)));
+    expect(container.textContent).toEqual("Provider unavailable");
+    window.ethereum = {};
+    const { container: continer2 } = (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ ProviderUnavailable: () => react_1.default.createElement("h1", null, "Provider unavailable") }, defaultProps)));
+    expect(continer2.textContent).not.toEqual("Provider unavailable");
+});
+it("Should warn when the chainId is not the correct one", () => {
+    const requestMock = jest.fn();
+    window.ethereum = {
+        request: requestMock,
+    };
+    useWalletMock.mockImplementation(() => (Object.assign({ chainId: 56, isConnected: () => true }, {})));
+    const { container } = (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ allowedChainId: 56, ChainIdInvalid: () => react_1.default.createElement("h1", null, "Invalid") }, defaultProps)));
+    expect(container.textContent).not.toContain("Invalid");
+    const resetMock = jest.fn();
+    const connectMock = jest.fn();
+    useWalletMock.mockImplementation(() => (Object.assign({ chainId: "UNEXPECTED", reset: resetMock, connect: connectMock, isConnected: () => true }, {})));
+    const ui = jest.fn(({ changeChainId }) => (react_1.default.createElement("h1", null, "Invalid")));
+    const { container: container2 } = (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ allowedChainId: 56, ChainIdInvalid: ui }, defaultProps)));
+    expect(container2.textContent).toContain("Invalid");
+    // When the user clicks the change chain
+    ui.mock.calls.slice(-1)[0][0].changeChainId();
+    expect(resetMock).toHaveBeenCalled();
+    expect(connectMock).toHaveBeenCalled();
+    expect(requestMock).toHaveBeenCalledWith({
+        method: "wallet_switchEthereumChain",
+        params: [
+            {
+                chainId: `0x38`,
+            },
+        ],
+    });
+});
+it("Should warn when the connection fails", () => __awaiter(void 0, void 0, void 0, function* () {
+    useWalletMock.mockImplementation(() => (Object.assign({ chainId: "UNEXPECTED", isConnected: () => false, connect: () => Promise.reject() }, {})));
+    window.ethereum = {};
+    const ref = (0, react_1.createRef)();
+    const mockComp = jest.fn((props) => (props.error ? "Error" : props.loading ? "Loading" : "OK"));
+    const { findByText } = (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ ref: ref }, defaultProps, { Content: mockComp })));
+    (0, react_2.act)(() => {
+        ref.current.connect();
+    });
+    yield findByText("Error");
+}));
+// This cenario is given by the useWallet hook .isConnected()
+//it("Should notify when the user connects", () => {});
+describe("BUGFIX", () => {
+    it("Should not validate chainId if not connected yet", () => {
+        window.ethereum = {};
+        useWalletMock.mockImplementation(() => (Object.assign({ chainId: undefined, isConnected: () => false }, {})));
+        const { container, findByText } = (0, react_2.render)(react_1.default.createElement(WalletConnectionWrapper_1.default, Object.assign({ allowedChainId: 90, ChainIdInvalid: () => react_1.default.createElement("p", null, "Invalid") }, defaultProps)));
+        expect(container.textContent).not.toContain("Invalid");
+    });
+});
 //# sourceMappingURL=WalletConnectionWrapper.test.js.map

package/dist/components/WalletConnectionWrapper/index.d.ts

@@ -1 +1 @@
-export { default } from './WalletConnectionWrapper';
+export { default } from './WalletConnectionWrapper';

package/dist/components/WalletConnectionWrapper/index.js

@@ -1,9 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var WalletConnectionWrapper_1 = require("./WalletConnectionWrapper");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(WalletConnectionWrapper_1).default; } });
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var WalletConnectionWrapper_1 = require("./WalletConnectionWrapper");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(WalletConnectionWrapper_1).default; } });
 //# sourceMappingURL=index.js.map

package/dist/components/WalletConnectionWrapper/v2/WalletConnectionWrapper.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import useAsyncControl from "../../../hooks/useAsyncControl";
+export declare type WalletConnectionProps = Omit<ReturnType<typeof useAsyncControl>, "process"> & {
+    chainId?: number;
+    isChainIdValid: boolean;
+    isProviderAvailable: boolean;
+    isConnectedAndValidChain: boolean;
+    connect: () => void;
+    disconnect: () => void;
+    changeChainId: () => void;
+};
+declare type Props = {
+    /**
+     * The chain id that the user is expected to connect to
+     */
+    chain: {
+        id: number;
+        rpcUrl: string;
+        explorerUrl: string;
+    };
+    /**
+     * When the user doesn't have a provider like metamask available
+     */
+    ProviderUnavailable?: React.FunctionComponent;
+    /**
+     * This is invoked when the chain ID is not available
+     */
+    ChainIdInvalid?: React.FunctionComponent<{
+        changeChainId: () => void;
+    }>;
+    /**
+     * This renders the content that is shown inside the wallet content
+     */
+    Content: React.FunctionComponent<WalletConnectionProps>;
+};
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<{
+    connect: () => Promise<void>;
+    disconnect: () => void;
+}>>;
+export default _default;