anza-xyz / wallet-adapter

Modular TypeScript wallet adapters and components for Solana applications.
https://anza-xyz.github.io/wallet-adapter/
Apache License 2.0
1.56k stars 946 forks source link

VueJS "Wallet not initialized" error #256

Closed NViktors closed 2 years ago

NViktors commented 2 years ago

Describe the bug Hello, I'm trying to implement "Connect wallet" functionality inside my Vue 3 project. All required packages are up to date and have latest versions.

How to reproduce:

  1. Create fresh project using Vue CLI (with typescript enabled) - vue create test-app && cd test-app
  2. Add following dependencies: yarn add @solana/wallet-adapter-base @solana/wallet-adapter-wallets @solana/wallet-adapter-vue @solana/wallet-adapter-vue-ui
  3. Replace App.vue with following
    
    <template>
    <wallet-provider auto-connect :wallets="wallets">
    <wallet-modal-provider>
      <wallet-multi-button></wallet-multi-button>
    </wallet-modal-provider>
    </wallet-provider>
    </template>

4. Start development mode `yarn serve`

And after opening page in browser, there will be error in console:
![image](https://user-images.githubusercontent.com/26169825/148964166-7a679f6f-13f4-4ee8-9fd2-0418bf9274f1.png)

Any ideas about this?
florentchauveau commented 2 years ago

I have the same issue. It seems that the Vue libraries are broken right now.

Maybe @lorisleiva can help us here :)

@NViktors here is an working example, but with outdated libs: https://lorisleiva.com/create-a-solana-dapp-from-scratch/integrating-with-solana-wallets

lorisleiva commented 2 years ago

Hmm, that's strange. This code should work. πŸ€”

Could you try using the global store approach to see if that's working?

<script setup>
import { initWallet } from '@solana/wallet-adapter-vue';
import { getPhantomWallet } from '@solana/wallet-adapter-wallets';
const wallets = [getPhantomWallet()];
initWallet({ wallets, autoConnect: true });
</script>

<template>
    <!-- `useWallet` is available everywhere. Not just in the descendants of this component. -->
</template>
florentchauveau commented 2 years ago

I do not have the error with the global store approach, but another error when using the wallet:

SFC:

<script setup>
import { computed } from 'vue'
import { initWallet, useWallet } from '@solana/wallet-adapter-vue'
import { PhantomWalletAdapter } from '@solana/wallet-adapter-wallets'

import {
  WalletModalProvider,
  WalletMultiButton
} from '@solana/wallet-adapter-vue-ui'

const wallets = [new PhantomWalletAdapter()]
initWallet({ wallets, autoConnect: true })

const wallet = computed(() => useWallet())

const connect = async () => {
  try {
    const result = await wallet.value.connect()
    console.log('result', result)
  } catch (e) {
    console.error(e)
  }
}
</script>

<template>
    <p>{{ wallet.name }}</p>

    <wallet-modal-provider>
      <wallet-multi-button></wallet-multi-button>
    </wallet-modal-provider>

    <pre style="text-align:left">{{ wallet }}</pre>
    <button @click="connect">Connect</button>
</template>

However, choosing a wallet does not do anything. And using the wallet returns the error:

WalletNotSelectedError
    at Object.connect (useWallet.ts?06ec:193:1)
    at connect (MintView.vue?b05f:18:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:6737:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:6746:1)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?2725:357:1)

@NViktors can you reproduce?

florentchauveau commented 2 years ago

Oh, and that's beside @solana/wallet-adapter-vue-ui version 0.2.2 that has a broken package.json.

You have to replace

    "exports": {
        "import": "./lib/esm/index.mjs",
        "require": "./lib/cjs/index.js"
    },

with

    "exports": {
        "import": "./lib/esm/index.js",
        "require": "./lib/cjs/index.js"
    },

"styles.css" is also missing from the exports.

NViktors commented 2 years ago

@florentchauveau Yep, exactly the same behaviour in my side.

jordaaash commented 2 years ago

Ah, this looks like a problem with the build. vue-ui uses Vite to build instead of tsc, so the build isn't creating the expected .mjs file. For now, please fix your version to 0.2.1. I'll publish a patch today.

