Obanana_test/app/pages/profile/MyWallet.jsx

import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React, { useEffect } from "react";
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import HTMLView from "react-native-htmlview";
import ReceiptCard from "../../components/profile/my_purchases/Receipt";
const ws = new WebSocket("ws://testapi.obpay.online:8080");


const MyWallet = () => {
  const navigation = useNavigation();
  useEffect(() => {
    ws.onopen = () => {
      console.error("WebSocket connected------------------------------------------");
      // You can send initial messages after the connection is established if needed
      ws.send('Hello, server!');
      ws.send(JSON.stringify({ type: "join", userId: "meeeeeeeeeeee" }));
      ws.send(
        JSON.stringify({
          type: "message",
          userId: userId,
          content: "hi I'm sending notiff",
        })
      );
    };
  }, [])
  
  const info = ` <p style='text-align: center;'>&nbsp;</p> <p class='css-1ittmm6' style='text-align: center;' data-text='true'>Uploading your app to TestFlight and Google Play beta can be time-consuming (for example, waiting for the build to run through static analysis before becoming available to testers) and limiting (for example, TestFlight can only have one active build at a time). Both Android and iOS provide alternative mechanisms to distribute apps directly to testers, so they can download and install them to physical devices directly from a web browser as soon as the builds are completed.</p><p class='css-1ittmm6' style='text-align: center;' data-text='true'>EAS Build can help you with this by providing shareable URLs for your builds with instructions on how to get them running, so you can share a single URL with a teammate that'll include all of the information they need to test the app.</p><p class='css-1ittmm6' style='text-align: center;' data-text='true'>&nbsp;</p><h3 style='text-align: center;'><strong>Xiaomi Pad 6</strong>&nbsp;specs</h3><p style='text-align: center;'>11-inch WQHD+ (2880 x 1800) IPS LCD<br>144Hz refresh rate, DCI-P3, 309 ppi, Dolby Vision<br>Corning Gorilla Glass 3<br>Snapdragon 870 chipset<br>8-cores, up to 3.2GHz frequency<br>6, 8GB RAM<br>128, 256GB storage<br>13MP f/2.2 rear<br>8MP f/2.2 selfie shooter<br>Wi-Fi 6<br>Bluetooth 5.2<br>USB Type-C<br>Quad speakers, Dolby Atmos<br>MIUI Pad 14<br>8840mAh battery<br>33W charging rate<br>490g<br>Gravity Gray, Gold, Mist Blue</p><p style='text-align: center;'><img src='https://www.yugatech.com/wp-content/uploads/2023/08/xiaomi-pad-6-camera-closeup.png' alt='Xiaomi Pad 6 Camera Closeup' width='438' height='384'></p><table style='height: 179px; width: 38.637%; margin-left: auto; margin-right: auto;'><thead><tr><th style='width: 9.1612%;'>Minor</th><th style='width: 18.5122%;'>Branch</th><th style='width: 37.5608%;'>Documentation</th><th style='width: 32.3664%;'>Latest</th></tr></thead><tbody><tr><td style='width: 9.1612%;'>next</td><td style='width: 18.5122%;'>master</td><td style='width: 37.5608%;'>-</td><td style='width: 32.3664%;'><a href='https://www.npmjs.com/package/react-native-render-html#'><img src='https://camo.githubusercontent.com/f3215ce1ad3f67dccd657027c0600388714fd781ef05b146dc906828186fd13b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d72656e6465722d68746d6c2f6e657874' alt='npm' data-canonical-src='https://img.shields.io/npm/v/react-native-render-html/next'></a></td></tr><tr><td style='width: 9.1612%;'>6.3</td><td style='width: 18.5122%;'><a href='https://github.com/meliorence/react-native-render-html/tree/release/6.3'>release/6.3</a></td><td style='width: 37.5608%;'><a href='https://meliorence.github.io/react-native-render-html/' rel='nofollow'>Official Website</a></td><td style='width: 32.3664%;'><a href='https://www.npmjs.com/package/react-native-render-html#'><img src='https://camo.githubusercontent.com/1d647fdaa57a9ecbaabe231319ff37b900429af34c55393d2d348870a98f9215/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d72656e6465722d68746d6c2f72656c656173652f362e33' alt='npm' data-canonical-src='https://img.shields.io/npm/v/react-native-render-html/release/6.3'></a></td></tr><tr><td style='width: 9.1612%;'>5.1&nbsp;&nbsp;</td><td style='width: 18.5122%;'><a href='https://github.com/meliorence/react-native-render-html/tree/release/5.1'>release/5.1</a>&nbsp;&nbsp;</td><td style='width: 37.5608%;'><a href='https://github.com/meliorence/react-native-render-html/blob/release/5.1/README.md'>release/5.1/README.md</a></td><td style='width: 32.3664%;'><a href='https://www.npmjs.com/package/react-native-render-html#'><img src='https://camo.githubusercontent.com/e0f61d83694ea428d9b745480ccc1cd47eb788e679357b1ef8820d7c472c779a/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d72656e6465722d68746d6c2f72656c656173652f352e31' alt='npm' data-canonical-src='https://img.shields.io/npm/v/react-native-render-html/release/5.1'></a></td></tr><tr><
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity
          onPress={() => navigation.navigate("Home")}
          style={styles.backIcon}
        >
          <FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
        </TouchableOpacity>
        <Text style={styles.headerText}>My Wallet</Text>
      </View>

      <ScrollView style={styles.wrapper}>
        <Text style={styles.text}>Content</Text>
        {/* <ReceiptCard cart={{}}/> */}
        {/* <HTMLView value={info + info} stylesheet={styles} /> */}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#ffff",
    width: "100%",
    height: "100%",
  },
  // img: {
  //   height: 500,
  //   width: 100,
  // },
  p: {
    fontWeight: "600",
    fontSize: 16,
  },
  wrapper: {
    height: "100%",
    width: "100%",
  },
  header: {
    alignItems: "center",
    width: "100%",
    top: 0,
    paddingLeft: 15,
    flexDirection: "row",
    borderColor: "#ddd",
    paddingBottom: 15,
    borderBottomWidth: 1,
  },
  headerText: {
    fontSize: 16,
    fontWeight: "600",
    marginLeft: 25,
  },
});

export default MyWallet;