@web3jskit/walletkit 0.0.1

package/dist/src/components/Header/style.js

@@ -0,0 +1,73 @@
+import { styled } from 'styled-components';
+const ModalHeaderBox = styled.div `
+	width: 100%;
+	height: 56px;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	flex-shrink: 0;
+
+	.backBtn {
+		cursor: pointer;
+		margin-left: 16px;
+
+		path {
+			fill: ${({ theme }) => theme.backArrowColor};
+		}
+	}
+
+	.title {
+		color: ${({ theme }) => theme.textColor};
+		font-size: 16px;
+		font-weight: 700;
+		line-height: 170%;
+		letter-spacing: 0.3px;
+	}
+
+	.closeBtn {
+		margin-right: 16px;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+		border-radius: 12px;
+		transition: all 0.2s;
+		color: ${({ theme }) => theme.closeBtnColor};
+		transform-origin: 50% 50%;
+		background-color: ${({ theme }) => theme.closeBtnBg};
+		z-index: 1;
+
+		&:hover {
+			background-color: ${({ theme }) => theme.closeBtnHoverBg};
+			transform: rotate(180deg);
+			transition: all 0.2s;
+		}
+	}
+
+	&.asideTitle {
+		justify-content: flex-start;
+
+		.closeBtn {
+			display: none;
+		}
+	}
+
+	@media (max-width: 768px) {
+		&.mainTitle {
+			display: none;
+		}
+
+		&.asideTitle {
+			justify-content: space-between;
+
+			.closeBtn {
+				display: flex;
+			}
+		}
+	}
+`;
+export default ModalHeaderBox;
+//# sourceMappingURL=style.js.map

package/dist/src/components/Header/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../../src/components/Header/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;WActB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc;;;;;WAKnC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS;;;;;;;;;;;;;;;;;WAiB9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa;;sBAEvB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU;;;;uBAI9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B1D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/src/components/Icon/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+interface IconImageArg {
+    src: any;
+    width?: number | string;
+    height?: number | string;
+    borderRadius?: string;
+    isRadius?: boolean;
+    className?: string;
+}
+interface FoldIconImageArg {
+    src: Array<string>;
+    width?: number | string;
+    height?: number | string;
+    offset?: number;
+    proportion?: number;
+    className?: string;
+    isRadius?: boolean;
+}
+export declare const Icon: React.FC<IconImageArg>;
+export declare const Image: React.FC<IconImageArg>;
+export declare const FoldIconBox: React.FC<FoldIconImageArg>;
+export declare const FoldIconBoxBig: React.FC<FoldIconImageArg>;
+export default Icon;

package/dist/src/components/Icon/index.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { styled } from 'styled-components';
+const IconImage = styled.img `
+	display: block;
+	transition: all 0.2s;
+`;
+const IconImageBox = styled.div `
+	cursor: pointer;
+	display: flex;
+	position: relative;
+`;
+const IconItem = styled.div `
+	cursor: pointer;
+	float: left;
+	display: flex;
+	justify-items: center;
+`;
+export const Icon = ({ src, width, height, className }) => {
+    return (_jsx(IconImage, { className: className, src: src, width: width ? width + 'px' : '24px', height: height ? height + 'px' : '24px' }));
+};
+export const Image = ({ src, width, height, isRadius = true, className, borderRadius }) => {
+    return (_jsx(IconImage, { className: className, src: src, width: width ? width : 'auto', height: height ? height : 'auto', style: { borderRadius: borderRadius ? borderRadius : isRadius ? '50%' : '0' } }));
+};
+export const FoldIconBox = ({ src, width, height, offset = 0, isRadius = true }) => {
+    return (_jsx(IconImageBox, { children: src.map((item, index) => {
+            return (_jsx(IconItem, { style: {
+                    zIndex: index + 1,
+                    marginLeft: index == 0 ? '0px' : offset + 'px',
+                    width: width ? width + 'px' : '24px',
+                    height: height ? height + 'px' : '24px'
+                }, children: _jsx(IconImage, { src: item, width: width ? width : 24, height: height ? height : 24, style: { borderRadius: isRadius ? '50%' : '0' } }) }, index));
+        }) }));
+};
+export const FoldIconBoxBig = ({ src, width, height, offset = 0, proportion = 1 }) => {
+    return (_jsx(IconImageBox, { children: src.map((item, index) => {
+            return (_jsx(IconItem, { style: {
+                    zIndex: index + 1,
+                    marginLeft: index == 0 ? '0px' : offset + 'px',
+                    marginTop: index == 0 ? '0px' : -(offset / 2) + 'px',
+                    width: width ? width + 'px' : '24px',
+                    height: height ? height + 'px' : '24px'
+                }, children: index === src.length - 1 ? (_jsx(IconImage, { src: item, width: width ? Number(width) * proportion : 24 * proportion, height: height ? Number(height) * proportion : 24 * proportion })) : (_jsx(IconImage, { src: item, width: width ? width : 24, height: height ? height : 24 })) }, index));
+        }) }));
+};
+export default Icon;
+//# sourceMappingURL=index.js.map

