@aptos-labs/wallet-adapter-vue
Version:
Aptos Wallet Adapter Vue Provider
486 lines (485 loc) • 19 kB
JavaScript
!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".icon[data-v-7243dde9]{height:1.25rem;width:1.25rem}._walletItem_1ry92_2{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;gap:1rem;border-radius:calc(.5rem - 2px);border-width:1px}._walletName_1ry92_11{display:flex;align-items:center;gap:1rem}._installLink_1ry92_16{padding-left:.75rem;padding-right:.75rem;border-radius:calc(.5rem - 2px);height:2.25rem;font-weight:500;color:inherit}._installLink_1ry92_16:hover{background-color:#18181b}._connectButton_1ry92_27{padding:.3rem .7rem;height:auto;border-radius:calc(.5rem - 2px);font-size:16px;background-color:#1e37c2;color:#fff;box-shadow:0 2px #00000005;transition:background-color .15s ease}._connectButton_1ry92_27:hover{background-color:#1e37c299}:root{--muted-color: hsl(240 3.8% 46.1%);--foreground: hsl(240 10% 3.9%)}._aptosPrivacyPolicy_r4vx_6{display:flex;align-items:center;flex-direction:column;font-size:.75rem;line-height:1.25rem;color:var(--foreground)}._link_r4vx_14{text-underline-offset:.25rem;text-decoration-line:underline;color:var(--muted-color)}._poweredBy_r4vx_19{display:flex;align-items:center;gap:.375rem;font-size:.75rem;line-height:1.25rem;color:var(--muted-color)}")),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}}();
import { WalletCore, WalletReadyState, isRedirectable, isInstallRequired } from "@aptos-labs/wallet-adapter-core";
export * from "@aptos-labs/wallet-adapter-core";
import { ref, onBeforeUnmount, watch, computed, unref, defineComponent, renderSlot, createElementBlock, createCommentVNode, openBlock, normalizeProps, mergeProps, toDisplayString, toHandlers, toRefs, normalizeClass, createElementVNode, createBlock, createStaticVNode, guardReactiveProps, createVNode, Fragment } from "vue";
const LOCAL_STORAGE_KEY = "AptosWalletName";
const initialState = {
account: null,
network: null,
connected: false,
wallet: null
};
const walletCore = ref();
const state = ref(initialState);
const wallets = ref([]);
const notDetectedWallets = ref([]);
const autoConnect = ref(false);
const isConnecting = ref(false);
function getWalletCoreInstance(optInWallets, dappConfig, disableTelemetry) {
if (!walletCore.value) {
walletCore.value = new WalletCore(
optInWallets ?? [],
dappConfig,
disableTelemetry
);
Object.assign(wallets.value, walletCore.value.wallets);
}
return walletCore.value;
}
function useWallet(props) {
const { disableTelemetry, optInWallets, dappConfig, onError } = props ?? {};
const walletCoreInstance = getWalletCoreInstance(
optInWallets,
dappConfig,
disableTelemetry
);
const connect = async (walletName2) => {
try {
isConnecting.value = true;
await walletCoreInstance.connect(walletName2);
} catch (error) {
if (onError) onError(error);
return Promise.reject(error);
} finally {
isConnecting.value = false;
}
};
const disconnect = async () => {
try {
await walletCoreInstance.disconnect();
} catch (error) {
if (onError) onError(error);
return Promise.reject(error);
}
};
const signTransaction = async (transaction, asFeePayer) => {
try {
return await walletCoreInstance.signTransaction({
transactionOrPayload: transaction,
asFeePayer
});
} catch (error) {
if (onError) onError(error);
return Promise.reject(error);
}
};
const signMessage = async (message) => {
try {
return await walletCoreInstance.signMessage(message);
} catch (error) {
if (onError) onError(error);
return Promise.reject(error);
}
};
const signMessageAndVerify = async (message) => {
try {
return await walletCoreInstance.signMessageAndVerify(message);
} catch (error) {
if (onError) onError(error);
return Promise.reject(error);
}
};
const submitTransaction = async (transaction) => {
try {
return await walletCoreInstance.submitTransaction(transaction);
} catch (error) {
if (onError) onError(error);
return Promise.reject(error);
}
};
const signAndSubmitTransaction = async (transaction) => {
try {
return await walletCoreInstance.signAndSubmitTransaction(transaction);
} catch (error) {
if (onError) onError(error);
return Promise.reject(error);
}
};
const changeNetwork = async (network) => {
try {
return await walletCoreInstance.changeNetwork(network);
} catch (error) {
if (onError) onError(error);
return Promise.reject(error);
}
};
const handleStandardWalletsAdded = (standardWallet) => {
const _standardWallet = unref(standardWallet);
const existingWallet = wallets.value.find(
(wallet) => wallet.name == _standardWallet.name
);
if (existingWallet) {
Object.assign(existingWallet, _standardWallet);
} else {
wallets.value.push(_standardWallet);
}
};
const handleStandardNotDetectedWalletsAdded = (notDetectedWallet) => {
const _notDetectedWallet = unref(notDetectedWallet);
const existingWallet = wallets.value.find(
(wallet) => wallet.name == _notDetectedWallet.name
);
if (existingWallet) {
Object.assign(existingWallet, _notDetectedWallet);
} else {
notDetectedWallets.value.push(_notDetectedWallet);
}
};
const handleConnect = () => {
const newState = {
...state.value,
connected: true,
account: walletCoreInstance.account || null,
network: walletCoreInstance.network || null,
wallet: walletCoreInstance.wallet || null
};
Object.assign(state.value, newState);
};
const handleDisconnect = () => {
if (!state.value.connected) {
return;
}
const newState = {
...state.value,
connected: false,
account: null,
network: null,
wallet: null
};
Object.assign(state.value, newState);
};
const handleAccountChange = () => {
if (!state.value.connected) {
return;
}
if (!walletCoreInstance.wallet) {
return;
}
const newState = {
...state.value,
account: walletCoreInstance.account
};
Object.assign(state.value, newState);
};
const handleNetworkChange = () => {
if (!state.value.connected) {
return;
}
if (!walletCoreInstance.wallet) {
return;
}
const newState = {
...state.value,
network: walletCoreInstance.network
};
Object.assign(state.value, newState);
};
const eventHandlers = {
connect: handleConnect,
disconnect: handleDisconnect,
accountChange: handleAccountChange,
networkChange: handleNetworkChange,
standardWalletsAdded: handleStandardWalletsAdded,
standardNotDetectedWalletAdded: handleStandardNotDetectedWalletsAdded
};
onBeforeUnmount(() => {
if (walletCoreInstance) {
Object.keys(eventHandlers).forEach((event) => {
walletCoreInstance.off(
event,
eventHandlers[event]
);
});
}
walletCore.value = void 0;
wallets.value = [];
Object.assign(state.value, initialState);
});
watch(
() => walletCoreInstance,
(newWalletCore) => {
if (newWalletCore) {
Object.keys(eventHandlers).forEach((event) => {
walletCoreInstance.on(
event,
eventHandlers[event]
);
});
}
},
{
immediate: true
}
);
watch(
autoConnect,
async (newAutoConnect) => {
if (newAutoConnect) {
if (localStorage.getItem(LOCAL_STORAGE_KEY) && !state.value.connected) {
await connect(localStorage.getItem(LOCAL_STORAGE_KEY));
} else {
isConnecting.value = false;
}
}
},
{
immediate: true
}
);
watch(
() => state.value.connected,
(connected) => {
if (connected) {
walletCoreInstance.onAccountChange();
walletCoreInstance.onNetworkChange();
}
},
{
immediate: true
}
);
return {
connected: computed(() => state.value.connected),
isLoading: computed(() => isConnecting.value),
account: computed(() => state.value.account),
network: computed(() => state.value.network),
wallet: computed(() => state.value.wallet),
wallets,
autoConnect,
connect,
disconnect,
signAndSubmitTransaction,
signTransaction,
submitTransaction,
signMessage,
signMessageAndVerify,
changeNetwork
};
}
const _hoisted_1$3 = ["src", "alt"];
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
__name: "WalletIcon",
props: {
icon: {},
name: {}
},
setup(__props) {
return (_ctx, _cache) => {
return _ctx.$slots.icon ? renderSlot(_ctx.$slots, "icon", { key: 0 }, void 0, true) : _ctx.icon && _ctx.name ? (openBlock(), createElementBlock("img", {
key: 1,
src: _ctx.icon,
alt: _ctx.name,
class: "icon"
}, null, 8, _hoisted_1$3)) : createCommentVNode("", true);
};
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const WalletIcon = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-7243dde9"]]);
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
__name: "WalletName",
props: {
name: {}
},
setup(__props) {
return (_ctx, _cache) => {
return _ctx.$slots.name ? renderSlot(_ctx.$slots, "name", { key: 0 }) : _ctx.name ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 1 }, _ctx.$attrs)), toDisplayString(_ctx.name), 17)) : createCommentVNode("", true);
};
}
});
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
__name: "WalletConnectButton",
emits: ["connect"],
setup(__props) {
return (_ctx, _cache) => {
return _ctx.$slots.connectButton ? renderSlot(_ctx.$slots, "connectButton", mergeProps({ key: 0 }, toHandlers(_ctx.$listeners, true))) : (openBlock(), createElementBlock("button", mergeProps({ key: 1 }, _ctx.$attrs, {
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("connect"))
}), "Connect", 16));
};
}
});
const _hoisted_1$2 = ["href"];
const _sfc_main$6 = /* @__PURE__ */ defineComponent({
__name: "WalletInstallLink",
props: {
installLink: {}
},
setup(__props) {
return (_ctx, _cache) => {
return _ctx.$slots.installLink ? renderSlot(_ctx.$slots, "name", { key: 0 }) : _ctx.installLink ? (openBlock(), createElementBlock("a", mergeProps({ key: 1 }, _ctx.$attrs, {
href: _ctx.installLink,
target: "_blank",
rel: "noopener noreferrer"
}), "Install", 16, _hoisted_1$2)) : createCommentVNode("", true);
};
}
});
const _sfc_main$5 = /* @__PURE__ */ defineComponent({
__name: "WalletItem",
props: {
wallet: {}
},
emits: ["connect"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const { wallet } = toRefs(props);
const isWalletReady = computed(() => {
return wallet.value.readyState === WalletReadyState.Installed;
});
const mobileSupport = computed(() => {
return "deeplinkProvider" in wallet.value && wallet.value.deeplinkProvider;
});
const isReady = computed(() => {
return Boolean(
isWalletReady.value || isRedirectable() && mobileSupport.value
);
});
return (_ctx, _cache) => {
return _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(_ctx.$style.walletItem)
}, [
createElementVNode("div", {
class: normalizeClass(_ctx.$style.walletName)
}, [
isReady.value ? (openBlock(), createBlock(WalletIcon, {
key: 0,
icon: unref(wallet).icon,
name: unref(wallet).name
}, null, 8, ["icon", "name"])) : createCommentVNode("", true),
isReady.value ? (openBlock(), createBlock(_sfc_main$8, {
key: 1,
name: unref(wallet).name
}, null, 8, ["name"])) : createCommentVNode("", true)
], 2),
unref(isInstallRequired)(unref(wallet)) && isReady.value ? (openBlock(), createBlock(_sfc_main$6, {
key: 0,
class: normalizeClass(_ctx.$style.installLink),
installLink: unref(wallet).url
}, null, 8, ["class", "installLink"])) : isReady.value ? (openBlock(), createBlock(_sfc_main$7, {
key: 1,
class: normalizeClass(_ctx.$style.connectButton),
onConnect: _cache[0] || (_cache[0] = ($event) => emit("connect", unref(wallet)))
}, null, 8, ["class"])) : createCommentVNode("", true)
], 2));
};
}
});
const walletItem = "_walletItem_1ry92_2";
const walletName = "_walletName_1ry92_11";
const installLink = "_installLink_1ry92_16";
const connectButton = "_connectButton_1ry92_27";
const style0$1 = {
walletItem,
walletName,
installLink,
connectButton
};
const cssModules$1 = {
"$style": style0$1
};
const WalletItem = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$1]]);
const _sfc_main$4 = {};
function _sfc_render$1(_ctx, _cache) {
return _ctx.$slots.default ? renderSlot(_ctx.$slots, "disclaimer", { key: 0 }) : (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 1 }, _ctx.$attrs)), " By continuing, you agree to Aptos Labs' ", 16));
}
const Disclaimer = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$1]]);
const _hoisted_1$1 = ["href"];
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
__name: "Link",
props: {
href: {}
},
setup(__props) {
return (_ctx, _cache) => {
return _ctx.$slots.default ? renderSlot(_ctx.$slots, "link", { key: 0 }) : (openBlock(), createElementBlock("a", mergeProps({ key: 1 }, _ctx.$attrs, {
href: _ctx.href,
target: "_blank",
rel: "noopener noreferrer"
}), "Privacy Policy", 16, _hoisted_1$1));
};
}
});
const _sfc_main$2 = {};
const _hoisted_1 = {
width: "12",
height: "12",
viewBox: "0 0 12 12",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
};
function _sfc_render(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
createStaticVNode('<g clip-path="url(#clip0_18665_88012)"><ellipse cx="5.99854" cy="6" rx="5.97706" ry="6" fill="currentColor"></ellipse><path d="M9.28095 4.01441H8.22355C8.10035 4.01441 7.98314 3.96154 7.90159 3.86951L7.47265 3.38496C7.4088 3.31263 7.31678 3.27148 7.22052 3.27148C7.12425 3.27148 7.03223 3.31288 6.96839 3.38496L6.60054 3.80068C6.48009 3.9366 6.30726 4.01466 6.12571 4.01466H0.337686C0.172841 4.4845 0.0653555 4.98078 0.0224609 5.49552H5.48653C5.58254 5.49552 5.67457 5.45636 5.7409 5.38703L6.24965 4.85609C6.31325 4.78975 6.40103 4.75234 6.49281 4.75234H6.51375C6.61027 4.75234 6.70204 4.79374 6.76589 4.86606L7.19458 5.35062C7.27613 5.4429 7.39334 5.49552 7.51654 5.49552H11.9766C11.9337 4.98053 11.8262 4.48425 11.6614 4.01466H9.2807L9.28095 4.01441Z" fill="white"></path><path d="M3.32882 8.6096C3.42483 8.6096 3.51685 8.57045 3.58319 8.50112L4.09194 7.97017C4.15553 7.90384 4.24332 7.86643 4.33509 7.86643H4.35604C4.45255 7.86643 4.54433 7.90783 4.60817 7.9799L5.03687 8.46446C5.11842 8.55673 5.23563 8.60935 5.35883 8.60935H11.403C11.6294 8.1415 11.7953 7.63949 11.894 7.11353H6.09252C5.96933 7.11353 5.85211 7.06066 5.77057 6.96863L5.34187 6.48408C5.27803 6.41175 5.186 6.37061 5.08974 6.37061C4.99347 6.37061 4.90145 6.412 4.83761 6.48408L4.46976 6.8998C4.34931 7.03572 4.17648 7.11378 3.99468 7.11378H0.104492C0.203249 7.63974 0.369341 8.14175 0.595535 8.6096H3.32857H3.32882Z" fill="white"></path><path d="M7.61736 2.39611C7.71337 2.39611 7.8054 2.35696 7.87173 2.28763L8.38048 1.75668C8.44408 1.69034 8.53186 1.65294 8.62363 1.65294H8.64458C8.7411 1.65294 8.83287 1.69434 8.89671 1.76666L9.32541 2.25122C9.40696 2.34349 9.52417 2.39611 9.64737 2.39611H10.7968C9.70223 0.941186 7.96126 0 6.00008 0C4.0389 0 2.29793 0.941186 1.20312 2.39611H7.61736Z" fill="white"></path><path d="M5.30843 10.092H3.73654C3.61334 10.092 3.49613 10.0392 3.41458 9.94715L2.98589 9.46259C2.92204 9.39027 2.83002 9.34912 2.73376 9.34912C2.63749 9.34912 2.54547 9.39052 2.48163 9.46259L2.11378 9.87832C1.99333 10.0142 1.8205 10.0923 1.6387 10.0923H1.61426C2.70932 11.2657 4.26873 12.0001 6.00023 12.0001C7.73172 12.0001 9.29089 11.2657 10.3862 10.0923H5.30843V10.092Z" fill="white"></path></g><defs><clipPath id="clip0_18665_88012"><rect width="12" height="12" fill="white"></rect></clipPath></defs>', 2)
]));
}
const AptosLogo = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
__name: "PoweredBy",
setup(__props) {
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(_ctx.$attrs)), [
_cache[0] || (_cache[0] = createElementVNode("span", null, "Powered by", -1)),
createVNode(AptosLogo),
_cache[1] || (_cache[1] = createElementVNode("span", null, "Aptos Labs", -1))
], 16);
};
}
});
const APTOS_PRIVACY_POLICY_URL = "https://aptoslabs.com/privacy";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "AptosPrivacyPolicy",
setup(__props) {
return (_ctx, _cache) => {
return _ctx.$slots.disclaimer || _ctx.$slots.link || _ctx.$slots.poweredBy ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
renderSlot(_ctx.$slots, "disclaimer"),
renderSlot(_ctx.$slots, "link"),
renderSlot(_ctx.$slots, "poweredBy")
], 64)) : (openBlock(), createElementBlock("div", mergeProps({
key: 1,
class: _ctx.$style.aptosPrivacyPolicy
}, _ctx.$attrs), [
createElementVNode("div", null, [
createVNode(Disclaimer),
createVNode(_sfc_main$3, {
class: normalizeClass(_ctx.$style.link),
href: APTOS_PRIVACY_POLICY_URL
}, null, 8, ["class"]),
_cache[0] || (_cache[0] = createElementVNode("span", null, ".", -1))
]),
createVNode(_sfc_main$1, {
class: normalizeClass(_ctx.$style.poweredBy)
}, null, 8, ["class"])
], 16));
};
}
});
const aptosPrivacyPolicy = "_aptosPrivacyPolicy_r4vx_6";
const link = "_link_r4vx_14";
const poweredBy = "_poweredBy_r4vx_19";
const style0 = {
aptosPrivacyPolicy,
link,
poweredBy
};
const cssModules = {
"$style": style0
};
const AptosPrivacyPolicy = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
export {
AptosPrivacyPolicy,
_sfc_main$7 as WalletConnectButton,
WalletIcon,
_sfc_main$6 as WalletInstallLink,
WalletItem,
_sfc_main$8 as WalletName,
useWallet
};
//# sourceMappingURL=wallet-adapter-vue.js.map