Add support for NearMobileWallet #931

GuillemGarciaDev · 2023-09-15T08:49:42Z

Description

Please include a summary of the wallet and how users can install it. Be sure to take a look at our guide on Custom Wallets to understand core concepts when integrating with Wallet Selector.

Summary

In order to onboard customers with our wallet, this PR intends to connect NearMobileWallet with Wallet Selector. Users of the Near Mobile wallet may safely store, manage, and send NEAR and other cryptocurrencies while on the go. Non-custodial mobile wallet that is simple to use.

PR summary

This PR contains the integration with Wallet selector. To achieve it, a package has been added to package.json file (@peersyst/near-mobile-signer) to handle the requests.

Checklist:

I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings

HarisSQA · 2023-09-15T14:04:40Z

Hi @GuillemGarciaDev ,

I try to run this PR, and I can see wallet in list, but when I try to open it, I can't see QR code there.

erditkurteshiSQA · 2023-09-18T09:56:43Z

Hi @GuillemGarciaDev ,
Thank you for raising this PR.

While trying to login with near mobile wallet we noticed a QR code shown in the modal.
Can you explain how to scan the QR code, on the mobile app there is no place to scan it.

GuillemGarciaDev · 2023-09-19T06:44:42Z

Hi @GuillemGarciaDev , Thank you for raising this PR.

While trying to login with near mobile wallet we noticed a QR code shown in the modal. Can you explain how to scan the QR code, on the mobile app there is no place to scan it.

Hi @erditkurteshiSQA!
We are preparing the version of the wallet with the new functionality. Once it is updated, you will be able to scan the QR using a scan button on the bottom bar.

When the version is uploaded I will notify you so you can test it.

Thanks for your quick reply!

GuillemGarciaDev · 2023-09-19T06:46:46Z

Hi @GuillemGarciaDev ,

I try to run this PR, and I can see wallet in list, but when I try to open it, I can't see QR code there.

Hi @HarisSQA !

When you click on the wallet, does a modal appear or nothing at all?

Thanks for the feedback!

HarisSQA · 2023-09-19T09:16:45Z

Hi @GuillemGarciaDev ,
I try to run this PR, and I can see wallet in list, but when I try to open it, I can't see QR code there.

Hi @HarisSQA !

When you click on the wallet, does a modal appear or nothing at all?

Thanks for the feedback!

Hi @GuillemGarciaDev ,

I had an issue only with the QR code. Modal was working fine.

Also, I have tested it now, and the QR code is shown in modal.

GuillemGarciaDev · 2023-09-20T14:45:33Z

Hi @GuillemGarciaDev ,
I try to run this PR, and I can see wallet in list, but when I try to open it, I can't see QR code there.

Hi @HarisSQA !
When you click on the wallet, does a modal appear or nothing at all?
Thanks for the feedback!

Hi @GuillemGarciaDev ,

I had an issue only with the QR code. Modal was working fine.

Also, I have tested it now, and the QR code is shown in modal.

Hello!

Sorry for taking so long to reply. @HarisSQA we are trying to replicate your case! Thanks for the feedback.

Possibly tomorrow or the day after you will have the new version of the app available to test the wallet connector with the wallet. @HarisSQA @erditkurteshiSQA

When it's up I'll notify you!

Thanks again!

GuillemGarciaDev · 2023-10-03T07:14:33Z

Hi! @HarisSQA @erditkurteshiSQA

The new version of NEAR Mobile wallet has been uploaded to the stores, so you can now test the PR properly. Once you import an account, you will find a scan button on the bottom bar of the app that will allow you to scan QRs.

I'll keep an eye out for any feedback.
Thanks again

erditkurteshiSQA · 2023-10-04T14:15:10Z

Hi @GuillemGarciaDev ,

We have tested the wallet with the latest release of the app.
I tested it with importing two different accounts and also creating one.
Noticed a problem while scanning the QR code.

Take a look at the picture below:

packages/near-mobile-wallet/assets/icon.png

packages/near-mobile-wallet/jest.config.ts

packages/near-mobile-wallet/package.json

packages/near-mobile-wallet/project.json

GuillemGarciaDev · 2023-10-05T09:17:47Z

Hi @GuillemGarciaDev ,

We have tested the wallet with the latest release of the app. I tested it with importing two different accounts and also creating one. Noticed a problem while scanning the QR code.

Take a look at the picture below:

Hi @erditkurteshiSQA!

The issue is now fixed! It was a missing env variable. I tested the guest-book locally with the app and it seems to be working fine.

All requested PR changes have been fixed!

Regards, Guillem

erditkurteshiSQA · 2023-10-06T10:57:34Z

Hi @GuillemGarciaDev ,
Thank you for the quick fix.

We were able to log in with iOS and tested it. However, the signMessage feature is not working, and I will provide a picture below of the error:

Also, we noticed that if we close the QR modal while trying to connect with the wallet, we still see the message Connecting to Near Mobile Wallet instead of a different message or an error message indicating that the modal is closed.

On Android, however, on the Play Store, it's still the older version of the wallet, and the login problem still persists.

Play Store app version: 1.3.0
App Store app version: 2.3.0

erditkurteshiSQA · 2023-10-06T10:58:54Z

packages/near-mobile-wallet/jest.config.ts

+    ],
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+  coverageDirectory: "../../coverage/packages/ramper-wallet",


Can you please update the coverageDirectory to the near-mobile-wallet?

GuillemGarciaDev · 2023-10-10T10:14:00Z

Hi @HarisSQA !

We have been working on the Android issue and it is already solved. You will be able to test it when it is in Play store. 👍🏻

On the other hand, could you provide me some info about how the signed message is verified? What we do is to verify the signature using the public key of the account.

const { publicKey, signature, accountId } = response;
const sign = new Uint8Array(Buffer.from(signature, "base64"));
const messageHash = new Uint8Array(sha256.digest(`NEP0413:${JSON.stringify({ receiver, message })}`));
const isValidSignature = PublicKey.fromString(publicKey).verify(messageHash, sign);

Thank you for your feedback!

erditkurteshiSQA · 2023-10-10T12:00:26Z

Hi @GuillemGarciaDev ,

Please refer to the example referenced here in the NEP:
https://github.com/near/NEPs/blob/master/neps/nep-0413.md#references

This is how the message needs to be serialized and signed in the wallet:
https://github.com/gagdiez/near-login/blob/main/tests/authentication/wallet.ts#L60

This is how we verify on our examples:
https://github.com/near/wallet-selector/blob/main/examples/react/components/Content.tsx#L289

Looks like you have implemented some kind of an old version of the sign message looking at this line of code:
const messageHash = new Uint8Array(sha256.digest(NEP0413:${JSON.stringify({ receiver, message })}));

The NEP413 does not add a prefix string NEP0413 to the message now it uses a tag (number) there's no receiver either please see the interface:
https://github.com/near/NEPs/blob/master/neps/nep-0413.md#input-interface

Message must be signed with the above structure with params ordered alphabetically for the required params.

GuillemGarciaDev · 2023-10-13T12:43:53Z

Hi @GuillemGarciaDev ,

Please refer to the example referenced here in the NEP: https://github.com/near/NEPs/blob/master/neps/nep-0413.md#references

This is how the message needs to be serialized and signed in the wallet: https://github.com/gagdiez/near-login/blob/main/tests/authentication/wallet.ts#L60

This is how we verify on our examples: https://github.com/near/wallet-selector/blob/main/examples/react/components/Content.tsx#L289

Looks like you have implemented some kind of an old version of the sign message looking at this line of code: const messageHash = new Uint8Array(sha256.digest(NEP0413:${JSON.stringify({ receiver, message })}));

The NEP413 does not add a prefix string NEP0413 to the message now it uses a tag (number) there's no receiver either please see the interface: https://github.com/near/NEPs/blob/master/neps/nep-0413.md#input-interface

Message must be signed with the above structure with params ordered alphabetically for the required params.

There's a new version in the Play Store to try out wallet selector in Android! There's a new update on the signMessage feature and it is now working!

erditkurteshiSQA · 2023-10-13T13:55:27Z

Hi @GuillemGarciaDev ,

We checked the latest iOS and android version and the functionalities are working including signMessage but
there are some issues/improvement that require attention:

All Reject(s) are being ignored, and the promise never resolves.
Open the wallet-selector modal and click on NearMobileWallet to open the QR code modal. However, closing the QR code modal does not trigger the expected rejection of the signIn request.
When signing in, trying signAndSendTransaction(s) and scanning the QR code, the rejection on the wallet does not trigger any action. It should reject the signAndSendTransaction by throwing an error.
Add the ability for local signing for FunctionCall transactions without a deposit. Currently, the wallet creates a Limited Access Key (LAK) but does not utilize it.
Multiple-transactions should be able to be signed just by signing the QR code once.