package/dist/src/components/Icon/index.js.map

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

package/dist/src/components/Introduce/index.d.ts

@@ -0,0 +1,5 @@
+interface IntroduceProps {
+    onGetWallet?: () => void;
+}
+export declare function Introduce({ onGetWallet }: IntroduceProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/Introduce/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import ModalHeader from '../Header/ModalHeader';
+import IntroduceContainer from './style';
+export function Introduce({ onGetWallet }) {
+    const { t } = useTranslation();
+    return (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { className: "mainTitle" }), _jsxs(IntroduceContainer, { children: [_jsx("div", { className: "title", children: t('introduceQuestion') }), _jsx("div", { className: "introduce", children: t('introduceAnswer') }), _jsx("div", { className: "detail", children: t('introduceDetail') }), _jsx("div", { className: "footer", children: _jsx("div", { className: "button", onClick: () => onGetWallet?.(), children: t('getWallet') }) })] })] }));
+}
+//# sourceMappingURL=index.js.map

package/dist/src/components/Introduce/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Introduce/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,kBAAkB,MAAM,SAAS,CAAC;AAMzC,MAAM,UAAU,SAAS,CAAC,EAAE,WAAW,EAAkB;IACxD,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAE/B,OAAO,CACN,8BACC,KAAC,WAAW,IAAC,SAAS,EAAC,WAAW,GAAG,EACrC,MAAC,kBAAkB,eAClB,cAAK,SAAS,EAAC,OAAO,YAAE,CAAC,CAAC,mBAAmB,CAAC,GAAO,EACrD,cAAK,SAAS,EAAC,WAAW,YAAE,CAAC,CAAC,iBAAiB,CAAC,GAAO,EACvD,cAAK,SAAS,EAAC,QAAQ,YAAE,CAAC,CAAC,iBAAiB,CAAC,GAAO,EACpD,cAAK,SAAS,EAAC,QAAQ,YACtB,cAAK,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,EAAE,YACpD,CAAC,CAAC,WAAW,CAAC,GACV,GAID,IACc,IACnB,CACH,CAAC;AACH,CAAC"}

package/dist/src/components/Introduce/style.d.ts

@@ -0,0 +1,2 @@
+declare const IntroduceContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export default IntroduceContainer;

package/dist/src/components/Introduce/style.js