jordaaash commented 2 years ago

There is no functional difference between 0.2.1 and 0.2.2, it's just the change to enable strict ESM exports.

jordaaash commented 2 years ago

However, there's another issue with the dependencies for your project -- you'll need to use @solana/wallet-adapter-walletsw@0.13.0 and @solana/wallet-adapter-base@0.8.1 for compatibility the Vue packages, which depend on base v0.8.1.

jordaaash commented 2 years ago

wallets v.0.14.x and base v0.9.x contain a breaking change to how the wallets are detected and determined to be ready, and the vue and vue-ui packages haven't been updated yet for this.

jordaaash commented 2 years ago

Published:

florentchauveau commented 2 years ago

Thank you @jordansexton for the fix on vue builds.

However, even when using

I still get the Error: Wallet not initialized. Please use the WalletProvider component to initialize the wallet..

How about you @NViktors?

My package.json:

  "dependencies": {
    "@solana/wallet-adapter-base": "<=0.8.1",
    "@solana/wallet-adapter-vue": "^0.4.4",
    "@solana/wallet-adapter-vue-ui": "^0.2.3",
    "@solana/wallet-adapter-wallets": "<=0.13.0",
    "@solana/web3.js": "^1.31.0",
    "vue": "^3.2.25"
  },

I am trying old versions.

NViktors commented 2 years ago

@florentchauveau Yeah, looks like it's not working.

I tested with @lorisleiva suggested "global store approach" and also using wallet provider component as a wrapper - none of these work now.

@florentchauveau Have you already tested old versions?

jordaaash commented 2 years ago

I've reopened the issue as it sounds like it's still a problem. Can you link to a repo with a full reproduction? I don't use Vue, but if you can make it easy for me to test, I'll try to figure out what's happening (and hopefully @lorisleiva has an idea).

NViktors commented 2 years ago

https://github.com/NViktors/vue-solana-wallet-adapter-test - I've created test repo here.

Clone, run yarn install and then yarn serve. I've created two variants, take a look at src/App.vue and src/AppV2.vue. To swap template, simply edit src/main.ts and comment/uncomment one of last line.

jordaaash commented 2 years ago
  <wallet-modal-provider>
    <wallet-multi-button/>
  </wallet-modal-provider>

Looks like this is missing the <wallet-provider> which actually does all the work?

NViktors commented 2 years ago

Take a look at second variant - https://github.com/NViktors/vue-solana-wallet-adapter-test/blob/master/src/App.vue

In this variant I tried to use wrapper. AppV2.vue was created with @lorisleiva suggestion in mind (that worked in some way before version bump/fixes, only issue was with WalletNotSelected error)

jordaaash commented 2 years ago

Just saw that. I admit I have no idea what's going on here haha.

Does this code work if you set the @solana/wallet-adapter-vue version to 0.4.2 and @solana/wallet-adapter-vue-ui to 0.2.1?

Just trying to make sure if the issue is actually caused by the latest release.

NViktors commented 2 years ago

Ok, now I'm confused..

Just created fresh Vue project using Vite, added all following packages:

"@solana/wallet-adapter-base": "0.8.1",
"@solana/wallet-adapter-vue": "0.4.4",
"@solana/wallet-adapter-vue-ui": "0.2.3",
"@solana/wallet-adapter-wallets": "0.13.0",
"@solana/web3.js": "^1.31.0",

App.vue with following:

<template>
  <wallet-provider :auto-connect="true" :wallets="wallets">
    <wallet-modal-provider>
      <wallet-multi-button></wallet-multi-button>
    </wallet-modal-provider>
  </wallet-provider>
</template>

<script setup lang="ts">
  import {WalletProvider} from "@solana/wallet-adapter-vue";
  import {getPhantomWallet, getSolflareWallet} from '@solana/wallet-adapter-wallets';
  import {WalletModalProvider, WalletMultiButton} from "@solana/wallet-adapter-vue-ui";

  const wallets = [
    getPhantomWallet(),
    getSolflareWallet()
  ];
</script>

And it works: image

No idea, what's the issue with Vue CLI setup..

florentchauveau commented 2 years ago

