use-midnight
Version:
A React hook to use Midnight in the browser
81 lines • 3.86 kB
JavaScript
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());
});
};
import React from "react";
import { useState, useEffect } from "react";
import laceLogo from "./lace.svg";
import styles from "./midnight.module.css";
export const useMidnight = () => __awaiter(void 0, void 0, void 0, function* () {
// checks if midnight.js has been injected into the browser window
if (window.midnight) {
const midnight = window.midnight;
if (midnight && midnight.mnLace) {
const mnLace = midnight.mnLace;
// checks if the dapp has been authorized
const isEnabled = yield mnLace.isEnabled();
if (isEnabled) {
const config = yield mnLace.serviceUriConfig();
// finds the user's address
const api = yield mnLace.enable();
const state = yield api.state();
return {
apiVersion: mnLace.apiVersion,
isLaceInstalled: true,
isEnabled,
userAddress: state.address,
walletApi: api,
serviceUriConfig: config
};
}
return {
apiVersion: mnLace.apiVersion,
isLaceInstalled: true,
isEnabled,
userAddress: "",
enable: mnLace.enable
};
}
}
return {
apiVersion: "",
isLaceInstalled: false,
isEnabled: false,
userAddress: undefined
};
});
export const MidnightButton = (props) => {
let [midnight, setMidnight] = useState(undefined);
const connectWallet = (midnight) => __awaiter(void 0, void 0, void 0, function* () {
if (midnight && midnight.enable) {
const api = yield midnight.enable();
const state = yield api.state();
setMidnight(Object.assign(Object.assign({}, midnight), { isEnabled: true, userAddress: state.address, walletApi: api, serviceUriConfig: midnight.serviceUriConfig }));
}
});
const truncateAddr = (addr) => {
if (!addr) {
return "No address";
}
else {
return `${addr.slice(0, 7)}...${addr.slice(-7)}`;
}
};
useEffect(() => {
useMidnight().then(mn => setMidnight(mn));
}, []);
useEffect(() => {
if (props.subscribe && midnight) {
props.subscribe(midnight);
}
});
return midnight && midnight.isLaceInstalled ? (midnight.isEnabled ? (React.createElement("button", { className: props.styles ? "" : styles.midnight, style: props.styles },
React.createElement("img", { src: laceLogo, alt: "lace", style: { width: "20px", height: "20px" } }),
React.createElement("span", null, truncateAddr(midnight.userAddress)))) : (React.createElement("button", { className: props.styles ? "" : styles.midnight, style: props.styles, onClick: () => connectWallet(midnight) }, "Connect Lace Wallet"))) : (React.createElement("a", { href: "https://releases.midnight.network/#/wallet", target: "_blank", rel: "noopener noreferrer nofollow" }, "Please install the Lace wallet to continue"));
};
//# sourceMappingURL=index.js.map