@onepercentio/one-ui 0.1.2

package/dist/components/UncontrolledTransition/UncontrolledTransition.stories.js

@@ -0,0 +1,180 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BUGFIX_BackwardsInconsistency = exports.FadeTransition = exports.AnchorBasedTransition = exports.ClickBasedTransition = void 0;
+const react_1 = __importStar(require("react"));
+const _1 = __importDefault(require("."));
+const Button_1 = __importDefault(require("../Button"));
+const Transition_1 = require("../Transition/Transition");
+const UncontrolledTransition_stories_module_scss_1 = __importDefault(require("./UncontrolledTransition.stories.module.scss"));
+exports.default = {
+    title: "Uncontrolled Transition",
+    component: _1.default,
+};
+const ClickBasedTransition = (args) => {
+    const transRef = (0, react_1.useRef)(null);
+    const [nextPage, setNextPage] = (0, react_1.useState)(false);
+    const CurrentPage = () => {
+        if (!nextPage)
+            return (react_1.default.createElement(react_1.default.Fragment, { key: "currPage" },
+                react_1.default.createElement("h1", { style: {
+                        display: "flex",
+                    } },
+                    "Current page",
+                    " ",
+                    react_1.default.createElement("button", { onClick: () => setNextPage((a) => !a), style: { marginLeft: "auto" } }, "Click me to see a cool effect")),
+                react_1.default.createElement("button", { onClick: () => setNextPage((a) => !a), style: { marginRight: "auto" } }, "Hehe"),
+                react_1.default.createElement("h2", null, "Another text"),
+                react_1.default.createElement("button", { onClick: () => setNextPage((a) => !a), style: { margin: "auto" } }, "Or me")));
+        else
+            return (react_1.default.createElement(react_1.default.Fragment, { key: "nextPage" },
+                react_1.default.createElement("h1", { style: {
+                        display: "flex",
+                    } },
+                    "Next page",
+                    " ",
+                    react_1.default.createElement("button", { onClick: () => {
+                            setNextPage((a) => !a);
+                            transRef.current.setOrientation("backward");
+                        }, style: { marginLeft: "auto" } }, "Click me to see a cool effect")),
+                react_1.default.createElement("button", { onClick: () => {
+                        setNextPage((a) => !a);
+                        transRef.current.setOrientation("backward");
+                    }, style: { marginRight: "auto" } }, "Hehe"),
+                react_1.default.createElement("h2", null, "Another text"),
+                react_1.default.createElement("button", { onClick: () => {
+                        setNextPage((a) => !a);
+                        transRef.current.setOrientation("backward");
+                    }, style: { margin: "auto" } }, "Or me")));
+    };
+    return (react_1.default.createElement("div", { style: {
+            backgroundColor: "red",
+            padding: "250px",
+        } },
+        react_1.default.createElement(_1.default, Object.assign({ ref: transRef, transitionType: Transition_1.TransitionAnimationTypes.POP_FROM_CLICK_ORIGIN, contentStyle: {
+                backgroundColor: "white",
+            } }, args), CurrentPage())));
+};
+exports.ClickBasedTransition = ClickBasedTransition;
+const AnchorBasedTransition = (args) => {
+    const transRef = (0, react_1.useRef)(null);
+    const [nextPage, setNextPage] = (0, react_1.useState)(false);
+    const CurrentPage = () => {
+        if (!nextPage)
+            return (react_1.default.createElement(react_1.default.Fragment, { key: "currPage" },
+                react_1.default.createElement("div", { className: UncontrolledTransition_stories_module_scss_1.default.animatedContainer, style: {
+                        width: 100,
+                        height: 100,
+                        color: "white",
+                        backgroundColor: "black",
+                        animationDelay: `${-(Date.now() % 5000)}ms`,
+                    }, id: "anchor" }, "Anchor only present on page 1"),
+                react_1.default.createElement("button", { onClick: () => setNextPage((a) => !a), style: { margin: "auto" } }, "Click me")));
+        else
+            return (react_1.default.createElement(react_1.default.Fragment, { key: "nextPage" },
+                react_1.default.createElement("h1", { style: {
+                        display: "flex",
+                    } },
+                    "Now here comes the cool part",
+                    " "),
+                react_1.default.createElement("button", { onClick: () => {
+                        setNextPage((a) => !a);
+                        transRef.current.setOrientation("backward");
+                    }, style: { marginLeft: "auto" } }, "Click me to go back even though the anchor does not exists anymore")));
+    };
+    return (react_1.default.createElement("div", { style: {
+            backgroundColor: "red",
+            padding: "250px",
+        } },
+        react_1.default.createElement(_1.default, Object.assign({ ref: transRef, transitionType: Transition_1.TransitionAnimationTypes.POP_FROM_ELEMENT_ID, elementId: "anchor", contentStyle: {
+                backgroundColor: "white",
+            } }, args), CurrentPage())));
+};
+exports.AnchorBasedTransition = AnchorBasedTransition;
+const FadeTransition = (args) => {
+    const transRef = (0, react_1.useRef)(null);
+    const [nextPage, setNextPage] = (0, react_1.useState)(false);
+    const CurrentPage = () => {
+        if (!nextPage)
+            return (react_1.default.createElement(react_1.default.Fragment, { key: "currPage" },
+                react_1.default.createElement("h1", null, "First page"),
+                react_1.default.createElement("button", { onClick: () => setNextPage((a) => !a), style: { margin: "auto" } }, "Change page")));
+        else
+            return (react_1.default.createElement(react_1.default.Fragment, { key: "nextPage" },
+                react_1.default.createElement("h1", null, "Second page"),
+                react_1.default.createElement("button", { onClick: () => {
+                        setNextPage((a) => !a);
+                        transRef.current.setOrientation("backward");
+                    }, style: { margin: "auto" } }, "Click me to go back")));
+    };
+    return (react_1.default.createElement("div", { style: {
+            backgroundColor: "red",
+            padding: "250px",
+        } },
+        react_1.default.createElement(_1.default, Object.assign({ ref: transRef, transitionType: Transition_1.TransitionAnimationTypes.FADE, contentStyle: {
+                backgroundColor: "white",
+            } }, args), CurrentPage())));
+};
+exports.FadeTransition = FadeTransition;
+const BUGFIX_BackwardsInconsistency = () => {
+    const [number, setNumber] = (0, react_1.useState)(10);
+    const ref = (0, react_1.useRef)(null);
+    const prev = (0, react_1.useRef)(number);
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        // Here is some logic that decides on demand if it should go backwards or not
+        if (number < prev.current)
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setOrientation("backward");
+        prev.current = number;
+    }, [number]);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(_1.default, { transitionType: Transition_1.TransitionAnimationTypes.CUSTOM, config: {
+                backward: {
+                    elementExiting: UncontrolledTransition_stories_module_scss_1.default.outOfTheWay,
+                    elementEntering: UncontrolledTransition_stories_module_scss_1.default.fadeIn,
+                },
+                forward: {
+                    elementExiting: UncontrolledTransition_stories_module_scss_1.default.fadeOut,
+                    elementEntering: "",
+                },
+            }, ref: ref },
+            react_1.default.createElement("h1", { key: String(number) },
+                "N\u00FAmero ",
+                number)),
+        react_1.default.createElement(Button_1.default, { onClick: () => {
+                setNumber((prev) => prev - 1);
+            } }, "Go back with backwards inside useEffect (bugged as hell)"),
+        react_1.default.createElement(Button_1.default, { onClick: () => {
+                var _a;
+                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.setOrientation("backward");
+                setNumber((prev) => prev - 1);
+            } },
+            "Go back setting backward ",
+            react_1.default.createElement("b", null, "before"),
+            " next screen (works fine)"),
+        react_1.default.createElement(Button_1.default, { onClick: () => setNumber((prev) => prev + 1) }, "Go forward")));
+};
+exports.BUGFIX_BackwardsInconsistency = BUGFIX_BackwardsInconsistency;
+exports.ClickBasedTransition.args = {};
+//# sourceMappingURL=UncontrolledTransition.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UncontrolledTransition.stories.js","sourceRoot":"","sources":["../../../src/components/UncontrolledTransition/UncontrolledTransition.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/UncontrolledTransition/UncontrolledTransition.stories.module.scss

