feat: Angular support for wallet-adapter #42

danmt · 2021-09-01T09:14:33Z

Overview

As an Angular dev there's no straightforward way of using this package without having to code everything from scratch. This PR intention is to give support for Angular devs trying to integrate @solana/wallet-adapter into their dapps.

Features

In order to ensure this package is analogous to @solana/wallet-adapter-react a list of features is exposed below to make sure nothing is missed.

NOTES

The state of the wallet and connection is handled by @ngrx/component-store which is the recommended tool, the component-store is very similar to the Providers in the React library. There are some providers that are similar to the Context from React, it just takes a Provider and makes it available for a component and its children.

closes #37

danmt · 2021-09-01T14:58:46Z

CRA depends on babel-loader@8.1.0 and webpack@4.4.0, while Angular depends on babel-loader@8.2.2 and webpack@5.50.0. Angular deps are hoisted to the root by yarn, leading to a warning. I had to do this commit in order to bypass the error.

Might worth taking a second look at it. I'm open to questions as needed!

jordaaash

Looks really clean, considering I find the Angular/Rxjs stuff absolutely brutal to look at :)

I just have few questions about how we can make sure the features are detectable in TypeScript so devs get compile time errors instead of pushing issues into runtime.

packages/angular/src/wallet/wallet.errors.ts

packages/angular/src/wallet/wallet.store.ts

jordaaash · 2021-09-02T01:25:18Z

CRA depends on babel-loader@8.1.0 and webpack@4.4.0, while Angular depends on babel-loader@8.2.2 and webpack@5.50.0. Angular deps are hoisted to the root by yarn, leading to a warning. I had to do this commit in order to bypass the error.

One way to get around this might be to use https://classic.yarnpkg.com/en/docs/selective-version-resolutions/ to force both to resolve to 8.2.x

dubin-s · 2021-09-10T21:35:44Z

If there is anything I can do to help get this merged in please let me know, would be happy to work with you @danmt to resolve anything.

danmt · 2021-09-10T22:00:17Z

Right on @dubin-s. I'm currently working on my hackathon project so I haven't been able to wrap this one up.

If you want to have early access check this out @danmt/wallet-adapter-angular, it's basically a fork I have for development purposes. I'm using it in a project and it's looking fine. It's literally the same thing you see in the PR plus some minor adjustments.

You can give it a try and drop feedback here, I'd love an extra pair of eyes on it.

jordaaash · 2021-09-10T22:42:30Z

Might be good to merge master in, and check the simplifying state changes that have been made to the react package since this is based on that.

danmt · 2021-09-11T06:00:35Z

I can do the sign-methods fix we talked about and the changes you mentioned. I've been using this for a little while and it's looking good, we can push it even if it's not ready to start gathering feedback.

I can have this later today.

jordaaash · 2021-09-11T06:30:04Z

Awesome, sounds good. Also, hit me up on Discord -- I'd be happy to take a look at your project if you like.

danmt · 2021-09-11T13:01:56Z

I changed the sign-methods to be Observable<type> | undefined for all sign-methods. Also, made the anchorWallet thing so it returns undefined when the selected wallet cannot sign.

BTW - The only way I could bypass the babel-loader error was by adding SKIP_PREFLIGHT_CHECK=true to every CRA package (example, material-ui-starter, react-ui-starter).

I successfully built every package. It wasn't as easy as I wanted with Lerna but that should work.

danmt · 2021-09-11T13:04:07Z

Once this gets merged and published, will update my example app and will raise another PR for that.

jordaaash

Thanks for this! Mostly I have a bunch of questions with a few small change requests.

packages/angular/package.json

packages/angular/src/wallet/wallet.store.ts

packages/example/.env

packages/angular/tsconfig.lib.json

packages/angular/src/wallet/wallet.store.ts

packages/angular/.prettierignore

packages/angular/src/wallet/wallet.store.ts

danmt · 2021-09-12T20:46:05Z