@@ -0,0 +1,72 @@
+import { styled } from 'styled-components';
+const IntroduceContainer = styled.div `
+	display: flex;
+	flex-direction: column;
+	margin: 84px 50px 0 96px;
+	font-family: Manrope;
+	color: ${({ theme }) => theme.textColor1};
+
+	.title {
+		color: ${({ theme }) => theme.blue};
+		font-size: 18px;
+		font-weight: 700;
+		line-height: 18px;
+	}
+
+	.introduce {
+		margin-top: 24px;
+		font-size: 12px;
+		font-weight: 700;
+		line-height: 14px;
+	}
+
+	.detail {
+		margin-top: 16px;
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 14px;
+	}
+
+	.footer {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		max-width: 120px;
+	}
+
+	.button {
+		width: 100%;
+		display: inline-block;
+		margin-top: 32px;
+		padding: 11px 16px;
+		color: ${({ theme }) => theme.buttonColor};
+		background: ${({ theme }) => theme.buttonBg};
+		font-size: 14px;
+		font-weight: 700;
+		line-height: 14px;
+		text-align: center;
+		border-radius: 8px;
+		box-sizing: border-box;
+		cursor: pointer;
+	}
+
+	.more {
+		margin-top: 8px;
+		font-size: 12px;
+		font-style: normal;
+		font-weight: 700;
+		cursor: pointer;
+	}
+
+	@media (max-width: 768px) {
+		padding: 40px 32px 0;
+		margin: 0;
+		align-items: center;
+
+		.detail {
+			text-align: center;
+		}
+	}
+`;
+export default IntroduceContainer;
+//# sourceMappingURL=style.js.map