@@ -0,0 +1,62 @@
+.animatedContainer {
+  position: relative;
+  animation-name: pingpong;
+  animation-duration: 5s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes pingpong {
+  0% {
+    left: 0%;
+  }
+
+  50% {
+    left: calc(100% - 100px);
+  }
+
+  100% {
+    left: 0%;
+  }
+}
+.fadeOut {
+  animation: fadeOutAnimation;
+  animation-duration: 2s !important;
+  animation-timing-function: linear;
+  position: absolute;
+}
+.outOfTheWay {
+  animation: fadeOutAnimation;
+  animation-duration: 2s !important;
+  animation-timing-function: linear;
+  position: absolute;
+}
+.fadeIn {
+  animation: fadeIn;
+  animation-duration: 2s !important;
+  animation-timing-function: linear;
+}
+
+@keyframes fadeIn {
+  0% {
+    background-color: green;
+    opacity: 0;
+  }
+
+  100% {
+    background-color: green;
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOutAnimation {
+  0% {
+    background-color: red;
+    opacity: 1;
+  }
+
+  100% {
+    background-color: red;
+    opacity: 0;
+  }
+}

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

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

package/dist/components/UncontrolledTransition/UncontrolledTransition.test.js

@@ -0,0 +1,131 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 UncontrolledTransition_1 = __importDefault(require("./UncontrolledTransition"));
+function renderScreen(props) {
+    return (0, react_2.render)(react_1.default.createElement(UncontrolledTransition_1.default, Object.assign({}, props)));
+}
+const spyOnTransitionContructor = jest.spyOn(require("../Transition"), "default");
+describe("Bugfix", () => {
+    it("Should render correctly when multiple backwards", () => {
+        const ref = {
+            current: null,
+        };
+        const event = new Event("animationend");
+        event.initEvent("animationend", true, true);
+        function BugWrapper({ shouldEffectBackwards, txt, }) {
+            (0, react_1.useLayoutEffect)(() => {
+                if (shouldEffectBackwards)
+                    ref.current.setOrientation("backward");
+            }, [shouldEffectBackwards, txt]);
+            return (react_1.default.createElement(UncontrolledTransition_1.default, { ref: ref },
+                react_1.default.createElement("h1", { key: txt }, txt)));
+        }
+        const wrapper = (0, react_2.render)(react_1.default.createElement(BugWrapper, { shouldEffectBackwards: false, txt: "1" }));
+        wrapper.rerender(react_1.default.createElement(BugWrapper, { shouldEffectBackwards: true, txt: "0" }));
+        expect(wrapper.container.textContent).toEqual("01");
+        function finishFirst() {
+            const [firstStepEl] = wrapper.getAllByTestId("transition-container");
+            firstStepEl.dispatchEvent(event);
+        }
+        finishFirst();
+        expect(wrapper.container.textContent).toEqual("0");
+        wrapper.rerender(react_1.default.createElement(BugWrapper, { shouldEffectBackwards: true, txt: "-1" }));
+        expect(wrapper.container.textContent).toEqual("-10");
+        finishFirst();
+        expect(wrapper.container.textContent).toEqual("-1");
+    });
+});
+it("Should work with backwards", () => __awaiter(void 0, void 0, void 0, function* () {
+    const ref = {
+        current: null,
+    };
+    function BugWrapper({ shouldEffectBackwards, txt, }) {
+        (0, react_1.useLayoutEffect)(() => {
+            if (shouldEffectBackwards)
+                ref.current.setOrientation("backward");
+        }, [shouldEffectBackwards]);
+        return (react_1.default.createElement(UncontrolledTransition_1.default, { ref: ref },
+            react_1.default.createElement("h1", { key: txt }, txt)));
+    }
+    const wrapper = (0, react_2.render)(react_1.default.createElement(BugWrapper, { shouldEffectBackwards: false, txt: "First step" }));
+    wrapper.rerender(react_1.default.createElement(BugWrapper, { shouldEffectBackwards: true, txt: "Zero" }));
+    expect(wrapper.container.textContent).toEqual("ZeroFirst step");
+    wrapper.rerender(react_1.default.createElement(BugWrapper, { shouldEffectBackwards: false, txt: "Third screen" }));
+    // This is a bug that will be fixed in the future
+    // expect(wrapper.container.textContent).toEqual("ZeroFirst stepThird screen");
+}));
+it("Should transition only when the child changes", () => __awaiter(void 0, void 0, void 0, function* () {
+    const ref = {
+        current: null,
+    };
+    const event = new Event("animationend");
+    event.initEvent("animationend", true, true);
+    const wrapper = (0, react_2.render)(react_1.default.createElement(UncontrolledTransition_1.default, { ref: ref },
+        react_1.default.createElement("h1", { key: "1" }, "First step")));
+    expect(wrapper.container.textContent).toEqual("First step");
+    wrapper.rerender(react_1.default.createElement(UncontrolledTransition_1.default, { ref: ref },
+        react_1.default.createElement("h1", { key: "2" }, "Second step")));
+    expect(wrapper.container.textContent).toEqual("First stepSecond step");
+    wrapper.rerender(react_1.default.createElement(UncontrolledTransition_1.default, { ref: ref },
+        react_1.default.createElement("h1", { key: "2" }, "Second step")));
+    expect(wrapper.container.textContent).toEqual("First stepSecond step");
+    const [firstStepEl] = wrapper.getAllByTestId("transition-container");
+    firstStepEl.dispatchEvent(event);
+    expect(wrapper.container.textContent).toEqual("Second step");
+    wrapper.rerender(react_1.default.createElement(UncontrolledTransition_1.default, { ref: ref },
+        react_1.default.createElement("h1", { key: "3" }, "Third step")));
+    expect(spyOnTransitionContructor).toHaveBeenLastCalledWith(expect.objectContaining({
+        step: 1,
+        children: expect.arrayContaining([
+            expect.objectContaining({ key: "2" }),
+            expect.objectContaining({ key: "3" }),
+        ]),
+    }), expect.anything());
+    expect(wrapper.container.textContent).toEqual("Second stepThird step");
+    const [secondStepEl] = wrapper.getAllByTestId("transition-container");
+    secondStepEl.dispatchEvent(event);
+    expect(wrapper.container.textContent).toEqual("Third step");
+    (0, react_2.act)(() => {
+        ref.current.setOrientation("backward");
+    });
+    wrapper.rerender(react_1.default.createElement(UncontrolledTransition_1.default, { ref: ref },
+        react_1.default.createElement("h1", { key: "2" }, "Second step")));
+    expect(wrapper.container.textContent).toEqual("Second stepThird step");
+    const [secondStepEl2] = wrapper.getAllByTestId("transition-container");
+    secondStepEl2.dispatchEvent(event);
+    expect(wrapper.container.textContent).toEqual("Second step");
+}));
+//# sourceMappingURL=UncontrolledTransition.test.js.map

package/dist/components/UncontrolledTransition/UncontrolledTransition.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UncontrolledTransition.test.js","sourceRoot":"","sources":["../../../src/components/UncontrolledTransition/UncontrolledTransition.test.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1 @@
+export { default } from './UncontrolledTransition';

package/dist/components/UncontrolledTransition/index.js

@@ -0,0 +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 UncontrolledTransition_1 = require("./UncontrolledTransition");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(UncontrolledTransition_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/components/UncontrolledTransition/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/UncontrolledTransition/index.tsx"],"names":[],"mappings":";;;;;;AAAA,mEAAmD;AAA1C,kIAAA,OAAO,OAAA"}

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

@@ -0,0 +1,35 @@
+import React from "react";
+import useAsyncControl from "../../hooks/useAsyncControl";
+export declare type WalletConnectionProps = Omit<ReturnType<typeof useAsyncControl>, "process"> & {
+    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
+     */
+    allowedChainId: number;
+    /**
+     * 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;

package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.js

@@ -0,0 +1,86 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 use_wallet_1 = require("use-wallet");
+const useAsyncControl_1 = __importDefault(require("../../hooks/useAsyncControl"));
+/**
+ * This component handles a lot of cenarios when dealing with the wallet connection to different providers (ex: Metamask)
+ **/
+function WalletConnectionWrapper(props, ref) {
+    return (react_1.default.createElement(use_wallet_1.UseWalletProvider, null,
+        react_1.default.createElement(Content, Object.assign({ compRef: ref || (0, react_1.createRef)() }, props))));
+}
+function Content({ ProviderUnavailable, ChainIdInvalid, allowedChainId, Content, compRef, }) {
+    const wallet = (0, use_wallet_1.useWallet)();
+    const connectionAsyncWrapper = (0, useAsyncControl_1.default)();
+    const connect = () => __awaiter(this, void 0, void 0, function* () {
+        connectionAsyncWrapper.process(() => __awaiter(this, void 0, void 0, function* () {
+            yield wallet.connect("injected");
+            localStorage.setItem("auto_connect", "true");
+        }));
+    });
+    const disconnect = () => {
+        wallet.reset();
+        localStorage.removeItem("auto_connect");
+    };
+    (0, react_1.useEffect)(() => {
+        const autoConnect = !!localStorage.getItem("auto_connect");
+        if (autoConnect)
+            connect();
+    }, []);
+    (0, react_1.useImperativeHandle)(compRef, () => ({
+        connect,
+        disconnect,
+    }), [wallet]);
+    const [isProviderAvailable] = (0, react_1.useState)(() => !!window.ethereum);
+    const isChainIdValid = (0, react_1.useMemo)(() => (wallet.isConnected() ? wallet.chainId === allowedChainId : true), [wallet, allowedChainId]);
+    function changeChainId() {
+        wallet.reset();
+        window.ethereum.request({
+            method: "wallet_switchEthereumChain",
+            params: [
+                {
+                    chainId: `0x${allowedChainId.toString(16).padStart(2, "0")}`,
+                },
+            ],
+        });
+        wallet.connect("injected");
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        ProviderUnavailable && !isProviderAvailable && react_1.default.createElement(ProviderUnavailable, null),
+        ChainIdInvalid && !isChainIdValid && (react_1.default.createElement(ChainIdInvalid, { changeChainId: changeChainId })),
+        react_1.default.createElement(Content, Object.assign({}, connectionAsyncWrapper, { isChainIdValid: isChainIdValid, isProviderAvailable: isProviderAvailable, isConnectedAndValidChain: isChainIdValid && wallet.isConnected(), connect: connect, disconnect: disconnect, changeChainId: changeChainId }))));
+}
+exports.default = (0, react_1.forwardRef)(WalletConnectionWrapper);
+//# sourceMappingURL=WalletConnectionWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WalletConnectionWrapper.js","sourceRoot":"","sources":["../../../src/components/WalletConnectionWrapper/WalletConnectionWrapper.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,47 @@
+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;
+    };
+};