{"_id":"@dojo-trading/shuttle-vue","_rev":"2-fab547f012ecc5f89eb65c41d737f920","name":"@dojo-trading/shuttle-vue","description":"Shuttle is open-source npm package designed to turn wallet connections into a plug-and-play Lego brick for Cosmos Dapps.","dist-tags":{"latest":"3.26.0"},"versions":{"3.24.0":{"name":"@dojo-trading/shuttle-vue","version":"3.24.0","keywords":["dapp","blockchain","wallets","cosmos-sdk","cosmos","typescript","vue"],"author":{"url":"delphi-labs","name":"Delphi Labs"},"license":"MIT","_id":"@dojo-trading/shuttle-vue@3.24.0","maintainers":[{"name":"dojo-trading","email":"j48461827@gmail.com"}],"homepage":"https://github.com/delphi-labs/shuttle#readme","bugs":{"url":"https://github.com/delphi-labs/shuttle/issues"},"dist":{"shasum":"69ca6e1667c7a85de47f72cc26834fc16fc16526","tarball":"https://registry.npmjs.org/@dojo-trading/shuttle-vue/-/shuttle-vue-3.24.0.tgz","fileCount":6,"integrity":"sha512-umjrUSvQouXXAn2N4p2DbItAw5LV3q+eLH4O+pQ+Wo5nbBMX9hU23P96k9zjXsrmp6WGqzr+6iQ+9MycYYhu2g==","signatures":[{"sig":"MEQCIECRB+ct4xWalZlBXYpGhmAcAfVJte6U98UdQkOGpVx+AiAWyVN9dt7O1uzhFBXuLc/dyaenXEAL3mGlpGxSIW+bYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":72223},"main":"./dist/index.js","_from":"file:dojo-trading-shuttle-vue-3.24.0.tgz","types":"./dist/index.d.ts","scripts":{"dev":"pnpm run build --watch","lint":"eslint \"{**/*,*}.{js,ts,jsx,tsx}\"","test":"jest --config jestconfig.json","build":"tsup src/index.ts --format cjs --dts","prettier":"prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\""},"_npmUser":{"name":"dojo-trading","email":"j48461827@gmail.com"},"_resolved":"/private/var/folders/9f/90y4h04d0fzcjkz1dfsky0tw0000gn/T/02df19b4632fc2188721426d13aaa065/dojo-trading-shuttle-vue-3.24.0.tgz","_integrity":"sha512-umjrUSvQouXXAn2N4p2DbItAw5LV3q+eLH4O+pQ+Wo5nbBMX9hU23P96k9zjXsrmp6WGqzr+6iQ+9MycYYhu2g==","repository":{"url":"git+https://github.com/delphi-labs/shuttle.git","type":"git","directory":"packages/vue"},"_npmVersion":"9.6.7","description":"Shuttle is open-source npm package designed to turn wallet connections into a plug-and-play Lego brick for Cosmos Dapps.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"vue":"^3.3.4","tsup":"^7.1.0","pinia":"^2.1.3","tslib":"^2.6.0","@dojo-trading/shuttle":"3.24.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","vite":"^4.3.9","eslint":"^8.25.0","ts-jest":"^29.1.0","prettier":"^2.7.1","@swc/core":"^1.3.68","typescript":"^5.1.3","@types/jest":"^29.5.0","@vue/test-utils":"^2.4.0","jest-canvas-mock":"^2.4.0","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.2.1","jest-environment-jsdom":"^29.2.1","jest-resolver-enhanced":"^1.1.0","@typescript-eslint/parser":"^5.40.1","@typescript-eslint/eslint-plugin":"^5.40.1"},"peerDependencies":{"vue":">=3"},"_npmOperationalInternal":{"tmp":"tmp/shuttle-vue_3.24.0_1717746628937_0.5894562912926071","host":"s3://npm-registry-packages"}},"3.25.0":{"name":"@dojo-trading/shuttle-vue","version":"3.25.0","keywords":["dapp","blockchain","wallets","cosmos-sdk","cosmos","typescript","vue"],"author":{"url":"delphi-labs","name":"Delphi Labs"},"license":"MIT","_id":"@dojo-trading/shuttle-vue@3.25.0","maintainers":[{"name":"dojo-trading","email":"j48461827@gmail.com"}],"homepage":"https://github.com/delphi-labs/shuttle#readme","bugs":{"url":"https://github.com/delphi-labs/shuttle/issues"},"dist":{"shasum":"354f1891b8f0dbd006e8695ff601c95627aae679","tarball":"https://registry.npmjs.org/@dojo-trading/shuttle-vue/-/shuttle-vue-3.25.0.tgz","fileCount":6,"integrity":"sha512-5s6xH0OQSetqcPi/6EKDQ4Wv3KKb66YI9uWDW6dsEDhTSmb3dqFGN6MjbrnElaHWr7vc9tQYVAYh98ZqPsvI/w==","signatures":[{"sig":"MEYCIQCXeWxQns6GmcT41XeVw+cZQU/FYmNrYk87rCATlkD6wQIhAO1FTzWBApJBbfG/a8PfAoySGFh/IaGPdPtos5BXHC9I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":72223},"main":"./dist/index.js","_from":"file:dojo-trading-shuttle-vue-3.25.0.tgz","types":"./dist/index.d.ts","scripts":{"dev":"pnpm run build --watch","lint":"eslint \"{**/*,*}.{js,ts,jsx,tsx}\"","test":"jest --config jestconfig.json","build":"tsup src/index.ts --format cjs --dts","prettier":"prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\""},"_npmUser":{"name":"dojo-trading","email":"j48461827@gmail.com"},"_resolved":"/private/var/folders/9f/90y4h04d0fzcjkz1dfsky0tw0000gn/T/9269e28c8f1f0b39c84095532d72d5b2/dojo-trading-shuttle-vue-3.25.0.tgz","_integrity":"sha512-5s6xH0OQSetqcPi/6EKDQ4Wv3KKb66YI9uWDW6dsEDhTSmb3dqFGN6MjbrnElaHWr7vc9tQYVAYh98ZqPsvI/w==","repository":{"url":"git+https://github.com/delphi-labs/shuttle.git","type":"git","directory":"packages/vue"},"_npmVersion":"9.6.7","description":"Shuttle is open-source npm package designed to turn wallet connections into a plug-and-play Lego brick for Cosmos Dapps.","directories":{},"_nodeVersion":"18.17.1","dependencies":{"vue":"^3.3.4","tsup":"^7.1.0","pinia":"^2.1.3","tslib":"^2.6.0","@dojo-trading/shuttle":"3.25.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","vite":"^4.3.9","eslint":"^8.25.0","ts-jest":"^29.1.0","prettier":"^2.7.1","@swc/core":"^1.3.68","typescript":"^5.1.3","@types/jest":"^29.5.0","@vue/test-utils":"^2.4.0","jest-canvas-mock":"^2.4.0","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.2.1","jest-environment-jsdom":"^29.2.1","jest-resolver-enhanced":"^1.1.0","@typescript-eslint/parser":"^5.40.1","@typescript-eslint/eslint-plugin":"^5.40.1"},"peerDependencies":{"vue":">=3"},"_npmOperationalInternal":{"tmp":"tmp/shuttle-vue_3.25.0_1717749244514_0.0021908783735016257","host":"s3://npm-registry-packages"}},"3.26.0":{"name":"@dojo-trading/shuttle-vue","version":"3.26.0","description":"Shuttle is open-source npm package designed to turn wallet connections into a plug-and-play Lego brick for Cosmos Dapps.","keywords":["dapp","blockchain","wallets","cosmos-sdk","cosmos","typescript","vue"],"author":{"name":"Delphi Labs","url":"delphi-labs"},"license":"MIT","main":"./dist/index.js","types":"./dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/delphi-labs/shuttle.git","directory":"packages/vue"},"peerDependencies":{"vue":">=3"},"dependencies":{"pinia":"^2.1.3","tslib":"^2.6.0","tsup":"^7.1.0","vue":"^3.3.4","@dojo-trading/shuttle":"3.26.0"},"devDependencies":{"@swc/core":"^1.3.68","@types/jest":"^29.5.0","@typescript-eslint/eslint-plugin":"^5.40.1","@typescript-eslint/parser":"^5.40.1","@vue/test-utils":"^2.4.0","eslint":"^8.25.0","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.2.1","jest":"^29.5.0","jest-canvas-mock":"^2.4.0","jest-environment-jsdom":"^29.2.1","jest-resolver-enhanced":"^1.1.0","prettier":"^2.7.1","ts-jest":"^29.1.0","typescript":"^5.1.3","vite":"^4.3.9"},"scripts":{"build":"tsup src/index.ts --format cjs --dts","dev":"pnpm run build --watch","lint":"eslint \"{**/*,*}.{js,ts,jsx,tsx}\"","prettier":"prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\"","test":"jest --config jestconfig.json"},"bugs":{"url":"https://github.com/delphi-labs/shuttle/issues"},"homepage":"https://github.com/delphi-labs/shuttle#readme","_id":"@dojo-trading/shuttle-vue@3.26.0","_integrity":"sha512-An5h+fSflbA23tn2JpnSSxIyOrHepHPvpA65EGIWCOGva05pNZTLnjm/x5hC5icHEC0Qm0hw46f4jc9A8efj2A==","_resolved":"/private/var/folders/9f/90y4h04d0fzcjkz1dfsky0tw0000gn/T/91423678cc6db452b7b4fd32ccce8e54/dojo-trading-shuttle-vue-3.26.0.tgz","_from":"file:dojo-trading-shuttle-vue-3.26.0.tgz","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-An5h+fSflbA23tn2JpnSSxIyOrHepHPvpA65EGIWCOGva05pNZTLnjm/x5hC5icHEC0Qm0hw46f4jc9A8efj2A==","shasum":"8b2f81e87ecede69427114f6c7cab9414b5b62cb","tarball":"https://registry.npmjs.org/@dojo-trading/shuttle-vue/-/shuttle-vue-3.26.0.tgz","fileCount":6,"unpackedSize":72223,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5VdWbm9s/LHvMbfrZDH5UEhMaOTh8a3yZYDyNgsQbwAiEAx1bvZseWYDtr1P/SYSIfyGZlE+ePNWWLxqVztYdT1IA="}]},"_npmUser":{"name":"dojo-trading","email":"j48461827@gmail.com"},"directories":{},"maintainers":[{"name":"dojo-trading","email":"j48461827@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/shuttle-vue_3.26.0_1718211449854_0.1530741378721341"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-07T07:50:28.852Z","modified":"2024-06-12T16:57:30.208Z","3.24.0":"2024-06-07T07:50:29.108Z","3.25.0":"2024-06-07T08:34:04.669Z","3.26.0":"2024-06-12T16:57:30.041Z"},"maintainers":[{"name":"dojo-trading","email":"j48461827@gmail.com"}],"author":{"name":"Delphi Labs","url":"delphi-labs"},"repository":{"type":"git","url":"git+https://github.com/delphi-labs/shuttle.git","directory":"packages/vue"},"keywords":["dapp","blockchain","wallets","cosmos-sdk","cosmos","typescript","vue"],"license":"MIT","homepage":"https://github.com/delphi-labs/shuttle#readme","bugs":{"url":"https://github.com/delphi-labs/shuttle/issues"},"readme":"# Shuttle (Vue)\n\n[![NPM version][npm-image]][npm-url]\n[![Build][github-build]][github-build-url]\n![npm-typescript]\n[![License][github-license]][github-license-url]\n\nShuttle is an open-source npm package designed to turn wallet connections into a plug-and-play Lego brick for Cosmos dApps.\n\n## Docs\n\nYou can check out the [documentation](https://shuttle.delphilabs.io/) for more information.\n\n## How to get started\n\n### Install\n\n```bash\nnpm install @delphi-labs/shuttle-vue\n```\n\n### Setup\n\n```ts\nimport { createApp } from \"vue\";\nimport { createPinia } from \"pinia\";\nimport piniaPluginPersistedstate from \"pinia-plugin-persistedstate\";\nimport { createShuttle } from \"@dojo-trading/shuttle-vue\";\n\nimport App from \"./App.vue\";\n\nexport const pinia = createPinia();\npinia.use(piniaPluginPersistedstate);\n\nconst shuttle = createShuttle({\n  pinia,\n  walletConnectProjectId: \"...\",\n  extensionProviders: [\n    // ...\n  ],\n  mobileProviders: [\n    // ...\n  ],\n});\n\nconst app = createApp(App);\n\napp.use(pinia);\napp.use(shuttle);\n\napp.mount(\"#app\");\n```\n\n### Use\n\n```vue\n<script lang=\"ts\" setup>\nimport { ref } from \"vue\";\nimport { WalletConnection, isAndroid, isIOS, isMobile, useShuttle } from \"@dojo-trading/shuttle-vue\";\nimport QrcodeVue from \"qrcode.vue\";\n\nimport { useShuttlePortStore } from \"@/stores/shuttle-port\";\nimport { networks } from \"@/config/networks\";\nimport useWallet from \"@/composables/useWallet\";\n\nconst shuttle = useShuttle();\nconst networkStore = useShuttlePortStore();\nconst wallet = useWallet();\n\nasync function connect(extensionProviderId: string) {\n  await shuttle.connect({ extensionProviderId: extensionProviderId, chainId: networkStore.currentNetworkId });\n}\n\nconst qrcodeUrl = ref<string | null>(null);\n\nasync function mobileConnect(mobileProviderId: string) {\n  const urls = await shuttle.mobileConnect({\n    mobileProviderId: mobileProviderId,\n    chainId: networkStore.currentNetworkId,\n    callback: () => {\n      qrcodeUrl.value = null;\n    },\n  });\n\n  if (isMobile()) {\n    if (isAndroid()) {\n      window.location.href = urls.androidUrl;\n    } else if (isIOS()) {\n      window.location.href = urls.iosUrl;\n    } else {\n      window.location.href = urls.androidUrl;\n    }\n  } else {\n    qrcodeUrl.value = urls.qrCodeUrl;\n  }\n}\n\nfunction disconnectWallet(wallet: WalletConnection) {\n  shuttle.disconnectWallet(wallet);\n}\n</script>\n\n<template>\n  <header>\n    <h1>Shuttle Port (Vue)</h1>\n\n    <hr />\n\n    <div>\n      <label htmlFor=\"currentNetwork\">Current network:</label>\n      <select\n        id=\"currentNetwork\"\n        :value=\"networkStore.currentNetworkId\"\n        @change=\"networkStore.switchNetwork(($event.target as HTMLInputElement).value)\"\n      >\n        <option v-for=\"network in networks\" :key=\"network.chainId\" :value=\"network.chainId\">{{ network.name }}</option>\n      </select>\n    </div>\n\n    <hr />\n\n    <div v-if=\"!wallet\">\n      <button\n        v-for=\"extensionProvider in shuttle.extensionProviders.filter((provider) =>\n          provider.networks.has(networkStore.currentNetworkId),\n        )\"\n        :key=\"extensionProvider.id\"\n        @click=\"() => connect(extensionProvider.id)\"\n        :disabled=\"!shuttle.availableExtensionProviders.find((p) => p.id === extensionProvider.id)\"\n      >\n        {{ extensionProvider.name }}\n      </button>\n      <button\n        v-for=\"mobileProvider in shuttle.mobileProviders.filter((provider) =>\n          provider.networks.has(networkStore.currentNetworkId),\n        )\"\n        :key=\"mobileProvider.id\"\n        @click=\"() => mobileConnect(mobileProvider.id)\"\n        :disabled=\"!shuttle.availableMobileProviders.find((p) => p.id === mobileProvider.id)\"\n      >\n        {{ mobileProvider.name }}\n      </button>\n    </div>\n    <div v-else>\n      <div>\n        <p>Address: {{ wallet.account.address }}</p>\n        <button @click=\"() => disconnectWallet(wallet!)\">Disconnect</button>\n      </div>\n    </div>\n    <hr />\n  </header>\n\n  <div v-if=\"qrcodeUrl\" className=\"fixed inset-0 flex flex-col items-center justify-center\">\n    <div className=\"absolute inset-0 z-0 bg-black opacity-20\" @click=\"qrcodeUrl = null\"></div>\n    <div\n      className=\"relative flex min-h-[408px] min-w-[384px] flex-col items-center rounded-lg bg-white py-10 px-14 shadow-md\"\n    >\n      <button className=\"absolute top-3 right-3 rounded bg-black p-1.5 text-white\" @click=\"qrcodeUrl = null\">\n        Close\n      </button>\n\n      <h2 className=\"mb-2 text-xl\">Wallet Connect</h2>\n\n      <div className=\"flex flex-col items-center\">\n        <p className=\"mb-4 text-center text-sm text-gray-600\">Scan this QR code with your mobile wallet</p>\n        <QrcodeVue :value=\"qrcodeUrl\" :size=\"250\" />\n      </div>\n    </div>\n  </div>\n</template>\n```\n\n## How to develop\n\n### Install\n\n```bash\npnpm install\n```\n\n### Test\n\n```bash\npnpm run test\n```\n\n### Prettier\n\n```bash\npnpm run prettier\n```\n\n### Lint\n\n```bash\npnpm run lint\n```\n\n### Build\n\n```bash\npnpm run build\n```\n\n### Publish\n\n```bash\npnpm publish\n```\n\n[npm-url]: https://www.npmjs.com/package/@delphi-labs/shuttle-vue\n[npm-image]: https://img.shields.io/npm/v/@delphi-labs/shuttle-vue\n[npm-typescript]: https://img.shields.io/npm/types/@delphi-labs/shuttle-vue\n[github-license]: https://img.shields.io/github/license/delphi-labs/shuttle\n[github-license-url]: https://github.com/delphi-labs/shuttle/blob/main/LICENSE\n[github-build]: https://github.com/delphi-labs/shuttle/actions/workflows/publish.yml/badge.svg\n[github-build-url]: https://github.com/delphi-labs/shuttle/actions/workflows/publish.yml\n","readmeFilename":"README.md"}