I got it to work with vue-cli.

Both using <wallet-provider> or the global store.

My dependencies:

  "dependencies": {
    "@solana/wallet-adapter-base": "<=0.8.1",
    "@solana/wallet-adapter-vue": "^0.4.4",
    "@solana/wallet-adapter-vue-ui": "^0.2.3",
    "@solana/wallet-adapter-wallets": "<=0.13.0",
    "@solana/web3.js": "^1.31.0",
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },

App.vue

<script setup>
// import { initWallet } from '@solana/wallet-adapter-vue'
import { WalletProvider } from '@solana/wallet-adapter-vue'
import { getPhantomWallet } from '@solana/wallet-adapter-wallets'

const wallets = [
  getPhantomWallet()
]
// initWallet({ wallets, autoConnect: true })
</script>

<template>
  <wallet-provider :wallets="wallets" auto-connect>
    <nav>
      <router-link to="/">Home</router-link>|
      <router-link to="/about">About</router-link>|
      <router-link to="/mint">Mint</router-link>
    </nav>
    <router-view />
  </wallet-provider>
</template>

and then in a route, I have:

<script setup>
import { useWallet } from '@solana/wallet-adapter-vue'
import {
  WalletModalProvider,
  WalletMultiButton
} from '@solana/wallet-adapter-vue-ui'

const { connected, publicKey, wallet } = useWallet()
</script>

<template>
  <p>{{ connected }}</p>
  <p>Wallet name: {{ wallet?.name }}</p>
  <p v-if="connected">{{ publicKey.toBase58() }}</p>

  <wallet-modal-provider>
    <wallet-multi-button></wallet-multi-button>
  </wallet-modal-provider>

</template>

This works.

NViktors commented 2 years ago

@florentchauveau But does it work when you put all components in single file? Like:

<template>
  <wallet-provider :wallets="wallets" auto-connect>
    <wallet-modal-provider>
        <wallet-multi-button></wallet-multi-button>
    </wallet-modal-provider>
  </wallet-provider>
</template>
florentchauveau commented 2 years ago

@NViktors no, in this case it does not work.

I have

Uncaught Error: Wallet not initialized. Please use the `WalletProvider` component to initialize the wallet.
    at useWallet (useWallet.ts?06ec:60:1)
    at setup (App.vue?91a0:11:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:6737:1)
    at setupStatefulComponent (runtime-core.esm-bundler.js?d2dd:6346:1)
    at setupComponent (runtime-core.esm-bundler.js?d2dd:6301:1)
    at mountComponent (runtime-core.esm-bundler.js?d2dd:4224:1)
    at processComponent (runtime-core.esm-bundler.js?d2dd:4199:1)
    at patch (runtime-core.esm-bundler.js?d2dd:3791:1)
    at render (runtime-core.esm-bundler.js?d2dd:4943:1)
    at mount (runtime-core.esm-bundler.js?d2dd:3179:1)

I have the exact same issue with Vite by the way, I cannot get it to work.

NViktors commented 2 years ago

@florentchauveau https://github.com/NViktors/vite-wallet-test - I created repo with working example using Vite. Feel free to check if that works for you.

jordaaash commented 2 years ago

Sounds like this is resolved then?

NViktors commented 2 years ago

Yeah, now it works as expected. Many thanks for help and fixes! πŸ™πŸ»

florentchauveau commented 2 years ago

@NViktors thanks, it was a yarn mistake on my part.

However, when using all components in a single file with Vite, can you use this during setup?

import { useWallet } from '@solana/wallet-adapter-vue'
const { connected, publicKey } = useWallet()

I get the same error when I use those lines on your version.

florentchauveau commented 2 years ago

@NViktors and also, yarn build does not work with Vite. Also checked on your repo.

Something wrong with @blocto/sdk/dist/blocto-sdk.module.js.

[commonjs] Complex binding patterns require an initialization value (1:6)

Do you confirm?

NViktors commented 2 years ago

@florentchauveau About build - I will check that tomorrow.

And about useWallet() in single file setup: I think the problem occurs, because setup hook/script is called before rendering, so we are calling useWallet() before wallet-provider initialisation.

