Implement basic search query

src/features/search/MessageSearch.tsx

@@ -158,7 +158,9 @@ export function MessageSearch() {
           }
           imgSrc={ShrugIcon}
           imgAlt="No results"
-          text="Sorry, no results found. Please try a different address or hash."
+          text={`Sorry, no results found. Please try ${
+            hasInput ? 'a different address or hash' : 'again later'
+          }.`}
           imgWidth={110}
         />
         {/* Search error state */}
@@ -217,7 +219,7 @@ function getChainOptionList(): Array<{ value: string; display: string }> {
 }
 
 const latestMessagesQuery = `
-query MessageDetails {
+query LatestMessages {
   message(order_by: {timestamp: desc}, limit: 8) {
     destination
     id
@@ -241,18 +243,37 @@ query MessageDetails {
   }
 }`;
 
-// TODO
 const searchMessagesQuery = `
-query searchMessages ($search: String!) {
+query SearchMessages ($search: bpchar!) {
-  messages (search: $search, order_by: {origintimesent: desc}, limit: 8) {
+  message(
+      where: {
+        _or: [
+          {sender: {_eq: $search}},
+          {recipient: {_eq: $search}},
+          {transaction: {hash: {_eq: $search}}},
+          {delivered_message: {transaction: {hash: {_eq: $search}}}},
+        ]
+      },
+      order_by: {timestamp: desc},
+      limit: 40) {
+    destination
     id
-    status
+    origin
-    sender
     recipient
-    body
+    sender
-    originchainid
+    timestamp
-    origintimesent
+    delivered_message {
-    destinationchainid
+      id
-    destinationtimesent
+      tx_id
+      inbox_address
+    }
+    message_states {
+      block_height
+      block_timestamp
+      error_msg
+      estimated_gas_cost
+      id
+      processable
+    }
   }
 }`;

src/utils/string.ts

@@ -9,5 +9,5 @@ export function toTitleCase(str: string) {
 const alphanumericRgex = /[^a-zA-Z0-9]/gi;
 export function sanitizeString(str: string) {
   if (!str || typeof str !== 'string') return '';
-  return str.replaceAll(alphanumericRgex, '');
+  return str.replaceAll(alphanumericRgex, '').toLowerCase();
 }