<w3m-button> does not reconnect on page reload [bug]

[layinka]

Link to minimal reproducible example

https://github.com/layinka/Angular-starter-test

Summary

I am using Wagmi and Web3Modal in an Angular 17 project. I use the w3m-button web component
Before recent versions of WalletModal, whenever i refresh the page, the w3m-button detects if my dapp was previously connected and updates the status of the button to show the connected wallet, now anytime i refresh the page, the w3m-button does not seem to be able to detect if i was connected before

Secondly, if i initiate a manual reconnection by calling the reconnect wagmi function, wagmi will detect that i am connected but the w3m-button still does not recognize that i am connected

List of related npm package versions

"@wagmi/connectors": "^5.0.6",
"@wagmi/core": "^2.10.4",
"@web3modal/wagmi": "^4.2.2",
"viem": "^2.12.5",

[linear[bot]]

APKT-486 <w3m-button> does not reconnect on page reload [bug]

[enesozturk]

@layinka Thank you for the report. I've run your app locally and seems like it has some rendering issues. Cannot say if it's related to the project itself or the w3m. See such behavior for the first time. I'm not an Angular expert but the intended behaviour of the w3m is definitely not this.

As I see web3modal components initialized quite late:
-w3m-buttons styles are applied after a 5-10 seconds

• w3m-modal mounted to the DOM after 5-10 seconds

Screen.Recording.2024-05-27.at.22.56.48.mov

@glitch-txs Do we have Angular examples to ref?

[layinka]

Yes,I noticed the rendering issues too, was hoping you will notice as it didn't happen Everytime

…

On Mon, May 27, 2024, 9:07 PM Enes ***@***.***> wrote: @layinka <https://github.com/layinka> Thank you for the report. I've run your app locally and seems like it has some rendering issues. Cannot say if it's related to the project itself or the w3m. See such behavior for the first time. I'm not an Angular expert but the intended behaviour of the w3m is definitely not this. As I see web3modal components initialized quite late: -w3m-buttons styles are applied after a 5-10 seconds - w3m-modal mounted to the DOM after 5-10 seconds https://github.com/WalletConnect/web3modal/assets/19428358/e798fe68-c3a5-439b-a9a8-daeaa47a5b55 @glitch-txs <https://github.com/glitch-txs> Do we have Angular examples to ref? — Reply to this email directly, view it on GitHub <#2334 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEZWREV24SLW7BZMVRGUMTZEOHALAVCNFSM6AAAAABILG3AP2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZUGAYDCMJQGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[glitch-txs]

Please provide a minimal example of the implementation. Closing for now.

[layinka]

A Minimal example was included in my initial post.
I have added the link below again

https://github.com/layinka/Angular-starter-test

[glitch-txs]

Please make it minimal 🙏

[layinka]

It is minimal, It's a minimal angular project Not sure there is any other way to minimize it It only shows connect button

…

On Wed, May 29, 2024, 9:35 PM Glitch ***@***.***> wrote: Please make it minimal 🙏 — Reply to this email directly, view it on GitHub <#2334 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEZWREO4D563N5QPD4SJPDZEY3YBAVCNFSM6AAAAABILG3AP2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZYGIYTSNBYGU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[glitch-txs]

why do you have react and ethers as a dependency? Could you make it minimal from scratch please?

[layinka]

I have React as a dependency because both @walletconnect/modal-core , valtio and use-sync-external-store ( all used by either viem, wagmi, walletconnect or wallet modal) has a dependency on react and without react the app wont work,

Without adding react , i get the error

[ERROR] Could not resolve "react"

I added ethers because of the wagmi ethers adapter, I have removed it

[layinka]

Hello,
Is there any update on this now

[dowithless]

I encountered a similar issue.

Link to minimal reproducible example

https://codesandbox.io/p/devbox/polished-bash-hmnwdq?embed=1

List of related npm package versions

  "dependencies": {
    "@reown/appkit": "^1.1.8",
    "@reown/appkit-adapter-wagmi": "^1.1.8",
    "viem": "^2.21.35",
    "vue": "^3.4.15",
    "wagmi": "^2.12.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.6.2",
    "typescript": "^5.2.2",
    "vite": "^5.0.12",
    "vue-tsc": "^1.8.27"
  }

[webel]

Same issue, did you manage to fix it?

Although I use the web component <appkit-button></appkit-button> in my project.

[dowithless]

no

[webel]

lol. Do you do something else instead? It'd be nice to use the web components and not have to rewrite the functionality 🥲

[dowithless]

🤷

[webel]

Regarding this discussion, here's an issue with an MRE I just created: #3223