@coinmeca/ui
Version:
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
145 lines • 6.95 kB
JSX
"use client";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Controls, Elements, Layouts } from "../../../components";
import { Modals } from "../../../containers";
export default function Connect(props) {
const timer = props?.timer || 5000;
const texts = {
chain: {
title: props?.texts?.chain?.title || "Connect Wallet",
description: props?.texts?.chain?.sub || "Please select chain will you use.",
},
wallet: {
title: props?.texts?.wallet?.title,
description: props?.texts?.wallet?.sub || "Please select wallet will you connect.",
},
};
const [chain, setChain] = useState();
const [wallet, setWallet] = useState();
const [process, setProcess] = useState(typeof props?.process === "boolean" || props?.process === null ? props?.process : null);
const chainResolver = useCallback((c) => {
if (typeof props?.resolver?.chain === "function")
return props?.resolver?.chain(c);
return c;
}, [props?.resolver?.chain]);
const chainFormatter = (data) => (typeof data === "object" ? Object.values(data) : data?.length > 0 && data)?.map((c) => {
const chain = chainResolver(c);
return {
children: <Elements.Avatar img={chain?.logo} name={chain?.name}/>,
onClick: (e) => {
setChain(c);
if (typeof props?.onChain === "function")
props?.onChain(c, e);
},
};
});
const chainName = useMemo(() => {
const c = chainResolver(chain);
return <Elements.Avatar scale={0.625} size={2.25} style={{ justifyContent: "center" }} img={c.logo} name={c.name}/>;
}, [chain, chainResolver]);
const walletResolver = useCallback((w) => {
if (typeof props?.resolver?.wallet === "function")
return props?.resolver?.wallet(w);
return w;
}, [props?.resolver?.wallet]);
const walletListFormatter = (data) => (typeof data === "object" ? Object.values(data) : data?.length > 0 && data)?.map((w) => {
const wallet = walletResolver(w);
return {
children: (<Elements.Avatar img={wallet?.logo} name={wallet?.name} style={{ width: "-webkit-fill-available" }}/>),
onClick: async (e) => await handleConnect(e, w),
};
});
const handleBack = (e) => {
if (typeof props?.onBack === "function")
props?.onBack(e);
setProcess(null);
setWallet(null);
};
const handleClose = (e) => {
if (typeof props?.onClose === "function")
props?.onClose(e);
setProcess(null);
setChain(null);
};
const handleError = async (e, error) => {
if (typeof props?.onError === "function")
await props?.onError(e, error);
};
const handleConnect = async (e, w) => {
setWallet(w);
if (typeof props?.onWallet === "function")
await props
?.onWallet(chain, w, e)
?.then()
?.catch((error) => handleError(e, error));
if (typeof props?.onConnect === "function")
await props
?.onConnect(chain, w, e)
?.then(() => {
setProcess(true);
})
?.catch((error) => {
setProcess(false);
handleError(e, error);
});
};
useEffect(() => {
return () => {
setProcess(null);
setWallet(null);
setChain(null);
};
}, []);
useEffect(() => {
if (typeof props.onClose === "function" &&
(typeof props?.process === "boolean" || props?.process === null ? props?.process : process)) {
const close = setInterval(() => {
props?.onClose();
}, timer);
return () => clearInterval(close);
}
}, [props?.process, process]);
return (<Modals.Process {...props} title={(!chain ? texts.chain.title : texts.wallet.title) || chainName} process={typeof props?.process === "boolean" || props?.process === null ? props?.process : process} content={<Layouts.Contents.SlideContainer contents={[
{
active: props?.chains ? !chain : false,
children: (<Layouts.Col gap={2} fill>
<Elements.Text type={"strong"} height={2} opacity={0.6} align={"center"}>
{texts.chain.description}
</Elements.Text>
<Layouts.Contents.InnerContent style={{ justifyContent: "center" }} scroll>
<Layouts.List list={chainFormatter(props?.chains)}/>
</Layouts.Contents.InnerContent>
<Controls.Button onClick={(e) => handleClose(e)}>
{props?.texts?.close || "Close"}
</Controls.Button>
</Layouts.Col>),
},
{
active: props?.chains && chain ? true : false,
children: (<Layouts.Col gap={2} fill>
<Elements.Text type={"strong"} height={2} opacity={0.6} align={"center"}>
{texts.wallet.description}
</Elements.Text>
<Layouts.Contents.InnerContent style={{ justifyContent: "center" }} scroll>
<Layouts.List list={walletListFormatter(props?.wallets)}/>
</Layouts.Contents.InnerContent>
<Controls.Button onClick={() => {
setChain(undefined);
setProcess(null);
}}>
{props?.texts?.back || "Back"}
</Controls.Button>
</Layouts.Col>),
},
]}/>} failure={{
message: props?.failure?.message || "Processing has failed.",
children: (<Controls.Button onClick={(e) => handleBack(e)}>{props?.texts?.goBack || "Go Back"}</Controls.Button>),
}} loading={{
active: props?.loading?.active || wallet,
message: props?.loading?.message || "Please wait until the processing is complete.",
}} success={{
message: props?.success?.message || "Processing succeeded.",
children: <Controls.Button onClick={(e) => handleClose(e)}>{props?.texts?.ok || "OK"}</Controls.Button>,
}} onClose={(e) => handleClose(e)} close={!wallet}/>);
}
//# sourceMappingURL=Connect.jsx.map