As a suggestion consider comparing the UX of wallet-selector with Here wallet, since both wallets are mobile wallets.

AdriaCarrera · 2023-10-16T10:49:00Z

Hi @GuillemGarciaDev ,

We checked the latest iOS and android version and the functionalities are working including signMessage but there are some issues/improvement that require attention:

All Reject(s) are being ignored, and the promise never resolves.

Open the wallet-selector modal and click on NearMobileWallet to open the QR code modal. However, closing the QR code modal does not trigger the expected rejection of the signIn request.

When signing in, trying signAndSendTransaction(s) and scanning the QR code, the rejection on the wallet does not trigger any action. It should reject the signAndSendTransaction by throwing an error.

Add the ability for local signing for FunctionCall transactions without a deposit. Currently, the wallet creates a Limited Access Key (LAK) but does not utilize it.

Multiple-transactions should be able to be signed just by signing the QR code once.

As a suggestion consider comparing the UX of wallet-selector with Here wallet, since both wallets are mobile wallets.

Hi @erditkurteshiSQA and @HarisSQA it's Adrià from Peersyst team, thanks for all this feedback.

We have almost all the points that you mentioned done, except the 4th one. Is it something that you require to be done before getting approved or we can merge without this point and make an improvement later on? Also could you point us to some links or docs that better explain the local signing?

Thank you!

erditkurteshiSQA · 2023-10-16T12:07:03Z

Hey @AdriaCarrera

The 4th point is being mentioned as an improvement and can be done later on once the other points are working fine.

The idea is to be able to sign FunctionCall transactions that don't have any deposit without confirming it on the Wallet since the FunctionCall Access-key (limited access key LAK) is on the localStorage of when we sign in with NearMobileWallet, this improves the UX.

Looks like you save the LAK in near-mobile-signer:session

For instance, one use case of such a transaction is the ability to send messages in our guest book example without needing confirmation in the wallet when no deposit is attached.

This approach is also implemented in near-api-js as demonstrated here:
https://github.com/near/near-api-js/blob/master/packages/wallet-account/src/wallet_account.ts#L306

In our wallet-connect package, we have a simpler version, as shown in here:
https://github.com/near/wallet-selector/blob/main/packages/wallet-connect/src/lib/wallet-connect.ts#L558-L566

The exact implementation might differ but the core idea is the same, I believe a similar approach can be implemented in the @peersyst/near-mobile-signer package.

If you need any more information or have more questions, feel free to reach out.

Thank you!

erditkurteshiSQA · 2023-10-17T09:37:39Z

Hi @GuillemGarciaDev @AdriaCarrera ,

Following the recent update on the Near mobile wallet and this PR, we tested it on both iOS and Android.
We are unable to login in both platforms. Please refer to the attached image for the error:

Additionally, kindly remember that the 4th point, mentioned earlier, is considered an improvement and can be addressed once the other points are resolved.

Thank you!

GuillemGarciaDev · 2023-10-19T09:26:27Z

Hi @GuillemGarciaDev @AdriaCarrera ,

Following the recent update on the Near mobile wallet and this PR, we tested it on both iOS and Android. We are unable to login in both platforms. Please refer to the attached image for the error:

Additionally, kindly remember that the 4th point, mentioned earlier, is considered an improvement and can be addressed once the other points are resolved.

Thank you!

Hi @erditkurteshiSQA !!

This issue seems already fixed and you have available a new version with all the improvements (except the 4th one). I hope you find this fixes working as expected!

Thank you again!!

erditkurteshiSQA · 2023-10-19T14:59:56Z

@GuillemGarciaDev

After testing the wallet with the latest version in both platform, all issues have been successfully resolved. We are now ready to merge this PR.
A release is planned for tomorrow, which will include the changes from this PR.

Thank you!

kujtimprenkuSQA · 2023-10-20T10:42:26Z

Hi, @GuillemGarciaDev & @AdriaCarrera we have published a new version of the wallet-selector:

Release notes: https://github.com/near/wallet-selector/releases/tag/v8.7.0

Near Mobile Wallet: https://www.npmjs.com/package/@near-wallet-selector/near-mobile-wallet

kujtimprenkuSQA · 2023-10-27T13:11:15Z

