From 4733d77ded200e2a4d039b7c2e3f26608b2f3fc5 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Fri, 12 Jan 2024 12:56:57 -0800
Subject: [PATCH 01/21] add portable consent

---
 package-lock.json                             | 277 +++++++++++-------
 package.json                                  |   3 +-
 .../ConversationList/ConversationList.tsx     |  12 +-
 .../FullConversation/FullConversation.tsx     |  43 ++-
 .../HeaderDropdown/HeaderDropdown.tsx         | 120 ++------
 .../components/MessageInput/MessageInput.tsx  |  42 +--
 .../MessagePreviewCard/MessagePreviewCard.tsx |  14 +-
 .../ConversationListController.tsx            |  42 ++-
 .../FullConversationController.tsx            |   8 +-
 src/controllers/HeaderDropdownController.tsx  |   1 -
 src/controllers/MessageInputController.tsx    |   1 +
 .../MessagePreviewCardController.tsx          |   3 +
 src/hooks/useStreamAllMessages.tsx            |   2 +
 src/locales/en_US.json                        |  10 +
 src/pages/inbox.tsx                           |  29 +-
 src/store/xmtp.tsx                            |   6 +
 vite.config.ts                                |   3 +
 17 files changed, 377 insertions(+), 239 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a837e22b..ee28d0a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "@xmtp/content-type-remote-attachment": "^1.1.4",
         "@xmtp/content-type-reply": "^1.1.5",
         "@xmtp/experimental-content-type-screen-effect": "^1.0.2",
-        "@xmtp/react-sdk": "^3.0.0",
+        "@xmtp/react-sdk": "^4.0.0",
         "buffer": "^6.0.3",
         "date-fns": "^2.29.3",
         "dexie": "^3.2.4",
@@ -42,6 +42,7 @@
         "react-infinite-scroll-component": "^6.1.0",
         "react-media-recorder-2": "^1.6.23",
         "react-medium-image-zoom": "^5.1.6",
+        "react-modal": "^3.16.1",
         "react-qrcode-logo": "^2.9.0",
         "react-router-dom": "^6.12.0",
         "react-timer-hook": "^3.0.6",
@@ -101,9 +102,9 @@
       }
     },
     "node_modules/@adraffy/ens-normalize": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.9.4.tgz",
-      "integrity": "sha512-UK0bHA7hh9cR39V+4gl2/NnBBjoXIxkuWAPCaY4X7fbH4L/azIi7ilWOCjMUYfpJgraLUAqkRi2BqrjME8Rynw=="
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.10.0.tgz",
+      "integrity": "sha512-nA9XHtlAkYfJxY7bce8DcN7eKxWWCWkU+1GR9d+U6MbNpfwQp8TI7vqOsBsMcHoT4mBu2kypKoSKnghEzOOq5Q=="
     },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
@@ -14899,18 +14900,6 @@
         "@xmtp/xmtp-js": "^11.1.1"
       }
     },
-    "node_modules/@xmtp/content-type-read-receipt": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@xmtp/content-type-read-receipt/-/content-type-read-receipt-1.1.5.tgz",
-      "integrity": "sha512-/CM/JAuEo+lnUQGJFG3UZ+t5rqql8sA/eLzPc0sJJMzGLCCfogd/SngS8rNkz4KI7yI5SXrXaksAsv5/zqXUHA==",
-      "dependencies": {
-        "@xmtp/proto": "^3.29.0",
-        "@xmtp/xmtp-js": "^11.1.2"
-      },
-      "peerDependencies": {
-        "@xmtp/xmtp-js": "^11.1.1"
-      }
-    },
     "node_modules/@xmtp/content-type-remote-attachment": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@xmtp/content-type-remote-attachment/-/content-type-remote-attachment-1.1.4.tgz",
@@ -14959,32 +14948,40 @@
       }
     },
     "node_modules/@xmtp/react-sdk": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@xmtp/react-sdk/-/react-sdk-3.0.0.tgz",
-      "integrity": "sha512-xaMQo5N82mSyC551Ktztp+N8aN/kMdZQ6qu/8BJCCErigWV1XXzOHCZr1tgONQHRFjnasmRdqsaTdiGZNatCbg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@xmtp/react-sdk/-/react-sdk-4.0.0.tgz",
+      "integrity": "sha512-u8aL771ZA6qpyBbLNZ2TP3g0Y+DhRbfdpJykociA28tTdE6hF63ULWHVgEhkZb93AZ8JTsG9c0DRLW6crVUoZQ==",
       "dependencies": {
         "@xmtp/content-type-reaction": "^1.1.3",
-        "@xmtp/content-type-read-receipt": "^1.1.5",
         "@xmtp/content-type-remote-attachment": "^1.1.4",
         "@xmtp/content-type-reply": "^1.1.5",
-        "@xmtp/xmtp-js": "^11.2.0",
+        "@xmtp/xmtp-js": "^11.3.0",
         "async-mutex": "^0.4.0",
-        "date-fns": "^2.30.0",
+        "date-fns": "^3.1.0",
         "dexie": "^3.2.4",
-        "dexie-react-hooks": "^1.1.6",
+        "dexie-react-hooks": "^1.1.7",
         "react": "^18.2.0",
         "uuid": "^9.0.1",
-        "viem": "^1.13.0",
-        "zod": "^3.22.2"
+        "viem": "^1.19.6",
+        "zod": "^3.22.4"
       },
       "engines": {
         "node": ">=18"
       },
       "peerDependencies": {
-        "@xmtp/xmtp-js": "^11.2.0",
+        "@xmtp/xmtp-js": "^11.3.0",
         "react": ">=16.14"
       }
     },
+    "node_modules/@xmtp/react-sdk/node_modules/date-fns": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.2.0.tgz",
+      "integrity": "sha512-E4KWKavANzeuusPi0jUjpuI22SURAznGkx7eZV+4i6x2A+IZxAMcajgkvuDAU1bg40+xuhW1zRdVIIM/4khuIg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/@xmtp/react-sdk/node_modules/uuid": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
@@ -14997,13 +14994,19 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/@xmtp/user-preferences-bindings-wasm": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@xmtp/user-preferences-bindings-wasm/-/user-preferences-bindings-wasm-0.3.4.tgz",
+      "integrity": "sha512-4d0j8QDZT8Z9DXIjxRJh7M1DjLNWcPV6807eeMN79gwF9SWbR1CXGSnBNqSrOgVu9nQSWqtg6qfyrrlQ3yHybA=="
+    },
     "node_modules/@xmtp/xmtp-js": {
-      "version": "11.2.3",
-      "resolved": "https://registry.npmjs.org/@xmtp/xmtp-js/-/xmtp-js-11.2.3.tgz",
-      "integrity": "sha512-uDZcqmOuAtSNVQ4pk7D1GvVPe12Os6oqesyPQQ5vt3tbeteMgK7lqrHZ1PKH4ZVoYuYJm4Rgaz2hKKGM9KsmQw==",
+      "version": "11.3.2",
+      "resolved": "https://registry.npmjs.org/@xmtp/xmtp-js/-/xmtp-js-11.3.2.tgz",
+      "integrity": "sha512-N2f7R6mBEop3ZUiXi1vqrsOz/BZ47kGkhkNHXyV4kyHIMFn/0bNV58CeDgDfYyiDeoZHGeVMsfv6tOcV70LY0g==",
       "dependencies": {
         "@noble/secp256k1": "^1.5.2",
-        "@xmtp/proto": "^3.29.0",
+        "@xmtp/proto": "^3.34.0",
+        "@xmtp/user-preferences-bindings-wasm": "^0.3.4",
         "async-mutex": "^0.4.0",
         "elliptic": "^6.5.4",
         "ethers": "^5.5.3",
@@ -18748,9 +18751,9 @@
       }
     },
     "node_modules/dexie-react-hooks": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/dexie-react-hooks/-/dexie-react-hooks-1.1.6.tgz",
-      "integrity": "sha512-xSblWtmPwhafWNWMECsW7zMMmBu8goH3QqTxEfwBNoNG1mgsM0oFclippev7ss9HhKICqBwTjgqpscci5Ed4mA==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/dexie-react-hooks/-/dexie-react-hooks-1.1.7.tgz",
+      "integrity": "sha512-Lwv5W0Hk+uOW3kGnsU9GZoR1er1B7WQ5DSdonoNG+focTNeJbHW6vi6nBoX534VKI3/uwHebYzSw1fwY6a7mTw==",
       "peerDependencies": {
         "@types/react": ">=16",
         "dexie": "^3.2 || ^4.0.1-alpha",
@@ -20797,6 +20800,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "node_modules/express": {
       "version": "4.18.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
@@ -23571,6 +23579,20 @@
         "ws": "*"
       }
     },
+    "node_modules/isows": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/isows/-/isows-1.0.3.tgz",
+      "integrity": "sha512-2cKei4vlmg2cxEjm3wVSqn8pcoRF/LX/wpifuuNquFO4SQmPwarClT+SUCA2lt+l581tTeZIPIZuIDo2jWN1fg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/wagmi-dev"
+        }
+      ],
+      "peerDependencies": {
+        "ws": "*"
+      }
+    },
     "node_modules/isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -28501,6 +28523,11 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-media-recorder-2": {
       "version": "1.6.23",
       "resolved": "https://registry.npmjs.org/react-media-recorder-2/-/react-media-recorder-2-1.6.23.tgz",
@@ -28525,6 +28552,24 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
     "node_modules/react-native-fetch-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-native-fetch-api/-/react-native-fetch-api-3.0.0.tgz",
@@ -31805,24 +31850,23 @@
       }
     },
     "node_modules/viem": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/viem/-/viem-1.13.2.tgz",
-      "integrity": "sha512-iaiExxe0WIbf4Yvqtk/nDaFbKg6CBtW6xY6bGUNBV8/lx9PhSeFneSK/LogC2NPo0X2LpCLaxx+E6MUqL5JEAg==",
+      "version": "1.21.4",
+      "resolved": "https://registry.npmjs.org/viem/-/viem-1.21.4.tgz",
+      "integrity": "sha512-BNVYdSaUjeS2zKQgPs+49e5JKocfo60Ib2yiXOWBT6LuVxY1I/6fFX3waEtpXvL1Xn4qu+BVitVtMh9lyThyhQ==",
       "funding": [
         {
           "type": "github",
-          "url": "https://github.com/sponsors/wagmi-dev"
+          "url": "https://github.com/sponsors/wevm"
         }
       ],
       "dependencies": {
-        "@adraffy/ens-normalize": "1.9.4",
+        "@adraffy/ens-normalize": "1.10.0",
         "@noble/curves": "1.2.0",
         "@noble/hashes": "1.3.2",
         "@scure/bip32": "1.3.2",
         "@scure/bip39": "1.2.1",
-        "@types/ws": "^8.5.5",
         "abitype": "0.9.8",
-        "isomorphic-ws": "5.0.0",
+        "isows": "1.0.3",
         "ws": "8.13.0"
       },
       "peerDependencies": {
@@ -31834,14 +31878,6 @@
         }
       }
     },
-    "node_modules/viem/node_modules/@types/ws": {
-      "version": "8.5.6",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.6.tgz",
-      "integrity": "sha512-8B5EO9jLVCy+B58PLHvLDuOD8DRVMgQzq8d55SjLCOn9kqGyqOvy27exVaTio1q1nX5zLu8/6N0n2ThSxOM6tg==",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/viem/node_modules/abitype": {
       "version": "0.9.8",
       "resolved": "https://registry.npmjs.org/abitype/-/abitype-0.9.8.tgz",
@@ -31865,14 +31901,6 @@
         }
       }
     },
-    "node_modules/viem/node_modules/isomorphic-ws": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz",
-      "integrity": "sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==",
-      "peerDependencies": {
-        "ws": "*"
-      }
-    },
     "node_modules/vite": {
       "version": "4.3.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz",
@@ -32285,6 +32313,14 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -33135,9 +33171,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.22.2",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.2.tgz",
-      "integrity": "sha512-wvWkphh5WQsJbVk1tbx1l1Ly4yg+XecD+Mq280uBGt9wa5BKSWf4Mhp6GmrkPixhMxmabYY7RbzlwVP32pbGCg==",
+      "version": "3.22.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
+      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -33168,9 +33204,9 @@
   },
   "dependencies": {
     "@adraffy/ens-normalize": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.9.4.tgz",
-      "integrity": "sha512-UK0bHA7hh9cR39V+4gl2/NnBBjoXIxkuWAPCaY4X7fbH4L/azIi7ilWOCjMUYfpJgraLUAqkRi2BqrjME8Rynw=="
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.10.0.tgz",
+      "integrity": "sha512-nA9XHtlAkYfJxY7bce8DcN7eKxWWCWkU+1GR9d+U6MbNpfwQp8TI7vqOsBsMcHoT4mBu2kypKoSKnghEzOOq5Q=="
     },
     "@alloc/quick-lru": {
       "version": "5.2.0",
@@ -44372,15 +44408,6 @@
         "@xmtp/xmtp-js": "^11.1.2"
       }
     },
-    "@xmtp/content-type-read-receipt": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@xmtp/content-type-read-receipt/-/content-type-read-receipt-1.1.5.tgz",
-      "integrity": "sha512-/CM/JAuEo+lnUQGJFG3UZ+t5rqql8sA/eLzPc0sJJMzGLCCfogd/SngS8rNkz4KI7yI5SXrXaksAsv5/zqXUHA==",
-      "requires": {
-        "@xmtp/proto": "^3.29.0",
-        "@xmtp/xmtp-js": "^11.1.2"
-      }
-    },
     "@xmtp/content-type-remote-attachment": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@xmtp/content-type-remote-attachment/-/content-type-remote-attachment-1.1.4.tgz",
@@ -44420,25 +44447,29 @@
       }
     },
     "@xmtp/react-sdk": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@xmtp/react-sdk/-/react-sdk-3.0.0.tgz",
-      "integrity": "sha512-xaMQo5N82mSyC551Ktztp+N8aN/kMdZQ6qu/8BJCCErigWV1XXzOHCZr1tgONQHRFjnasmRdqsaTdiGZNatCbg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@xmtp/react-sdk/-/react-sdk-4.0.0.tgz",
+      "integrity": "sha512-u8aL771ZA6qpyBbLNZ2TP3g0Y+DhRbfdpJykociA28tTdE6hF63ULWHVgEhkZb93AZ8JTsG9c0DRLW6crVUoZQ==",
       "requires": {
         "@xmtp/content-type-reaction": "^1.1.3",
-        "@xmtp/content-type-read-receipt": "^1.1.5",
         "@xmtp/content-type-remote-attachment": "^1.1.4",
         "@xmtp/content-type-reply": "^1.1.5",
-        "@xmtp/xmtp-js": "^11.2.0",
+        "@xmtp/xmtp-js": "^11.3.0",
         "async-mutex": "^0.4.0",
-        "date-fns": "^2.30.0",
+        "date-fns": "^3.1.0",
         "dexie": "^3.2.4",
-        "dexie-react-hooks": "^1.1.6",
+        "dexie-react-hooks": "^1.1.7",
         "react": "^18.2.0",
         "uuid": "^9.0.1",
-        "viem": "^1.13.0",
-        "zod": "^3.22.2"
+        "viem": "^1.19.6",
+        "zod": "^3.22.4"
       },
       "dependencies": {
+        "date-fns": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.2.0.tgz",
+          "integrity": "sha512-E4KWKavANzeuusPi0jUjpuI22SURAznGkx7eZV+4i6x2A+IZxAMcajgkvuDAU1bg40+xuhW1zRdVIIM/4khuIg=="
+        },
         "uuid": {
           "version": "9.0.1",
           "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
@@ -44446,13 +44477,19 @@
         }
       }
     },
+    "@xmtp/user-preferences-bindings-wasm": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@xmtp/user-preferences-bindings-wasm/-/user-preferences-bindings-wasm-0.3.4.tgz",
+      "integrity": "sha512-4d0j8QDZT8Z9DXIjxRJh7M1DjLNWcPV6807eeMN79gwF9SWbR1CXGSnBNqSrOgVu9nQSWqtg6qfyrrlQ3yHybA=="
+    },
     "@xmtp/xmtp-js": {
-      "version": "11.2.3",
-      "resolved": "https://registry.npmjs.org/@xmtp/xmtp-js/-/xmtp-js-11.2.3.tgz",
-      "integrity": "sha512-uDZcqmOuAtSNVQ4pk7D1GvVPe12Os6oqesyPQQ5vt3tbeteMgK7lqrHZ1PKH4ZVoYuYJm4Rgaz2hKKGM9KsmQw==",
+      "version": "11.3.2",
+      "resolved": "https://registry.npmjs.org/@xmtp/xmtp-js/-/xmtp-js-11.3.2.tgz",
+      "integrity": "sha512-N2f7R6mBEop3ZUiXi1vqrsOz/BZ47kGkhkNHXyV4kyHIMFn/0bNV58CeDgDfYyiDeoZHGeVMsfv6tOcV70LY0g==",
       "requires": {
         "@noble/secp256k1": "^1.5.2",
-        "@xmtp/proto": "^3.29.0",
+        "@xmtp/proto": "^3.34.0",
+        "@xmtp/user-preferences-bindings-wasm": "^0.3.4",
         "async-mutex": "^0.4.0",
         "elliptic": "^6.5.4",
         "ethers": "^5.5.3",
@@ -47337,9 +47374,9 @@
       "integrity": "sha512-VKoTQRSv7+RnffpOJ3Dh6ozknBqzWw/F3iqMdsZg958R0AS8AnY9x9d1lbwENr0gzeGJHXKcGhAMRaqys6SxqA=="
     },
     "dexie-react-hooks": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/dexie-react-hooks/-/dexie-react-hooks-1.1.6.tgz",
-      "integrity": "sha512-xSblWtmPwhafWNWMECsW7zMMmBu8goH3QqTxEfwBNoNG1mgsM0oFclippev7ss9HhKICqBwTjgqpscci5Ed4mA==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/dexie-react-hooks/-/dexie-react-hooks-1.1.7.tgz",
+      "integrity": "sha512-Lwv5W0Hk+uOW3kGnsU9GZoR1er1B7WQ5DSdonoNG+focTNeJbHW6vi6nBoX534VKI3/uwHebYzSw1fwY6a7mTw==",
       "requires": {}
     },
     "didyoumean": {
@@ -48964,6 +49001,11 @@
         "pify": "^2.2.0"
       }
     },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
     "express": {
       "version": "4.18.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
@@ -51072,6 +51114,12 @@
       "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==",
       "requires": {}
     },
+    "isows": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/isows/-/isows-1.0.3.tgz",
+      "integrity": "sha512-2cKei4vlmg2cxEjm3wVSqn8pcoRF/LX/wpifuuNquFO4SQmPwarClT+SUCA2lt+l581tTeZIPIZuIDo2jWN1fg==",
+      "requires": {}
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -54937,6 +54985,11 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-media-recorder-2": {
       "version": "1.6.23",
       "resolved": "https://registry.npmjs.org/react-media-recorder-2/-/react-media-recorder-2-1.6.23.tgz",
@@ -54952,6 +55005,17 @@
       "integrity": "sha512-0QolPce1vNJsF5HKrGkU1UT6kLNvY9EOnLBqz++LlVnBQduaHLkJlY73ayj3SxY09XWRrnxKDMTHPDkrQYdREw==",
       "requires": {}
     },
+    "react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "requires": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      }
+    },
     "react-native-fetch-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-native-fetch-api/-/react-native-fetch-api-3.0.0.tgz",
@@ -57471,40 +57535,25 @@
       }
     },
     "viem": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/viem/-/viem-1.13.2.tgz",
