[dApp Notifications] Show successful dApp connection in Activity Center

[ilmotta]

Feature

• As a user
• I want to see a new Activity Center Notification about my successful dApp connection
• So that I can look them up later at a more appropriate time, and have a track record of my successful connections

Figma reference: https://www.figma.com/design/JZqS95JKcpZU13NHbJ9qVT/dApp-Interactions?node-id=47-30832&t=71hDvlz63qdheZ2z-0

Notes

• Also requires changes in status-go.
• As usual with all AC notifications, make sure the they're synchronized correctly across devices, and that the user can delete them and mark them as read/unread. In theory, these basic features will work out of the box, or with minimal changes.

Out of scope

Pressing on the notification to execute its default action will be a separate GH issue.

Resources

• Discord channel Status > wallet > #wallet-connect
• Check out the Figma page dApp Interactions > Notifications with all combinations of notifications and their triggering conditions https://www.figma.com/design/JZqS95JKcpZU13NHbJ9qVT/dApp-Interactions?node-id=402-79057&t=BGzrkR6RbveKRIRj-0
• dApps we can use for testing https://www.notion.so/Testing-Wallet-Connect-interactions-0739f176856848999f0ea1671e5dfbe0?pvs=4

[yqrashawn]

Stuck at the event below after scanning qr code at https://react-app.walletconnect.com/, no on-success or on-fail

(rf/reg-event-fx
 :wallet-connect/pair
 (fn [{:keys [db]} [url]]
   (let [web3-wallet (get db :wallet-connect/web3-wallet)]
     {:fx [[(log/spy :info :effects.wallet-connect/pair)
            {:web3-wallet web3-wallet
             :url         (log/spy :info url)
             :on-fail     #(log/error (log/spy :info "Failed to pair with dApp") {:error %})
             :on-success  #(log/info (log/spy :info "dApp paired successfully"))}]]})))

[yqrashawn]

Network issue solved

[yqrashawn]

Updates:

• able to create the notification in status-go when dapp connected
• able to get and show the notification in activity center

---

Next up:

• Figma uses token context tag for dapp, but dapp log is not always a token logo
• where to get dapp logo, do we have it persisted in mobile db already? How to identify dapp between mobile and go without relying on wallet connect?

---

wallet-connect proposer has dapp icons

    "proposer": {
      "publicKey": "...",
      "metadata": {
        "description": "React App for WalletConnect",
        "url": "https://react-app.walletconnect.com",
        "icons": [
          "https://avatars.githubusercontent.com/u/37784886"
        ],
        "name": "React App"
      }
    }

[clauxx]

where to get dapp logo, do we have it persisted in mobile db already? How to identify dapp between mobile and go without relying on wallet connect?

We are persisting the dapps data (including the icon) when connecting in services/walletconnect/walletconnect.go.

Figma uses token context tag for dapp, but dapp log is not always a token logo

Not sure I follow. Is it that figma designs expect a token type and don't have a dapp type? If so, I guess we would need to add an extra type to the context tag (and update the design system as well).