NViktors commented 2 years ago

So there's two possible ways:

  1. Use wallet-provider and then put all other logic in child component, like:
    <template>
    <wallet-provider :wallets="wallets" auto-connect>
    <my-cool-component-with-all-other-logic/>
    </wallet-provider>
    </template>

And then, inside <my-cool-component-with-all-other-logic/> call useWallet() and do all other magic

  1. Or try to use global store approach, like (blind code tho, not tested yet):

    
    <script setup>
    ...
    initWallet({ wallets, autoConnect: true })
    
    const wallet = computed(() => useWallet())
    </script>
NViktors commented 2 years ago

@jordansexton Hi! Sorry for the inconvenience, but I'm really stuck right now.

I have almost created project using Vite (all frontend, wallets etc..), but when I try to make production build, it's failing with an error:

➜  mint-vue yarn build
yarn run v1.22.17
$ vue-tsc --noEmit && vite build
vite v2.7.10 building for production...
βœ“ 105 modules transformed.
[commonjs] Complex binding patterns require an initialization value (1:6) in /Users/viktors/solana-vue/node_modules/@blocto/sdk/dist/blocto-sdk.module.js
file: /Users/viktors/solana-vue/node_modules/@blocto/sdk/dist/blocto-sdk.module.js:1:6
1: var global$1 = (typeof global !== "undefined" ? global :
         ^
2:   typeof self !== "undefined" ? self :
3:   typeof window !== "undefined" ? window : {});
error during build:
SyntaxError: Complex binding patterns require an initialization value (1:6) in /Users/viktors/solana-vue/node_modules/@blocto/sdk/dist/blocto-sdk.module.js
    at Parser.pp$4.raise (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:19599:13)
    at Parser.pp$8.parseVar (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:17461:12)
    at Parser.pp$8.parseVarStatement (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:17321:8)
    at Parser.pp$8.parseStatement (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:17069:17)
    at Parser.pp$8.parseTopLevel (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:16971:21)
    at Parser.parse (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:16744:15)
    at Function.parse (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:16794:35)
    at Graph.contextParse (/Users/viktors/solana-vue/node_modules/rollup/dist/shared/rollup.js:22932:38)
    at tryParse (/Users/viktors/solana-vue/node_modules/vite/dist/node/chunks/dep-76613303.js:26692:12)
    at analyzeTopLevelStatements (/Users/viktors/solana-vue/node_modules/vite/dist/node/chunks/dep-76613303.js:26711:15)
[!] Error: unfinished hook action(s) on exit:
(vite:css) transform "/Users/viktors/solana-vue/src/assets/scss/main.scss"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@solana/wallet-adapter-base/lib/esm/types.mjs"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@toruslabs/solana-embed/dist/torus.esm.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/tweetnacl/nacl-fast.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@solana/web3.js/node_modules/buffer/index.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/bn.js/lib/bn.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/borsh/lib/index.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@solana/buffer-layout/lib/Layout.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/superstruct/lib/index.es.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/rpc-websockets/dist/index.browser.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/jayson/lib/client/browser/index.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/secp256k1/elliptic.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/js-sha3/src/sha3.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/eventemitter3/index.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@ledgerhq/devices/lib/hid-framing.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@ledgerhq/devices/lib-es/index.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@ledgerhq/logs/lib-es/index.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@ledgerhq/errors/lib-es/index.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@headlessui/vue/dist/_virtual/_rollupPluginBabelHelpers.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@headlessui/vue/dist/utils/render.esm.js"
(vite:load-fallback) load "/Users/viktors/solana-vue/node_modules/@headlessui/vue/dist/internal/stack-context.esm.js"

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I have no idea, what is this error about and google does not help at all. Looks like this happens only with Vite, tested with Vue CLI - everything is okay. I know that this error occurs when I'm importing any wallet adapter.

I will be very thankful about any idea/suggestion where to dig to get around this error.

lorisleiva commented 2 years ago

@NViktors Vite explicitly does not support Node polyfills or any libraries that expect them. Some dependencies of the various wallet providers do expect Node built-ins to be available and, as such, make Vite fail. That's why I currently stick to Webpack 5 for Solana development and explicitly configure the polyfills I need and discard the ones I don't.

