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

feat(dapps): Add connector badge to WC and BC dapps #16816

Conversation

alexjba
Copy link
Contributor

@alexjba alexjba commented Nov 26, 2024

What does the PR do

Closes #16815

  • Adding connector badge to the dapps list and connect modal
  • Updating the RoundImageWithBadge to support custom badge size and margins
  • Updating the RoundImageWithBadge to support both SVG and PNG as source
  • Polish the dapps sign modal badge to match the design
  • Polish the dapps delegate in the dapps combo box to match the design
  • Amend Storybook and qml tests

Affected areas

Wallet connect
Browser connect

Architecture compliance

Screenshot of functionality (including design for comparison)

  • I've checked the design and this PR matches it
Screen.Recording.2024-11-26.at.12.52.56.mov

@alexjba alexjba requested review from micieslak, a team and caybro as code owners November 26, 2024 11:24
@alexjba alexjba requested review from dlipicar and Cuteivist and removed request for a team November 26, 2024 11:24
@alexjba alexjba linked an issue Nov 26, 2024 that may be closed by this pull request
2 tasks
@status-im-auto
Copy link
Member

status-im-auto commented Nov 26, 2024

Jenkins Builds

Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ dcf84a4 #1 2024-11-26 11:32:06 ~7 min macos/aarch64 🍎dmg
✔️ dcf84a4 #1 2024-11-26 11:33:10 ~8 min tests/nim 📄log
✔️ dcf84a4 #1 2024-11-26 11:37:45 ~12 min tests/ui 📄log
✔️ dcf84a4 #1 2024-11-26 11:41:20 ~16 min linux-nix/x86_64 📦tgz
✔️ dcf84a4 #1 2024-11-26 11:44:04 ~19 min linux/x86_64 📦tgz
✔️ dcf84a4 #1 2024-11-26 11:45:00 ~20 min macos/x86_64 🍎dmg
✔️ dcf84a4 #1 2024-11-26 11:54:47 ~29 min windows/x86_64 💿exe
✔️ 4c915e3 #2 2024-11-27 09:03:26 ~4 min macos/aarch64 🍎dmg
✔️ 4c915e3 #2 2024-11-27 09:06:18 ~7 min tests/nim 📄log
✔️ 4c915e3 #2 2024-11-27 09:11:07 ~12 min tests/ui 📄log
✔️ 4c915e3 #2 2024-11-27 09:13:14 ~14 min macos/x86_64 🍎dmg
✔️ 4c915e3 #2 2024-11-27 09:14:32 ~16 min linux-nix/x86_64 📦tgz
✔️ 4c915e3 #2 2024-11-27 09:15:54 ~17 min linux/x86_64 📦tgz
✔️ 4c915e3 #2 2024-11-27 09:24:46 ~26 min windows/x86_64 💿exe

@felicio
Copy link

felicio commented Nov 26, 2024

@alexjba what's the first ui in the video you used to test this please?

@alexjba
Copy link
Contributor Author

alexjba commented Nov 26, 2024

@alexjba what's the first ui in the video you used to test this please?

https://metamask.github.io/test-dapp/

Copy link
Member

@caybro caybro left a comment

Choose a reason for hiding this comment

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

LGTM

Just some minor stuff

@@ -220,7 +220,7 @@ SQUtils.QObject {

onConnectDApp: (chains, dAppUrl, dAppName, dAppIcon, key) => {
siwePlugin.connectionRequests.set(key.toString(), {chains, dAppUrl, dAppName, dAppIcon})
root.connectDApp(chains, dAppUrl, dAppName, dAppIcon, key)
root.connectDApp(chains, dAppUrl, dAppName, dAppIcon, Constants.WalletConnect, key)
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
root.connectDApp(chains, dAppUrl, dAppName, dAppIcon, Constants.WalletConnect, key)
root.connectDApp(chains, dAppUrl, dAppName, dAppIcon, Constants.DAppConnectors.WalletConnect, key)

@@ -140,7 +140,7 @@ SQUtils.QObject {
function onSessionProposal(sessionProposal) {
const key = sessionProposal.id
d.activeProposals.set(key.toString(), { context: sessionProposal, promise: bcConnectionPromise })
root.newConnectionProposed(key, [1], sessionProposal.params.proposer.metadata.url, sessionProposal.params.proposer.metadata.name, sessionProposal.params.proposer.metadata.icons[0])
root.newConnectionProposed(key, [1], sessionProposal.params.proposer.metadata.url, sessionProposal.params.proposer.metadata.name, sessionProposal.params.proposer.metadata.icons[0], Constants.StatusConnect)
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
root.newConnectionProposed(key, [1], sessionProposal.params.proposer.metadata.url, sessionProposal.params.proposer.metadata.name, sessionProposal.params.proposer.metadata.icons[0], Constants.StatusConnect)
root.newConnectionProposed(key, [1], sessionProposal.params.proposer.metadata.url, sessionProposal.params.proposer.metadata.name, sessionProposal.params.proposer.metadata.icons[0], Constants.DAppConnectors.StatusConnect)

Adding connector badge to the dapps list and connect modal
Updating the RoundImageWithBadge to support custom badge size and margins
Updating the RoundImageWithBadge to support both SVG and PNG as source
Polish the dapps sign modal badge to match the design
@alexjba alexjba force-pushed the 16815-browser-plugin-connector-add-the-connector-badge-to-dapp-icon branch from dcf84a4 to 4c915e3 Compare November 27, 2024 08:58
@alexjba alexjba merged commit b04a9a4 into master Nov 27, 2024
9 checks passed
@alexjba alexjba deleted the 16815-browser-plugin-connector-add-the-connector-badge-to-dapp-icon branch November 27, 2024 12:19
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.

[Browser plugin connector] Add the connector badge to dapp icon
5 participants