Yo @jordansexton, I decided to go the extra mile and made some refactoring so the package maps almost 1:1 with the react package. As you would expect, there are some places I couldn't do the exact same thing but I tried to keep the same behavior.

Things to have in mind:

I removed _logError which is analogous to onError from the react package. The reason behind it is that I created the error stream I mentioned in our discussion, if the consumer wants to "tap" into the errors being thrown all it takes is to subscribe to the exposed error$.
Given that the WalletStore is a class, making the sign methods conditional was a real challenge, I ended up creating a higher-order function per method, each returns undefined if the adapter cannot do that or a function that takes whatever you want to sign and returns an observable that on subscription does the actual signing.
I don't have to set up the event listeners and tearing them down because switchMap + the custom operator fromAdapterEvent takes care of that for me.
I turned the connect/disconnect methods from effects into methods returning observables, that way the consumers have full control of it. I figured that if it was confusing for both of us, it would be too for a newcomer.

Things left to do:

The SKIP_PREFLIGHT thingy, I'm not sure how to deal with it but I'm open to suggestions.

Besides that, I re-ordered values and methods just like the React package for easier follow-up. I have an example app and it works like charm, I feel like once we fix the preflight stuff this is ready to go. I'll raise a PR for the example once this gets merged in.

NOTE: Even though I feel comfortable with it, would love it if you can take a look at it just to make sure I didn't leave any weirdness behind.

dubin-s · 2021-09-13T17:19:01Z

Going to take a look at this today @danmt. I see there have been lots of updates since I looked at this last. Was MIA over the weekend.

danmt · 2021-09-13T17:29:29Z

Essentially it works the same way, I made adjustments so it was more similar to the react package. As well as adding a bunch of suggestions from @jordansexton. If you're familiar with the react package, this should be easy to follow, if it isn't feel free to drop a comment.

jordaaash · 2021-09-13T18:51:33Z

Awesome, thanks @danmt. I'll try to review this today.

* feat: initial commit * feat: it's alive!!

* chore: bump version * feat: set up error handler via config * chore: bump version * feat: make error handler optional * feat: prevent error flushing on send transaction * chore: bump version * refactor: deprecate the providers * feat: deprecate connection providers

* fix dependency resolution * fix lint warning * space * make error class declarations consistent with base package * adjust internal method names * use ReturnType for inference

jordaaash · 2021-09-14T17:57:01Z

Awesome work, thank you @danmt 🚀

danmt · 2021-09-14T18:03:23Z

Wohoo! 🎉

danmt marked this pull request as ready for review September 1, 2021 14:53

jordaaash reviewed Sep 2, 2021

View reviewed changes

jordaaash force-pushed the master branch 2 times, most recently from f9f1a6c to 4a15034 Compare September 3, 2021 18:02

jordaaash force-pushed the master branch from 4c53734 to 894e466 Compare September 10, 2021 19:03

jordaaash force-pushed the master branch from 7e4ae5e to e94577e Compare September 11, 2021 00:30

danmt mentioned this pull request Sep 11, 2021

Replace lerna with yarn v2 workspaces #66

Closed

danmt force-pushed the master branch from 5214ab1 to a2d15af Compare September 11, 2021 12:24

danmt requested a review from jordaaash September 11, 2021 13:02

jordaaash reviewed Sep 11, 2021

View reviewed changes

packages/angular/src/wallet/wallet.store.ts Outdated Show resolved Hide resolved

danmt force-pushed the master branch 2 times, most recently from 38f71da to b5a4bf4 Compare September 12, 2021 20:25

danmt requested a review from jordaaash September 12, 2021 20:37

danmt mentioned this pull request Sep 12, 2021

Cannot re-connect to Sollet web after closing the window #68

Closed

danmt force-pushed the master branch from 4cc0fb3 to 89691b5 Compare September 13, 2021 13:04