In general Vite does not try to support libraries that explicitly expect Node built-ins to be available in the browser. i.e. making Node libs run in the browser is explicitly a non-goal.

The lib you are using likely depends more than just a Stream shim, but as said, you'll have to figure that out yourself or stick to webpack.

β€” Evan You

jordaaash commented 2 years ago

@lorisleiva thanks for helping.

I've never used Vite (the use of it in the vue-ui package here is all thanks to Loris) so I'm afraid I can't help.

I used to use Webpack / Babel a lot, but these days I generally try to use build tools that are batteries-included / low config / fast like Next / Parcel / esbuild / tsc unless I know I need to customize it. It's just not worth to deal with the hassle.

Randy808 commented 2 years ago

I'm still experiencing this. I created a standard vue3 project using the 'vue create' from the vue-cli and installed the latest version of @solana/wallet-adapter-vue-ui@0.2.3 (which seems to only be compatible with @solana/wallet-adapter-wallets@0.13.0 rather than 0.14.2). The logic seems okay so I'm not sure why the WalletMultiButton keeps failing on the useWallet call (https://github.com/solana-labs/wallet-adapter/blob/master/packages/ui/vue-ui/src/WalletMultiButton.vue#L19). To be fair, I'm not too familiar with the newest version of vue3 but things still crap out when I try the way suggested by @NViktors here

EDIT: I linked the wrong WalletMultiButton, should be fixed now

Randy808 commented 2 years ago

I found the problem https://github.com/solana-labs/wallet-adapter/blob/master/packages/core/vue/src/useWallet.ts#L13, @vue/runtime-core is being used here. I'll probably raise an issue later today, not sure why it's being used since the npm page says "This package is published only for typing and building custom renderers. It is NOT meant to be used in applications."

References that helped me find the problem: https://github.com/highlightjs/vue-plugin/issues/1 https://github.com/vuejs/vue-cli/issues/6327

jordaaash commented 2 years ago

Thanks for digging into this! If you could open an issue or PR, I'm happy to review, though I don't have much knowledge of Vue.

lorisleiva commented 2 years ago

I'm not sure how this would cause issues though. πŸ€” @vue/runtime-core is only a subset of vue that does not include the Vue compiler which we don't need as we don't use templates in the components of the core/vue package.

karnie6 commented 2 years ago

thanks everyone for digging into this esp @lorisleiva @jordansexton and @florentchauveau !

I havent got this to work yet with Vue CLI (tried everything mentioned above and then this AM, tried creating a Vue3 CLI project from scratch and had the same issue). It did work when I checked out @florentchauveau 's Vite project, but since I am not using Vite, not too helpful unf :(.

If there's anything I can do to debug, LMK - but at the moment, I'm stuck!

Also, can we re-open this issue since its not fixed yet?

lorisleiva commented 2 years ago

I'll have a look at it tomorrow with a brand new Vue CLI app using the latest packages and see if I can reproduce the issue.

Randy808 commented 2 years ago

I'm not sure how this would cause issues though. πŸ€” @vue/runtime-core is only a subset of vue that does not include the Vue compiler which we don't need as we don't use templates in the components of the core/vue package.

Yeah, but I think the fact that the components are using 'vue' as their dependency (and running 'setup' within that context) is causing things to act wonky. I think trying to mix the 2 is causing something to go kaput in the logic (maybe some references are different πŸ€·β€β™‚οΈ). I'd have to look at the full code for each repo to know what exactly is going wrong but I don't think that's the intended usage of the package from what I see on the npm listing anyway.

I made a PR here that should work (I built locally and tested): https://github.com/solana-labs/wallet-adapter/pull/266

The package needs to be force installed if used with @solana/wallet-adapter-vue-ui due to a dependency conflict with @solana/wallet-adapter-wallets. Let me know if I should change anything in the PR (the dependency management for this repo seems to be hard to maintain so hopefully updating this package to the latest dependencies should simplify things)

lorisleiva commented 2 years ago

Hey @Randy808 πŸ‘‹

So I just tried to install all the Vue related packages in a brand new Vue CLI app and it all worked perfectly.

Could you give me some steps to reproduce your issue?

karnie6 commented 2 years ago

hi @lorisleiva - what versions did you use?

I used as mentioned above: "@solana/wallet-adapter-base": "<=0.8.1", "@solana/wallet-adapter-vue": "^0.4.4", "@solana/wallet-adapter-vue-ui": "^0.2.3", "@solana/wallet-adapter-wallets": "<=0.13.0"

And when I put the following in my vue file, I still see the same runtime error of "wallet not initialized, please use WalletProvider component to initialize wallet"

<wallet-provider :wallets="wallets">
      <wallet-modal-provider>
        <wallet-multi-button/>
     </wallet-modal-provider>
</wallet-provider>
lorisleiva commented 2 years ago

Hi @karnie6, I used the following dependencies.

    "@solana/wallet-adapter-base": "^0.8.1",
    "@solana/wallet-adapter-vue": "^0.4.4",
    "@solana/wallet-adapter-vue-ui": "^0.2.3",
    "@solana/wallet-adapter-wallets": "^0.13.0",

I have tried with both the <wallet-provider> component and the global store and both approaches worked for me.

The only thing that didn't work was importing the @solana/wallet-adapter-vue-ui/styles.css file (so I had to manually copy/paste it to test this) but that could be a Webpack 5 issue.

karnie6 commented 2 years ago

hi @lorisleiva - thanks for the quick reply. Hmm, something weird is happening - i updated to what you're using and still no dice.

I added my test repo on GH (which is what comes out of the box for Vue Typescript plus the solana wallet stuff I added): https://github.com/karnie6/solana-wallet-test

When you have time, do you mind cloning it and seeing if you see this issue on your end please? Thanks so much!

lorisleiva commented 2 years ago

Hey @karnie6, I've just had a look at your repository and I think I know what's happening.

The <wallet-provider> component uses the provide/inject API behind the hood to initialise the store. However, it seems that the provide/inject API doesn't work nicely with the vue-class-component package because you get the following errors.

provide() can only be used inside setup()
inject() can only be used inside setup()

Because of that, the store is never initialised. Even if you use the initWallet global store, you will get the errors from the <wallet-modal-provider> which also uses the provide/inject API.

I think this could be because the provide() and inject() methods from the vue package are only available for the composition API.

I've tried to tweak some things around but I've not been able to successfully use the vue-class-component package with the wallet adapters.

karnie6 commented 2 years ago

hey @lorisleiva - thanks for the quick response. So I created a new Vue repo without using the vue-class-component package (https://github.com/karnie6/solana-wallet-test-2) but I'm unf seeing the same issue :(.

Should I be trying to manually call provide() or inject() inside setup()? If so, how should I be doing that?

Thanks!

Randy808 commented 2 years ago

I made a repo re-creating the issue with a docker file so that the problem could be reproduced from a clean environment. Instructions on how to spin up the docker container can be found in the README.

Once the docker container spun up, the issue can be seen by opening Google Chrome and taking a look at the console in the Chrome DevTools (after navigating to http://localhost:8080/)

NViktors commented 2 years ago

@Randy808 Your repo code will not work anyway. https://github.com/Randy808/solana-wallet-adapter-docker/blob/main/Dockerfile#L5 Please read about versions and compatibility at current stage in this thread. (vue ui is not ported to latest base and wallet adapters afaik) You should define versions explicitly for @solana/wallet-adapter-base and @solana/wallet-adapter-wallets

Edit: Oh ok, saw your PR, so nvm.. :D

Randy808 commented 2 years ago

explicitly for @solana/wallet-adapter-base and @solana/wallet-adapter-wallets

Right, the whole point is that I shouldn't have to do that and that's what the PR is for. The latest version of all packages should always be compatible with each other IMO

NViktors commented 2 years ago

Absolutely agree with that!

karnie6 commented 2 years ago

@Randy808 - thanks! have you got this to work by using specific versions of packages?

karnie6 commented 2 years ago

hey @lorisleiva - wanted to re-ping in case you missed my comment above about it still not working for me.

@Randy808 - wanted to also re-ping (see my comment directly above).