Hi, @GuillemGarciaDev & @AdriaCarrera could you please take a look at the issues that need improvement:

The @peersyst/near-mobile-signer has too many unnecessary dependencies:
https://www.npmjs.com/package/@peersyst/near-mobile-signer?activeTab=dependencies
Can you please improve the bundler to include only the necessary dependencies and remove all devDependencies from NPM? - they get added to dApps which is not ideal.
Passing a callbackUrl for signMessageparams is failing can you take a look at it too?
The QR Code of NearMobileWallet does not open correctly when other extensions are installed such as MetaMask, Nightly, Sender etc see below video:

qr-code-issue-near-mobile-wallet.webm

GuillemGarciaDev · 2023-11-02T14:44:41Z

Hi, @GuillemGarciaDev & @AdriaCarrera could you please take a look at the issues that need improvement:

The @peersyst/near-mobile-signer has too many unnecessary dependencies:
https://www.npmjs.com/package/@peersyst/near-mobile-signer?activeTab=dependencies
Can you please improve the bundler to include only the necessary dependencies and remove all devDependencies from NPM? - they get added to dApps which is not ideal.

Passing a callbackUrl for signMessageparams is failing can you take a look at it too?

The QR Code of NearMobileWallet does not open correctly when other extensions are installed such as MetaMask, Nightly, Sender etc see below video:

qr-code-issue-near-mobile-wallet.webm

Hi! @kujtimprenkuSQA we are working to fix these issues.

About callbackUrl issue, since NearMobileWallet is an InjectedWallet there's no reason to use a callbackUrl because the signature action is done in a mobile app.

Should we create a new PR with the new fixes?

Thank you for your feedback!

kujtimprenkuSQA · 2023-11-02T14:56:38Z

Hi, @GuillemGarciaDev & @AdriaCarrera could you please take a look at the issues that need improvement:

The @peersyst/near-mobile-signer has too many unnecessary dependencies:
https://www.npmjs.com/package/@peersyst/near-mobile-signer?activeTab=dependencies
Can you please improve the bundler to include only the necessary dependencies and remove all devDependencies from NPM? - they get added to dApps which is not ideal.

Passing a callbackUrl for signMessageparams is failing can you take a look at it too?

The QR Code of NearMobileWallet does not open correctly when other extensions are installed such as MetaMask, Nightly, Sender etc see below video:

qr-code-issue-near-mobile-wallet.webm

Hi! @kujtimprenkuSQA we are working to fix these issues.

About callbackUrl issue, since NearMobileWallet is an InjectedWallet there's no reason to use a callbackUrl because the signature action is done in a mobile app.

Should we create a new PR with the new fixes?

Thank you for your feedback!

Yes, a new PR should be made once the QR Code issue is fixed and also the dependencies for @peersyst/near-mobile-signer

GuillemGarciaDev added 3 commits September 14, 2023 12:47

feat: base near-mobile-wallet package

9de96b8

feat: updated dApp metadata prop on wallet setup

6cd69d3

README.md update

dcd1fd8

GuillemGarciaDev closed this Sep 15, 2023

GuillemGarciaDev changed the title ~~Dev~~ NearMobileWallet integration Sep 15, 2023

GuillemGarciaDev reopened this Sep 15, 2023

GuillemGarciaDev added 3 commits September 15, 2023 10:58

fix: updated main README.md

9c5bbd9

fix: README.md

53c1741

fix: logging

f7d01b6

AmmarHumackicSQA requested a review from HarisSQA September 15, 2023 09:01

AmmarHumackicSQA added this to the NEAR Wallet Integration milestone Sep 15, 2023

AmmarHumackicSQA assigned HarisSQA Sep 15, 2023

AmmarHumackicSQA removed this from the NEAR Wallet Integration milestone Sep 15, 2023

GuillemGarciaDev added 2 commits September 15, 2023 11:07

chore: updated @peersyst/near-mobile-wallet to latest version

d2988f6

chore: v1.0.0

206ab25

erditkurteshiSQA reviewed Oct 5, 2023

View reviewed changes

fix(near-mobile-wallet): tune project config + package version upgrade

8f9c857

erditkurteshiSQA reviewed Oct 6, 2023

View reviewed changes

fix(near-mobile-wallet): testing config

edbecf6

fix(near-mobile-wallet): signMessage implementation

640153d

GuillemGarciaDev and others added 2 commits October 16, 2023 17:01