package/dist/src/components/Introduce/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../../src/components/Introduce/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;UAK3B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU;;;WAG9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAgCzB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW;gBAC3B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2B5C,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/src/components/Modal/ConnectModal.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+interface ModalProps {
+    isOpen: boolean;
+    closeAble?: boolean;
+    slots?: ReactNode[];
+}
+export declare function ConnectModal({ isOpen, slots }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/Modal/ConnectModal.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import ModalHeader from '../Header/ModalHeader';
+import Modal from './index';
+import { SlotWrapper } from '../../styled';
+import { SupportWallets } from '@web3jskit/wallethelper';
+import { useTranslation } from 'react-i18next';
+import { useCallback, useEffect, useState } from 'react';
+import { WalletTriggerButton } from '../WalletTriggerButton';
+import { Introduce } from '../Introduce';
+import { WalletList } from '../WalletList';
+import { GetWallet } from '../GetWallet';
+import { Connecting } from '../Connecting';
+import { useWalletKit } from '../../hooks/useWalletKit';
+import { AsideList, ModalAside, ModalContainer, ModalMain } from './style';
+var Step;
+(function (Step) {
+    Step[Step["Introduce"] = 0] = "Introduce";
+    Step[Step["WalletList"] = 1] = "WalletList";
+    Step[Step["GetWallet"] = 2] = "GetWallet";
+    Step[Step["Connecting"] = 3] = "Connecting";
+})(Step || (Step = {}));
+export function ConnectModal({ isOpen, slots }) {
+    const { t } = useTranslation();
+    const { currentChain, getConnectors, currentConnector, connectStatus, closeModal } = useWalletKit();
+    const [step, setStep] = useState(Step.Introduce);
+    const [selectedWallet, setSelectedWallet] = useState(null);
+    const [connectors, setConnectors] = useState([]);
+    const requestConnectors = async () => {
+        const list = await getConnectors(currentChain);
+        setConnectors(list);
+    };
+    useEffect(() => {
+        if (isOpen) {
+            requestConnectors();
+        }
+        else {
+            setStep(0);
+            setConnectors([]);
+        }
+    }, [isOpen, currentChain]);
+    useEffect(() => {
+        switch (connectStatus) {
+            case 'connected':
+                closeModal();
+                break;
+            default:
+                setStep(0);
+                break;
+        }
+    }, [connectStatus]);
+    const renderMainByStep = useCallback(() => {
+        switch (step) {
+            case 0:
+                return (_jsx(Introduce, { onGetWallet: () => {
+                        setStep(Step.WalletList);
+                    } }));
+            case 1:
+                return (_jsx(WalletList, { list: SupportWallets, onBack: () => {
+                        setStep(0);
+                    }, onGetWallet: wallet => {
+                        if (wallet.name === 'GelWallet') {
+                            window.open('https://gelwallet.com', '_blank');
+                            return;
+                        }
+                        setSelectedWallet(wallet);
+                        setStep(Step.GetWallet);
+                    } }));
+            case 2:
+                return (_jsx(GetWallet, { wallet: selectedWallet, onBack: () => {
+                        setStep(Step.WalletList);
+                    } }));
+            default:
+                return _jsx(_Fragment, {});
+        }
+    }, [step]);
+    return (_jsx(Modal, { isOpen: isOpen, children: _jsxs(ModalContainer, { children: [_jsxs(ModalAside, { className: step !== 0 ? 'hidden' : '', children: [_jsx(ModalHeader, { title: t('connectWallet'), className: "asideTitle" }), _jsxs(AsideList, { children: [connectors.length ? (connectors.map((connector, index) => {
+                                    return _jsx(WalletTriggerButton, { connector: connector }, index);
+                                })) : (_jsx(_Fragment, {})), slots ? (slots.map((Slot, index) => {
+                                    return _jsx(SlotWrapper, { children: Slot }, index);
+                                })) : (_jsx(_Fragment, {}))] })] }), _jsx(ModalMain, { children: connectStatus === 'connecting' ? _jsx(Connecting, { wallet: currentConnector }) : renderMainByStep() })] }) }));
+}
+//# sourceMappingURL=ConnectModal.js.map

package/dist/src/components/Modal/ConnectModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectModal.js","sourceRoot":"","sources":["../../../../src/components/Modal/ConnectModal.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAQ3E,IAAK,IAKJ;AALD,WAAK,IAAI;IACR,yCAAa,CAAA;IACb,2CAAc,CAAA;IACd,yCAAa,CAAA;IACb,2CAAc,CAAA;AACf,CAAC,EALI,IAAI,KAAJ,IAAI,QAKR;AAED,MAAM,UAAU,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,EAAc;IACzD,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAE/B,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,YAAY,EAAE,CAAC;IAEpG,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACjD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAa,IAAI,CAAC,CAAC;IACvE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAQ,EAAE,CAAC,CAAC;IAExD,MAAM,iBAAiB,GAAG,KAAK,IAAI,EAAE;QACpC,MAAM,IAAI,GAAG,MAAM,aAAa,CAAC,YAAY,CAAC,CAAC;QAC/C,aAAa,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,MAAM,EAAE,CAAC;YACZ,iBAAiB,EAAE,CAAC;QACrB,CAAC;aAAM,CAAC;YACP,OAAO,CAAC,CAAC,CAAC,CAAC;YACX,aAAa,CAAC,EAAE,CAAC,CAAC;QACnB,CAAC;IACF,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACd,QAAQ,aAAa,EAAE,CAAC;YACvB,KAAK,WAAW;gBACf,UAAU,EAAE,CAAC;gBACb,MAAM;YACP;gBACC,OAAO,CAAC,CAAC,CAAC,CAAC;gBACX,MAAM;QACR,CAAC;IACF,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,QAAQ,IAAI,EAAE,CAAC;YACd,KAAK,CAAC;gBACL,OAAO,CACN,KAAC,SAAS,IACT,WAAW,EAAE,GAAG,EAAE;wBACjB,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;oBAC1B,CAAC,GACA,CACF,CAAC;YACH,KAAK,CAAC;gBACL,OAAO,CACN,KAAC,UAAU,IACV,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,CAAC,CAAC,CAAC;oBACZ,CAAC,EACD,WAAW,EAAE,MAAM,CAAC,EAAE;wBACrB,IAAI,MAAM,CAAC,IAAI,KAAK,WAAW,EAAE,CAAC;4BACjC,MAAM,CAAC,IAAI,CAAC,uBAAuB,EAAE,QAAQ,CAAC,CAAC;4BAC/C,OAAO;wBACR,CAAC;wBACD,iBAAiB,CAAC,MAAM,CAAC,CAAC;wBAC1B,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;oBACzB,CAAC,GACA,CACF,CAAC;YACH,KAAK,CAAC;gBACL,OAAO,CACN,KAAC,SAAS,IACT,MAAM,EAAE,cAAc,EACtB,MAAM,EAAE,GAAG,EAAE;wBACZ,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;oBAC1B,CAAC,GACA,CACF,CAAC;YACH;gBACC,OAAO,mBAAK,CAAC;QACf,CAAC;IACF,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACN,KAAC,KAAK,IAAC,MAAM,EAAE,MAAM,YACpB,MAAC,cAAc,eACd,MAAC,UAAU,IAAC,SAAS,EAAE,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,aAChD,KAAC,WAAW,IAAC,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,EAAE,SAAS,EAAC,YAAY,GAAG,EACjE,MAAC,SAAS,eACR,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CACpB,UAAU,CAAC,GAAG,CAAC,CAAC,SAAc,EAAE,KAAa,EAAE,EAAE;oCAChD,OAAO,KAAC,mBAAmB,IAAa,SAAS,EAAE,SAAS,IAA3B,KAAK,CAA0B,CAAC;gCAClE,CAAC,CAAC,CACF,CAAC,CAAC,CAAC,CACH,mBAAK,CACL,EACA,KAAK,CAAC,CAAC,CAAC,CACR,KAAK,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,KAAa,EAAE,EAAE;oCAC5C,OAAO,KAAC,WAAW,cAAc,IAAI,IAAZ,KAAK,CAAsB,CAAC;gCACtD,CAAC,CAAC,CACF,CAAC,CAAC,CAAC,CACH,mBAAK,CACL,IACU,IACA,EACb,KAAC,SAAS,cACR,aAAa,KAAK,YAAY,CAAC,CAAC,CAAC,KAAC,UAAU,IAAC,MAAM,EAAE,gBAAgB,GAAI,CAAC,CAAC,CAAC,gBAAgB,EAAE,GACpF,IACI,GACV,CACR,CAAC;AACH,CAAC"}

package/dist/src/components/Modal/WalletInfoModal.d.ts

@@ -0,0 +1,5 @@
+interface ModalProps {
+    isOpen: boolean;
+}
+export declare function WalletInfoModal({ isOpen }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/Modal/WalletInfoModal.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Modal from './index';
+import { useTranslation } from 'react-i18next';
+import ModalHeader from '../Header/ModalHeader';
+import { useWalletKit } from '../../hooks/useWalletKit';
+import { formatAddress } from '../../utils/formatter';
+import { InfoModalContainer } from './style';
+import CopySvg from '../SVGs/copySvg';
+import CopiedSvg from '../SVGs/copiedSvg';
+import ExitSvg from '../SVGs/exitSvg';
+import copyToClipboard from 'copy-to-clipboard';
+import { useEffect, useState } from 'react';
+import { generateRandomAvatar } from '../../utils/generateAvatar';
+export function WalletInfoModal({ isOpen }) {
+    const { t } = useTranslation();
+    const { walletAddress, closeModal, currentConnector, avatar, setAvatar } = useWalletKit();
+    const [copied, setCopied] = useState(false);
+    const generateAvatar = () => {
+        const newAvatar = generateRandomAvatar();
+        setAvatar(newAvatar);
+    };
+    useEffect(() => {
+        generateAvatar();
+    }, []);
+    return (_jsx(Modal, { isOpen: isOpen, children: _jsxs(InfoModalContainer, { children: [_jsx(ModalHeader, {}), _jsx("div", { className: "avatarBox", onClick: () => generateAvatar(), children: _jsx("div", { className: "avatar", style: {
+                            backgroundColor: avatar?.bg
+                        }, children: avatar?.text }) }), _jsx("div", { className: "accountInfo", children: _jsx("div", { className: "address", children: formatAddress(walletAddress) }) }), _jsxs("div", { className: "btnGroup", children: [_jsxs("div", { className: "button", onClick: () => {
+                                copyToClipboard(walletAddress);
+                                if (copied)
+                                    return;
+                                setCopied(true);
+                                setTimeout(() => {
+                                    setCopied(false);
+                                }, 1000);
+                            }, children: [_jsx("div", { className: "btnIcon", children: copied ? _jsx(CopiedSvg, {}) : _jsx(CopySvg, {}) }), _jsx("div", { className: "btnText", children: t(copied ? 'copied' : 'copyAddress') })] }), _jsxs("div", { className: "button", onClick: () => {
+                                currentConnector?.disconnect();
+                                closeModal();
+                            }, children: [_jsx("div", { className: "btnIcon", children: _jsx(ExitSvg, {}) }), _jsx("div", { className: "btnText", children: t('disConnect') })] })] })] }) }));
+}
+//# sourceMappingURL=WalletInfoModal.js.map

package/dist/src/components/Modal/WalletInfoModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletInfoModal.js","sourceRoot":"","sources":["../../../../src/components/Modal/WalletInfoModal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,OAAO,MAAM,iBAAiB,CAAC;AACtC,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,OAAO,MAAM,iBAAiB,CAAC;AACtC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAMlE,MAAM,UAAU,eAAe,CAAC,EAAE,MAAM,EAAc;IACrD,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAC/B,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE,CAAC;IAE1F,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,cAAc,GAAG,GAAG,EAAE;QAC3B,MAAM,SAAS,GAAG,oBAAoB,EAAE,CAAC;QACzC,SAAS,CAAC,SAAS,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACd,cAAc,EAAE,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACN,KAAC,KAAK,IAAC,MAAM,EAAE,MAAM,YACpB,MAAC,kBAAkB,eAClB,KAAC,WAAW,KAAG,EACf,cAAK,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE,YACzD,cACC,SAAS,EAAC,QAAQ,EAClB,KAAK,EAAE;4BACN,eAAe,EAAE,MAAM,EAAE,EAAE;yBAC3B,YAEA,MAAM,EAAE,IAAI,GACR,GACD,EACN,cAAK,SAAS,EAAC,aAAa,YAC3B,cAAK,SAAS,EAAC,SAAS,YAAE,aAAa,CAAC,aAAa,CAAC,GAAO,GAExD,EACN,eAAK,SAAS,EAAC,UAAU,aACxB,eACC,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE;gCACb,eAAe,CAAC,aAAa,CAAC,CAAC;gCAC/B,IAAI,MAAM;oCAAE,OAAO;gCACnB,SAAS,CAAC,IAAI,CAAC,CAAC;gCAChB,UAAU,CAAC,GAAG,EAAE;oCACf,SAAS,CAAC,KAAK,CAAC,CAAC;gCAClB,CAAC,EAAE,IAAI,CAAC,CAAC;4BACV,CAAC,aAED,cAAK,SAAS,EAAC,SAAS,YAAE,MAAM,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,GAAO,EACrE,cAAK,SAAS,EAAC,SAAS,YAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,GAAO,IAChE,EACN,eACC,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE;gCACb,gBAAgB,EAAE,UAAU,EAAE,CAAC;gCAC/B,UAAU,EAAE,CAAC;4BACd,CAAC,aAED,cAAK,SAAS,EAAC,SAAS,YACvB,KAAC,OAAO,KAAG,GACN,EACN,cAAK,SAAS,EAAC,SAAS,YAAE,CAAC,CAAC,YAAY,CAAC,GAAO,IAC3C,IACD,IACc,GACd,CACR,CAAC;AACH,CAAC"}

package/dist/src/components/Modal/index.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode, type RefObject } from 'react';
+import '@reach/dialog/styles.css';
+interface ModalProps {
+    isOpen: boolean;
+    minHeight?: number | false;
+    maxHeight?: number;
+    initialFocusRef?: RefObject<any>;
+    children?: ReactNode;
+    closeAble?: boolean;
+}
+export default function Modal({ isOpen, children, closeAble }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/Modal/index.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import {} from 'react';
+import { styled } from 'styled-components';
+import { animated, useTransition } from '@react-spring/web';
+import { DialogOverlay, DialogContent } from '@reach/dialog';
+import '@reach/dialog/styles.css';
+import { useWalletKit } from '../../hooks/useWalletKit';
+const AnimatedDialogOverlay = animated(DialogOverlay);
+const AnimatedDialogContent = animated(DialogContent);
+const StyledDialogOverlay = styled(AnimatedDialogOverlay) `
+	&[data-reach-dialog-overlay] {
+		width: 100vw;
+		z-index: 99;
+	}
+`;
+const StyledDialogContent = styled(({ ...rest }) => _jsx(AnimatedDialogContent, { ...rest })).attrs({
+    'aria-label': 'dialog'
+}) `
+	position: fixed;
+	left: 50%;
+	bottom: 50%;
+	transform: translate(-50%, 50%);
+	border-radius: 12px;
+	box-shadow: rgb(47 128 237 / 5%) 0 4px 8px 0;
+	overflow: hidden;
+	align-self: center;
+	padding: 0;
+	margin: 0;
+	outline: none;
+	width: auto;
+	background-color: ${({ theme }) => theme.modalBg};
+
+	@media (max-width: 768px) {
+		left: 0;
+		bottom: 0;
+		transform: none;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+`;
+export default function Modal({ isOpen, children, closeAble = true }) {
+    const transitions = useTransition(isOpen, {
+        from: { opacity: 0 },
+        enter: { opacity: 1 },
+        leave: { opacity: 0 },
+        config: { duration: 150 }
+    });
+    const { closeModal } = useWalletKit();
+    return (_jsx(_Fragment, { children: transitions((styles, item) => {
+            return (item && (_jsx(StyledDialogOverlay, { style: { opacity: styles.opacity }, onDismiss: closeAble ? closeModal : () => { }, isOpen: isOpen, children: _jsx(StyledDialogContent, { className: 'dialog-content-style', children: children }) })));
+        }) }));
+}
+//# sourceMappingURL=index.js.map

package/dist/src/components/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkC,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAEtD,MAAM,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAGtD,MAAM,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC,CAAA;;;;;CAKxD,CAAC;AAEF,MAAM,mBAAmB,GAAG,MAAM,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,KAAC,qBAAqB,OAAK,IAAI,GAAI,CAAC,CAAC,KAAK,CAAC;IAC9F,YAAY,EAAE,QAAQ;CACtB,CAAC,CAAA;;;;;;;;;;;;;qBAamB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO;;;;;;;;;CAShD,CAAC;AAWF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,GAAG,IAAI,EAAc;IAC/E,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,EAAE;QACzC,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;QACpB,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;QACrB,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;QACrB,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;KACzB,CAAC,CAAC;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,YAAY,EAAE,CAAC;IACtC,OAAO,CACN,4BACE,WAAW,CAAC,CAAC,MAAW,EAAE,IAAS,EAAE,EAAE;YACvC,OAAO,CACN,IAAI,IAAI,CACP,KAAC,mBAAmB,IACnB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,EAClC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,EAC5C,MAAM,EAAE,MAAM,YAEd,KAAC,mBAAmB,IAAC,SAAS,EAAE,sBAAsB,YAAG,QAAQ,GAAuB,GACnE,CACtB,CACD,CAAC;QACH,CAAC,CAAC,GACA,CACH,CAAC;AACH,CAAC"}

package/dist/src/components/Modal/style.d.ts

@@ -0,0 +1,5 @@
+export declare const ModalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ModalAside: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const AsideList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ModalMain: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InfoModalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/src/components/Modal/style.js

@@ -0,0 +1,156 @@
+import { styled } from 'styled-components';
+export const ModalContainer = styled.div `
+	display: flex;
+	width: 720px;
+	height: 506px;
+
+	@media (max-width: 768px) {
+		flex-direction: column;
+		width: 100vw;
+		height: 454px;
+	}
+`;
+export const ModalAside = styled.div `
+	width: 200px;
+	display: flex;
+	flex-direction: column;
+	border-right: 1px solid ${({ theme }) => theme.borderColor};
+	padding-top: 16px;
+	box-sizing: border-box;
+
+	@media (max-width: 768px) {
+		width: 100%;
+		border-right: none;
+		padding-top: 0;
+		padding-bottom: 24px;
+		background-color: ${({ theme }) => theme.modalSideBg};
+
+		&.hidden {
+			display: none;
+		}
+	}
+`;
+export const AsideList = styled.div `
+	overflow: auto;
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 0 20px;
+
+	@media (max-width: 768px) {
+		flex-direction: row;
+
+		// &::-webkit-scrollbar {
+		// 	display: none;
+		// }
+	}
+`;
+export const ModalMain = styled.div `
+	flex: 1;
+	height: 100%;
+`;
+export const InfoModalContainer = styled.div `
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 360px;
+	height: 240px;
+	text-align: center;
+
+	.avatarBox {
+		margin-top: -28px;
+		font-size: 41px;
+
+		.avatar {
+			width: 74px;
+			height: 74px;
+			line-height: 74px;
+			border-radius: 50%;
+			user-select: none;
+			cursor: pointer;
+		}
+	}
+
+	.accountInfo {
+		margin-top: 12px;
+		color: ${({ theme }) => theme.textColor};
+
+		.address {
+			font-size: 18px;
+			font-weight: 800;
+			line-height: 24px;
+		}
+
+		.tokenAmount {
+			font-size: 14px;
+			font-weight: 600;
+			line-height: 18px;
+			color: ${({ theme }) => theme.textColor3};
+		}
+	}
+
+	.btnGroup {
+		display: flex;
+		gap: 8px;
+		margin-top: 16px;
+		width: 100%;
+		justify-content: center;
+		padding: 0 16px 16px;
+		box-sizing: border-box;
+
+		.button {
+			padding: 8px;
+			color: ${({ theme }) => theme.textColor};
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			cursor: pointer;
+			border-radius: 12px;
+			background-color: ${({ theme }) => theme.infoBtnBg};
+
+			&:hover {
+				background-color: ${({ theme }) => theme.infoBtnHoverBg};
+			}
+		}
+
+		.btnIcon {
+			height: 18px;
+		}
+		.btnText {
+			font-size: 13px;
+			font-weight: 600;
+			line-height: 18px;
+		}
+	}
+
+	@media (max-width: 768px) {
+		width: 100vw;
+		height: 280px;
+
+		.avatarBox {
+			margin-top: -4px;
+			font-size: 45px;
+
+			.avatar {
+				width: 82px;
+				height: 82px;
+				line-height: 82px;
+			}
+		}
+
+		.accountInfo {
+			margin-top: 16px;
+
+			.address {
+				font-size: 20px;
+			}
+
+			.tokenAmount {
+				font-size: 16px;
+				line-height: 20px;
+			}
+		}
+	}
+`;
+//# sourceMappingURL=style.js.map

package/dist/src/components/Modal/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../../src/components/Modal/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAUvC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;2BAIT,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW;;;;;;;;;sBASrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW;;;;;;CAMrD,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;CAclC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGlC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;WAwBjC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS;;;;;;;;;;;;YAY7B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU;;;;;;;;;;;;;;;YAe/B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS;;;;;;;uBAOnB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS;;;wBAG7B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0C1D,CAAC"}

package/dist/src/components/SVGs/backArrowSvg.d.ts

@@ -0,0 +1,2 @@
+declare const BackArrowSvg: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default BackArrowSvg;