-      "integrity": "sha512-iaiExxe0WIbf4Yvqtk/nDaFbKg6CBtW6xY6bGUNBV8/lx9PhSeFneSK/LogC2NPo0X2LpCLaxx+E6MUqL5JEAg==",
+      "version": "1.21.4",
+      "resolved": "https://registry.npmjs.org/viem/-/viem-1.21.4.tgz",
+      "integrity": "sha512-BNVYdSaUjeS2zKQgPs+49e5JKocfo60Ib2yiXOWBT6LuVxY1I/6fFX3waEtpXvL1Xn4qu+BVitVtMh9lyThyhQ==",
       "requires": {
-        "@adraffy/ens-normalize": "1.9.4",
+        "@adraffy/ens-normalize": "1.10.0",
         "@noble/curves": "1.2.0",
         "@noble/hashes": "1.3.2",
         "@scure/bip32": "1.3.2",
         "@scure/bip39": "1.2.1",
-        "@types/ws": "^8.5.5",
         "abitype": "0.9.8",
-        "isomorphic-ws": "5.0.0",
+        "isows": "1.0.3",
         "ws": "8.13.0"
       },
       "dependencies": {
-        "@types/ws": {
-          "version": "8.5.6",
-          "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.6.tgz",
-          "integrity": "sha512-8B5EO9jLVCy+B58PLHvLDuOD8DRVMgQzq8d55SjLCOn9kqGyqOvy27exVaTio1q1nX5zLu8/6N0n2ThSxOM6tg==",
-          "requires": {
-            "@types/node": "*"
-          }
-        },
         "abitype": {
           "version": "0.9.8",
           "resolved": "https://registry.npmjs.org/abitype/-/abitype-0.9.8.tgz",
           "integrity": "sha512-puLifILdm+8sjyss4S+fsUN09obiT1g2YW6CtcQF+QDzxR0euzgEB29MZujC6zMk2a6SVmtttq1fc6+YFA7WYQ==",
           "requires": {}
-        },
-        "isomorphic-ws": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-5.0.0.tgz",
-          "integrity": "sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==",
-          "requires": {}
         }
       }
     },
