Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Getting Wallet Address #17

Merged
merged 10 commits into from
Mar 5, 2024
Merged

Conversation

rabi-siddique
Copy link
Collaborator

@rabi-siddique rabi-siddique commented Mar 5, 2024

The PR adds implementation for extracting the wallet address of the chain.

await playwright.waitAndClickByText(notificationPageElements.copyAddress);
await page.click(notificationPageElements.copyWalletAddressSelector);
const walletAddress = clipboardy.readSync();
await playwright.switchToCypressWindow();
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've initially tried to get value from the clipboard by executing a script through execute in Playwright. When I tried to get value from the clipboard in the browser, it asked me for permission to access it. It was showing a popup. I tried these things which didn't work:

  • I tried changing permissions in the browser config but they didn't apply. With the Playwright, it involved setting up a whole new context. With Cypress, the options were not according to our needs.
  • I also tried using the Tab key. I tried to press the Tab key 3 times using Playwright, to focus on the permission popup and then press the Enter key to get the permission but encountered issues related to focus there.

I tried a few more things which mainly involved executing a script through execute. But didn't work. So I explored some libraries and found clipboardy. I feel it is an intuitive way of catching the value from the clipboard without adding any complexity. And it is working fine.

@@ -44,6 +44,9 @@ module.exports = {
isCypressWindowActive() {
return activeTabName === 'cypress';
},
activeTabName() {
return activeTabName;
},
async switchToKeplrWindow() {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not being used but I feel it's still handy and can be used in the future. It was helpful when I was debugging an issue in keplr.js file.

@@ -1,5 +1,9 @@
const approveButton = `button`;
const copyAddress = 'Copy Address';
const copyWalletAddressSelector = 'div.sc-dkzDqf div.sc-hKMtZM.sc-kDDrLX.cyoEAq.dkJSBQ'

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At the moment, using a selector to copy cosmos address. This is temporary as I have to add an implementation for selecting agoric chain in our importWallet flow. Then I'll update the selector based on that.

it(`should get wallet address`, () => {
cy.getWalletAddress().then(walletAddress => {
expect(walletAddress.length).to.be.equal(45);
});
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At the moment, validating it based on the length. Because cosmos address seems to change in subsequent iterations of running tests. But once I add select chain implementation in our importWallet flow, we will check the exact value over here.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not get the agoriclocal address instead? that is always constant

Copy link
Collaborator Author

@rabi-siddique rabi-siddique Mar 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that chain still has to be selected for its address to be visible when collecting wallet addresses. For the implementation I'm referring to, I am planning to select agoric as well as agoric-local in it.

const page = await playwright.keplrWindow();
await playwright.waitAndClickByText(notificationPageElements.copyAddress);
await page.click(notificationPageElements.copyWalletAddressSelector);
const walletAddress = clipboardy.readSync();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why would we want to store the walletAddress globally? don't we have multiple addresses, depending on our chain?

also remove const to avoid variable shadowing

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At one time, we will be dealing with one instance of the wallet. And for that instance there will be only only one wallet address for the agoric chain

await module.exports.goToHome();
const page = await playwright.keplrWindow();
await playwright.waitAndClickByText(notificationPageElements.copyAddress);
await page.click(notificationPageElements.copyWalletAddressSelector);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

waitAndClick should be used instead of calling click directly

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a temp. I'll update it according to the appropriate helper method after adding implementation for selecting chain in our import wallet flow. Btw, you tried it with waitAndClick?

@@ -60,13 +74,15 @@ const keplr = {
extensionVersion = keplrExtensionData.version;
registrationUrl = `chrome-extension://${extensionId}/register.html`;
permissionsUrl = `chrome-extension://${extensionId}/popup.html#/setting/security/permission`;
popupUrl = `chrome-extension://${extensionId}/popup.html`;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rename to 'dashbaordUrl' or 'homeUrl'. it more closely resemble the intended purpose of the page

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right. These names are more intention revealing. But I'm noticing that popup.html has dynamic content. For example, it's the same URL when we encounter a notification. I feel we should stick with popupUrl as a generic

async getWalletAddress() {
await playwright.switchToKeplrWindow();
await module.exports.goToHome();
const page = await playwright.keplrWindow();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

keplrWindow is not async :))

@frazarshad frazarshad merged commit fa21859 into dev Mar 5, 2024
2 checks passed
@frazarshad frazarshad deleted the rs-interaction-for-getting-wallet-address branch March 5, 2024 17:16
frazarshad added a commit that referenced this pull request Mar 13, 2024
* Remove leftover TODOs

* Remove text based locators

* Add `Known problems with MetaMask` section

* Remove Promise wrap from `cy.setupMetamask()` (Synthetixio#927)

* Fix localized Chrome's extension id (Synthetixio#928)

* Fix localized Chrome's extension id

* Improve id handling

---------

Co-authored-by: Piotr Frankowski <piotr@f-dev.io>

* Lint

* Feature/revoke permission to all (Synthetixio#932)

* Fix typo in Permission word

* Add permission revoking actions

* Add tests for permission revoking actions

* Regenerate synpress commands file

* Add `switchNetwork` option to `acceptAccess` function

* Add new release section to README

* Use `goerli` for testing (Synthetixio#1082)

* Use `goerli` for testing

* Trigger tests

* Add `shouldWaitForPopupClosure` option to approvals and txs (Synthetixio#1081)

* feature: intial setup for integration of keplr

* chore: use Error object for throwing an error related to invalid extension name

* Adding Keplr Interaction for Importing Wallet using Private Key  (#2)

* feature: adding keplr interaction for creating an account using private key

* feature: keplr interaction for importing an existing wallet and creating a new wallet

* fix: fixed implementation of waitAndClickByText to perform exact matching

---------

Co-authored-by: Fraz Arshad <fraz.arshad12@gmail.com>

* Disconnect Wallet Interaction  (#7)

* chore: removing call to acceptAccess function

* feature: adding intereaction for disconnecting with wallet

* remve the default arg

* Added Interaction to handle rejection of wallet connection (#8)

* feat: added code to handle reject wallet access

* feat: added test case for reject wallet access + modified test structure

* Include code for Offer up Dapp (#10)

* feat(ci): Included ui/ and contract/ from offer-up-dapp (with changes)

* refactor: moved ui/ and contract/ to tools/ folder

* Updates to CI/CD to use Agoric chain and Offer up DApp (#4)

* feat(ci): Included ui/ and contract/ from offer-up-dapp (with changes)

* feat(ci): Updated CI to use agoric chain + offer up dapp

* fix(ci): updated scripts in package.json

* refactor(ci): Moved ui/ and contract/ to tools/

* refactor: moved json-server-db.json to tools folder

* Single Screen Interaction, Approve Button Fix and Code Cleanup (#9)

* chore: organize code in playwright.keplr.js and remove not used states

* chore: resolve merge conflicts with dev branch

* chore: using a consistent and more intention revealing name for a helper function

* chore: adding a test case for validating the switchToExtensionWindow function

* chore: change selector for Approve button on connecting with wallet UI

* chore: addressing PR comments

* Interaction for transaction rejection (#12)

* feat: added logic for transaction rejection

* feat: added test for transaction rejection

* fix: typo in test name

* chore:remove call to switchToKeplrWindow in metamask.js (#16)

* Abstracting Calls to Switching Extension in Keplr Helper Methods (#13)

* chore: abstracting calls to switching to keplr window in keplr helper functions

* chore: removing unnecessary awaits with sync function

* Enable setup of the keplr extension in the beforeAll hook for cypress (#14)

* fix: added code to handle setup of keplr wallet beforehand

* chore: lint fixes

* Add command to switch to another wallet (#18)

* feat: interaction to switch wallet

* chore: fixes for await async

* Getting Wallet Address (#17)

* feat: initial working setup for retrieving wallet address

* chore:code cleanup

* feat: interaction to switch wallet

* chore: simplifying switching screens in import wallet flow

* chore format code with prettier

* chore: moving get wallet address test case in the main context

* chore: fixes for await async

* chore: address PR comments

---------

Co-authored-by: Fraz Arshad <fraz.arshad12@gmail.com>

* Added Interaction to get the value of a certain token (#19)

* feat: added command to get tokens

* chore: await/async fixes

* Updates to CI/CD flow (#20)

* ci: new docker ci file for keplr

* ci: using docker workflow instead of debug workflow temporarily

* ci: updated config to have not retires in ci

* Adding Selecting Chain Interaction And Flow Improvements (#21)

* chore: changing the flow of test cases; starting by creating a new wallet rather than importing

* feature: adding behavior in import wallet flow to select a chain when importing/creating wallet

* feature: adding helper methods to click elements in a reliable way

* chore: using helper methods inside keplr.js

* chore: handling edge case for grabbing token values when values are large numbers containing commas

* chore: updating selector for getting wallet address and adding test cases to validate the behavior

* chore: addressing PR comments

* chore: addressing PR comments

* chore: replacing Agoric local with Agoric localhost

* feat: included settings to setup npm (#22)

* refactor: changed args for setupWallet (#24)

* Added automatic linting to the repository (#23)

* style:changing settings for linting

* style: fixes to lint + styling throughout repo

* Enabled CI Pipeline for NPM deployment (#25)

* feat: release workflow enabled

* feat: added CI cache folders to .npmignore

* chore: revert back to master after testing

---------

Co-authored-by: duckception <spidiritsu@gmail.com>
Co-authored-by: Peter F <pietras93@gmail.com>
Co-authored-by: Piotr Frankowski <piotr@f-dev.io>
Co-authored-by: Rafał Majchrzak <rafal2228@gmail.com>
Co-authored-by: rabi-siddique <rabisiddique27@gmail.com>
Co-authored-by: Rabi Siddique <60459172+rabi-siddique@users.noreply.github.com>
frazarshad added a commit that referenced this pull request Mar 14, 2024
* Remove leftover TODOs

* Remove text based locators

* Add `Known problems with MetaMask` section

* Remove Promise wrap from `cy.setupMetamask()` (Synthetixio#927)

* Fix localized Chrome's extension id (Synthetixio#928)

* Fix localized Chrome's extension id

* Improve id handling

---------

Co-authored-by: Piotr Frankowski <piotr@f-dev.io>

* Lint

* Feature/revoke permission to all (Synthetixio#932)

* Fix typo in Permission word

* Add permission revoking actions

* Add tests for permission revoking actions

* Regenerate synpress commands file

* Add `switchNetwork` option to `acceptAccess` function

* Add new release section to README

* Use `goerli` for testing (Synthetixio#1082)

* Use `goerli` for testing

* Trigger tests

* Add `shouldWaitForPopupClosure` option to approvals and txs (Synthetixio#1081)

* feature: intial setup for integration of keplr

* chore: use Error object for throwing an error related to invalid extension name

* Adding Keplr Interaction for Importing Wallet using Private Key  (#2)

* feature: adding keplr interaction for creating an account using private key

* feature: keplr interaction for importing an existing wallet and creating a new wallet

* fix: fixed implementation of waitAndClickByText to perform exact matching

---------

Co-authored-by: Fraz Arshad <fraz.arshad12@gmail.com>

* Disconnect Wallet Interaction  (#7)

* chore: removing call to acceptAccess function

* feature: adding intereaction for disconnecting with wallet

* remve the default arg

* Added Interaction to handle rejection of wallet connection (#8)

* feat: added code to handle reject wallet access

* feat: added test case for reject wallet access + modified test structure

* Include code for Offer up Dapp (#10)

* feat(ci): Included ui/ and contract/ from offer-up-dapp (with changes)

* refactor: moved ui/ and contract/ to tools/ folder

* Updates to CI/CD to use Agoric chain and Offer up DApp (#4)

* feat(ci): Included ui/ and contract/ from offer-up-dapp (with changes)

* feat(ci): Updated CI to use agoric chain + offer up dapp

* fix(ci): updated scripts in package.json

* refactor(ci): Moved ui/ and contract/ to tools/

* refactor: moved json-server-db.json to tools folder

* Single Screen Interaction, Approve Button Fix and Code Cleanup (#9)

* chore: organize code in playwright.keplr.js and remove not used states

* chore: resolve merge conflicts with dev branch

* chore: using a consistent and more intention revealing name for a helper function

* chore: adding a test case for validating the switchToExtensionWindow function

* chore: change selector for Approve button on connecting with wallet UI

* chore: addressing PR comments

* Interaction for transaction rejection (#12)

* feat: added logic for transaction rejection

* feat: added test for transaction rejection

* fix: typo in test name

* chore:remove call to switchToKeplrWindow in metamask.js (#16)

* Abstracting Calls to Switching Extension in Keplr Helper Methods (#13)

* chore: abstracting calls to switching to keplr window in keplr helper functions

* chore: removing unnecessary awaits with sync function

* Enable setup of the keplr extension in the beforeAll hook for cypress (#14)

* fix: added code to handle setup of keplr wallet beforehand

* chore: lint fixes

* Add command to switch to another wallet (#18)

* feat: interaction to switch wallet

* chore: fixes for await async

* Getting Wallet Address (#17)

* feat: initial working setup for retrieving wallet address

* chore:code cleanup

* feat: interaction to switch wallet

* chore: simplifying switching screens in import wallet flow

* chore format code with prettier

* chore: moving get wallet address test case in the main context

* chore: fixes for await async

* chore: address PR comments

---------

Co-authored-by: Fraz Arshad <fraz.arshad12@gmail.com>

* Added Interaction to get the value of a certain token (#19)

* feat: added command to get tokens

* chore: await/async fixes

* Updates to CI/CD flow (#20)

* ci: new docker ci file for keplr

* ci: using docker workflow instead of debug workflow temporarily

* ci: updated config to have not retires in ci

* Adding Selecting Chain Interaction And Flow Improvements (#21)

* chore: changing the flow of test cases; starting by creating a new wallet rather than importing

* feature: adding behavior in import wallet flow to select a chain when importing/creating wallet

* feature: adding helper methods to click elements in a reliable way

* chore: using helper methods inside keplr.js

* chore: handling edge case for grabbing token values when values are large numbers containing commas

* chore: updating selector for getting wallet address and adding test cases to validate the behavior

* chore: addressing PR comments

* chore: addressing PR comments

* chore: replacing Agoric local with Agoric localhost

* feat: included settings to setup npm (#22)

* refactor: changed args for setupWallet (#24)

* Added automatic linting to the repository (#23)

* style:changing settings for linting

* style: fixes to lint + styling throughout repo

* Enabled CI Pipeline for NPM deployment (#25)

* feat: release workflow enabled

* feat: added CI cache folders to .npmignore

* chore: revert back to master after testing

* Fix for switching between keplr windows with same url (#27)

* fix: checking added for window instance

* test: test added for edge case

* fix: added click after timeout to resolve flakiness (#28)

* Updated README.md (#29)

* docs: updated README.md

* docs: added env section to readme

* docs: 24 words memonics

---------

Co-authored-by: duckception <spidiritsu@gmail.com>
Co-authored-by: Peter F <pietras93@gmail.com>
Co-authored-by: Piotr Frankowski <piotr@f-dev.io>
Co-authored-by: Rafał Majchrzak <rafal2228@gmail.com>
Co-authored-by: rabi-siddique <rabisiddique27@gmail.com>
Co-authored-by: Rabi Siddique <60459172+rabi-siddique@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants