From 3c3d080245c5cbea2f82565689fd55191ad2fc67 Mon Sep 17 00:00:00 2001 From: Rot Date: Mon, 26 Jun 2023 07:33:03 +0100 Subject: [PATCH] modify disconnect wallet position --- dist/common/types.d.ts | 6 ++ dist/index.cjs.js | 57 ++++++++++++------- dist/index.esm.js | 57 ++++++++++++------- dist/utils/helpers.d.ts | 1 + package.json | 2 +- src/common/types.ts | 7 +++ src/components/ConnectWallet/index.tsx | 8 ++- .../WalletButton/DisconnectWalletButton.tsx | 4 +- src/components/WalletButton/index.tsx | 17 +++--- .../WalletWrapper/ConnectWalletWrapper.tsx | 4 +- src/utils/enableWallet.ts | 3 +- src/utils/getSupportedWallets.ts | 1 + src/utils/helpers.ts | 8 ++- 13 files changed, 120 insertions(+), 55 deletions(-) diff --git a/dist/common/types.d.ts b/dist/common/types.d.ts index fc4c5cc..2868a4a 100644 --- a/dist/common/types.d.ts +++ b/dist/common/types.d.ts @@ -4,6 +4,12 @@ export declare enum SupportedWallet { flint = "flint", nami = "nami" } +export declare const SupportedWalletName: { + metamask: string; + eternl: string; + flint: string; + nami: string; +}; export declare enum SupportedChain { ethereum = "ethereum", cardano = "cardano" diff --git a/dist/index.cjs.js b/dist/index.cjs.js index f592557..290a37e 100644 --- a/dist/index.cjs.js +++ b/dist/index.cjs.js @@ -3,9 +3,9 @@ Object.defineProperty(exports, '__esModule', { value: true }); var React = require('react'); -var Web3 = require('web3'); var bech32 = require('bech32'); var buffer = require('buffer'); +var Web3 = require('web3'); var cborWeb = require('cbor-web'); var BigNumber = require('bignumber.js'); var reactDeviceDetect = require('react-device-detect'); @@ -118,6 +118,12 @@ var SupportedWallet; SupportedWallet["flint"] = "flint"; SupportedWallet["nami"] = "nami"; })(SupportedWallet || (SupportedWallet = {})); +var SupportedWalletName = { + metamask: "Metamask", + eternl: "Eternl", + flint: "Flint", + nami: "Nami" +}; var SupportedChain; (function (SupportedChain) { SupportedChain["ethereum"] = "ethereum"; @@ -164,6 +170,22 @@ var asyncTimeout = function (fn, errorMessage, ms) { }); }; +var addressFromHex = function (hex) { + var networkId = hex[1] === "0" ? NetworkMode.testNet : NetworkMode.mainNet; + var prefix = networkId === NetworkMode.testNet ? "addr_test" : "addr"; + var bytes = fromHex(hex); + var words = bech32.bech32.toWords(bytes); + return bech32.bech32.encode(prefix, words, 1000); +}; +var fromHex = function (hex) { + return buffer.Buffer.from(hex, "hex"); +}; +var formatWalletName = function (walletName) { + var originName = walletName.split(" ")[0].toLowerCase(); + var formatedName = SupportedWalletName[originName]; + return formatedName; +}; + var enableWallet = function (name) { return __awaiter(void 0, void 0, void 0, function () { var walletName, enabledWallet, ethereum, selectedWallet, enabledWalletAPI; var _a, _b; @@ -187,7 +209,6 @@ var enableWallet = function (name) { return __awaiter(void 0, void 0, void 0, fu _c.sent(); enabledWallet = { name: "Metamask", - icon: "Metamask", isEVM: true, }; return [3 /*break*/, 4]; @@ -204,7 +225,7 @@ var enableWallet = function (name) { return __awaiter(void 0, void 0, void 0, fu return [4 /*yield*/, asyncTimeout(selectedWallet.enable, "Enabling wallet timed out after 10 seconds", 10000)]; case 6: enabledWalletAPI = _c.sent(); - enabledWallet = __assign(__assign({}, selectedWallet), enabledWalletAPI); + enabledWallet = __assign(__assign(__assign({}, selectedWallet), enabledWalletAPI), { name: formatWalletName(selectedWallet.name) }); _c.label = 7; case 7: (_b = window.localStorage) === null || _b === void 0 ? void 0 : _b.setItem(storageKey, walletName); @@ -221,17 +242,6 @@ var disconnectWallet = function () { (_b = window.localStorage) === null || _b === void 0 ? void 0 : _b.removeItem(storageKey); }; -var addressFromHex = function (hex) { - var networkId = hex[1] === "0" ? NetworkMode.testNet : NetworkMode.mainNet; - var prefix = networkId === NetworkMode.testNet ? "addr_test" : "addr"; - var bytes = fromHex(hex); - var words = bech32.bech32.toWords(bytes); - return bech32.bech32.encode(prefix, words, 1000); -}; -var fromHex = function (hex) { - return buffer.Buffer.from(hex, "hex"); -}; - var getWalletAddress = function (wallet) { return __awaiter(void 0, void 0, void 0, function () { var addresses, provider, web3, address; return __generator(this, function (_a) { @@ -361,7 +371,7 @@ var getSupportedWallets = function () { } else if (wallet.chain === SupportedChain.cardano) { if (window.cardano && window.cardano[wallet.id]) { - installedWallets.push(__assign(__assign(__assign({}, wallet), window.cardano[wallet.id]), { isInstalled: true })); + installedWallets.push(__assign(__assign(__assign({}, wallet), window.cardano[wallet.id]), { isInstalled: true, name: wallet.name })); } else { uninstalledWallets.push(__assign(__assign({}, wallet), { isInstalled: false })); @@ -834,7 +844,7 @@ var ConnectWalletWrapper = function (_a) { }; }; return (React__default["default"].createElement(React__default["default"].Fragment, null, supportedWallets.length === 0 ? (React__default["default"].createElement(Typography, { isInverted: true, style: { textAlign: "center" } }, "Cardano wallet extensions are currently only supported in Chrome and Brave browsers.")) : (supportedWallets.map(function (wallet) { return (React__default["default"].createElement("div", { key: wallet.id }, - React__default["default"].createElement(StyledButton, { iconLeft: wallet.icon, onClick: function (event) { return handleSelectWallet(event)(wallet); }, isFullWidth: true, activeWalletBgColor: activeWalletBgColor }, + React__default["default"].createElement(StyledButton, { iconLeft: wallet.name, onClick: function (event) { return handleSelectWallet(event)(wallet); }, isFullWidth: true, activeWalletBgColor: activeWalletBgColor }, React__default["default"].createElement("div", { style: { display: "flex", justifyContent: "space-between", @@ -917,7 +927,7 @@ var DisconnectWalletButton = function (_a) { var wallet = useConnectWallet().wallet; if (!wallet) return null; - return (React__default["default"].createElement(Button, { style: style, iconLeft: wallet.icon, onClick: onClick, isSmallIcon: true }, "Connected")); + return (React__default["default"].createElement(Button, { style: style, iconLeft: wallet.name, onClick: onClick, isSmallIcon: true }, "Disconnect")); }; var StyledWrapper$1 = styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: absolute;\n top: 42px;\n right: 70px;\n z-index: 9999;\n"], ["\n position: absolute;\n top: 42px;\n right: 70px;\n z-index: 9999;\n"]))); @@ -925,22 +935,29 @@ var WalletButton = function (_a) { var style = _a.style, rest = __rest(_a, ["style"]); var wallet = useConnectWallet().wallet; var buttonStyle = __assign({}, style); - return React__default["default"].createElement(StyledWrapper$1, null, !!wallet ? + return React__default["default"].createElement(React__default["default"].Fragment, null, !!wallet ? React__default["default"].createElement(DisconnectWalletButton, __assign({ style: buttonStyle }, rest)) : - React__default["default"].createElement(ConnectWalletButton, __assign({ style: buttonStyle }, rest))); + React__default["default"].createElement(StyledWrapper$1, null, + React__default["default"].createElement(ConnectWalletButton, __assign({ style: buttonStyle }, rest)))); }; var templateObject_1$1; var ConnectWallet = function (_a) { var onClickButton = _a.onClickButton, onCloseModal = _a.onCloseModal, onConnect = _a.onConnect, onError = _a.onError, _b = _a.mainButtonStyle, mainButtonStyle = _b === void 0 ? {} : _b, _c = _a.modalStyle, modalStyle = _c === void 0 ? {} : _c, _d = _a.modalHeaderStyle, modalHeaderStyle = _d === void 0 ? {} : _d, _e = _a.disconnectButtonStyle, disconnectButtonStyle = _e === void 0 ? {} : _e, _f = _a.fontFamily, fontFamily = _f === void 0 ? "" : _f, _g = _a.isInverted, isInverted = _g === void 0 ? false : _g; var _h = React.useState(false), isModalOpen = _h[0], setIsModalOpen = _h[1]; + var _j = useConnectWallet(), wallet = _j.wallet, disconnect = _j.disconnect; var handleButtonClick = function (event) { if (onClickButton) { onClickButton(event); } else { - setIsModalOpen(true); + if (!!wallet) { + disconnect(); + } + else { + setIsModalOpen(true); + } } }; var handleCloseModal = function (event) { diff --git a/dist/index.esm.js b/dist/index.esm.js index 47eb870..c0a8ae8 100644 --- a/dist/index.esm.js +++ b/dist/index.esm.js @@ -1,7 +1,7 @@ import React, { useRef, useEffect, useState, useCallback } from 'react'; -import Web3 from 'web3'; import { bech32 } from 'bech32'; import { Buffer } from 'buffer'; +import Web3 from 'web3'; import { decode, encode } from 'cbor-web'; import BigNumber from 'bignumber.js'; import { browserName } from 'react-device-detect'; @@ -107,6 +107,12 @@ var SupportedWallet; SupportedWallet["flint"] = "flint"; SupportedWallet["nami"] = "nami"; })(SupportedWallet || (SupportedWallet = {})); +var SupportedWalletName = { + metamask: "Metamask", + eternl: "Eternl", + flint: "Flint", + nami: "Nami" +}; var SupportedChain; (function (SupportedChain) { SupportedChain["ethereum"] = "ethereum"; @@ -153,6 +159,22 @@ var asyncTimeout = function (fn, errorMessage, ms) { }); }; +var addressFromHex = function (hex) { + var networkId = hex[1] === "0" ? NetworkMode.testNet : NetworkMode.mainNet; + var prefix = networkId === NetworkMode.testNet ? "addr_test" : "addr"; + var bytes = fromHex(hex); + var words = bech32.toWords(bytes); + return bech32.encode(prefix, words, 1000); +}; +var fromHex = function (hex) { + return Buffer.from(hex, "hex"); +}; +var formatWalletName = function (walletName) { + var originName = walletName.split(" ")[0].toLowerCase(); + var formatedName = SupportedWalletName[originName]; + return formatedName; +}; + var enableWallet = function (name) { return __awaiter(void 0, void 0, void 0, function () { var walletName, enabledWallet, ethereum, selectedWallet, enabledWalletAPI; var _a, _b; @@ -176,7 +198,6 @@ var enableWallet = function (name) { return __awaiter(void 0, void 0, void 0, fu _c.sent(); enabledWallet = { name: "Metamask", - icon: "Metamask", isEVM: true, }; return [3 /*break*/, 4]; @@ -193,7 +214,7 @@ var enableWallet = function (name) { return __awaiter(void 0, void 0, void 0, fu return [4 /*yield*/, asyncTimeout(selectedWallet.enable, "Enabling wallet timed out after 10 seconds", 10000)]; case 6: enabledWalletAPI = _c.sent(); - enabledWallet = __assign(__assign({}, selectedWallet), enabledWalletAPI); + enabledWallet = __assign(__assign(__assign({}, selectedWallet), enabledWalletAPI), { name: formatWalletName(selectedWallet.name) }); _c.label = 7; case 7: (_b = window.localStorage) === null || _b === void 0 ? void 0 : _b.setItem(storageKey, walletName); @@ -210,17 +231,6 @@ var disconnectWallet = function () { (_b = window.localStorage) === null || _b === void 0 ? void 0 : _b.removeItem(storageKey); }; -var addressFromHex = function (hex) { - var networkId = hex[1] === "0" ? NetworkMode.testNet : NetworkMode.mainNet; - var prefix = networkId === NetworkMode.testNet ? "addr_test" : "addr"; - var bytes = fromHex(hex); - var words = bech32.toWords(bytes); - return bech32.encode(prefix, words, 1000); -}; -var fromHex = function (hex) { - return Buffer.from(hex, "hex"); -}; - var getWalletAddress = function (wallet) { return __awaiter(void 0, void 0, void 0, function () { var addresses, provider, web3, address; return __generator(this, function (_a) { @@ -350,7 +360,7 @@ var getSupportedWallets = function () { } else if (wallet.chain === SupportedChain.cardano) { if (window.cardano && window.cardano[wallet.id]) { - installedWallets.push(__assign(__assign(__assign({}, wallet), window.cardano[wallet.id]), { isInstalled: true })); + installedWallets.push(__assign(__assign(__assign({}, wallet), window.cardano[wallet.id]), { isInstalled: true, name: wallet.name })); } else { uninstalledWallets.push(__assign(__assign({}, wallet), { isInstalled: false })); @@ -823,7 +833,7 @@ var ConnectWalletWrapper = function (_a) { }; }; return (React.createElement(React.Fragment, null, supportedWallets.length === 0 ? (React.createElement(Typography, { isInverted: true, style: { textAlign: "center" } }, "Cardano wallet extensions are currently only supported in Chrome and Brave browsers.")) : (supportedWallets.map(function (wallet) { return (React.createElement("div", { key: wallet.id }, - React.createElement(StyledButton, { iconLeft: wallet.icon, onClick: function (event) { return handleSelectWallet(event)(wallet); }, isFullWidth: true, activeWalletBgColor: activeWalletBgColor }, + React.createElement(StyledButton, { iconLeft: wallet.name, onClick: function (event) { return handleSelectWallet(event)(wallet); }, isFullWidth: true, activeWalletBgColor: activeWalletBgColor }, React.createElement("div", { style: { display: "flex", justifyContent: "space-between", @@ -906,7 +916,7 @@ var DisconnectWalletButton = function (_a) { var wallet = useConnectWallet().wallet; if (!wallet) return null; - return (React.createElement(Button, { style: style, iconLeft: wallet.icon, onClick: onClick, isSmallIcon: true }, "Connected")); + return (React.createElement(Button, { style: style, iconLeft: wallet.name, onClick: onClick, isSmallIcon: true }, "Disconnect")); }; var StyledWrapper$1 = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: absolute;\n top: 42px;\n right: 70px;\n z-index: 9999;\n"], ["\n position: absolute;\n top: 42px;\n right: 70px;\n z-index: 9999;\n"]))); @@ -914,22 +924,29 @@ var WalletButton = function (_a) { var style = _a.style, rest = __rest(_a, ["style"]); var wallet = useConnectWallet().wallet; var buttonStyle = __assign({}, style); - return React.createElement(StyledWrapper$1, null, !!wallet ? + return React.createElement(React.Fragment, null, !!wallet ? React.createElement(DisconnectWalletButton, __assign({ style: buttonStyle }, rest)) : - React.createElement(ConnectWalletButton, __assign({ style: buttonStyle }, rest))); + React.createElement(StyledWrapper$1, null, + React.createElement(ConnectWalletButton, __assign({ style: buttonStyle }, rest)))); }; var templateObject_1$1; var ConnectWallet = function (_a) { var onClickButton = _a.onClickButton, onCloseModal = _a.onCloseModal, onConnect = _a.onConnect, onError = _a.onError, _b = _a.mainButtonStyle, mainButtonStyle = _b === void 0 ? {} : _b, _c = _a.modalStyle, modalStyle = _c === void 0 ? {} : _c, _d = _a.modalHeaderStyle, modalHeaderStyle = _d === void 0 ? {} : _d, _e = _a.disconnectButtonStyle, disconnectButtonStyle = _e === void 0 ? {} : _e, _f = _a.fontFamily, fontFamily = _f === void 0 ? "" : _f, _g = _a.isInverted, isInverted = _g === void 0 ? false : _g; var _h = useState(false), isModalOpen = _h[0], setIsModalOpen = _h[1]; + var _j = useConnectWallet(), wallet = _j.wallet, disconnect = _j.disconnect; var handleButtonClick = function (event) { if (onClickButton) { onClickButton(event); } else { - setIsModalOpen(true); + if (!!wallet) { + disconnect(); + } + else { + setIsModalOpen(true); + } } }; var handleCloseModal = function (event) { diff --git a/dist/utils/helpers.d.ts b/dist/utils/helpers.d.ts index 6851ba0..99ee431 100644 --- a/dist/utils/helpers.d.ts +++ b/dist/utils/helpers.d.ts @@ -1,3 +1,4 @@ import { Buffer } from "buffer"; export declare const addressFromHex: (hex: string) => string; export declare const fromHex: (hex: string) => Buffer; +export declare const formatWalletName: (walletName: string) => string; diff --git a/package.json b/package.json index 622cba4..a0110f3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "working-dead-wallet", - "version": "0.2.1", + "version": "0.3.1", "description": "Working Dead wallet connector package", "main": "dist/index.cjs.js", "module": "dist/index.esm.js", diff --git a/src/common/types.ts b/src/common/types.ts index c39af39..3622602 100644 --- a/src/common/types.ts +++ b/src/common/types.ts @@ -5,6 +5,13 @@ export enum SupportedWallet { nami = "nami" } +export const SupportedWalletName = { + metamask: "Metamask", + eternl: "Eternl", + flint: "Flint", + nami: "Nami" +} + export enum SupportedChain { ethereum = "ethereum", cardano = "cardano" diff --git a/src/components/ConnectWallet/index.tsx b/src/components/ConnectWallet/index.tsx index 2d65395..44b2f2d 100644 --- a/src/components/ConnectWallet/index.tsx +++ b/src/components/ConnectWallet/index.tsx @@ -3,6 +3,7 @@ import React, { MouseEvent, useState, FunctionComponent } from "react"; import WalletModal from "../../components/WalletModal"; import WalletButton from "../../components/WalletButton"; import { ConnectWalletProps } from "./types"; +import { useConnectWallet } from "../../hooks"; const ConnectWallet: FunctionComponent = ({ onClickButton, @@ -17,12 +18,17 @@ const ConnectWallet: FunctionComponent = ({ isInverted = false, }) => { const [isModalOpen, setIsModalOpen] = useState(false); + const { wallet, disconnect } = useConnectWallet(); const handleButtonClick = (event: MouseEvent) => { if (onClickButton) { onClickButton(event); } else { - setIsModalOpen(true); + if (!!wallet) { + disconnect(); + } else { + setIsModalOpen(true); + } } }; diff --git a/src/components/WalletButton/DisconnectWalletButton.tsx b/src/components/WalletButton/DisconnectWalletButton.tsx index 832868b..9fc3c29 100644 --- a/src/components/WalletButton/DisconnectWalletButton.tsx +++ b/src/components/WalletButton/DisconnectWalletButton.tsx @@ -13,8 +13,8 @@ const DisconnectWalletButton: FunctionComponent = ( if (!wallet) return null; return ( - ); }; diff --git a/src/components/WalletButton/index.tsx b/src/components/WalletButton/index.tsx index 6a7c4a6..8358e16 100644 --- a/src/components/WalletButton/index.tsx +++ b/src/components/WalletButton/index.tsx @@ -11,7 +11,7 @@ const StyledWrapper = styled.div` top: 42px; right: 70px; z-index: 9999; -` +`; const WalletButton: FunctionComponent = ({ style, @@ -23,13 +23,16 @@ const WalletButton: FunctionComponent = ({ ...style, }; - return - {!!wallet ? - - : - + return <> + { + !!wallet ? + + : + + + } - + }; export default WalletButton; diff --git a/src/components/WalletWrapper/ConnectWalletWrapper.tsx b/src/components/WalletWrapper/ConnectWalletWrapper.tsx index 5840203..725b1dc 100644 --- a/src/components/WalletWrapper/ConnectWalletWrapper.tsx +++ b/src/components/WalletWrapper/ConnectWalletWrapper.tsx @@ -6,7 +6,7 @@ import { ButtonProps } from "../../elements/Button"; import { useConnectWallet } from "../../hooks"; import { getSupportedWallets } from "../../utils"; import { icons } from "../../assets"; -import { SupportedChain, WalletInfo } from "../../common"; +import { WalletInfo } from "../../common"; import { WalletWrapperProps } from "./types"; interface StyledButtonProps extends ButtonProps { @@ -70,7 +70,7 @@ const ConnectWalletWrapper: FunctionComponent = ({ return (
handleSelectWallet(event)(wallet)} isFullWidth activeWalletBgColor={activeWalletBgColor} diff --git a/src/utils/enableWallet.ts b/src/utils/enableWallet.ts index 1f08081..01724d3 100644 --- a/src/utils/enableWallet.ts +++ b/src/utils/enableWallet.ts @@ -1,4 +1,5 @@ import { EnabledWallet, EnabledWalletApi, SupportedWallet, asyncTimeout, storageKey } from "../common"; +import { formatWalletName } from "./helpers"; const enableWallet = async (name?: string): Promise => { if (!(window.cardano || (window as any).ethereum)) { @@ -22,7 +23,6 @@ const enableWallet = async (name?: string): Promise => { await ethereum.request({ method: "eth_requestAccounts" }) enabledWallet = { name: "Metamask", - icon: "Metamask", isEVM: true, } } catch (e) { @@ -47,6 +47,7 @@ const enableWallet = async (name?: string): Promise => { enabledWallet = { ...selectedWallet, ...enabledWalletAPI, + name: formatWalletName(selectedWallet.name) }; } diff --git a/src/utils/getSupportedWallets.ts b/src/utils/getSupportedWallets.ts index d3a28a7..3f1a6e4 100644 --- a/src/utils/getSupportedWallets.ts +++ b/src/utils/getSupportedWallets.ts @@ -66,6 +66,7 @@ const getSupportedWallets = (): ReadonlyArray => { ...wallet, ...window.cardano[wallet.id], isInstalled: true, + name: wallet.name }); } else { uninstalledWallets.push({ diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index b028d06..e66372b 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -1,7 +1,7 @@ import { bech32 } from "bech32"; import { Buffer } from "buffer"; -import { NetworkMode } from "../common"; +import { NetworkMode, SupportedWalletName } from "../common"; export const addressFromHex = (hex: string) => { const networkId = hex[1] === "0" ? NetworkMode.testNet : NetworkMode.mainNet; @@ -16,3 +16,9 @@ export const addressFromHex = (hex: string) => { export const fromHex = (hex: string): Buffer => { return Buffer.from(hex, "hex"); }; + +export const formatWalletName = (walletName: string) => { + const originName: string = walletName.split(" ")[0].toLowerCase(); + const formatedName: string = SupportedWalletName[originName as keyof typeof SupportedWalletName]; + return formatedName; +} \ No newline at end of file