Merge pull request #1445 from ethereum-push-notification-service/Chan…

…nel-Profile-UI

Channel Profile UI

package.json

@@ -33,9 +33,9 @@
     "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.72",
     "@mui/material": "^5.5.0",
-    "@pushprotocol/restapi": "1.6.10",
+    "@pushprotocol/restapi": "0.0.1-alpha.73",
     "@pushprotocol/socket": "0.5.3",
-    "@pushprotocol/uiweb": "0.0.1-alpha.41",
+    "@pushprotocol/uiweb": "1.3.1-alpha.6",
     "@reduxjs/toolkit": "^1.7.1",
     "@testing-library/dom": "^9.0.1",
     "@testing-library/jest-dom": "^4.2.4",

src/components/MetaInfoDisplayer.js

@@ -8,8 +8,30 @@ import styled from 'styled-components';
 import { A, Item, ItemH, Span } from '../primaries/SharedStyling';
 import { Device } from "assets/Device";
 
+interface MetaInfoDisplayProps {
+  externalIcon?: React.ReactNode; // Optional because it's checked before usage
+  internalIcon?: React.ReactNode; // Optional for the same reason
+  text: string;
+  bgColor: string;
+  color: string;
+  onClick?: React.MouseEventHandler<HTMLDivElement>; // Optional based on conditional use
+  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>; // Optional based on conditional use
+  onMouseLeave?: React.MouseEventHandler<HTMLDivElement>; // Optional based on conditional use
+  padding: string;
+}
+
 // Faucet URLs
-function MetaInfoDisplay({ externalIcon, internalIcon, text, bgColor, onClick, onMouseEnter, onMouseLeave, padding, color }) {
+function MetaInfoDisplay({ 
+  externalIcon = null, 
+  internalIcon = null, 
+  text, 
+  bgColor, 
+  onClick = () => {}, 
+  onMouseEnter =  () => {}, 
+  onMouseLeave =  () => {}, 
+  padding, 
+  color 
+}) {
 
   // render
   return (