@@ -57772,6 +57821,14 @@
         }
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -58463,9 +58520,9 @@
       "dev": true
     },
     "zod": {
-      "version": "3.22.2",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.2.tgz",
-      "integrity": "sha512-wvWkphh5WQsJbVk1tbx1l1Ly4yg+XecD+Mq280uBGt9wa5BKSWf4Mhp6GmrkPixhMxmabYY7RbzlwVP32pbGCg=="
+      "version": "3.22.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
+      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg=="
     },
     "zustand": {
       "version": "4.3.8",
diff --git a/package.json b/package.json
index 753be559..4d2f75d4 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "@xmtp/content-type-remote-attachment": "^1.1.4",
     "@xmtp/content-type-reply": "^1.1.5",
     "@xmtp/experimental-content-type-screen-effect": "^1.0.2",
-    "@xmtp/react-sdk": "^3.0.0",
+    "@xmtp/react-sdk": "^4.0.0",
     "buffer": "^6.0.3",
     "date-fns": "^2.29.3",
     "dexie": "^3.2.4",
@@ -63,6 +63,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-media-recorder-2": "^1.6.23",
     "react-medium-image-zoom": "^5.1.6",
+    "react-modal": "^3.16.1",
     "react-qrcode-logo": "^2.9.0",
     "react-router-dom": "^6.12.0",
     "react-timer-hook": "^3.0.6",
diff --git a/src/component-library/components/ConversationList/ConversationList.tsx b/src/component-library/components/ConversationList/ConversationList.tsx
index 31e42992..a779bf71 100644
--- a/src/component-library/components/ConversationList/ConversationList.tsx
+++ b/src/component-library/components/ConversationList/ConversationList.tsx
@@ -2,6 +2,7 @@ import type React from "react";
 import { Virtuoso } from "react-virtuoso";
 import { EmptyMessage } from "../EmptyMessage/EmptyMessage";
 import { MessagePreviewCard } from "../MessagePreviewCard/MessagePreviewCard";
+import type { ActiveTab } from "../../../store/xmtp";
 
 interface ConversationListProps {
   /**
@@ -20,6 +21,10 @@ interface ConversationListProps {
    * Has a value been entered for the recipient?
    */
   hasRecipientEnteredValue?: boolean;
+  /**
+   * Which tab are we on?
+   */
+  activeTab: ActiveTab;
 }
 
 export const ConversationList = ({
@@ -27,16 +32,19 @@ export const ConversationList = ({
   isLoading,
   setStartedFirstMessage,
   hasRecipientEnteredValue,
+  activeTab,
 }: ConversationListProps) =>
   !messages?.length && isLoading ? (
     <div className="w-full overflow-hidden h-full flex flex-col justify-start sm:w-full bg-gray-100">
       {Array.from({ length: 12 }).map((_, idx) => (
-        <MessagePreviewCard key={idx} isLoading />
+        <MessagePreviewCard key={idx} isLoading activeTab={activeTab} />
       ))}
     </div>
   ) : !messages.length && !isLoading && !hasRecipientEnteredValue ? (
     <div className="w-full overflow-hidden sm:w-full sm:p-4 md:p-8 border border-gray-100 h-full">
-      <EmptyMessage setStartedFirstMessage={setStartedFirstMessage} />
+      {activeTab === "messages" ? (
+        <EmptyMessage setStartedFirstMessage={setStartedFirstMessage} />
+      ) : null}
     </div>
   ) : (
     <Virtuoso
diff --git a/src/component-library/components/FullConversation/FullConversation.tsx b/src/component-library/components/FullConversation/FullConversation.tsx
index f0c9f746..8541dc01 100644
--- a/src/component-library/components/FullConversation/FullConversation.tsx
+++ b/src/component-library/components/FullConversation/FullConversation.tsx
@@ -2,10 +2,13 @@ import { useTranslation } from "react-i18next";
 import type { VirtuosoHandle } from "react-virtuoso";
 import { Virtuoso } from "react-virtuoso";
 import { useMemo, useRef } from "react";
+import { useConsent } from "@xmtp/react-sdk";
+import { useXmtpStore } from "../../../store/xmtp";
 
 interface FullConversationProps {
   messages?: Array<JSX.Element | null>;
   isLoading?: boolean;
+  address: string;
 }
 
 const LoadingMessage: React.FC = () => {
@@ -28,9 +31,46 @@ const BeginningMessage: React.FC = () => {
   );
 };
 
+const AcceptOrDeny = ({ address }: { address: string }) => {
+  const { t } = useTranslation();
+  const { allow, deny } = useConsent();
+  const setActiveTab = useXmtpStore((s) => s.setActiveTab);
+  const activeTab = useXmtpStore((s) => s.activeTab);
+
+  return activeTab === "requests" ? (
+    <div
+      className="bg-gray-300 p-4 w-full flex flex-col justify-center items-center text-gray-500"
+      data-testid="accept_or_deny_container">
+      <h3 className="font-bold">{t("consent.new_message_request")}</h3>
+      <p>{t("consent.new_message_request_description")}</p>
+      <div className="flex w-full justify-between p-3 gap-2">
+        <button
+          type="button"
+          className="text-blue-600 flex w-full justify-center border border-2 border-blue-600 rounded-md p-2 hover:bg-blue-600 hover:text-white"
+          onClick={() => {
+            void allow([address]);
+            setActiveTab("messages");
+          }}>
+          {t("consent.accept")}
+        </button>
+        <button
+          type="button"
+          className="text-indigo-600 flex w-full justify-center border border-2 border-indigo-600 rounded-md p-2 hover:bg-indigo-600 hover:text-white"
+          onClick={() => {
+            void deny([address]);
+            setActiveTab("blocked");
+          }}>
+          {t("consent.block")}
+        </button>
+      </div>
+    </div>
+  ) : null;
+};
+
 export const FullConversation = ({
   messages = [],
   isLoading = false,
+  address,
 }: FullConversationProps) => {
   const virtuosoRef = useRef<VirtuosoHandle>(null);
   const filteredMessages = useMemo(() => {
@@ -42,8 +82,9 @@ export const FullConversation = ({
         <BeginningMessage key="beginning" />
       ),
       ...filtered,
+      <AcceptOrDeny key={address} address={address} />,
     ];
-  }, [isLoading, messages]);
+  }, [isLoading, messages, address]);
 
   return (
     <Virtuoso
diff --git a/src/component-library/components/HeaderDropdown/HeaderDropdown.tsx b/src/component-library/components/HeaderDropdown/HeaderDropdown.tsx
index ff1983c4..b6922fc6 100644
--- a/src/component-library/components/HeaderDropdown/HeaderDropdown.tsx
+++ b/src/component-library/components/HeaderDropdown/HeaderDropdown.tsx
@@ -1,35 +1,15 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import { Dialog, Transition } from "@headlessui/react";
-import { ChevronDownIcon, CogIcon } from "@heroicons/react/outline";
-import { CheckCircleIcon, PlusIcon } from "@heroicons/react/solid";
-import { Fragment, useEffect, useState } from "react";
+import { PlusIcon } from "@heroicons/react/solid";
 import { useTranslation } from "react-i18next";
-import i18next from "i18next";
 import { classNames } from "../../../helpers";
 import { IconButton } from "../IconButton/IconButton";
+import { useXmtpStore } from "../../../store/xmtp";
 
+// To-do: rename this throughout the app, as this is no longer a dropdown
 interface HeaderDropdownProps {
-  /**
-   * What options does the user have to change?
-   */
-  dropdownOptions?: Array<string>;
-  /**
-   * What is currently selected?
-   */
-  defaultSelected?: string;
-  /**
-   * What happens on change?
-   */
-  onChange?: () => void;
   /**
    * On new message button click?
    */
   onClick?: () => void;
-  /**
-   * Is this dropdown disabled?
-   */
-  disabled?: boolean;
   /**
    * What is the recipient input?
    */
@@ -41,25 +21,22 @@ interface HeaderDropdownProps {
 }
 
 export const HeaderDropdown = ({
-  dropdownOptions,
-  defaultSelected,
-  onChange,
   onClick,
-  disabled,
   recipientInput,
   isMobileView,
 }: HeaderDropdownProps) => {
   const { t } = useTranslation();
 
-  const [isOpen, setIsOpen] = useState(false);
-  const [currentlySelected, setCurrentlySelected] = useState(
-    defaultSelected || t("messages.filter_none"),
-  );
+  const activeTab = useXmtpStore((s) => s.activeTab);
+  const setActiveTab = useXmtpStore((s) => s.setActiveTab);
+  const resetRecipient = useXmtpStore((s) => s.resetRecipient);
+  const setConversationTopic = useXmtpStore((s) => s.setConversationTopic);
 
-  useEffect(() => {
-    setCurrentlySelected(defaultSelected || t("messages.filter_none"));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [i18next.language]);
+  const tabs = [
+    { name: "messages", testId: "messages-button" },
+    { name: "requests", testId: "requests-button" },
+    { name: "blocked", testId: "blocked-button" },
+  ];
 
   return (
     <div
@@ -67,10 +44,23 @@ export const HeaderDropdown = ({
       data-testid="conversation-list-header"
       className="border-l border-r border-b border-gray-200 bg-gray-100 h-16 p-4 pt-5">
       <div className="flex justify-between items-center">
-        <span className="flex" onClick={() => setIsOpen(!isOpen)}>
-          <h1 className="font-bold text-lg mr-2">{currentlySelected}</h1>
-          {!disabled && <ChevronDownIcon width="24" />}
-        </span>
+        {tabs.map(({ name, testId }) => (
+          <button
+            key={name}
+            data-testid={testId}
+            type="button"
+            className={classNames(
+              "text-lg mr-2 cursor-pointer",
+              activeTab === name ? "font-bold" : "",
+            )}
+            onClick={() => {
+              setActiveTab(name);
+              resetRecipient();
+              setConversationTopic();
+            }}>
+            {t(`consent.${name}`)}
+          </button>
+        ))}
         {(recipientInput || isMobileView) && (
           <IconButton
             onClick={() => onClick?.()}
@@ -80,58 +70,6 @@ export const HeaderDropdown = ({
           />
         )}
       </div>
-
-      {!disabled && isOpen && (
-        <Transition.Root show={isOpen} as={Fragment}>
-          <Dialog
-            as="div"
-            className="overflow-y-auto fixed inset-0 z-10"
-            onClose={() => {}}>
-            <div className="bg-white w-fit rounded-lg absolute top-14 left-16">
-              <div
-                id="headerModalId"
-                className="p-4 border border-gray-100 rounded-lg max-w-fit">
-                {(
-                  dropdownOptions || [
-                    t("messages.filter_none"),
-                    t("messages.filter_requests"),
-                  ]
-                ).map((item) => (
-                  <div key={item} className="flex w-full justify-between">
-                    <div className="flex">
-                      <CogIcon width={24} className="text-gray-300 mr-4" />
-                      <button
-                        type="button"
-                        onClick={() => {
-                          onChange?.();
-                          setIsOpen(false);
-                          // setCurrentlySelected?.();
-                        }}
-                        className={classNames(
-                          "cursor-pointer",
-                          "my-1",
-                          "outline-none",
-                          item === currentlySelected ? "font-bold my-1" : "",
-                        )}>
-                        {item}
-                      </button>
-                    </div>
-                    <div className="flex items-center">
-                      {item === currentlySelected && (
-                        <CheckCircleIcon
-                          fill="limegreen"
-                          width="24"
-                          className="ml-4"
-                        />
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </Dialog>
-        </Transition.Root>
-      )}
     </div>
   );
 };
diff --git a/src/component-library/components/MessageInput/MessageInput.tsx b/src/component-library/components/MessageInput/MessageInput.tsx
index 50667499..d6ae5e8a 100644
--- a/src/component-library/components/MessageInput/MessageInput.tsx
+++ b/src/component-library/components/MessageInput/MessageInput.tsx
@@ -300,26 +300,28 @@ export const MessageInput = ({
           {attachmentError ? (
             <p className="text-red-600 w-full m-1 ml-4">{attachmentError}</p>
           ) : (
-            <textarea
-              id="chat"
-              data-testid="message-input"
-              onChange={onChange}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && !e.shiftKey) {
-                  e.preventDefault();
-                  void send();
-                }
-              }}
-              ref={textAreaRef}
-              rows={1}
-              className={classNames(
-                textAreaStyles,
-                "border-b-8 border-gray-50 m-0 bg-transparent",
-                recordingValue && "text-red-500",
-              )}
-              placeholder={t("messages.message_field_prompt") || ""}
-              value={recordingValue || value}
-            />
+            <div className="flex flex-row justify-between items-center">
+              <textarea
+                id="chat"
+                data-testid="message-input"
+                onChange={onChange}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    void send();
+                  }
+                }}
+                ref={textAreaRef}
+                rows={1}
+                className={classNames(
+                  textAreaStyles,
+                  "border-b-8 border-gray-50 m-0 bg-transparent",
+                  recordingValue && "text-red-500",
+                )}
+                placeholder={t("messages.message_field_prompt") || ""}
+                value={recordingValue || value}
+              />
+            </div>
           )}
         </div>
         {attachmentPreview && (
diff --git a/src/component-library/components/MessagePreviewCard/MessagePreviewCard.tsx b/src/component-library/components/MessagePreviewCard/MessagePreviewCard.tsx
index 09d49eea..afad3caf 100644
--- a/src/component-library/components/MessagePreviewCard/MessagePreviewCard.tsx
+++ b/src/component-library/components/MessagePreviewCard/MessagePreviewCard.tsx
@@ -48,6 +48,7 @@ interface MessagePreviewCardProps {
    */
   pinned?: boolean;
   // To-do: Add error views once we have the designs
+  activeTab: string;
 }
 
 export const MessagePreviewCard = ({
@@ -61,6 +62,7 @@ export const MessagePreviewCard = ({
   isSelected,
   conversationDomain,
   pinned,
+  activeTab,
 }: MessagePreviewCardProps) => {
   const { t } = useTranslation();
 
@@ -104,7 +106,9 @@ export const MessagePreviewCard = ({
           <span
             className="text-md text-gray-600 line-clamp-1 w-full break-all"
             data-testid="message-preview-text">
-            {text ?? t("messages.convos_empty_text_placeholder")}
+            {activeTab !== "blocked"
+              ? text
+              : t("messages.convos_empty_text_placeholder")}
           </span>
         )}
       </div>
@@ -121,7 +125,13 @@ export const MessagePreviewCard = ({
             "h-full",
             "flex flex-col items-end justify-between",
           )}>
-          {datetime && t("{{datetime, ago}}", { datetime })}
+          {activeTab === "blocked" ? (
+            <button type="button" className="text-indigo-600 font-bold text-md">
+              {t("consent.unblock")}
+            </button>
+          ) : (
+            datetime && t("{{datetime, ago}}", { datetime })
+          )}
           {pinned && (
             <div>
               <StarIcon className="text-indigo-600 mt-2" width={16} />
diff --git a/src/controllers/ConversationListController.tsx b/src/controllers/ConversationListController.tsx
index e40d0f3a..e203952c 100644
--- a/src/controllers/ConversationListController.tsx
+++ b/src/controllers/ConversationListController.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from "react";
-import { useDb } from "@xmtp/react-sdk";
+import { useConsent, useDb } from "@xmtp/react-sdk";
 import { useXmtpStore } from "../store/xmtp";
 import useListConversations from "../hooks/useListConversations";
 import { ConversationList } from "../component-library/components/ConversationList/ConversationList";
@@ -11,6 +11,18 @@ type ConversationListControllerProps = {
   setStartedFirstMessage: (startedFirstMessage: boolean) => void;
 };
 
+type ConsentProps = {
+  tab: "denied" | "allowed";
+};
+
+type NodeWithConsent = React.ReactElement<ConsentProps>;
+
+type ConsentLists = {
+  blocked: NodeWithConsent[];
+  requested: NodeWithConsent[];
+  allowed: NodeWithConsent[];
+};
+
 export const ConversationListController = ({
   setStartedFirstMessage,
 }: ConversationListControllerProps) => {
@@ -18,6 +30,8 @@ export const ConversationListController = ({
   const { db } = useDb();
   useStreamAllMessages();
   const recipientInput = useXmtpStore((s) => s.recipientInput);
+  const activeTab = useXmtpStore((s) => s.activeTab);
+  const { isAllowed, isDenied } = useConsent();
 
   // when the conversations are loaded, update their identities
   useEffect(() => {
@@ -40,12 +54,36 @@ export const ConversationListController = ({
     return convos;
   }, [conversations]);
 
+  const { blocked, requested, allowed } =
+    filteredConversations.reduce<ConsentLists>(
+      (acc, item: NodeWithConsent) => {
+        if (item.props.tab === "denied") {
+          acc.blocked.push(item);
+        } else if (item.props.tab === "allowed") {
+          acc.allowed.push(item);
+        } else {
+          acc.requested.push(item);
+        }
+        return acc;
+      },
+      { blocked: [], requested: [], allowed: [] },
+    );
+
+  const messagesToPass = !isLoading
+    ? activeTab === "messages"
+      ? allowed
+      : activeTab === "blocked"
+      ? blocked
+      : requested
+    : [];
+
   return (
     <ConversationList
       hasRecipientEnteredValue={!!recipientInput}
       setStartedFirstMessage={() => setStartedFirstMessage(true)}
       isLoading={isLoading}
-      messages={!isLoading ? filteredConversations : []}
+      messages={messagesToPass}
+      activeTab={activeTab}
     />
   );
 };
diff --git a/src/controllers/FullConversationController.tsx b/src/controllers/FullConversationController.tsx
index 626145c4..1380fef6 100644
--- a/src/controllers/FullConversationController.tsx
+++ b/src/controllers/FullConversationController.tsx
@@ -26,6 +26,7 @@ type FullConversationControllerProps = {
 export const FullConversationController: React.FC<
   FullConversationControllerProps
 > = ({ conversation }) => {
+  const activeTab = useXmtpStore((s) => s.activeTab);
   const lastMessageDateRef = useRef<Date>();
   const renderedDatesRef = useRef<Date[]>([]);
   const [effect, setEffect] = useState<EffectType | undefined>(undefined);
@@ -112,7 +113,12 @@ export const FullConversationController: React.FC<
       ) : effect === "RAIN" ? (
         <RainEffect messageId={messageId} key={messageId} />
       ) : null}
-      <FullConversation isLoading={isLoading} messages={messagesWithDates} />
+      <FullConversation
+        isLoading={isLoading}
+        messages={messagesWithDates}
+        activeTab={activeTab}
+        address={conversation.peerAddress}
+      />
     </div>
   );
 };
diff --git a/src/controllers/HeaderDropdownController.tsx b/src/controllers/HeaderDropdownController.tsx
index 305e34af..9dc79911 100644
--- a/src/controllers/HeaderDropdownController.tsx
+++ b/src/controllers/HeaderDropdownController.tsx
@@ -18,7 +18,6 @@ export const HeaderDropdownController = () => {
         setConversationTopic();
         setStartedFirstMessage(true);
       }}
-      disabled
       isMobileView={width <= TAILWIND_MD_BREAKPOINT}
     />
   );
diff --git a/src/controllers/MessageInputController.tsx b/src/controllers/MessageInputController.tsx
index 11729372..2ebba6ee 100644
--- a/src/controllers/MessageInputController.tsx
+++ b/src/controllers/MessageInputController.tsx
@@ -22,6 +22,7 @@ export const MessageInputController = ({
 }: MessageInputControllerProps) => {
   // XMTP Hooks
   const conversation = useSelectedConversation();
+
   const recipientOnNetwork = useXmtpStore((s) => s.recipientOnNetwork);
   const recipientAddress = useXmtpStore((s) => s.recipientAddress);
   const activeMessage = useXmtpStore((s) => s.activeMessage);
diff --git a/src/controllers/MessagePreviewCardController.tsx b/src/controllers/MessagePreviewCardController.tsx
index 60b24c80..4b35ec02 100644
--- a/src/controllers/MessagePreviewCardController.tsx
+++ b/src/controllers/MessagePreviewCardController.tsx
@@ -35,6 +35,8 @@ export const MessagePreviewCardController = ({
   const lastMessage = useLastMessage(convo.topic);
   // XMTP State
   const recipientAddress = useXmtpStore((s) => s.recipientAddress);
+  const activeTab = useXmtpStore((s) => s.activeTab);
+
   const setRecipientInput = useXmtpStore((s) => s.setRecipientInput);
   const setRecipientAddress = useXmtpStore((s) => s.setRecipientAddress);
   const setRecipientName = useXmtpStore((s) => s.setRecipientName);
@@ -149,6 +151,7 @@ export const MessagePreviewCardController = ({
       avatarUrl={getCachedPeerAddressAvatar(convo) || ""}
       conversationDomain={shortAddress(conversationDomain)}
       address={convo?.peerAddress}
+      activeTab={activeTab}
     />
   );
 };
diff --git a/src/hooks/useStreamAllMessages.tsx b/src/hooks/useStreamAllMessages.tsx
index e8ada4de..37865e52 100644
--- a/src/hooks/useStreamAllMessages.tsx
+++ b/src/hooks/useStreamAllMessages.tsx
@@ -1,6 +1,7 @@
 import {
   useStreamAllMessages as _useStreamAllMessages,
   useConversation,
+  useStreamConsentList,
 } from "@xmtp/react-sdk";
 import type { DecodedMessage } from "@xmtp/react-sdk";
 import { useCallback, useRef } from "react";
@@ -45,6 +46,7 @@ const useStreamAllMessages = () => {
   );
 
   void _useStreamAllMessages(onMessage);
+  void useStreamConsentList();
 };
 
 export default useStreamAllMessages;
diff --git a/src/locales/en_US.json b/src/locales/en_US.json
index 9ba06c02..c781f874 100644
--- a/src/locales/en_US.json
+++ b/src/locales/en_US.json
@@ -84,6 +84,16 @@
     "share_qr_code": "Share QR Code",
     "report_bug": "Report a bug"
   },
+  "consent": {
+    "accept": "Accept",
+    "block": "Block",
+    "unblock": "Unblock",
+    "messages": "Messages",
+    "requests": "Requests",
+    "blocked": "Blocked",
+    "new_message_request": "New message request",
+    "new_message_request_description": "You have never interacted with this wallet address before. What would you like to do?"
+  },
   "aria_labels": {
     "address_input": "Address input",
     "filepicker": "File picker",
diff --git a/src/pages/inbox.tsx b/src/pages/inbox.tsx
index 30a89b20..67aea152 100644
--- a/src/pages/inbox.tsx
+++ b/src/pages/inbox.tsx
@@ -1,6 +1,11 @@
 import type React from "react";
 import { useEffect, useState } from "react";
-import { useClient, useConversations } from "@xmtp/react-sdk";
+import {
+  useConsent,
+  useClient,
+  useConversations,
+  useStreamConversations,
+} from "@xmtp/react-sdk";
 import { useDisconnect, useWalletClient } from "wagmi";
 import type { Attachment } from "@xmtp/content-type-remote-attachment";
 import { useNavigate } from "react-router-dom";
@@ -29,14 +34,20 @@ const Inbox: React.FC<{ children?: React.ReactNode }> = () => {
   const { conversations } = useConversations();
   const selectedConversation = useSelectedConversation();
   const { data: walletClient } = useWalletClient();
+  useStreamConversations();
+
+  const { loadConsentList } = useConsent();
 
   useEffect(() => {
     if (!client) {
       navigate("/");
     }
+    void loadConsentList();
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [client]);
 
+  const activeTab = useXmtpStore((s) => s.activeTab);
   const recipientAddress = useXmtpStore((s) => s.recipientAddress);
   const setActiveMessage = useXmtpStore((s) => s.setActiveMessage);
 
@@ -175,13 +186,15 @@ const Inbox: React.FC<{ children?: React.ReactNode }> = () => {
                   )}
 
                   {/* Drag event handling needing for content attachments */}
-                  <MessageInputController
-                    attachment={attachment}
-                    setAttachment={setAttachment}
-                    attachmentPreview={attachmentPreview}
-                    setAttachmentPreview={setAttachmentPreview}
-                    setIsDragActive={setIsDragActive}
-                  />
+                  {activeTab === "messages" ? (
+                    <MessageInputController
+                      attachment={attachment}
+                      setAttachment={setAttachment}
+                      attachmentPreview={attachmentPreview}
+                      setAttachmentPreview={setAttachmentPreview}
+                      setIsDragActive={setIsDragActive}
+                    />
+                  ) : null}
                 </div>
               </div>
             )}
diff --git a/src/store/xmtp.tsx b/src/store/xmtp.tsx
index 0d8ff8f7..cf9f8bcb 100644
--- a/src/store/xmtp.tsx
+++ b/src/store/xmtp.tsx
@@ -4,6 +4,8 @@ import type { ETHAddress } from "../helpers";
 
 export type RecipientState = "invalid" | "loading" | "error" | "valid";
 
+export type ActiveTab = "messages" | "requests" | "blocked";
+
 export type RecipientAddress = ETHAddress | null;
 
 interface XmtpState {
@@ -35,6 +37,8 @@ interface XmtpState {
   setAttachmentError: (attachmentError: string) => void;
   activeMessage?: CachedMessageWithId;
   setActiveMessage: (message?: CachedMessageWithId) => void;
+  activeTab: ActiveTab;
+  setActiveTab: (activeTab: ActiveTab) => void;
 }
 
 export const useXmtpStore = create<XmtpState>((set) => ({
@@ -87,4 +91,6 @@ export const useXmtpStore = create<XmtpState>((set) => ({
   setAttachmentError: (attachmentError) => set(() => ({ attachmentError })),
   activeMessage: undefined,
   setActiveMessage: (activeMessage) => set(() => ({ activeMessage })),
+  activeTab: "messages",
+  setActiveTab: (activeTab) => set(() => ({ activeTab })),
 }));
diff --git a/vite.config.ts b/vite.config.ts
index 0268b7c9..a3183460 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,4 +5,7 @@ import pluginRewriteAll from "vite-plugin-rewrite-all";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), pluginRewriteAll()],
+  optimizeDeps: {
+    exclude: ["@xmtp/user-preferences-bindings-wasm"],
+  },
 });

From aad2bae2f3dec04512c93819714cfabccd8600e7 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Fri, 12 Jan 2024 15:33:30 -0800
Subject: [PATCH 02/21] updated initial sort

---
 .../ConversationListController.tsx            | 19 ++++++++++++++-----
 .../MessagePreviewCardController.tsx          |  3 +++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/controllers/ConversationListController.tsx b/src/controllers/ConversationListController.tsx
index e203952c..68967feb 100644
--- a/src/controllers/ConversationListController.tsx
+++ b/src/controllers/ConversationListController.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo } from "react";
 import { useConsent, useDb } from "@xmtp/react-sdk";
+import type { ActiveTab } from "../store/xmtp";
 import { useXmtpStore } from "../store/xmtp";
 import useListConversations from "../hooks/useListConversations";
 import { ConversationList } from "../component-library/components/ConversationList/ConversationList";
@@ -12,7 +13,7 @@ type ConversationListControllerProps = {
 };
 
 type ConsentProps = {
-  tab: "denied" | "allowed";
+  tab: ActiveTab;
 };
 
 type NodeWithConsent = React.ReactElement<ConsentProps>;
@@ -27,11 +28,12 @@ export const ConversationListController = ({
   setStartedFirstMessage,
 }: ConversationListControllerProps) => {
   const { isLoaded, isLoading, conversations } = useListConversations();
+  const { isAllowed, isDenied } = useConsent();
+
   const { db } = useDb();
   useStreamAllMessages();
   const recipientInput = useXmtpStore((s) => s.recipientInput);
   const activeTab = useXmtpStore((s) => s.activeTab);
-  const { isAllowed, isDenied } = useConsent();
 
   // when the conversations are loaded, update their identities
   useEffect(() => {
@@ -49,17 +51,24 @@ export const ConversationListController = ({
       <MessagePreviewCardController
         key={conversation.topic}
         convo={conversation}
+        tab={
+          isAllowed(conversation.peerAddress)
+            ? "messages"
+            : isDenied(conversation.peerAddress)
+            ? "blocked"
+            : "requests"
+        }
       />
     ));
     return convos;
-  }, [conversations]);
+  }, [conversations, isAllowed, isDenied]);
 
   const { blocked, requested, allowed } =
     filteredConversations.reduce<ConsentLists>(
       (acc, item: NodeWithConsent) => {
-        if (item.props.tab === "denied") {
+        if (item.props.tab === "blocked") {
           acc.blocked.push(item);
-        } else if (item.props.tab === "allowed") {
+        } else if (item.props.tab === "messages") {
           acc.allowed.push(item);
         } else {
           acc.requested.push(item);
diff --git a/src/controllers/MessagePreviewCardController.tsx b/src/controllers/MessagePreviewCardController.tsx
index 4b35ec02..f45ec22a 100644
--- a/src/controllers/MessagePreviewCardController.tsx
+++ b/src/controllers/MessagePreviewCardController.tsx
@@ -18,6 +18,7 @@ import { ContentTypeScreenEffect } from "@xmtp/experimental-content-type-screen-
 import { MessagePreviewCard } from "../component-library/components/MessagePreviewCard/MessagePreviewCard";
 import type { ETHAddress } from "../helpers";
 import { shortAddress } from "../helpers";
+import type { ActiveTab } from "../store/xmtp";
 import { useXmtpStore } from "../store/xmtp";
 import {
   getCachedPeerAddressAvatar,
@@ -26,10 +27,12 @@ import {
 
 interface MessagePreviewCardControllerProps {
   convo: CachedConversation;
+  tab: ActiveTab;
 }
 
 export const MessagePreviewCardController = ({
   convo,
+  tab,
 }: MessagePreviewCardControllerProps) => {
   const { t } = useTranslation();
   const lastMessage = useLastMessage(convo.topic);

From e29fe0cdb03577cef6b1826cb8eeeaefe573d6a7 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Fri, 12 Jan 2024 16:41:13 -0800
Subject: [PATCH 03/21] updated dependencies

---
 .../MessagePreviewCard/MessagePreviewCard.tsx | 31 ++++++++++++++-----
 .../ConversationListController.tsx            |  2 +-
 .../FullConversationController.tsx            |  2 --
 .../MessagePreviewCardController.tsx          |  6 ++++
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/component-library/components/MessagePreviewCard/MessagePreviewCard.tsx b/src/component-library/components/MessagePreviewCard/MessagePreviewCard.tsx
index afad3caf..c44dc8b3 100644
--- a/src/component-library/components/MessagePreviewCard/MessagePreviewCard.tsx
+++ b/src/component-library/components/MessagePreviewCard/MessagePreviewCard.tsx
@@ -5,6 +5,7 @@ import { IconSkeletonLoader } from "../Loaders/SkeletonLoaders/IconSkeletonLoade
 import { ShortCopySkeletonLoader } from "../Loaders/SkeletonLoaders/ShortCopySkeletonLoader";
 import { classNames } from "../../../helpers";
 import { Avatar } from "../Avatar/Avatar";
+import type { ActiveTab } from "../../../store/xmtp";
 
 interface MessagePreviewCardProps {
   /**
@@ -22,7 +23,7 @@ interface MessagePreviewCardProps {
   /**
    * What is the wallet address associated with the message?
    */
-  address?: string;
+  address: string;
   /**
    * What is the datetime of the message
    */
@@ -47,8 +48,18 @@ interface MessagePreviewCardProps {
    * Is this conversation pinned?
    */
   pinned?: boolean;
-  // To-do: Add error views once we have the designs
-  activeTab: string;
+  /**
+   * Which tab are we on?
+   */
+  activeTab: ActiveTab;
+  /**
+   * Method to reset tab
+   */
+  setActiveTab: (tab: ActiveTab) => void;
+  /**
+   * Method to allow an address
+   */
+  allow: (address: string[]) => void;
 }
 
 export const MessagePreviewCard = ({
@@ -63,6 +74,8 @@ export const MessagePreviewCard = ({
   conversationDomain,
   pinned,
   activeTab,
+  setActiveTab,
+  allow,
 }: MessagePreviewCardProps) => {
   const { t } = useTranslation();
 
@@ -106,9 +119,7 @@ export const MessagePreviewCard = ({
           <span
             className="text-md text-gray-600 line-clamp-1 w-full break-all"
             data-testid="message-preview-text">
-            {activeTab !== "blocked"
-              ? text
-              : t("messages.convos_empty_text_placeholder")}
+            {text}
           </span>
         )}
       </div>
@@ -126,7 +137,13 @@ export const MessagePreviewCard = ({
             "flex flex-col items-end justify-between",
           )}>
           {activeTab === "blocked" ? (
-            <button type="button" className="text-indigo-600 font-bold text-md">
+            <button
+              type="button"
+              className="text-indigo-600 font-bold text-md"
+              onClick={() => {
+                void allow([address]);
+                setActiveTab("messages");
+              }}>
               {t("consent.unblock")}
             </button>
           ) : (
diff --git a/src/controllers/ConversationListController.tsx b/src/controllers/ConversationListController.tsx
index 68967feb..8096eb1e 100644
--- a/src/controllers/ConversationListController.tsx
+++ b/src/controllers/ConversationListController.tsx
@@ -44,7 +44,7 @@ export const ConversationListController = ({
     };
     void runUpdate();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoaded]);
+  }, [isLoaded, activeTab]);
 
   const filteredConversations = useMemo(() => {
     const convos = conversations.map((conversation) => (
diff --git a/src/controllers/FullConversationController.tsx b/src/controllers/FullConversationController.tsx
index 1380fef6..ab21ad35 100644
--- a/src/controllers/FullConversationController.tsx
+++ b/src/controllers/FullConversationController.tsx
@@ -26,7 +26,6 @@ type FullConversationControllerProps = {
 export const FullConversationController: React.FC<
   FullConversationControllerProps
 > = ({ conversation }) => {
-  const activeTab = useXmtpStore((s) => s.activeTab);
   const lastMessageDateRef = useRef<Date>();
   const renderedDatesRef = useRef<Date[]>([]);
   const [effect, setEffect] = useState<EffectType | undefined>(undefined);
@@ -116,7 +115,6 @@ export const FullConversationController: React.FC<
       <FullConversation
         isLoading={isLoading}
         messages={messagesWithDates}
-        activeTab={activeTab}
         address={conversation.peerAddress}
       />
     </div>
diff --git a/src/controllers/MessagePreviewCardController.tsx b/src/controllers/MessagePreviewCardController.tsx
index f45ec22a..805db682 100644
--- a/src/controllers/MessagePreviewCardController.tsx
+++ b/src/controllers/MessagePreviewCardController.tsx
@@ -3,6 +3,7 @@ import {
   type CachedConversation,
   ContentTypeId,
   ContentTypeText,
+  useConsent,
 } from "@xmtp/react-sdk";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -32,9 +33,11 @@ interface MessagePreviewCardControllerProps {
 
 export const MessagePreviewCardController = ({
   convo,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   tab,
 }: MessagePreviewCardControllerProps) => {
   const { t } = useTranslation();
+  const { allow } = useConsent();
   const lastMessage = useLastMessage(convo.topic);
   // XMTP State
   const recipientAddress = useXmtpStore((s) => s.recipientAddress);
@@ -48,6 +51,7 @@ export const MessagePreviewCardController = ({
   const setRecipientOnNetwork = useXmtpStore((s) => s.setRecipientOnNetwork);
   const setConversationTopic = useXmtpStore((s) => s.setConversationTopic);
   const setActiveMessage = useXmtpStore((s) => s.setActiveMessage);
+  const setActiveTab = useXmtpStore((s) => s.setActiveTab);
 
   const conversationTopic = useXmtpStore((state) => state.conversationTopic);
 
@@ -155,6 +159,8 @@ export const MessagePreviewCardController = ({
       conversationDomain={shortAddress(conversationDomain)}
       address={convo?.peerAddress}
       activeTab={activeTab}
+      setActiveTab={setActiveTab}
+      allow={allow}
     />
   );
 };

From 49803b27cf8268da3e261f0fcc2358e860813cc9 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Fri, 12 Jan 2024 16:44:16 -0800
Subject: [PATCH 04/21] fixed type

---
 .../components/MessagePreviewCard/MessagePreviewCard.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/component-library/components/MessagePreviewCard/MessagePreviewCard.tsx b/src/component-library/components/MessagePreviewCard/MessagePreviewCard.tsx
index c44dc8b3..580b2299 100644
--- a/src/component-library/components/MessagePreviewCard/MessagePreviewCard.tsx
+++ b/src/component-library/components/MessagePreviewCard/MessagePreviewCard.tsx
@@ -59,7 +59,7 @@ interface MessagePreviewCardProps {
   /**
    * Method to allow an address
    */
-  allow: (address: string[]) => void;
+  allow: (address: string[]) => Promise<void>;
 }
 
 export const MessagePreviewCard = ({

From f867ef3a55b2abe67c978766ef5294037fb0c870 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Tue, 16 Jan 2024 12:10:27 -0800
Subject: [PATCH 05/21] memoized messages to pass

---
 .../FullConversation/FullConversation.tsx     |  6 +--
 .../ConversationListController.tsx            | 39 ++++++-------------
 2 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/src/component-library/components/FullConversation/FullConversation.tsx b/src/component-library/components/FullConversation/FullConversation.tsx
index 8541dc01..9dbbd9f0 100644
--- a/src/component-library/components/FullConversation/FullConversation.tsx
+++ b/src/component-library/components/FullConversation/FullConversation.tsx
@@ -39,14 +39,14 @@ const AcceptOrDeny = ({ address }: { address: string }) => {
 
   return activeTab === "requests" ? (
     <div
-      className="bg-gray-300 p-4 w-full flex flex-col justify-center items-center text-gray-500"
+      className="bg-gray-100 p-4 w-full flex flex-col justify-center items-center text-gray-500 border-2 border-gray-300"
       data-testid="accept_or_deny_container">
       <h3 className="font-bold">{t("consent.new_message_request")}</h3>
       <p>{t("consent.new_message_request_description")}</p>
       <div className="flex w-full justify-between p-3 gap-2">
         <button
           type="button"
-          className="text-blue-600 flex w-full justify-center border border-2 border-blue-600 rounded-md p-2 hover:bg-blue-600 hover:text-white"
+          className="text-indigo-600 flex w-full justify-center border border-2 border-indigo-600 rounded-md p-2 hover:bg-indigo-600 hover:text-white"
           onClick={() => {
             void allow([address]);
             setActiveTab("messages");
@@ -55,7 +55,7 @@ const AcceptOrDeny = ({ address }: { address: string }) => {
         </button>
         <button
           type="button"
-          className="text-indigo-600 flex w-full justify-center border border-2 border-indigo-600 rounded-md p-2 hover:bg-indigo-600 hover:text-white"
+          className="text-red-600 flex w-full justify-center border border-2 border-red-600 rounded-md p-2 hover:bg-red-600 hover:text-white"
           onClick={() => {
             void deny([address]);
             setActiveTab("blocked");
diff --git a/src/controllers/ConversationListController.tsx b/src/controllers/ConversationListController.tsx
index 8096eb1e..30643741 100644
--- a/src/controllers/ConversationListController.tsx
+++ b/src/controllers/ConversationListController.tsx
@@ -18,12 +18,6 @@ type ConsentProps = {
 
 type NodeWithConsent = React.ReactElement<ConsentProps>;
 
-type ConsentLists = {
-  blocked: NodeWithConsent[];
-  requested: NodeWithConsent[];
-  allowed: NodeWithConsent[];
-};
-
 export const ConversationListController = ({
   setStartedFirstMessage,
 }: ConversationListControllerProps) => {
@@ -63,28 +57,19 @@ export const ConversationListController = ({
     return convos;
   }, [conversations, isAllowed, isDenied]);
 
-  const { blocked, requested, allowed } =
-    filteredConversations.reduce<ConsentLists>(
-      (acc, item: NodeWithConsent) => {
-        if (item.props.tab === "blocked") {
-          acc.blocked.push(item);
-        } else if (item.props.tab === "messages") {
-          acc.allowed.push(item);
-        } else {
-          acc.requested.push(item);
+  const messagesToPass = useMemo(
+    () =>
+      filteredConversations.filter((item: NodeWithConsent) => {
+        if (!isLoading && activeTab === "messages") {
+          return item.props.tab === "messages";
         }
-        return acc;
-      },
-      { blocked: [], requested: [], allowed: [] },
-    );
-
-  const messagesToPass = !isLoading
-    ? activeTab === "messages"
-      ? allowed
-      : activeTab === "blocked"
-      ? blocked
-      : requested
-    : [];
+        if (!isLoading && activeTab === "blocked") {
+          return item.props.tab === "blocked";
+        }
+        return item.props.tab === "requests";
+      }),
+    [filteredConversations, isLoading, activeTab],
+  );
 
   return (
     <ConversationList

From 2762aea05f20b3ac18e86a4a078a7522a333b8e6 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Tue, 16 Jan 2024 13:52:44 -0800
Subject: [PATCH 06/21] test wip, updated tab switching logic

---
 cypress/e2e/portable_consent.cy.ts            | 101 ++++++++++++++++++
 .../FullConversation/FullConversation.tsx     |   9 +-
 .../FullConversationController.tsx            |   2 +-
 3 files changed, 107 insertions(+), 5 deletions(-)
 create mode 100644 cypress/e2e/portable_consent.cy.ts

diff --git a/cypress/e2e/portable_consent.cy.ts b/cypress/e2e/portable_consent.cy.ts
new file mode 100644
index 00000000..b401489e
--- /dev/null
+++ b/cypress/e2e/portable_consent.cy.ts
@@ -0,0 +1,101 @@
+import "../../src/polyfills";
+import { Client } from "@xmtp/react-sdk";
+import { startDemoEnv, checkElement, TIMEOUT } from "../test_utils";
+import randomWallet from "../../src/helpers/createRandomWallet";
+
+describe(
+  "Portable Consent Test Cases",
+  {
+    retries: {
+      runMode: 3,
+      openMode: 2,
+    },
+  },
+  () => {
+    // const shortMessage = "hello";
+    beforeEach(() => {
+      startDemoEnv();
+      // In connected flow, conversation list header should render before any tests run
+      checkElement("conversation-list-header");
+      // Create new account, send message to this account
+      // Client.create(senderWallet, { env: "dev" })
+      //   .then((xmtp) => {
+      //     xmtp.conversations
+      //       .newConversation(testUserWithXmtpAccount)
+      //       .then((conversation) => {
+      //         conversation
+      //           .send("hellooooo")
+      //           .then((message) => {
+      //             console.log("MESSAGE", message);
+      //           })
+      //           .catch(() => {
+      //             console.log("message not sent");
+      //           });
+      //       })
+      //       .catch(() => {
+      //         console.log("conversation not created");
+      //       });
+      //   })
+      //   .catch(() => {
+      //     console.log("could not create client");
+      //   });
+
+      // We should receive this message and see it in requests before going any further
+
+      // checkElement("message-preview-card").should("have.length", 4);
+      // console.log("do we get here?");
+      // Should see the requests modal with block/unblock
+    });
+
+    it("can accept a request and move it to messages", () => {
+      const recipientWallet = randomWallet;
+      cy.clearAllLocalStorage();
+
+      cy.wrap(null)
+        .then(() => Client.create(recipientWallet, { env: "dev" }))
+        .then(async (xmtp) => {
+          const newConvo = await xmtp.conversations.newConversation(
+            "0x78BfD39428C32Be149892d64bEE6C6f90aedEec1",
+          );
+
+          return newConvo;
+        })
+        .then(async (conversation) => {
+          const message = await conversation.send("hellooooo");
+          // const messages = await conversation.messages();
+
+          checkElement("requests-button").click();
+          cy.get(`[data-testid=conversations-list-panel]`, {
+            timeout: TIMEOUT,
+          }).should("have.length", 1);
+        });
+
+      // when clicking on accept
+      // Should disappear from requests
+      // when clicking on messages
+      // this message should appear there
+      // The modal should not appear
+      // The message input should appear
+    });
+    it("can block a request and move it to blocked", () => {
+      // when clicking on blocked
+      // Should disappear from requests
+      // when clicking on blocked
+      // this conversation should appear there
+      // and should have an option to unblock
+      // The modal should not appear
+      // The message input should not appear
+    });
+    it("can unblock a request and move it to messages", () => {
+      // when clicking on blocked
+      // and click on blocked
+      // should see message with option to unblock
+      // when clicking unblock
+      // should disappear from blocked
+      // when clicking messages
+      // and should see that message
+      // the modal should not appear
+      // the message input should appear
+    });
+  },
+);
diff --git a/src/component-library/components/FullConversation/FullConversation.tsx b/src/component-library/components/FullConversation/FullConversation.tsx
index 9dbbd9f0..a38f2f5c 100644
--- a/src/component-library/components/FullConversation/FullConversation.tsx
+++ b/src/component-library/components/FullConversation/FullConversation.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import type { VirtuosoHandle } from "react-virtuoso";
 import { Virtuoso } from "react-virtuoso";
-import { useMemo, useRef } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useConsent } from "@xmtp/react-sdk";
 import { useXmtpStore } from "../../../store/xmtp";
 
@@ -36,8 +36,9 @@ const AcceptOrDeny = ({ address }: { address: string }) => {
   const { allow, deny } = useConsent();
   const setActiveTab = useXmtpStore((s) => s.setActiveTab);
   const activeTab = useXmtpStore((s) => s.activeTab);
+  const [modalOpen, setModalOpen] = useState(true);
 
-  return activeTab === "requests" ? (
+  return activeTab === "requests" && modalOpen ? (
     <div
       className="bg-gray-100 p-4 w-full flex flex-col justify-center items-center text-gray-500 border-2 border-gray-300"
       data-testid="accept_or_deny_container">
@@ -49,7 +50,7 @@ const AcceptOrDeny = ({ address }: { address: string }) => {
           className="text-indigo-600 flex w-full justify-center border border-2 border-indigo-600 rounded-md p-2 hover:bg-indigo-600 hover:text-white"
           onClick={() => {
             void allow([address]);
-            setActiveTab("messages");
+            setModalOpen(false);
           }}>
           {t("consent.accept")}
         </button>
@@ -58,7 +59,7 @@ const AcceptOrDeny = ({ address }: { address: string }) => {
           className="text-red-600 flex w-full justify-center border border-2 border-red-600 rounded-md p-2 hover:bg-red-600 hover:text-white"
           onClick={() => {
             void deny([address]);
-            setActiveTab("blocked");
+            setModalOpen(false);
           }}>
           {t("consent.block")}
         </button>
diff --git a/src/controllers/FullConversationController.tsx b/src/controllers/FullConversationController.tsx
index ab21ad35..732b90a5 100644
--- a/src/controllers/FullConversationController.tsx
+++ b/src/controllers/FullConversationController.tsx
@@ -106,7 +106,7 @@ export const FullConversationController: React.FC<
       id="scrollableDiv"
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex={0}
-      className="w-full h-full flex flex-col overflow-auto relative">
+      className="w-full h-full flex flex-col overflow-auto relative pb-4">
       {effect === "SNOW" ? (
         <SnowEffect messageId={messageId} key={messageId} />
       ) : effect === "RAIN" ? (

From b52acd9671bf0e32bc34d160ad8037204afd01d7 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Tue, 16 Jan 2024 14:10:54 -0800
Subject: [PATCH 07/21] remove consent tests

---
 cypress/e2e/portable_consent.cy.ts | 101 -----------------------------
 1 file changed, 101 deletions(-)
 delete mode 100644 cypress/e2e/portable_consent.cy.ts

diff --git a/cypress/e2e/portable_consent.cy.ts b/cypress/e2e/portable_consent.cy.ts
deleted file mode 100644
index b401489e..00000000
--- a/cypress/e2e/portable_consent.cy.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import "../../src/polyfills";
-import { Client } from "@xmtp/react-sdk";
-import { startDemoEnv, checkElement, TIMEOUT } from "../test_utils";
-import randomWallet from "../../src/helpers/createRandomWallet";
-
-describe(
-  "Portable Consent Test Cases",
-  {
-    retries: {
-      runMode: 3,
-      openMode: 2,
-    },
-  },
-  () => {
-    // const shortMessage = "hello";
-    beforeEach(() => {
-      startDemoEnv();
-      // In connected flow, conversation list header should render before any tests run
-      checkElement("conversation-list-header");
-      // Create new account, send message to this account
-      // Client.create(senderWallet, { env: "dev" })
-      //   .then((xmtp) => {
-      //     xmtp.conversations
-      //       .newConversation(testUserWithXmtpAccount)
-      //       .then((conversation) => {
-      //         conversation
-      //           .send("hellooooo")
-      //           .then((message) => {
-      //             console.log("MESSAGE", message);
-      //           })
-      //           .catch(() => {
-      //             console.log("message not sent");
-      //           });
-      //       })
-      //       .catch(() => {
-      //         console.log("conversation not created");
-      //       });
-      //   })
-      //   .catch(() => {
-      //     console.log("could not create client");
-      //   });
-
-      // We should receive this message and see it in requests before going any further
-
-      // checkElement("message-preview-card").should("have.length", 4);
-      // console.log("do we get here?");
-      // Should see the requests modal with block/unblock
-    });
-
-    it("can accept a request and move it to messages", () => {
-      const recipientWallet = randomWallet;
-      cy.clearAllLocalStorage();
-
-      cy.wrap(null)
-        .then(() => Client.create(recipientWallet, { env: "dev" }))
-        .then(async (xmtp) => {
-          const newConvo = await xmtp.conversations.newConversation(
-            "0x78BfD39428C32Be149892d64bEE6C6f90aedEec1",
-          );
-
-          return newConvo;
-        })
-        .then(async (conversation) => {
-          const message = await conversation.send("hellooooo");
-          // const messages = await conversation.messages();
-
-          checkElement("requests-button").click();
-          cy.get(`[data-testid=conversations-list-panel]`, {
-            timeout: TIMEOUT,
-          }).should("have.length", 1);
-        });
-
-      // when clicking on accept
-      // Should disappear from requests
-      // when clicking on messages
-      // this message should appear there
-      // The modal should not appear
-      // The message input should appear
-    });
-    it("can block a request and move it to blocked", () => {
-      // when clicking on blocked
-      // Should disappear from requests
-      // when clicking on blocked
-      // this conversation should appear there
-      // and should have an option to unblock
-      // The modal should not appear
-      // The message input should not appear
-    });
-    it("can unblock a request and move it to messages", () => {
-      // when clicking on blocked
-      // and click on blocked
-      // should see message with option to unblock
-      // when clicking unblock
-      // should disappear from blocked
-      // when clicking messages
-      // and should see that message
-      // the modal should not appear
-      // the message input should appear
-    });
-  },
-);

From 14a1bc8273ff7aba4912a28756cf6680cdb33512 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Tue, 16 Jan 2024 15:01:22 -0800
Subject: [PATCH 08/21] fix lint error

---
 .../components/FullConversation/FullConversation.tsx             | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/component-library/components/FullConversation/FullConversation.tsx b/src/component-library/components/FullConversation/FullConversation.tsx
index a38f2f5c..62590345 100644
--- a/src/component-library/components/FullConversation/FullConversation.tsx
+++ b/src/component-library/components/FullConversation/FullConversation.tsx
@@ -34,7 +34,6 @@ const BeginningMessage: React.FC = () => {
 const AcceptOrDeny = ({ address }: { address: string }) => {
   const { t } = useTranslation();
   const { allow, deny } = useConsent();
-  const setActiveTab = useXmtpStore((s) => s.setActiveTab);
   const activeTab = useXmtpStore((s) => s.activeTab);
   const [modalOpen, setModalOpen] = useState(true);
 

From 82eccaa3cf5d6debd0a101e721f32e6226304f5d Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Wed, 17 Jan 2024 08:32:07 -0800
Subject: [PATCH 09/21] updated port

---
 cypress.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress.config.ts b/cypress.config.ts
index 503bedb8..038852a5 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -4,7 +4,7 @@ import vitePreprocessor from "cypress-vite";
 
 export default defineConfig({
   env: {
-    server_url: "http://localhost:5173",
+    server_url: "http://localhost:5177",
   },
 
   e2e: {

From af401402e2633f0a8ecc7641b055908af5381558 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Wed, 17 Jan 2024 10:31:22 -0800
Subject: [PATCH 10/21] consent test boilerplate

---
 cypress/e2e/portable_consent.cy.ts | 121 +++++++++++++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 cypress/e2e/portable_consent.cy.ts

diff --git a/cypress/e2e/portable_consent.cy.ts b/cypress/e2e/portable_consent.cy.ts
new file mode 100644
index 00000000..63da5151
--- /dev/null
+++ b/cypress/e2e/portable_consent.cy.ts
@@ -0,0 +1,121 @@
+import "../../src/polyfills";
+import { Client, toCachedConversation, useSendMessage } from "@xmtp/react-sdk";
+import { startDemoEnv, checkElement, TIMEOUT } from "../test_utils";
+import randomWallet from "../../src/helpers/createRandomWallet";
+
+describe(
+  "Portable Consent Test Cases",
+  {
+    retries: {
+      runMode: 3,
+      openMode: 2,
+    },
+  },
+  () => {
+    // const shortMessage = "hello";
+    beforeEach(() => {
+      startDemoEnv();
+      // In connected flow, conversation list header should render before any tests run
+      checkElement("conversation-list-header");
+      // Create new account, send message to this account
+      // Client.create(senderWallet, { env: "dev" })
+      //   .then((xmtp) => {
+      //     xmtp.conversations
+      //       .newConversation(testUserWithXmtpAccount)
+      //       .then((conversation) => {
+      //         conversation
+      //           .send("hellooooo")
+      //           .then((message) => {
+      //             console.log("MESSAGE", message);
+      //           })
+      //           .catch(() => {
+      //             console.log("message not sent");
+      //           });
+      //       })
+      //       .catch(() => {
+      //         console.log("conversation not created");
+      //       });
+      //   })
+      //   .catch(() => {
+      //     console.log("could not create client");
+      //   });
+
+      // We should receive this message and see it in requests before going any further
+
+      // checkElement("message-preview-card").should("have.length", 4);
+      // console.log("do we get here?");
+      // Should see the requests modal with block/unblock
+    });
+
+    it("can accept a request and move it to messages", () => {
+      const recipientWallet = randomWallet;
+      cy.clearAllLocalStorage();
+
+      cy.wrap(null)
+        .then(() => Client.create(recipientWallet, { env: "dev" }))
+        .then(async (xmtp) => {
+          const newConvo = await xmtp.conversations.newConversation(
+            "0x78BfD39428C32Be149892d64bEE6C6f90aedEec1",
+          );
+
+          return newConvo;
+        })
+        .then(async (conversation) => {
+          //   const message = await conversation.send("hellooooo");
+
+          const cachedConvo = toCachedConversation(
+            conversation,
+            "0x78BfD39428C32Be149892d64bEE6C6f90aedEec1",
+          );
+
+          console.log("CACHED CONVO", cachedConvo);
+
+          const { sendMessage } = useSendMessage();
+          void sendMessage(cachedConvo, "helloooo!!!");
+
+          //   console.log("MESSAGE!!!", message);
+          //   console.log("CONVERSATION!!!", conversation);
+
+          //   const { sendMessage } = useSendMessage();
+
+          const messages = await conversation.messages();
+
+          console.log("DID THE MESSAGE GET SENT?", messages);
+
+          //   void sendMessage(conversation, "hello");
+
+          checkElement("requests-button").click();
+          cy.get(`[data-testid=conversations-list-panel]`, {
+            timeout: TIMEOUT,
+          }).should("have.length", 1);
+        });
+
+      // when clicking on accept
+      // Should disappear from requests
+      // when clicking on messages
+      // this message should appear there
+      // The modal should not appear
+      // The message input should appear
+    });
+    it("can block a request and move it to blocked", () => {
+      // when clicking on blocked
+      // Should disappear from requests
+      // when clicking on blocked
+      // this conversation should appear there
+      // and should have an option to unblock
+      // The modal should not appear
+      // The message input should not appear
+    });
+    it("can unblock a request and move it to messages", () => {
+      // when clicking on blocked
+      // and click on blocked
+      // should see message with option to unblock
+      // when clicking unblock
+      // should disappear from blocked
+      // when clicking messages
+      // and should see that message
+      // the modal should not appear
+      // the message input should appear
+    });
+  },
+);

From 8d5c0e7539d7a31bb6d953a0cdac6a2c5d886cc9 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Wed, 17 Jan 2024 12:53:11 -0800
Subject: [PATCH 11/21] updated tab flow and tests

---
 cypress.config.ts                             |   2 +-
 cypress/e2e/portable_consent.cy.ts            | 121 ------------------
 .../FullConversation/FullConversation.tsx     |   4 +
 3 files changed, 5 insertions(+), 122 deletions(-)
 delete mode 100644 cypress/e2e/portable_consent.cy.ts

diff --git a/cypress.config.ts b/cypress.config.ts
index 038852a5..503bedb8 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -4,7 +4,7 @@ import vitePreprocessor from "cypress-vite";
 
 export default defineConfig({
   env: {
-    server_url: "http://localhost:5177",
+    server_url: "http://localhost:5173",
   },
 
   e2e: {
diff --git a/cypress/e2e/portable_consent.cy.ts b/cypress/e2e/portable_consent.cy.ts
deleted file mode 100644
index 63da5151..00000000
--- a/cypress/e2e/portable_consent.cy.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import "../../src/polyfills";
-import { Client, toCachedConversation, useSendMessage } from "@xmtp/react-sdk";
-import { startDemoEnv, checkElement, TIMEOUT } from "../test_utils";
-import randomWallet from "../../src/helpers/createRandomWallet";
-
-describe(
-  "Portable Consent Test Cases",
-  {
-    retries: {
-      runMode: 3,
-      openMode: 2,
-    },
-  },
-  () => {
-    // const shortMessage = "hello";
-    beforeEach(() => {
-      startDemoEnv();
-      // In connected flow, conversation list header should render before any tests run
-      checkElement("conversation-list-header");
-      // Create new account, send message to this account
-      // Client.create(senderWallet, { env: "dev" })
-      //   .then((xmtp) => {
-      //     xmtp.conversations
-      //       .newConversation(testUserWithXmtpAccount)
-      //       .then((conversation) => {
-      //         conversation
-      //           .send("hellooooo")
-      //           .then((message) => {
-      //             console.log("MESSAGE", message);
-      //           })
-      //           .catch(() => {
-      //             console.log("message not sent");
-      //           });
-      //       })
-      //       .catch(() => {
-      //         console.log("conversation not created");
-      //       });
-      //   })
-      //   .catch(() => {
-      //     console.log("could not create client");
-      //   });
-
-      // We should receive this message and see it in requests before going any further
-
-      // checkElement("message-preview-card").should("have.length", 4);
-      // console.log("do we get here?");
-      // Should see the requests modal with block/unblock
-    });
-
-    it("can accept a request and move it to messages", () => {
-      const recipientWallet = randomWallet;
-      cy.clearAllLocalStorage();
-
-      cy.wrap(null)
-        .then(() => Client.create(recipientWallet, { env: "dev" }))
-        .then(async (xmtp) => {
-          const newConvo = await xmtp.conversations.newConversation(
-            "0x78BfD39428C32Be149892d64bEE6C6f90aedEec1",
-          );
-
-          return newConvo;
-        })
-        .then(async (conversation) => {
-          //   const message = await conversation.send("hellooooo");
-
-          const cachedConvo = toCachedConversation(
-            conversation,
-            "0x78BfD39428C32Be149892d64bEE6C6f90aedEec1",
-          );
-
-          console.log("CACHED CONVO", cachedConvo);
-
-          const { sendMessage } = useSendMessage();
-          void sendMessage(cachedConvo, "helloooo!!!");
-
-          //   console.log("MESSAGE!!!", message);
-          //   console.log("CONVERSATION!!!", conversation);
-
-          //   const { sendMessage } = useSendMessage();
-
-          const messages = await conversation.messages();
-
-          console.log("DID THE MESSAGE GET SENT?", messages);
-
-          //   void sendMessage(conversation, "hello");
-
-          checkElement("requests-button").click();
-          cy.get(`[data-testid=conversations-list-panel]`, {
-            timeout: TIMEOUT,
-          }).should("have.length", 1);
-        });
-
-      // when clicking on accept
-      // Should disappear from requests
-      // when clicking on messages
-      // this message should appear there
-      // The modal should not appear
-      // The message input should appear
-    });
-    it("can block a request and move it to blocked", () => {
-      // when clicking on blocked
-      // Should disappear from requests
-      // when clicking on blocked
-      // this conversation should appear there
-      // and should have an option to unblock
-      // The modal should not appear
-      // The message input should not appear
-    });
-    it("can unblock a request and move it to messages", () => {
-      // when clicking on blocked
-      // and click on blocked
-      // should see message with option to unblock
-      // when clicking unblock
-      // should disappear from blocked
-      // when clicking messages
-      // and should see that message
-      // the modal should not appear
-      // the message input should appear
-    });
-  },
-);
diff --git a/src/component-library/components/FullConversation/FullConversation.tsx b/src/component-library/components/FullConversation/FullConversation.tsx
index 62590345..96effeb7 100644
--- a/src/component-library/components/FullConversation/FullConversation.tsx
+++ b/src/component-library/components/FullConversation/FullConversation.tsx
@@ -35,6 +35,8 @@ const AcceptOrDeny = ({ address }: { address: string }) => {
   const { t } = useTranslation();
   const { allow, deny } = useConsent();
   const activeTab = useXmtpStore((s) => s.activeTab);
+  const setActiveTab = useXmtpStore((s) => s.setActiveTab);
+
   const [modalOpen, setModalOpen] = useState(true);
 
   return activeTab === "requests" && modalOpen ? (
@@ -49,6 +51,7 @@ const AcceptOrDeny = ({ address }: { address: string }) => {
           className="text-indigo-600 flex w-full justify-center border border-2 border-indigo-600 rounded-md p-2 hover:bg-indigo-600 hover:text-white"
           onClick={() => {
             void allow([address]);
+            setActiveTab("messages");
             setModalOpen(false);
           }}>
           {t("consent.accept")}
@@ -58,6 +61,7 @@ const AcceptOrDeny = ({ address }: { address: string }) => {
           className="text-red-600 flex w-full justify-center border border-2 border-red-600 rounded-md p-2 hover:bg-red-600 hover:text-white"
           onClick={() => {
             void deny([address]);
+            setActiveTab("blocked");
             setModalOpen(false);
           }}>
           {t("consent.block")}

From 6ec441f497d5f351378d34c4182a42f687c86f3d Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Fri, 19 Jan 2024 09:35:55 -0800
Subject: [PATCH 12/21] convo list wip

---
 package-lock.json                             | 236 +++++++++++++-----
 package.json                                  |   3 +-
 .../ConversationListController.tsx            |  77 +++++-
 3 files changed, 236 insertions(+), 80 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ee28d0a1..65a0390a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "date-fns": "^2.29.3",
         "dexie": "^3.2.4",
         "emojibase": "^6.1.0",
+        "ethers": "^6.10.0",
         "i18next": "^22.4.13",
         "i18next-browser-languagedetector": "^7.0.1",
         "i18next-http-backend": "^2.2.0",
@@ -15016,6 +15017,53 @@
         "node": ">=18"
       }
     },
+    "node_modules/@xmtp/xmtp-js/node_modules/ethers": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/ethers/-/ethers-5.7.2.tgz",
+      "integrity": "sha512-wswUsmWo1aOK8rR7DIKiWSw9DbLWe6x98Jrn8wcTflTVvaXhAMaB5zGAXy0GYQEQp9iO1iSHWVyARQm11zUtyg==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.buymeacoffee.com/ricmoo"
+        }
+      ],
+      "dependencies": {
+        "@ethersproject/abi": "5.7.0",
+        "@ethersproject/abstract-provider": "5.7.0",
+        "@ethersproject/abstract-signer": "5.7.0",
+        "@ethersproject/address": "5.7.0",
+        "@ethersproject/base64": "5.7.0",
+        "@ethersproject/basex": "5.7.0",
+        "@ethersproject/bignumber": "5.7.0",
+        "@ethersproject/bytes": "5.7.0",
+        "@ethersproject/constants": "5.7.0",
+        "@ethersproject/contracts": "5.7.0",
+        "@ethersproject/hash": "5.7.0",
+        "@ethersproject/hdnode": "5.7.0",
+        "@ethersproject/json-wallets": "5.7.0",
+        "@ethersproject/keccak256": "5.7.0",
+        "@ethersproject/logger": "5.7.0",
+        "@ethersproject/networks": "5.7.1",
+        "@ethersproject/pbkdf2": "5.7.0",
+        "@ethersproject/properties": "5.7.0",
+        "@ethersproject/providers": "5.7.2",
+        "@ethersproject/random": "5.7.0",
+        "@ethersproject/rlp": "5.7.0",
+        "@ethersproject/sha2": "5.7.0",
+        "@ethersproject/signing-key": "5.7.0",
+        "@ethersproject/solidity": "5.7.0",
+        "@ethersproject/strings": "5.7.0",
+        "@ethersproject/transactions": "5.7.0",
+        "@ethersproject/units": "5.7.0",
+        "@ethersproject/wallet": "5.7.0",
+        "@ethersproject/web": "5.7.1",
+        "@ethersproject/wordlists": "5.7.0"
+      }
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -20644,13 +20692,13 @@
       }
     },
     "node_modules/ethers": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/ethers/-/ethers-5.7.2.tgz",
-      "integrity": "sha512-wswUsmWo1aOK8rR7DIKiWSw9DbLWe6x98Jrn8wcTflTVvaXhAMaB5zGAXy0GYQEQp9iO1iSHWVyARQm11zUtyg==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/ethers/-/ethers-6.10.0.tgz",
+      "integrity": "sha512-nMNwYHzs6V1FR3Y4cdfxSQmNgZsRj1RiTU25JwvnJLmyzw9z3SKxNc2XKDuiXXo/v9ds5Mp9m6HBabgYQQ26tA==",
       "funding": [
         {
           "type": "individual",
-          "url": "https://gitcoin.co/grants/13/ethersjs-complete-simple-and-tiny-2"
+          "url": "https://github.com/sponsors/ethers-io/"
         },
         {
           "type": "individual",
@@ -20658,36 +20706,51 @@
         }
       ],
       "dependencies": {
-        "@ethersproject/abi": "5.7.0",
-        "@ethersproject/abstract-provider": "5.7.0",
-        "@ethersproject/abstract-signer": "5.7.0",
-        "@ethersproject/address": "5.7.0",
-        "@ethersproject/base64": "5.7.0",
-        "@ethersproject/basex": "5.7.0",
-        "@ethersproject/bignumber": "5.7.0",
-        "@ethersproject/bytes": "5.7.0",
-        "@ethersproject/constants": "5.7.0",
-        "@ethersproject/contracts": "5.7.0",
-        "@ethersproject/hash": "5.7.0",
-        "@ethersproject/hdnode": "5.7.0",
-        "@ethersproject/json-wallets": "5.7.0",
-        "@ethersproject/keccak256": "5.7.0",
-        "@ethersproject/logger": "5.7.0",
-        "@ethersproject/networks": "5.7.1",
-        "@ethersproject/pbkdf2": "5.7.0",
-        "@ethersproject/properties": "5.7.0",
-        "@ethersproject/providers": "5.7.2",
-        "@ethersproject/random": "5.7.0",
-        "@ethersproject/rlp": "5.7.0",
-        "@ethersproject/sha2": "5.7.0",
-        "@ethersproject/signing-key": "5.7.0",
-        "@ethersproject/solidity": "5.7.0",
-        "@ethersproject/strings": "5.7.0",
-        "@ethersproject/transactions": "5.7.0",
-        "@ethersproject/units": "5.7.0",
-        "@ethersproject/wallet": "5.7.0",
-        "@ethersproject/web": "5.7.1",
-        "@ethersproject/wordlists": "5.7.0"
+        "@adraffy/ens-normalize": "1.10.0",
+        "@noble/curves": "1.2.0",
+        "@noble/hashes": "1.3.2",
+        "@types/node": "18.15.13",
+        "aes-js": "4.0.0-beta.5",
+        "tslib": "2.4.0",
+        "ws": "8.5.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/ethers/node_modules/@types/node": {
+      "version": "18.15.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.13.tgz",
+      "integrity": "sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q=="
+    },
+    "node_modules/ethers/node_modules/aes-js": {
+      "version": "4.0.0-beta.5",
+      "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-4.0.0-beta.5.tgz",
+      "integrity": "sha512-G965FqalsNyrPqgEGON7nIx1e/OVENSgiEIzyC63haUMuvNnwIgIjMs52hlTCKhkBny7A2ORNlfY9Zu+jmGk1Q=="
+    },
+    "node_modules/ethers/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
+    "node_modules/ethers/node_modules/ws": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
+      "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
       }
     },
     "node_modules/ethjs-util": {
@@ -44494,6 +44557,45 @@
         "elliptic": "^6.5.4",
         "ethers": "^5.5.3",
         "long": "^5.2.0"
+      },
+      "dependencies": {
+        "ethers": {
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/ethers/-/ethers-5.7.2.tgz",
+          "integrity": "sha512-wswUsmWo1aOK8rR7DIKiWSw9DbLWe6x98Jrn8wcTflTVvaXhAMaB5zGAXy0GYQEQp9iO1iSHWVyARQm11zUtyg==",
+          "requires": {
+            "@ethersproject/abi": "5.7.0",
+            "@ethersproject/abstract-provider": "5.7.0",
+            "@ethersproject/abstract-signer": "5.7.0",
+            "@ethersproject/address": "5.7.0",
+            "@ethersproject/base64": "5.7.0",
+            "@ethersproject/basex": "5.7.0",
+            "@ethersproject/bignumber": "5.7.0",
+            "@ethersproject/bytes": "5.7.0",
+            "@ethersproject/constants": "5.7.0",
+            "@ethersproject/contracts": "5.7.0",
+            "@ethersproject/hash": "5.7.0",
+            "@ethersproject/hdnode": "5.7.0",
+            "@ethersproject/json-wallets": "5.7.0",
+            "@ethersproject/keccak256": "5.7.0",
+            "@ethersproject/logger": "5.7.0",
+            "@ethersproject/networks": "5.7.1",
+            "@ethersproject/pbkdf2": "5.7.0",
+            "@ethersproject/properties": "5.7.0",
+            "@ethersproject/providers": "5.7.2",
+            "@ethersproject/random": "5.7.0",
+            "@ethersproject/rlp": "5.7.0",
+            "@ethersproject/sha2": "5.7.0",
+            "@ethersproject/signing-key": "5.7.0",
+            "@ethersproject/solidity": "5.7.0",
+            "@ethersproject/strings": "5.7.0",
+            "@ethersproject/transactions": "5.7.0",
+            "@ethersproject/units": "5.7.0",
+            "@ethersproject/wallet": "5.7.0",
+            "@ethersproject/web": "5.7.1",
+            "@ethersproject/wordlists": "5.7.0"
+          }
+        }
       }
     },
     "@xtuc/ieee754": {
@@ -48874,40 +48976,40 @@
       }
     },
     "ethers": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/ethers/-/ethers-5.7.2.tgz",
-      "integrity": "sha512-wswUsmWo1aOK8rR7DIKiWSw9DbLWe6x98Jrn8wcTflTVvaXhAMaB5zGAXy0GYQEQp9iO1iSHWVyARQm11zUtyg==",
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/ethers/-/ethers-6.10.0.tgz",
+      "integrity": "sha512-nMNwYHzs6V1FR3Y4cdfxSQmNgZsRj1RiTU25JwvnJLmyzw9z3SKxNc2XKDuiXXo/v9ds5Mp9m6HBabgYQQ26tA==",
       "requires": {
-        "@ethersproject/abi": "5.7.0",
-        "@ethersproject/abstract-provider": "5.7.0",
-        "@ethersproject/abstract-signer": "5.7.0",
-        "@ethersproject/address": "5.7.0",
-        "@ethersproject/base64": "5.7.0",
-        "@ethersproject/basex": "5.7.0",
-        "@ethersproject/bignumber": "5.7.0",
-        "@ethersproject/bytes": "5.7.0",
-        "@ethersproject/constants": "5.7.0",
-        "@ethersproject/contracts": "5.7.0",
-        "@ethersproject/hash": "5.7.0",
-        "@ethersproject/hdnode": "5.7.0",
-        "@ethersproject/json-wallets": "5.7.0",
-        "@ethersproject/keccak256": "5.7.0",
-        "@ethersproject/logger": "5.7.0",
-        "@ethersproject/networks": "5.7.1",
-        "@ethersproject/pbkdf2": "5.7.0",
-        "@ethersproject/properties": "5.7.0",
-        "@ethersproject/providers": "5.7.2",
-        "@ethersproject/random": "5.7.0",
-        "@ethersproject/rlp": "5.7.0",
-        "@ethersproject/sha2": "5.7.0",
-        "@ethersproject/signing-key": "5.7.0",
-        "@ethersproject/solidity": "5.7.0",
-        "@ethersproject/strings": "5.7.0",
-        "@ethersproject/transactions": "5.7.0",
-        "@ethersproject/units": "5.7.0",
-        "@ethersproject/wallet": "5.7.0",
-        "@ethersproject/web": "5.7.1",
-        "@ethersproject/wordlists": "5.7.0"
+        "@adraffy/ens-normalize": "1.10.0",
+        "@noble/curves": "1.2.0",
+        "@noble/hashes": "1.3.2",
+        "@types/node": "18.15.13",
+        "aes-js": "4.0.0-beta.5",
+        "tslib": "2.4.0",
+        "ws": "8.5.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "18.15.13",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.13.tgz",
+          "integrity": "sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q=="
+        },
+        "aes-js": {
+          "version": "4.0.0-beta.5",
+          "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-4.0.0-beta.5.tgz",
+          "integrity": "sha512-G965FqalsNyrPqgEGON7nIx1e/OVENSgiEIzyC63haUMuvNnwIgIjMs52hlTCKhkBny7A2ORNlfY9Zu+jmGk1Q=="
+        },
+        "tslib": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+        },
+        "ws": {
+          "version": "8.5.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
+          "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
+          "requires": {}
+        }
       }
     },
     "ethjs-util": {
diff --git a/package.json b/package.json
index 4d2f75d4..1f0ccfcb 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "cypress": "cypress run",
     "fmt:check": "prettier -c --ignore-path .gitignore --ignore-path .prettierignore .",
     "fmt:fix": "prettier -w --ignore-path .gitignore --ignore-path .prettierignore .",
-    "e2e:headless": "start-server-and-test dev http://localhost:5173 cypress",
+    "e2e:headless": "start-server-and-test dev http://localhost:5177 cypress",
     "test": "vitest run",
     "storybook": "storybook dev",
     "build-storybook": "build-storybook",
@@ -47,6 +47,7 @@
     "date-fns": "^2.29.3",
     "dexie": "^3.2.4",
     "emojibase": "^6.1.0",
+    "ethers": "^6.10.0",
     "i18next": "^22.4.13",
     "i18next-browser-languagedetector": "^7.0.1",
     "i18next-http-backend": "^2.2.0",
diff --git a/src/controllers/ConversationListController.tsx b/src/controllers/ConversationListController.tsx
index 30643741..d2646b84 100644
--- a/src/controllers/ConversationListController.tsx
+++ b/src/controllers/ConversationListController.tsx
@@ -1,5 +1,12 @@
-import { useEffect, useMemo } from "react";
-import { useConsent, useDb } from "@xmtp/react-sdk";
+import { useEffect, useMemo, useState } from "react";
+import {
+  getLastMessage,
+  getMessageByXmtpID,
+  useClient,
+  useConsent,
+  useDb,
+  useMessages,
+} from "@xmtp/react-sdk";
 import type { ActiveTab } from "../store/xmtp";
 import { useXmtpStore } from "../store/xmtp";
 import useListConversations from "../hooks/useListConversations";
@@ -7,6 +14,7 @@ import { ConversationList } from "../component-library/components/ConversationLi
 import { MessagePreviewCardController } from "./MessagePreviewCardController";
 import useStreamAllMessages from "../hooks/useStreamAllMessages";
 import { updateConversationIdentities } from "../helpers/conversation";
+import { useWalletClient } from "wagmi";
 
 type ConversationListControllerProps = {
   setStartedFirstMessage: (startedFirstMessage: boolean) => void;
@@ -25,8 +33,13 @@ export const ConversationListController = ({
   const { isAllowed, isDenied } = useConsent();
 
   const { db } = useDb();
+  const [messages, setMessages] = useState([]);
+  const messagesDb = db.table("messages");
+
   useStreamAllMessages();
+  const { client: walletAddress } = useClient();
   const recipientInput = useXmtpStore((s) => s.recipientInput);
+
   const activeTab = useXmtpStore((s) => s.activeTab);
 
   // when the conversations are loaded, update their identities
@@ -57,25 +70,65 @@ export const ConversationListController = ({
     return convos;
   }, [conversations, isAllowed, isDenied]);
 
-  const messagesToPass = useMemo(
-    () =>
-      filteredConversations.filter((item: NodeWithConsent) => {
-        if (!isLoading && activeTab === "messages") {
-          return item.props.tab === "messages";
+  let isFilterLoading = false;
+
+  useEffect(() => {
+    // Fetch messages asynchronously
+    const fetchMessages = async () =>
+      messagesDb
+        .where("senderAddress")
+        .equals(walletAddress?.address)
+        .toArray()
+        .then((messages) => {
+          // Process your messages here
+          setMessages(messages);
+        })
+        .catch((error) => {
+          console.error("Error querying messages:", error);
+        });
+
+    void fetchMessages();
+  }, [filteredConversations, messagesDb, walletAddress?.address]);
+
+  const messagesToPass = useMemo(() => {
+    isFilterLoading = true;
+    const sortedConvos = filteredConversations.filter(
+      (item: NodeWithConsent) => {
+        console.log("MESSAGES", messages);
+        const hasSentMessages = messages.find(
+          (message) => message?.conversationTopic === item.props.convo.topic,
+        );
+        if (activeTab === "messages") {
+          // Still want to keep blocked in blocked, even if those still have messages
+          return (
+            item.props.tab === "messages" ||
+            (item.props.tab === "requests" && hasSentMessages)
+          );
         }
-        if (!isLoading && activeTab === "blocked") {
+        if (activeTab === "blocked") {
           return item.props.tab === "blocked";
         }
+        // Find the sent messages in this conversation
+
         return item.props.tab === "requests";
-      }),
-    [filteredConversations, isLoading, activeTab],
-  );
+      },
+    );
+    isFilterLoading = false;
+    return sortedConvos;
+  }, [
+    filteredConversations,
+    isLoading,
+    activeTab,
+    walletAddress,
+    db,
+    isFilterLoading,
+  ]);
 
   return (
     <ConversationList
       hasRecipientEnteredValue={!!recipientInput}
       setStartedFirstMessage={() => setStartedFirstMessage(true)}
-      isLoading={isLoading}
+      isLoading={isLoading || isFilterLoading}
       messages={messagesToPass}
       activeTab={activeTab}
     />

From cbc60c39246d34f4cf79dfd301b71f3690926f15 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Mon, 22 Jan 2024 11:23:04 -0800
Subject: [PATCH 13/21] updated consent flow

---
 .../components/AddressInput/AddressInput.tsx  | 23 ++---
 .../FullConversation/FullConversation.tsx     |  7 +-
 src/controllers/AddressInputController.tsx    | 10 +-
 .../ConversationListController.tsx            | 98 +++++++++----------
 src/store/xmtp.tsx                            |  5 +
 5 files changed, 75 insertions(+), 68 deletions(-)

diff --git a/src/component-library/components/AddressInput/AddressInput.tsx b/src/component-library/components/AddressInput/AddressInput.tsx
index 954c146d..5e3076f9 100644
--- a/src/component-library/components/AddressInput/AddressInput.tsx
+++ b/src/component-library/components/AddressInput/AddressInput.tsx
@@ -1,7 +1,4 @@
-import {
-  ChevronLeftIcon,
-  InformationCircleIcon,
-} from "@heroicons/react/outline";
+import { ChevronLeftIcon, XCircleIcon } from "@heroicons/react/outline";
 import { useTranslation } from "react-i18next";
 import { Avatar } from "../Avatar/Avatar";
 import { classNames } from "../../../helpers";
@@ -41,10 +38,6 @@ interface AddressInputProps {
    * Upon submit, is something loading?
    */
   isLoading?: boolean;
-  /**
-   * Is there a tooltip click event that needs to be handled?
-   */
-  onTooltipClick?: () => void;
   /**
    * Input Value
    */
@@ -53,6 +46,10 @@ interface AddressInputProps {
    * Is there a left icon click event that needs to be handled?
    */
   onLeftIconClick?: () => void;
+  /**
+   * Is there a right icon click event that needs to be handled?
+   */
+  onRightIconClick?: () => void;
 }
 
 export const AddressInput = ({
@@ -61,9 +58,9 @@ export const AddressInput = ({
   avatarUrlProps,
   onChange,
   isError,
-  onTooltipClick,
   value,
   onLeftIconClick,
+  onRightIconClick,
 }: AddressInputProps) => {
   const { t } = useTranslation();
   const subtextColor = isError ? "text-red-600" : "text-gray-500";
@@ -127,8 +124,12 @@ export const AddressInput = ({
           </div>
         </div>
       </form>
-      {onTooltipClick && (
-        <InformationCircleIcon onClick={onTooltipClick} height="24" />
+      {onRightIconClick && (
+        <XCircleIcon
+          onClick={onRightIconClick}
+          height="24"
+          className="text-red-600 cursor-pointer"
+        />
       )}
     </div>
   );
diff --git a/src/component-library/components/FullConversation/FullConversation.tsx b/src/component-library/components/FullConversation/FullConversation.tsx
index 96effeb7..3876988a 100644
--- a/src/component-library/components/FullConversation/FullConversation.tsx
+++ b/src/component-library/components/FullConversation/FullConversation.tsx
@@ -35,7 +35,8 @@ const AcceptOrDeny = ({ address }: { address: string }) => {
   const { t } = useTranslation();
   const { allow, deny } = useConsent();
   const activeTab = useXmtpStore((s) => s.activeTab);
-  const setActiveTab = useXmtpStore((s) => s.setActiveTab);
+  const changedConsentCount = useXmtpStore((s) => s.changedConsentCount);
+  const setChangedConsentCount = useXmtpStore((s) => s.setChangedConsentCount);
 
   const [modalOpen, setModalOpen] = useState(true);
 
@@ -51,8 +52,8 @@ const AcceptOrDeny = ({ address }: { address: string }) => {
           className="text-indigo-600 flex w-full justify-center border border-2 border-indigo-600 rounded-md p-2 hover:bg-indigo-600 hover:text-white"
           onClick={() => {
             void allow([address]);
-            setActiveTab("messages");
             setModalOpen(false);
+            setChangedConsentCount(changedConsentCount + 1);
           }}>
           {t("consent.accept")}
         </button>
@@ -61,8 +62,8 @@ const AcceptOrDeny = ({ address }: { address: string }) => {
           className="text-red-600 flex w-full justify-center border border-2 border-red-600 rounded-md p-2 hover:bg-red-600 hover:text-white"
           onClick={() => {
             void deny([address]);
-            setActiveTab("blocked");
             setModalOpen(false);
+            setChangedConsentCount(changedConsentCount + 1);
           }}>
           {t("consent.block")}
         </button>
diff --git a/src/controllers/AddressInputController.tsx b/src/controllers/AddressInputController.tsx
index 133e2a1e..97e9c141 100644
--- a/src/controllers/AddressInputController.tsx
+++ b/src/controllers/AddressInputController.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useConversation } from "@xmtp/react-sdk";
+import { useConversation, useConsent } from "@xmtp/react-sdk";
 import { AddressInput } from "../component-library/components/AddressInput/AddressInput";
 import { getRecipientInputSubtext, shortAddress } from "../helpers";
 import useWindowSize from "../hooks/useWindowSize";
@@ -20,7 +20,11 @@ export const AddressInputController = () => {
   const setRecipientInput = useXmtpStore((s) => s.setRecipientInput);
   const setStartedFirstMessage = useXmtpStore((s) => s.setStartedFirstMessage);
   const setConversationTopic = useXmtpStore((s) => s.setConversationTopic);
+  const changedConsentCount = useXmtpStore((s) => s.changedConsentCount);
+  const setChangedConsentCount = useXmtpStore((s) => s.setChangedConsentCount);
+
   const { getCachedByPeerAddress, getCachedByTopic } = useConversation();
+  const { deny } = useConsent();
 
   // manage address input state
   useAddressInput();
@@ -100,6 +104,10 @@ export const AddressInputController = () => {
         setStartedFirstMessage(false);
         setConversationTopic("");
       }}
+      onRightIconClick={() => {
+        void deny([recipientAddress]);
+        setChangedConsentCount(changedConsentCount + 1);
+      }}
     />
   );
 };
diff --git a/src/controllers/ConversationListController.tsx b/src/controllers/ConversationListController.tsx
index d2646b84..52e78459 100644
--- a/src/controllers/ConversationListController.tsx
+++ b/src/controllers/ConversationListController.tsx
@@ -1,12 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
-import {
-  getLastMessage,
-  getMessageByXmtpID,
-  useClient,
-  useConsent,
-  useDb,
-  useMessages,
-} from "@xmtp/react-sdk";
+import { useClient, useConsent, useDb } from "@xmtp/react-sdk";
+import type { CachedConversation, CachedMessage } from "@xmtp/react-sdk";
 import type { ActiveTab } from "../store/xmtp";
 import { useXmtpStore } from "../store/xmtp";
 import useListConversations from "../hooks/useListConversations";
@@ -14,7 +8,6 @@ import { ConversationList } from "../component-library/components/ConversationLi
 import { MessagePreviewCardController } from "./MessagePreviewCardController";
 import useStreamAllMessages from "../hooks/useStreamAllMessages";
 import { updateConversationIdentities } from "../helpers/conversation";
-import { useWalletClient } from "wagmi";
 
 type ConversationListControllerProps = {
   setStartedFirstMessage: (startedFirstMessage: boolean) => void;
@@ -22,6 +15,7 @@ type ConversationListControllerProps = {
 
 type ConsentProps = {
   tab: ActiveTab;
+  convo: CachedConversation;
 };
 
 type NodeWithConsent = React.ReactElement<ConsentProps>;
@@ -33,12 +27,13 @@ export const ConversationListController = ({
   const { isAllowed, isDenied } = useConsent();
 
   const { db } = useDb();
-  const [messages, setMessages] = useState([]);
+  const [messages, setMessages] = useState<CachedMessage[]>([]);
   const messagesDb = db.table("messages");
 
   useStreamAllMessages();
   const { client: walletAddress } = useClient();
   const recipientInput = useXmtpStore((s) => s.recipientInput);
+  const changedConsentCount = useXmtpStore((s) => s.changedConsentCount);
 
   const activeTab = useXmtpStore((s) => s.activeTab);
 
@@ -51,84 +46,81 @@ export const ConversationListController = ({
     };
     void runUpdate();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoaded, activeTab]);
-
-  const filteredConversations = useMemo(() => {
-    const convos = conversations.map((conversation) => (
-      <MessagePreviewCardController
-        key={conversation.topic}
-        convo={conversation}
-        tab={
-          isAllowed(conversation.peerAddress)
-            ? "messages"
-            : isDenied(conversation.peerAddress)
-            ? "blocked"
-            : "requests"
-        }
-      />
-    ));
-    return convos;
-  }, [conversations, isAllowed, isDenied]);
-
-  let isFilterLoading = false;
+  }, [isLoaded, activeTab, changedConsentCount]);
 
   useEffect(() => {
-    // Fetch messages asynchronously
+    // This may make more sense to come from the React SDK, but we're pulling from here for now
     const fetchMessages = async () =>
       messagesDb
         .where("senderAddress")
-        .equals(walletAddress?.address)
+        .equals(walletAddress?.address as string)
         .toArray()
-        .then((messages) => {
-          // Process your messages here
-          setMessages(messages);
+        .then((dbMessages: CachedMessage[]) => {
+          setMessages(dbMessages);
         })
-        .catch((error) => {
+        .catch((error: Error) => {
           console.error("Error querying messages:", error);
         });
 
     void fetchMessages();
-  }, [filteredConversations, messagesDb, walletAddress?.address]);
+  }, [conversations.length, messagesDb, walletAddress?.address]);
 
   const messagesToPass = useMemo(() => {
-    isFilterLoading = true;
-    const sortedConvos = filteredConversations.filter(
+    const conversationsWithTab = conversations.map(
+      (conversation: CachedConversation) => {
+        const tab = isAllowed(conversation.peerAddress)
+          ? "messages"
+          : isDenied(conversation.peerAddress)
+          ? "blocked"
+          : "requests";
+        return (
+          <MessagePreviewCardController
+            key={conversation.topic}
+            convo={conversation}
+            tab={tab}
+          />
+        );
+      },
+    );
+    const sortedConvos = conversationsWithTab.filter(
       (item: NodeWithConsent) => {
-        console.log("MESSAGES", messages);
         const hasSentMessages = messages.find(
           (message) => message?.conversationTopic === item.props.convo.topic,
         );
+        const isAddressBlocked = isDenied(item.props.convo.peerAddress);
+        const isAddressAllowed = isAllowed(item.props.convo.peerAddress);
+
         if (activeTab === "messages") {
           // Still want to keep blocked in blocked, even if those still have messages
-          return (
-            item.props.tab === "messages" ||
-            (item.props.tab === "requests" && hasSentMessages)
-          );
+          return isAddressAllowed || (!isAddressBlocked && hasSentMessages);
         }
         if (activeTab === "blocked") {
-          return item.props.tab === "blocked";
+          return isAddressBlocked;
         }
-        // Find the sent messages in this conversation
-
-        return item.props.tab === "requests";
+        if (activeTab === "requests") {
+          return !hasSentMessages && !isAddressBlocked && !isAddressAllowed;
+        }
+        return null;
       },
     );
-    isFilterLoading = false;
     return sortedConvos;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    filteredConversations,
+    conversations,
+    messages,
     isLoading,
-    activeTab,
     walletAddress,
     db,
-    isFilterLoading,
+    changedConsentCount,
+    isAllowed,
+    isDenied,
   ]);
 
   return (
     <ConversationList
       hasRecipientEnteredValue={!!recipientInput}
       setStartedFirstMessage={() => setStartedFirstMessage(true)}
-      isLoading={isLoading || isFilterLoading}
+      isLoading={isLoading}
       messages={messagesToPass}
       activeTab={activeTab}
     />
diff --git a/src/store/xmtp.tsx b/src/store/xmtp.tsx
index cf9f8bcb..608d84b2 100644
--- a/src/store/xmtp.tsx
+++ b/src/store/xmtp.tsx
@@ -39,6 +39,8 @@ interface XmtpState {
   setActiveMessage: (message?: CachedMessageWithId) => void;
   activeTab: ActiveTab;
   setActiveTab: (activeTab: ActiveTab) => void;
+  changedConsentCount: number;
+  setChangedConsentCount: (changedConsentCount: number) => void;
 }
 
 export const useXmtpStore = create<XmtpState>((set) => ({
@@ -93,4 +95,7 @@ export const useXmtpStore = create<XmtpState>((set) => ({
   setActiveMessage: (activeMessage) => set(() => ({ activeMessage })),
   activeTab: "messages",
   setActiveTab: (activeTab) => set(() => ({ activeTab })),
+  changedConsentCount: 0,
+  setChangedConsentCount: (changedConsentCount) =>
+    set(() => ({ changedConsentCount })),
 }));

From 53b294a50ef379b86f4f8ae47751d899bb8e474b Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Mon, 22 Jan 2024 11:24:54 -0800
Subject: [PATCH 14/21] revert package json changes

---
 package-lock.json | 100 ----------------------------------------------
 package.json      |   3 +-
 2 files changed, 1 insertion(+), 102 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 65a0390a..ccca33b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,6 @@
         "date-fns": "^2.29.3",
         "dexie": "^3.2.4",
         "emojibase": "^6.1.0",
-        "ethers": "^6.10.0",
         "i18next": "^22.4.13",
         "i18next-browser-languagedetector": "^7.0.1",
         "i18next-http-backend": "^2.2.0",
@@ -20691,68 +20690,6 @@
         "rlp": "^2.2.3"
       }
     },
-    "node_modules/ethers": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/ethers/-/ethers-6.10.0.tgz",
-      "integrity": "sha512-nMNwYHzs6V1FR3Y4cdfxSQmNgZsRj1RiTU25JwvnJLmyzw9z3SKxNc2XKDuiXXo/v9ds5Mp9m6HBabgYQQ26tA==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/ethers-io/"
-        },
-        {
-          "type": "individual",
-          "url": "https://www.buymeacoffee.com/ricmoo"
-        }
-      ],
-      "dependencies": {
-        "@adraffy/ens-normalize": "1.10.0",
-        "@noble/curves": "1.2.0",
-        "@noble/hashes": "1.3.2",
-        "@types/node": "18.15.13",
-        "aes-js": "4.0.0-beta.5",
-        "tslib": "2.4.0",
-        "ws": "8.5.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/ethers/node_modules/@types/node": {
-      "version": "18.15.13",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.13.tgz",
-      "integrity": "sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q=="
-    },
-    "node_modules/ethers/node_modules/aes-js": {
-      "version": "4.0.0-beta.5",
-      "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-4.0.0-beta.5.tgz",
-      "integrity": "sha512-G965FqalsNyrPqgEGON7nIx1e/OVENSgiEIzyC63haUMuvNnwIgIjMs52hlTCKhkBny7A2ORNlfY9Zu+jmGk1Q=="
-    },
-    "node_modules/ethers/node_modules/tslib": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
-    },
-    "node_modules/ethers/node_modules/ws": {
-      "version": "8.5.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
-      "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/ethjs-util": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/ethjs-util/-/ethjs-util-0.1.6.tgz",
@@ -48975,43 +48912,6 @@
         }
       }
     },
-    "ethers": {
-      "version": "6.10.0",
-      "resolved": "https://registry.npmjs.org/ethers/-/ethers-6.10.0.tgz",
-      "integrity": "sha512-nMNwYHzs6V1FR3Y4cdfxSQmNgZsRj1RiTU25JwvnJLmyzw9z3SKxNc2XKDuiXXo/v9ds5Mp9m6HBabgYQQ26tA==",
-      "requires": {
-        "@adraffy/ens-normalize": "1.10.0",
-        "@noble/curves": "1.2.0",
-        "@noble/hashes": "1.3.2",
-        "@types/node": "18.15.13",
-        "aes-js": "4.0.0-beta.5",
-        "tslib": "2.4.0",
-        "ws": "8.5.0"
-      },
-      "dependencies": {
-        "@types/node": {
-          "version": "18.15.13",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.13.tgz",
-          "integrity": "sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q=="
-        },
-        "aes-js": {
-          "version": "4.0.0-beta.5",
-          "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-4.0.0-beta.5.tgz",
-          "integrity": "sha512-G965FqalsNyrPqgEGON7nIx1e/OVENSgiEIzyC63haUMuvNnwIgIjMs52hlTCKhkBny7A2ORNlfY9Zu+jmGk1Q=="
-        },
-        "tslib": {
-          "version": "2.4.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
-          "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
-        },
-        "ws": {
-          "version": "8.5.0",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
-          "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
-          "requires": {}
-        }
-      }
-    },
     "ethjs-util": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/ethjs-util/-/ethjs-util-0.1.6.tgz",
diff --git a/package.json b/package.json
index 1f0ccfcb..4d2f75d4 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "cypress": "cypress run",
     "fmt:check": "prettier -c --ignore-path .gitignore --ignore-path .prettierignore .",
     "fmt:fix": "prettier -w --ignore-path .gitignore --ignore-path .prettierignore .",
-    "e2e:headless": "start-server-and-test dev http://localhost:5177 cypress",
+    "e2e:headless": "start-server-and-test dev http://localhost:5173 cypress",
     "test": "vitest run",
     "storybook": "storybook dev",
     "build-storybook": "build-storybook",
@@ -47,7 +47,6 @@
     "date-fns": "^2.29.3",
     "dexie": "^3.2.4",
     "emojibase": "^6.1.0",
-    "ethers": "^6.10.0",
     "i18next": "^22.4.13",
     "i18next-browser-languagedetector": "^7.0.1",
     "i18next-http-backend": "^2.2.0",

From a338e397c6949062ecc90d31224dca3c20587a65 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Tue, 23 Jan 2024 08:29:06 -0800
Subject: [PATCH 15/21] comment out code for sent messages

---
 .../ConversationListController.tsx            | 59 ++++++++++---------
 1 file changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/controllers/ConversationListController.tsx b/src/controllers/ConversationListController.tsx
index 52e78459..6a709791 100644
--- a/src/controllers/ConversationListController.tsx
+++ b/src/controllers/ConversationListController.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useState } from "react";
-import { useClient, useConsent, useDb } from "@xmtp/react-sdk";
-import type { CachedConversation, CachedMessage } from "@xmtp/react-sdk";
+import { useEffect, useMemo } from "react";
+import { useClient, useConsent } from "@xmtp/react-sdk";
+import type { CachedConversation } from "@xmtp/react-sdk";
 import type { ActiveTab } from "../store/xmtp";
 import { useXmtpStore } from "../store/xmtp";
 import useListConversations from "../hooks/useListConversations";
@@ -26,9 +26,9 @@ export const ConversationListController = ({
   const { isLoaded, isLoading, conversations } = useListConversations();
   const { isAllowed, isDenied } = useConsent();
 
-  const { db } = useDb();
-  const [messages, setMessages] = useState<CachedMessage[]>([]);
-  const messagesDb = db.table("messages");
+  // const { db } = useDb();
+  // const [messages, setMessages] = useState<CachedMessage[]>([]);
+  // const messagesDb = db.table("messages");
 
   useStreamAllMessages();
   const { client: walletAddress } = useClient();
@@ -48,22 +48,23 @@ export const ConversationListController = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoaded, activeTab, changedConsentCount]);
 
-  useEffect(() => {
-    // This may make more sense to come from the React SDK, but we're pulling from here for now
-    const fetchMessages = async () =>
-      messagesDb
-        .where("senderAddress")
-        .equals(walletAddress?.address as string)
-        .toArray()
-        .then((dbMessages: CachedMessage[]) => {
-          setMessages(dbMessages);
-        })
-        .catch((error: Error) => {
-          console.error("Error querying messages:", error);
-        });
+  // To-do: remove if not needed after consent goes out
+  // useEffect(() => {
+  //   // This may make more sense to come from the React SDK, but we're pulling from here for now
+  //   const fetchMessages = async () =>
+  //     messagesDb
+  //       .where("senderAddress")
+  //       .equals(walletAddress?.address as string)
+  //       .toArray()
+  //       .then((dbMessages: CachedMessage[]) => {
+  //         setMessages(dbMessages);
+  //       })
+  //       .catch((error: Error) => {
+  //         console.error("Error querying messages:", error);
+  //       });
 
-    void fetchMessages();
-  }, [conversations.length, messagesDb, walletAddress?.address]);
+  //   void fetchMessages();
+  // }, [conversations.length, messagesDb, walletAddress?.address]);
 
   const messagesToPass = useMemo(() => {
     const conversationsWithTab = conversations.map(
@@ -84,21 +85,21 @@ export const ConversationListController = ({
     );
     const sortedConvos = conversationsWithTab.filter(
       (item: NodeWithConsent) => {
-        const hasSentMessages = messages.find(
-          (message) => message?.conversationTopic === item.props.convo.topic,
-        );
+        // To-do: remove commented out code in this block if not needed after consent goes out
+        // const hasSentMessages = messages.find(
+        //   (message) => message?.conversationTopic === item.props.convo.topic,
+        // );
         const isAddressBlocked = isDenied(item.props.convo.peerAddress);
         const isAddressAllowed = isAllowed(item.props.convo.peerAddress);
 
         if (activeTab === "messages") {
-          // Still want to keep blocked in blocked, even if those still have messages
-          return isAddressAllowed || (!isAddressBlocked && hasSentMessages);
+          return isAddressAllowed;
         }
         if (activeTab === "blocked") {
           return isAddressBlocked;
         }
         if (activeTab === "requests") {
-          return !hasSentMessages && !isAddressBlocked && !isAddressAllowed;
+          return !isAddressBlocked && !isAddressAllowed;
         }
         return null;
       },
@@ -107,10 +108,10 @@ export const ConversationListController = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     conversations,
-    messages,
+    // messages,
     isLoading,
     walletAddress,
-    db,
+    // db,
     changedConsentCount,
     isAllowed,
     isDenied,

From 7f6d4245c066eca25796cbbefc23adb0f67ba784 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Tue, 23 Jan 2024 08:33:23 -0800
Subject: [PATCH 16/21] added db hook

---
 src/controllers/ConversationListController.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/controllers/ConversationListController.tsx b/src/controllers/ConversationListController.tsx
index 6a709791..d5547fb2 100644
--- a/src/controllers/ConversationListController.tsx
+++ b/src/controllers/ConversationListController.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from "react";
-import { useClient, useConsent } from "@xmtp/react-sdk";
+import { useClient, useConsent, useDb } from "@xmtp/react-sdk";
 import type { CachedConversation } from "@xmtp/react-sdk";
 import type { ActiveTab } from "../store/xmtp";
 import { useXmtpStore } from "../store/xmtp";
@@ -26,7 +26,7 @@ export const ConversationListController = ({
   const { isLoaded, isLoading, conversations } = useListConversations();
   const { isAllowed, isDenied } = useConsent();
 
-  // const { db } = useDb();
+  const { db } = useDb();
   // const [messages, setMessages] = useState<CachedMessage[]>([]);
   // const messagesDb = db.table("messages");
 

From c5c2f81163e568f9507336de2bf324cca5af9785 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Fri, 2 Feb 2024 17:02:14 -0800
Subject: [PATCH 17/21] updated frames get/post logic

---
 package-lock.json                             |  44 ++++++
 package.json                                  |   1 +
 .../components/Frame/Frame.tsx                |  45 +++++++
 src/controllers/FullMessageController.tsx     | 126 +++++++++++++++---
 src/helpers/getFrameInfo.ts                   |  34 +++++
 5 files changed, 234 insertions(+), 16 deletions(-)
 create mode 100644 src/component-library/components/Frame/Frame.tsx
 create mode 100644 src/helpers/getFrameInfo.ts

diff --git a/package-lock.json b/package-lock.json
index ccca33b5..404ca1bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "@xmtp/content-type-remote-attachment": "^1.1.4",
         "@xmtp/content-type-reply": "^1.1.5",
         "@xmtp/experimental-content-type-screen-effect": "^1.0.2",
+        "@xmtp/frames-client": "0.1.4",
         "@xmtp/react-sdk": "^4.0.0",
         "buffer": "^6.0.3",
         "date-fns": "^2.29.3",
@@ -14936,6 +14937,28 @@
         "@xmtp/xmtp-js": "^11.1.1"
       }
     },
+    "node_modules/@xmtp/frames-client": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@xmtp/frames-client/-/frames-client-0.1.4.tgz",
+      "integrity": "sha512-MVGkkYTrO6QZ/jjVkS/XFxRfdb+cGy0RaNN42mN6LnRzJ1mha9So8jaIhcnO17CXiibqZBEeA+JU10Tr1q0iGg==",
+      "dependencies": {
+        "@xmtp/proto": "3.41.0-beta.2"
+      },
+      "peerDependencies": {
+        "@xmtp/xmtp-js": ">9.3.1"
+      }
+    },
+    "node_modules/@xmtp/frames-client/node_modules/@xmtp/proto": {
+      "version": "3.41.0-beta.2",
+      "resolved": "https://registry.npmjs.org/@xmtp/proto/-/proto-3.41.0-beta.2.tgz",
+      "integrity": "sha512-oRhyjnm7M4tnMZSpMMQQGs9VQbp3lndj/AUEJYcB3fzIgzHpwttfnHy5bMliR9ktv0B2EaldyLOlWRX/RroTBA==",
+      "dependencies": {
+        "long": "^5.2.0",
+        "protobufjs": "^7.0.0",
+        "rxjs": "^7.8.0",
+        "undici": "^5.8.1"
+      }
+    },
     "node_modules/@xmtp/proto": {
       "version": "3.36.0",
       "resolved": "https://registry.npmjs.org/@xmtp/proto/-/proto-3.36.0.tgz",
@@ -44435,6 +44458,27 @@
         "@xmtp/xmtp-js": "^11.1.2"
       }
     },
+    "@xmtp/frames-client": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@xmtp/frames-client/-/frames-client-0.1.4.tgz",
+      "integrity": "sha512-MVGkkYTrO6QZ/jjVkS/XFxRfdb+cGy0RaNN42mN6LnRzJ1mha9So8jaIhcnO17CXiibqZBEeA+JU10Tr1q0iGg==",
+      "requires": {
+        "@xmtp/proto": "3.41.0-beta.2"
+      },
+      "dependencies": {
+        "@xmtp/proto": {
+          "version": "3.41.0-beta.2",
+          "resolved": "https://registry.npmjs.org/@xmtp/proto/-/proto-3.41.0-beta.2.tgz",
+          "integrity": "sha512-oRhyjnm7M4tnMZSpMMQQGs9VQbp3lndj/AUEJYcB3fzIgzHpwttfnHy5bMliR9ktv0B2EaldyLOlWRX/RroTBA==",
+          "requires": {
+            "long": "^5.2.0",
+            "protobufjs": "^7.0.0",
+            "rxjs": "^7.8.0",
+            "undici": "^5.8.1"
+          }
+        }
+      }
+    },
     "@xmtp/proto": {
       "version": "3.36.0",
       "resolved": "https://registry.npmjs.org/@xmtp/proto/-/proto-3.36.0.tgz",
diff --git a/package.json b/package.json
index 4d2f75d4..e1f206b5 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "@xmtp/content-type-remote-attachment": "^1.1.4",
     "@xmtp/content-type-reply": "^1.1.5",
     "@xmtp/experimental-content-type-screen-effect": "^1.0.2",
+    "@xmtp/frames-client": "0.1.4",
     "@xmtp/react-sdk": "^4.0.0",
     "buffer": "^6.0.3",
     "date-fns": "^2.29.3",
diff --git a/src/component-library/components/Frame/Frame.tsx b/src/component-library/components/Frame/Frame.tsx
new file mode 100644
index 00000000..ca5fbccb
--- /dev/null
+++ b/src/component-library/components/Frame/Frame.tsx
@@ -0,0 +1,45 @@
+import { GhostButton } from "../GhostButton/GhostButton";
+
+type FrameProps = {
+  info: {
+    image: string;
+    title: string;
+    buttons: string[];
+    postUrl: string;
+  };
+  handleClick: (buttonNumber: number) => Promise<void>;
+  frameButtonUpdating: number;
+};
+
+export const Frame = ({
+  info,
+  handleClick,
+  frameButtonUpdating,
+}: FrameProps) => {
+  const { buttons, image, title } = info;
+
+  return (
+    <>
+      <img src={image} className="max-h-80 rounded-lg px-8" alt={title} />
+      <div className="flex flex-col">
+        {buttons?.map((button, index) => {
+          if (!button) {
+            return null;
+          }
+          const handlePress = () => {
+            void handleClick(index + 1);
+          };
+          return (
+            <GhostButton
+              key={button}
+              label={button}
+              onClick={handlePress}
+              isLoading={frameButtonUpdating === index + 1}
+              isDisabled={frameButtonUpdating > 0}
+            />
+          );
+        })}
+      </div>
+    </>
+  );
+};
diff --git a/src/controllers/FullMessageController.tsx b/src/controllers/FullMessageController.tsx
index 4874dd9b..95da68b5 100644
--- a/src/controllers/FullMessageController.tsx
+++ b/src/controllers/FullMessageController.tsx
@@ -1,9 +1,16 @@
 import type { CachedConversation, CachedMessageWithId } from "@xmtp/react-sdk";
-import { useClient } from "@xmtp/react-sdk";
+import { Client, useClient } from "@xmtp/react-sdk";
+import { FramesClient } from "@xmtp/frames-client";
+import { useEffect, useState } from "react";
+import type { PrivateKeyAccount, Transport, WalletClient } from "viem";
+import type { mainnet } from "wagmi";
+import { useWalletClient } from "wagmi";
 import { FullMessage } from "../component-library/components/FullMessage/FullMessage";
-import { shortAddress } from "../helpers";
+import { classNames, shortAddress } from "../helpers";
 import MessageContentController from "./MessageContentController";
 import { useXmtpStore } from "../store/xmtp";
+import { Frame } from "../component-library/components/Frame/Frame";
+import { getFrameInfo } from "../helpers/getFrameInfo";
 
 interface FullMessageControllerProps {
   message: CachedMessageWithId;
@@ -11,29 +18,116 @@ interface FullMessageControllerProps {
   isReply?: boolean;
 }
 
+export type FrameInfo = {
+  image: string;
+  title: string;
+  buttons: string[];
+  postUrl: string;
+};
+
 export const FullMessageController = ({
   message,
   conversation,
   isReply,
 }: FullMessageControllerProps) => {
   const { client } = useClient();
+  const { data: walletClient } = useWalletClient();
+
+  const conversationTopic = useXmtpStore((state) => state.conversationTopic);
+
+  const [frameInfo, setFrameInfo] = useState<FrameInfo | undefined>(undefined);
+  const [frameButtonUpdating, setFrameButtonUpdating] = useState<number>(0);
+
+  const handleFrameButtonClick = async (buttonNumber: number) => {
+    if (!frameInfo) {
+      return;
+    }
+    const url = frameInfo.image;
+    const messageId = String(message.id);
+
+    setFrameButtonUpdating(buttonNumber);
+
+    const xmtpClient = await Client.create(
+      walletClient as WalletClient<
+        Transport,
+        typeof mainnet,
+        PrivateKeyAccount
+      >,
+    );
+    const framesClient = new FramesClient(xmtpClient);
+
+    const payload = await framesClient.signFrameAction(
+      url,
+      buttonNumber,
+      conversationTopic as string,
+      messageId,
+    );
+    const updatedFrameMetadata = await FramesClient.postToFrame(
+      frameInfo.postUrl,
+      payload,
+    );
+    const updatedFrameInfo = getFrameInfo(updatedFrameMetadata.extractedTags);
+
+    setFrameInfo(updatedFrameInfo);
+    setFrameButtonUpdating(0);
+  };
+
+  useEffect(() => {
+    if (typeof message.content === "string") {
+      const words = message.content?.split(/(\r?\n|\s+)/);
+      const urlRegex =
+        /^(http[s]?:\/\/)?([a-z0-9.-]+\.[a-z0-9]{1,}\/.*|[a-z0-9.-]+\.[a-z0-9]{1,})$/i;
+
+      void Promise.all(
+        words.map(async (word) => {
+          const isUrl = !!word.match(urlRegex)?.[0];
+
+          if (isUrl) {
+            const metadata = await FramesClient.readMetadata(word);
+            if (metadata) {
+              const info = getFrameInfo(metadata.extractedTags);
+              setFrameInfo(info);
+            }
+          }
+        }),
+      );
+    }
+  }, [message?.content]);
+
   const recipientName = useXmtpStore((s) => s.recipientName);
+  const alignmentStyles =
+    client?.address === message.senderAddress
+      ? "items-end justify-end"
+      : "items-start justify-start";
 
   return (
-    <FullMessage
-      isReply={isReply}
-      message={message}
-      conversation={conversation}
-      key={message.xmtpID}
-      from={{
-        displayAddress: recipientName ?? shortAddress(message.senderAddress),
-        isSelf: client?.address === message.senderAddress,
-      }}
-      datetime={message.sentAt}>
-      <MessageContentController
+    <div
+      className={classNames(
+        "flex flex-col w-full px-4 md:px-8",
+        alignmentStyles,
+      )}>
+      <FullMessage
+        isReply={isReply}
         message={message}
-        isSelf={client?.address === message.senderAddress}
-      />
-    </FullMessage>
+        conversation={conversation}
+        key={message.xmtpID}
+        from={{
+          displayAddress: recipientName ?? shortAddress(message.senderAddress),
+          isSelf: client?.address === message.senderAddress,
+        }}
+        datetime={message.sentAt}>
+        <MessageContentController
+          message={message}
+          isSelf={client?.address === message.senderAddress}
+        />
+      </FullMessage>
+      {frameInfo && (
+        <Frame
+          info={frameInfo}
+          handleClick={handleFrameButtonClick}
+          frameButtonUpdating={frameButtonUpdating}
+        />
+      )}
+    </div>
   );
 };
diff --git a/src/helpers/getFrameInfo.ts b/src/helpers/getFrameInfo.ts
new file mode 100644
index 00000000..d09b8d3f
--- /dev/null
+++ b/src/helpers/getFrameInfo.ts
@@ -0,0 +1,34 @@
+const BUTTON_PREFIX = "fc:frame:button:";
+const IMAGE_PREFIX = "fc:frame:image";
+const POST_URL_PREFIX = "fc:frame:post_url";
+const TITLE_PREFIX = "og:title";
+
+export function getFrameInfo(extractedTags: Record<string, string>) {
+  const buttons: string[] = [];
+  let image = "";
+  let postUrl = "";
+  let title = "";
+  for (const key in extractedTags) {
+    if (key) {
+      if (key.startsWith(BUTTON_PREFIX)) {
+        const buttonIndex = parseInt(key.replace(BUTTON_PREFIX, ""), 10);
+        buttons[buttonIndex] = extractedTags[key];
+      }
+      if (key.startsWith(IMAGE_PREFIX)) {
+        image = extractedTags[key];
+      }
+      if (key.startsWith(POST_URL_PREFIX)) {
+        postUrl = extractedTags[key];
+      }
+      if (key.startsWith(TITLE_PREFIX)) {
+        title = extractedTags[key];
+      }
+    }
+  }
+  return {
+    buttons,
+    image,
+    postUrl,
+    title,
+  };
+}

From 0dddce13fb755dc328606ff188c27118c259bb39 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Tue, 6 Feb 2024 08:27:01 -0800
Subject: [PATCH 18/21] bumped sdk version

---
 package-lock.json | 128 +++++++++++++++++++++++++---------------------
 package.json      |   2 +-
 2 files changed, 71 insertions(+), 59 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 404ca1bb..4cfe6c57 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "@xmtp/content-type-reply": "^1.1.5",
         "@xmtp/experimental-content-type-screen-effect": "^1.0.2",
         "@xmtp/frames-client": "0.1.4",
-        "@xmtp/react-sdk": "^4.0.0",
+        "@xmtp/react-sdk": "^5.0.1",
         "buffer": "^6.0.3",
         "date-fns": "^2.29.3",
         "dexie": "^3.2.4",
@@ -14891,9 +14891,9 @@
       }
     },
     "node_modules/@xmtp/content-type-reaction": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@xmtp/content-type-reaction/-/content-type-reaction-1.1.3.tgz",
-      "integrity": "sha512-dGqySD/TwrDkRB5zm46EIS1tViKv0y5urPKy94W93cbcCxFOODRiGPHcyty7ouif/b0CA53NNnG2sjbkxYsLEg==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@xmtp/content-type-reaction/-/content-type-reaction-1.1.5.tgz",
+      "integrity": "sha512-VNC8Y4cnJTnGxqDRWRriG96Ji/6jZnsijKt5+WqHw88jpSWAQU8KDuDNqlDjOgFSdmgSGkTyRTijQeBZVUhIhQ==",
       "dependencies": {
         "@xmtp/xmtp-js": "^11.1.2"
       },
@@ -14902,9 +14902,9 @@
       }
     },
     "node_modules/@xmtp/content-type-remote-attachment": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@xmtp/content-type-remote-attachment/-/content-type-remote-attachment-1.1.4.tgz",
-      "integrity": "sha512-t/ivPqroNYobttxCrJMLOg/b3hAQT0knTw2hio/c5rQ0XyJd9UDP2eDWnmxchlabhdxnnfu9jP9YI05qL7tzWA==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@xmtp/content-type-remote-attachment/-/content-type-remote-attachment-1.1.6.tgz",
+      "integrity": "sha512-QMdCjdgH159ucV7nJ21g5BSgnnooTVLaf0yqC2I3TCWPr3URJpVonoZw87Ht9IDgcHOQdGAbZ+LeL9er0AtnSg==",
       "dependencies": {
         "@noble/secp256k1": "^1.7.1",
         "@xmtp/proto": "^3.29.0",
@@ -14915,9 +14915,9 @@
       }
     },
     "node_modules/@xmtp/content-type-reply": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@xmtp/content-type-reply/-/content-type-reply-1.1.5.tgz",
-      "integrity": "sha512-ug2oBAwgmB/cRwIKjrsRFApAkzQbTJ6MPEVKmRVuXNjZa1/Hzl7VHEpKfiZdJ79PZrHZpruhNnU19bDyViyuTw==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@xmtp/content-type-reply/-/content-type-reply-1.1.7.tgz",
+      "integrity": "sha512-1qGIJhr5udHlIjLDDjwG/bcTeHRVs4Doe53VhhW+1Pyb7eV9NtI5WGvxz1tNQ0wdBWB3vVx5sc9o+zHn7wOxAQ==",
       "dependencies": {
         "@xmtp/proto": "^3.29.0",
         "@xmtp/xmtp-js": "^11.1.2"
@@ -14971,16 +14971,16 @@
       }
     },
     "node_modules/@xmtp/react-sdk": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@xmtp/react-sdk/-/react-sdk-4.0.0.tgz",
-      "integrity": "sha512-u8aL771ZA6qpyBbLNZ2TP3g0Y+DhRbfdpJykociA28tTdE6hF63ULWHVgEhkZb93AZ8JTsG9c0DRLW6crVUoZQ==",
-      "dependencies": {
-        "@xmtp/content-type-reaction": "^1.1.3",
-        "@xmtp/content-type-remote-attachment": "^1.1.4",
-        "@xmtp/content-type-reply": "^1.1.5",
-        "@xmtp/xmtp-js": "^11.3.0",
-        "async-mutex": "^0.4.0",
-        "date-fns": "^3.1.0",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@xmtp/react-sdk/-/react-sdk-5.0.1.tgz",
+      "integrity": "sha512-lVM8bkRypfn7ZGcBGbY4gyVD+rIVp0UTWf48iVjWdAKXxpufJ3l63TUARLW7HVlaA+s7iiaYJ8DdrEwdg3Wc9g==",
+      "dependencies": {
+        "@xmtp/content-type-reaction": "^1.1.5",
+        "@xmtp/content-type-remote-attachment": "^1.1.6",
+        "@xmtp/content-type-reply": "^1.1.7",
+        "@xmtp/xmtp-js": "^11.3.7",
+        "async-mutex": "^0.4.1",
+        "date-fns": "^3.3.1",
         "dexie": "^3.2.4",
         "dexie-react-hooks": "^1.1.7",
         "react": "^18.2.0",
@@ -14992,14 +14992,14 @@
         "node": ">=18"
       },
       "peerDependencies": {
-        "@xmtp/xmtp-js": "^11.3.0",
+        "@xmtp/xmtp-js": "^11.3.7",
         "react": ">=16.14"
       }
     },
     "node_modules/@xmtp/react-sdk/node_modules/date-fns": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.2.0.tgz",
-      "integrity": "sha512-E4KWKavANzeuusPi0jUjpuI22SURAznGkx7eZV+4i6x2A+IZxAMcajgkvuDAU1bg40+xuhW1zRdVIIM/4khuIg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.3.1.tgz",
+      "integrity": "sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
@@ -15023,9 +15023,9 @@
       "integrity": "sha512-4d0j8QDZT8Z9DXIjxRJh7M1DjLNWcPV6807eeMN79gwF9SWbR1CXGSnBNqSrOgVu9nQSWqtg6qfyrrlQ3yHybA=="
     },
     "node_modules/@xmtp/xmtp-js": {
-      "version": "11.3.2",
-      "resolved": "https://registry.npmjs.org/@xmtp/xmtp-js/-/xmtp-js-11.3.2.tgz",
-      "integrity": "sha512-N2f7R6mBEop3ZUiXi1vqrsOz/BZ47kGkhkNHXyV4kyHIMFn/0bNV58CeDgDfYyiDeoZHGeVMsfv6tOcV70LY0g==",
+      "version": "11.3.8",
+      "resolved": "https://registry.npmjs.org/@xmtp/xmtp-js/-/xmtp-js-11.3.8.tgz",
+      "integrity": "sha512-ghx3KuXelXFkZoz0h0ZoTz04CDr0mB5rK2fSaDgvtbga3L72a8yV2OPzHJCTZ6Xg3PfNWyQr1KLri+acJhoRcw==",
       "dependencies": {
         "@noble/secp256k1": "^1.5.2",
         "@xmtp/proto": "^3.34.0",
@@ -15033,6 +15033,7 @@
         "async-mutex": "^0.4.0",
         "elliptic": "^6.5.4",
         "ethers": "^5.5.3",
+        "js-sha3": "^0.9.3",
         "long": "^5.2.0"
       },
       "engines": {
@@ -15086,6 +15087,11 @@
         "@ethersproject/wordlists": "5.7.0"
       }
     },
+    "node_modules/@xmtp/xmtp-js/node_modules/js-sha3": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.9.3.tgz",
+      "integrity": "sha512-BcJPCQeLg6WjEx3FE591wVAevlli8lxsxm9/FzV4HXkV49TmBH38Yvrpce6fjbADGMKFrBMGTqrVz3qPIZ88Gg=="
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -15998,9 +16004,9 @@
       "dev": true
     },
     "node_modules/async-mutex": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.4.0.tgz",
-      "integrity": "sha512-eJFZ1YhRR8UN8eBLoNzcDPcy/jqjsg6I1AP+KvWQX80BqOSW1oJPJXDylPUEeMr2ZQvHgnQ//Lp6f3RQ1zI7HA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.4.1.tgz",
+      "integrity": "sha512-WfoBo4E/TbCX1G95XTjbWTE3X2XLG0m1Xbv2cwOtuPdyH9CZvnaA5nCt1ucjaKEgW2A5IF71hxrRhr83Je5xjA==",
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -44424,17 +44430,17 @@
       }
     },
     "@xmtp/content-type-reaction": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@xmtp/content-type-reaction/-/content-type-reaction-1.1.3.tgz",
-      "integrity": "sha512-dGqySD/TwrDkRB5zm46EIS1tViKv0y5urPKy94W93cbcCxFOODRiGPHcyty7ouif/b0CA53NNnG2sjbkxYsLEg==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@xmtp/content-type-reaction/-/content-type-reaction-1.1.5.tgz",
+      "integrity": "sha512-VNC8Y4cnJTnGxqDRWRriG96Ji/6jZnsijKt5+WqHw88jpSWAQU8KDuDNqlDjOgFSdmgSGkTyRTijQeBZVUhIhQ==",
       "requires": {
         "@xmtp/xmtp-js": "^11.1.2"
       }
     },
     "@xmtp/content-type-remote-attachment": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@xmtp/content-type-remote-attachment/-/content-type-remote-attachment-1.1.4.tgz",
-      "integrity": "sha512-t/ivPqroNYobttxCrJMLOg/b3hAQT0knTw2hio/c5rQ0XyJd9UDP2eDWnmxchlabhdxnnfu9jP9YI05qL7tzWA==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@xmtp/content-type-remote-attachment/-/content-type-remote-attachment-1.1.6.tgz",
+      "integrity": "sha512-QMdCjdgH159ucV7nJ21g5BSgnnooTVLaf0yqC2I3TCWPr3URJpVonoZw87Ht9IDgcHOQdGAbZ+LeL9er0AtnSg==",
       "requires": {
         "@noble/secp256k1": "^1.7.1",
         "@xmtp/proto": "^3.29.0",
@@ -44442,9 +44448,9 @@
       }
     },
     "@xmtp/content-type-reply": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@xmtp/content-type-reply/-/content-type-reply-1.1.5.tgz",
-      "integrity": "sha512-ug2oBAwgmB/cRwIKjrsRFApAkzQbTJ6MPEVKmRVuXNjZa1/Hzl7VHEpKfiZdJ79PZrHZpruhNnU19bDyViyuTw==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@xmtp/content-type-reply/-/content-type-reply-1.1.7.tgz",
+      "integrity": "sha512-1qGIJhr5udHlIjLDDjwG/bcTeHRVs4Doe53VhhW+1Pyb7eV9NtI5WGvxz1tNQ0wdBWB3vVx5sc9o+zHn7wOxAQ==",
       "requires": {
         "@xmtp/proto": "^3.29.0",
         "@xmtp/xmtp-js": "^11.1.2"
@@ -44491,16 +44497,16 @@
       }
     },
     "@xmtp/react-sdk": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@xmtp/react-sdk/-/react-sdk-4.0.0.tgz",
-      "integrity": "sha512-u8aL771ZA6qpyBbLNZ2TP3g0Y+DhRbfdpJykociA28tTdE6hF63ULWHVgEhkZb93AZ8JTsG9c0DRLW6crVUoZQ==",
-      "requires": {
-        "@xmtp/content-type-reaction": "^1.1.3",
-        "@xmtp/content-type-remote-attachment": "^1.1.4",
-        "@xmtp/content-type-reply": "^1.1.5",
-        "@xmtp/xmtp-js": "^11.3.0",
-        "async-mutex": "^0.4.0",
-        "date-fns": "^3.1.0",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@xmtp/react-sdk/-/react-sdk-5.0.1.tgz",
+      "integrity": "sha512-lVM8bkRypfn7ZGcBGbY4gyVD+rIVp0UTWf48iVjWdAKXxpufJ3l63TUARLW7HVlaA+s7iiaYJ8DdrEwdg3Wc9g==",
+      "requires": {
+        "@xmtp/content-type-reaction": "^1.1.5",
+        "@xmtp/content-type-remote-attachment": "^1.1.6",
+        "@xmtp/content-type-reply": "^1.1.7",
+        "@xmtp/xmtp-js": "^11.3.7",
+        "async-mutex": "^0.4.1",
+        "date-fns": "^3.3.1",
         "dexie": "^3.2.4",
         "dexie-react-hooks": "^1.1.7",
         "react": "^18.2.0",
@@ -44510,9 +44516,9 @@
       },
       "dependencies": {
         "date-fns": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.2.0.tgz",
-          "integrity": "sha512-E4KWKavANzeuusPi0jUjpuI22SURAznGkx7eZV+4i6x2A+IZxAMcajgkvuDAU1bg40+xuhW1zRdVIIM/4khuIg=="
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.3.1.tgz",
+          "integrity": "sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw=="
         },
         "uuid": {
           "version": "9.0.1",
@@ -44527,9 +44533,9 @@
       "integrity": "sha512-4d0j8QDZT8Z9DXIjxRJh7M1DjLNWcPV6807eeMN79gwF9SWbR1CXGSnBNqSrOgVu9nQSWqtg6qfyrrlQ3yHybA=="
     },
     "@xmtp/xmtp-js": {
-      "version": "11.3.2",
-      "resolved": "https://registry.npmjs.org/@xmtp/xmtp-js/-/xmtp-js-11.3.2.tgz",
-      "integrity": "sha512-N2f7R6mBEop3ZUiXi1vqrsOz/BZ47kGkhkNHXyV4kyHIMFn/0bNV58CeDgDfYyiDeoZHGeVMsfv6tOcV70LY0g==",
+      "version": "11.3.8",
+      "resolved": "https://registry.npmjs.org/@xmtp/xmtp-js/-/xmtp-js-11.3.8.tgz",
+      "integrity": "sha512-ghx3KuXelXFkZoz0h0ZoTz04CDr0mB5rK2fSaDgvtbga3L72a8yV2OPzHJCTZ6Xg3PfNWyQr1KLri+acJhoRcw==",
       "requires": {
         "@noble/secp256k1": "^1.5.2",
         "@xmtp/proto": "^3.34.0",
@@ -44537,6 +44543,7 @@
         "async-mutex": "^0.4.0",
         "elliptic": "^6.5.4",
         "ethers": "^5.5.3",
+        "js-sha3": "^0.9.3",
         "long": "^5.2.0"
       },
       "dependencies": {
@@ -44576,6 +44583,11 @@
             "@ethersproject/web": "5.7.1",
             "@ethersproject/wordlists": "5.7.0"
           }
+        },
+        "js-sha3": {
+          "version": "0.9.3",
+          "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.9.3.tgz",
+          "integrity": "sha512-BcJPCQeLg6WjEx3FE591wVAevlli8lxsxm9/FzV4HXkV49TmBH38Yvrpce6fjbADGMKFrBMGTqrVz3qPIZ88Gg=="
         }
       }
     },
@@ -45313,9 +45325,9 @@
       "dev": true
     },
     "async-mutex": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.4.0.tgz",
-      "integrity": "sha512-eJFZ1YhRR8UN8eBLoNzcDPcy/jqjsg6I1AP+KvWQX80BqOSW1oJPJXDylPUEeMr2ZQvHgnQ//Lp6f3RQ1zI7HA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/async-mutex/-/async-mutex-0.4.1.tgz",
+      "integrity": "sha512-WfoBo4E/TbCX1G95XTjbWTE3X2XLG0m1Xbv2cwOtuPdyH9CZvnaA5nCt1ucjaKEgW2A5IF71hxrRhr83Je5xjA==",
       "requires": {
         "tslib": "^2.4.0"
       }
diff --git a/package.json b/package.json
index e1f206b5..b04785ee 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "@xmtp/content-type-reply": "^1.1.5",
     "@xmtp/experimental-content-type-screen-effect": "^1.0.2",
     "@xmtp/frames-client": "0.1.4",
-    "@xmtp/react-sdk": "^4.0.0",
+    "@xmtp/react-sdk": "^5.0.1",
     "buffer": "^6.0.3",
     "date-fns": "^2.29.3",
     "dexie": "^3.2.4",

From 3bad2d4bb64685108383a9962aa57dcf6826a913 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Tue, 6 Feb 2024 08:27:34 -0800
Subject: [PATCH 19/21] bumped db version

---
 src/controllers/ConversationListController.tsx | 2 +-
 src/main.tsx                                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/controllers/ConversationListController.tsx b/src/controllers/ConversationListController.tsx
index d5547fb2..ad6fa0a6 100644
--- a/src/controllers/ConversationListController.tsx
+++ b/src/controllers/ConversationListController.tsx
@@ -111,7 +111,7 @@ export const ConversationListController = ({
     // messages,
     isLoading,
     walletAddress,
-    // db,
+    db,
     changedConsentCount,
     isAllowed,
     isDenied,
diff --git a/src/main.tsx b/src/main.tsx
index 4c747246..6a2f5e8f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -27,7 +27,7 @@ import { isAppEnvDemo } from "./helpers";
 import { mockConnector } from "./helpers/mockConnector";
 
 // Increment with any schema change; e.g. adding support for a new content type
-const DB_VERSION = 5;
+const DB_VERSION = 6;
 
 export const ScreenEffectCodecInstance = new ScreenEffectCodec();
 

From 31e01bc62866951ff6697b3ffc428d6fbd0a19e5 Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Tue, 6 Feb 2024 08:27:59 -0800
Subject: [PATCH 20/21] flattened props

---
 .../components/Frame/Frame.tsx                | 65 +++++++++----------
 src/controllers/FullMessageController.tsx     |  6 +-
 2 files changed, 34 insertions(+), 37 deletions(-)

diff --git a/src/component-library/components/Frame/Frame.tsx b/src/component-library/components/Frame/Frame.tsx
index ca5fbccb..8a45474b 100644
--- a/src/component-library/components/Frame/Frame.tsx
+++ b/src/component-library/components/Frame/Frame.tsx
@@ -1,45 +1,40 @@
 import { GhostButton } from "../GhostButton/GhostButton";
 
 type FrameProps = {
-  info: {
-    image: string;
-    title: string;
-    buttons: string[];
-    postUrl: string;
-  };
+  image: string;
+  title: string;
+  buttons: string[];
   handleClick: (buttonNumber: number) => Promise<void>;
   frameButtonUpdating: number;
 };
 
 export const Frame = ({
-  info,
+  image,
+  title,
+  buttons,
   handleClick,
   frameButtonUpdating,
-}: FrameProps) => {
-  const { buttons, image, title } = info;
-
-  return (
-    <>
-      <img src={image} className="max-h-80 rounded-lg px-8" alt={title} />
-      <div className="flex flex-col">
-        {buttons?.map((button, index) => {
-          if (!button) {
-            return null;
-          }
-          const handlePress = () => {
-            void handleClick(index + 1);
-          };
-          return (
-            <GhostButton
-              key={button}
-              label={button}
-              onClick={handlePress}
-              isLoading={frameButtonUpdating === index + 1}
-              isDisabled={frameButtonUpdating > 0}
-            />
-          );
-        })}
-      </div>
-    </>
-  );
-};
+}: FrameProps) => (
+  <div className="px-4 md:px-8">
+    <img src={image} className="max-h-80 rounded-lg" alt={title} />
+    <div className="flex flex-col items-center">
+      {buttons?.map((button, index) => {
+        if (!button) {
+          return null;
+        }
+        const handlePress = () => {
+          void handleClick(index + 1);
+        };
+        return (
+          <GhostButton
+            key={button}
+            label={button}
+            onClick={handlePress}
+            isLoading={frameButtonUpdating === index + 1}
+            isDisabled={frameButtonUpdating > 0}
+          />
+        );
+      })}
+    </div>
+  </div>
+);
diff --git a/src/controllers/FullMessageController.tsx b/src/controllers/FullMessageController.tsx
index 95da68b5..7a03566a 100644
--- a/src/controllers/FullMessageController.tsx
+++ b/src/controllers/FullMessageController.tsx
@@ -121,9 +121,11 @@ export const FullMessageController = ({
           isSelf={client?.address === message.senderAddress}
         />
       </FullMessage>
-      {frameInfo && (
+      {frameInfo?.image && (
         <Frame
-          info={frameInfo}
+          image={frameInfo.image}
+          title={frameInfo.title}
+          buttons={frameInfo.buttons}
           handleClick={handleFrameButtonClick}
           frameButtonUpdating={frameButtonUpdating}
         />

From cdfec0816e5fba3e834a029a87d5433ddebc268c Mon Sep 17 00:00:00 2001
From: daria-github <daria@xmtp.com>
Date: Tue, 6 Feb 2024 12:12:15 -0800
Subject: [PATCH 21/21] updated to latest frames spec

---
 package-lock.json                         | 50 ++++++++++++++++-------
 package.json                              |  2 +-
 src/controllers/FullMessageController.tsx | 23 ++++++-----
 3 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4cfe6c57..6fcf2969 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "@xmtp/content-type-remote-attachment": "^1.1.4",
         "@xmtp/content-type-reply": "^1.1.5",
         "@xmtp/experimental-content-type-screen-effect": "^1.0.2",
-        "@xmtp/frames-client": "0.1.4",
+        "@xmtp/frames-client": "0.2.0",
         "@xmtp/react-sdk": "^5.0.1",
         "buffer": "^6.0.3",
         "date-fns": "^2.29.3",
@@ -14938,20 +14938,33 @@
       }
     },
     "node_modules/@xmtp/frames-client": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@xmtp/frames-client/-/frames-client-0.1.4.tgz",
-      "integrity": "sha512-MVGkkYTrO6QZ/jjVkS/XFxRfdb+cGy0RaNN42mN6LnRzJ1mha9So8jaIhcnO17CXiibqZBEeA+JU10Tr1q0iGg==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@xmtp/frames-client/-/frames-client-0.2.0.tgz",
+      "integrity": "sha512-ezjhMd+8lvGD7RW7wd1yGqdWwpH9ngk4XooAmZMS56KvME4952OaoFatPf55ZQBq/4tZOzGjAgSlAYGWDbizqA==",
       "dependencies": {
-        "@xmtp/proto": "3.41.0-beta.2"
+        "@noble/hashes": "^1.3.3",
+        "@xmtp/proto": "3.41.0-beta.5",
+        "long": "^5.2.3"
       },
       "peerDependencies": {
         "@xmtp/xmtp-js": ">9.3.1"
       }
     },
+    "node_modules/@xmtp/frames-client/node_modules/@noble/hashes": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.3.tgz",
+      "integrity": "sha512-V7/fPHgl+jsVPXqqeOzT8egNj2iBIVt+ECeMMG8TdcnTikP3oaBtUVqpT/gYCR68aEBJSF+XbYUxStjbFMqIIA==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@xmtp/frames-client/node_modules/@xmtp/proto": {
-      "version": "3.41.0-beta.2",
-      "resolved": "https://registry.npmjs.org/@xmtp/proto/-/proto-3.41.0-beta.2.tgz",
-      "integrity": "sha512-oRhyjnm7M4tnMZSpMMQQGs9VQbp3lndj/AUEJYcB3fzIgzHpwttfnHy5bMliR9ktv0B2EaldyLOlWRX/RroTBA==",
+      "version": "3.41.0-beta.5",
+      "resolved": "https://registry.npmjs.org/@xmtp/proto/-/proto-3.41.0-beta.5.tgz",
+      "integrity": "sha512-vx5zqLpAVPjTEdyqY/woXrgvWMKjbTwwco+x9WE+T1iVlv+472yp2DwFJRLpfeQByC1cHl7XQyuO2Q+8t8HL4Q==",
       "dependencies": {
         "long": "^5.2.0",
         "protobufjs": "^7.0.0",
@@ -44465,17 +44478,24 @@
       }
     },
     "@xmtp/frames-client": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@xmtp/frames-client/-/frames-client-0.1.4.tgz",
-      "integrity": "sha512-MVGkkYTrO6QZ/jjVkS/XFxRfdb+cGy0RaNN42mN6LnRzJ1mha9So8jaIhcnO17CXiibqZBEeA+JU10Tr1q0iGg==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@xmtp/frames-client/-/frames-client-0.2.0.tgz",
+      "integrity": "sha512-ezjhMd+8lvGD7RW7wd1yGqdWwpH9ngk4XooAmZMS56KvME4952OaoFatPf55ZQBq/4tZOzGjAgSlAYGWDbizqA==",
       "requires": {
-        "@xmtp/proto": "3.41.0-beta.2"
+        "@noble/hashes": "^1.3.3",
+        "@xmtp/proto": "3.41.0-beta.5",
+        "long": "^5.2.3"
       },
       "dependencies": {
+        "@noble/hashes": {
+          "version": "1.3.3",
+          "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.3.tgz",
+          "integrity": "sha512-V7/fPHgl+jsVPXqqeOzT8egNj2iBIVt+ECeMMG8TdcnTikP3oaBtUVqpT/gYCR68aEBJSF+XbYUxStjbFMqIIA=="
+        },
         "@xmtp/proto": {
-          "version": "3.41.0-beta.2",
-          "resolved": "https://registry.npmjs.org/@xmtp/proto/-/proto-3.41.0-beta.2.tgz",
-          "integrity": "sha512-oRhyjnm7M4tnMZSpMMQQGs9VQbp3lndj/AUEJYcB3fzIgzHpwttfnHy5bMliR9ktv0B2EaldyLOlWRX/RroTBA==",
+          "version": "3.41.0-beta.5",
+          "resolved": "https://registry.npmjs.org/@xmtp/proto/-/proto-3.41.0-beta.5.tgz",
+          "integrity": "sha512-vx5zqLpAVPjTEdyqY/woXrgvWMKjbTwwco+x9WE+T1iVlv+472yp2DwFJRLpfeQByC1cHl7XQyuO2Q+8t8HL4Q==",
           "requires": {
             "long": "^5.2.0",
             "protobufjs": "^7.0.0",
diff --git a/package.json b/package.json
index b04785ee..82d57031 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "@xmtp/content-type-remote-attachment": "^1.1.4",
     "@xmtp/content-type-reply": "^1.1.5",
     "@xmtp/experimental-content-type-screen-effect": "^1.0.2",
-    "@xmtp/frames-client": "0.1.4",
+    "@xmtp/frames-client": "0.2.0",
     "@xmtp/react-sdk": "^5.0.1",
     "buffer": "^6.0.3",
     "date-fns": "^2.29.3",
diff --git a/src/controllers/FullMessageController.tsx b/src/controllers/FullMessageController.tsx
index 7a03566a..49a666e4 100644
--- a/src/controllers/FullMessageController.tsx
+++ b/src/controllers/FullMessageController.tsx
@@ -38,14 +38,13 @@ export const FullMessageController = ({
   const [frameInfo, setFrameInfo] = useState<FrameInfo | undefined>(undefined);
   const [frameButtonUpdating, setFrameButtonUpdating] = useState<number>(0);
 
-  const handleFrameButtonClick = async (buttonNumber: number) => {
+  const handleFrameButtonClick = async (buttonIndex: number) => {
     if (!frameInfo) {
       return;
     }
-    const url = frameInfo.image;
-    const messageId = String(message.id);
+    const frameUrl = frameInfo.image;
 
-    setFrameButtonUpdating(buttonNumber);
+    setFrameButtonUpdating(buttonIndex);
 
     const xmtpClient = await Client.create(
       walletClient as WalletClient<
@@ -56,12 +55,16 @@ export const FullMessageController = ({
     );
     const framesClient = new FramesClient(xmtpClient);
 
-    const payload = await framesClient.signFrameAction(
-      url,
-      buttonNumber,
-      conversationTopic as string,
-      messageId,
-    );
+    const payload = await framesClient.signFrameAction({
+      frameUrl,
+      buttonIndex,
+      conversationTopic: conversationTopic as string,
+      participantAccountAddresses: [
+        client?.address as string,
+        conversation.peerAddress,
+      ],
+    });
+
     const updatedFrameMetadata = await FramesClient.postToFrame(
       frameInfo.postUrl,
       payload,