chore(near-mobile-wallet): updated near-mobile-signer package

5ac87b6

Merge branch 'dev' into dev

c8f73a1

erditkurteshiSQA approved these changes Oct 19, 2023

View reviewed changes

erditkurteshiSQA changed the title ~~NearMobileWallet integration~~ Add support for NearMobileWallet Oct 19, 2023

erditkurteshiSQA merged commit 00c56e9 into near:dev Oct 19, 2023
7 checks passed

kujtimprenkuSQA mentioned this pull request Oct 20, 2023

v8.7.0 Release (dev -> main) #976

Merged

erditkurteshiSQA mentioned this pull request Oct 27, 2023

Added NearMobileWallet in wallet-selector near/near-discovery#777

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for NearMobileWallet #931

Add support for NearMobileWallet #931

GuillemGarciaDev commented Sep 15, 2023 •

edited

Loading

HarisSQA commented Sep 15, 2023

erditkurteshiSQA commented Sep 18, 2023

GuillemGarciaDev commented Sep 19, 2023

GuillemGarciaDev commented Sep 19, 2023

HarisSQA commented Sep 19, 2023

GuillemGarciaDev commented Sep 20, 2023

GuillemGarciaDev commented Oct 3, 2023

erditkurteshiSQA commented Oct 4, 2023 •

edited

Loading

GuillemGarciaDev commented Oct 5, 2023

erditkurteshiSQA commented Oct 6, 2023

erditkurteshiSQA Oct 6, 2023 •

edited

Loading

GuillemGarciaDev commented Oct 10, 2023

erditkurteshiSQA commented Oct 10, 2023

GuillemGarciaDev commented Oct 13, 2023

erditkurteshiSQA commented Oct 13, 2023

AdriaCarrera commented Oct 16, 2023 •

edited

Loading

erditkurteshiSQA commented Oct 16, 2023 •

edited

Loading

erditkurteshiSQA commented Oct 17, 2023

GuillemGarciaDev commented Oct 19, 2023

erditkurteshiSQA commented Oct 19, 2023

kujtimprenkuSQA commented Oct 20, 2023

kujtimprenkuSQA commented Oct 27, 2023 •

edited

Loading

GuillemGarciaDev commented Nov 2, 2023

kujtimprenkuSQA commented Nov 2, 2023

Add support for NearMobileWallet #931

Add support for NearMobileWallet #931

Conversation

GuillemGarciaDev commented Sep 15, 2023 • edited Loading

Description

Summary

PR summary

Checklist:

HarisSQA commented Sep 15, 2023

erditkurteshiSQA commented Sep 18, 2023

GuillemGarciaDev commented Sep 19, 2023

GuillemGarciaDev commented Sep 19, 2023

HarisSQA commented Sep 19, 2023

GuillemGarciaDev commented Sep 20, 2023

GuillemGarciaDev commented Oct 3, 2023

erditkurteshiSQA commented Oct 4, 2023 • edited Loading

GuillemGarciaDev commented Oct 5, 2023

erditkurteshiSQA commented Oct 6, 2023

erditkurteshiSQA Oct 6, 2023 • edited Loading

Choose a reason for hiding this comment

GuillemGarciaDev commented Oct 10, 2023

erditkurteshiSQA commented Oct 10, 2023

GuillemGarciaDev commented Oct 13, 2023

erditkurteshiSQA commented Oct 13, 2023

AdriaCarrera commented Oct 16, 2023 • edited Loading

erditkurteshiSQA commented Oct 16, 2023 • edited Loading

erditkurteshiSQA commented Oct 17, 2023

GuillemGarciaDev commented Oct 19, 2023

erditkurteshiSQA commented Oct 19, 2023

kujtimprenkuSQA commented Oct 20, 2023

kujtimprenkuSQA commented Oct 27, 2023 • edited Loading

GuillemGarciaDev commented Nov 2, 2023

kujtimprenkuSQA commented Nov 2, 2023

GuillemGarciaDev commented Sep 15, 2023 •

edited

Loading

erditkurteshiSQA commented Oct 4, 2023 •

edited

Loading

erditkurteshiSQA Oct 6, 2023 •

edited

Loading

AdriaCarrera commented Oct 16, 2023 •

edited

Loading

erditkurteshiSQA commented Oct 16, 2023 •

edited

Loading

kujtimprenkuSQA commented Oct 27, 2023 •

edited

Loading