feat: Create an Angular version of the React library (#1)

d7bc214

* feat: initial commit * feat: it's alive!!

danmt added 24 commits September 14, 2021 09:16

chore: bump again because it wasnt built

4f6afe6

feat(angular): force devs to check before using sign methods

66560d9

chore(core): rollback dev package.json changes

19e8307

chore(angular): bump internal deps

97e1e6c

chore(angular): add scoped typescript package

5276f41

chore(react-ui-start): prevent babel-loader version mismatch error

877f4b7

chore(angular): house-keeping change requests

ac38583

feat(angular): create a localStorage wrapper service

acc8cae

feat(angular): use localStorage wrapper and prevent auto-select

59c1584

feat(angular): expose autoConnect

25fbfb6

fix(angular): extend tsconfig without .lib

6dd51dc

feat(angular): expose an error stream

fc441f6

feat(angular): improve sign method type-inference

55c06e4

fix(angular): prevent duplicate triggers for anchor wallet

ecc22c7

feat(angular): clean up and handle errors for connect/disconnect

91ec871

fix(angular): access last state using withLatestFrom

7cefb77

feat(angular): wipe selected on disconnect

761d571

feat(angular): remove localStorageKey property

8f00c31

refactor(angular): clean up and organize as react package

d1c1663

chore(angular): remove unnused import

6654a78

refactor(angular): clean up connection config init

a537e97

chore(angular): add files to package.json

ad82d34

chore(core): update yarn.lock

848ee68

danmt force-pushed the master branch from 89691b5 to 848ee68 Compare September 14, 2021 08:18

danmt and others added 2 commits September 14, 2021 09:27

fix(angular): wipe selected wallet on adapter disconnect

ebe09fc

Misc fixes before merge (#4)

c4d3b88

* fix dependency resolution * fix lint warning * space * make error class declarations consistent with base package * adjust internal method names * use ReturnType for inference

jordaaash merged commit 2cc614f into anza-xyz:master Sep 14, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Angular support for wallet-adapter #42

feat: Angular support for wallet-adapter #42

danmt commented Sep 1, 2021 •

edited

Loading

danmt commented Sep 1, 2021

jordaaash left a comment

jordaaash commented Sep 2, 2021

dubin-s commented Sep 10, 2021

danmt commented Sep 10, 2021 •

edited

Loading

jordaaash commented Sep 10, 2021

danmt commented Sep 11, 2021

jordaaash commented Sep 11, 2021

danmt commented Sep 11, 2021

danmt commented Sep 11, 2021

jordaaash left a comment

danmt commented Sep 12, 2021 •

edited

Loading

dubin-s commented Sep 13, 2021

danmt commented Sep 13, 2021

jordaaash commented Sep 13, 2021

jordaaash commented Sep 14, 2021

danmt commented Sep 14, 2021

feat: Angular support for wallet-adapter #42

feat: Angular support for wallet-adapter #42

Conversation

danmt commented Sep 1, 2021 • edited Loading

Overview

Features

NOTES

danmt commented Sep 1, 2021

jordaaash left a comment

Choose a reason for hiding this comment

jordaaash commented Sep 2, 2021

dubin-s commented Sep 10, 2021

danmt commented Sep 10, 2021 • edited Loading

jordaaash commented Sep 10, 2021

danmt commented Sep 11, 2021

jordaaash commented Sep 11, 2021

danmt commented Sep 11, 2021

danmt commented Sep 11, 2021

jordaaash left a comment

Choose a reason for hiding this comment

danmt commented Sep 12, 2021 • edited Loading

dubin-s commented Sep 13, 2021

danmt commented Sep 13, 2021

jordaaash commented Sep 13, 2021

jordaaash commented Sep 14, 2021

danmt commented Sep 14, 2021

danmt commented Sep 1, 2021 •

edited

Loading

danmt commented Sep 10, 2021 •

edited

Loading

danmt commented Sep 12, 2021 •

edited

Loading