Transaction: 8c8RBHY...AojD

{ "data": { "nearcon23.near": { "widget": { "Mobile.Home.Profile": { "": "const ownerId = \"nearcon23.near\";\n\nconst socketUrl =\n \"wss://bva2os6ai2.execute-api.us-east-1.amazonaws.com/mainnet\";\nconst baseUrl =\n \"https://gqqkd7l7mk.execute-api.us-east-1.amazonaws.com/mainnet\";\n\nconst theme = props.theme;\nconst transactions = props?.state?.transactions;\n\nconst [persona, setPersona] = useState(\"allTracks\");\n\nconst Content = styled.div`\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 736px;\n div {\n width: 100%;\n }\n`;\n\nconst Button = styled.a`\n border:none;\n background-color: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n color:black;\n flex-direction: column;\n gap: 8px;\n\n text-decoration: none;\n color: #000000;\n`;\n\nconst ButtonIcon = styled.div`\n min-height: 56px;\n height: 56px;\n max-height: 56px;\n min-width: 56px;\n width: 56px;\n max-width: 56px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 20px;\n background-color: black;\n`;\n\nconst Alert = styled.div`\n width: 100%;\n border: 0.5px solid lightgray;\n padding: 20px;\n\n background-color: #dcdcf9;\n border-radius: 8px;\n margin-bottom: 16px;\n`;\n\nconst AlertButton = styled.button`\n background-color: #BABAFC;\n border-width: 0px;\n color: #4D3BC2;\n font-size: 12px;\n font-weight: 600;\n padding: 10px;\n width: 100%;\n border-radius: 100px;\n`;\n\nconst [loading, setLoading] = useState(false);\nconst [notifications, setNotifications] = useState([]);\nconst [showTime, setShowTime] = useState(10);\n\nuseEffect(() => {\n const socket = new WebSocket(socketUrl);\n\n // Listen for messages from the WebSocket server\n socket.addEventListener(\"message\", (event) => {\n const data = event?.data && JSON.parse(event?.data);\n console.log(\"Received message:\", data);\n\n // Update notifications when a new notification is received\n setNotifications((prevNotifications) => [data, ...prevNotifications]);\n });\n\n // Clean up the WebSocket connection when the component is unmounted\n return () => {\n socket.close();\n };\n}, []);\n\nuseEffect(() => {\n const notificationCheckInterval = setInterval(() => {\n const currentTime = new Date().getTime();\n setNotifications((prevNotifications) =>\n prevNotifications.filter(\n (notif) => currentTime - new Date(notif.createdAt).getTime() <= 20000\n )\n );\n }, 1000); // Check every second\n\n return () => clearInterval(notificationCheckInterval);\n}, []);\n\nfunction timeAgo(timestamp) {\n const currentDate = new Date();\n const previousDate = new Date(timestamp);\n\n const seconds = Math.floor((currentDate - previousDate) / 1000);\n\n const intervals = {\n year: seconds / (60 * 60 * 24 * 365),\n month: seconds / (60 * 60 * 24 * 30),\n week: seconds / (60 * 60 * 24 * 7),\n day: seconds / (60 * 60 * 24),\n hour: seconds / (60 * 60),\n minute: seconds / 60,\n };\n\n let result;\n for (const [unit, value] of Object.entries(intervals)) {\n if (value >= 1) {\n result =\n Math.floor(value) +\n \" \" +\n unit +\n (Math.floor(value) > 1 ? \"s\" : \"\") +\n \" ago\";\n break;\n }\n }\n\n return result || \"Just now\";\n}\n\nconst { secretkey } = props;\n\nconst storedSecretKey = Storage.get(\n \"newPrivateKey\",\n `${ownerId}/widget/Ticket.Page`\n)\n ? Storage.get(\"newPrivateKey\", `${ownerId}/widget/Ticket.Page`)\n : Storage.get(\"newPrivateKey\", `${ownerId}/widget/RegisterMobile.Index`);\n\nconst fetchData = () => {\n const key = secretkey ? secretkey : storedSecretKey;\n asyncFetch(`${baseUrl}/api/v1/accounts/auth/${key}`).then(({ body }) => {\n console.log(body);\n State.update({ userData: body });\n });\n};\n\nuseEffect(() => {\n fetchData();\n}, [\n secretkey,\n Storage.get(\"newPrivateKey\", `${ownerId}/widget/RegisterMobile.Index`),\n]);\n\nconst arrayList = [\n { accountId: \"phil\", sent: true, amount: 0.5 },\n { accountId: \"zahid\", sent: false, amount: 1 },\n];\n\nif (state.redirectToTransactions) {\n return <Redirect to={`/${ownerId}/widget/Mobile.Home.RecentTransactions`} />;\n}\n\nfunction convertToReadableDate(dateString) {\n const date = new Date(dateString);\n\n // Get the components of the date\n let hours = date.getUTCHours();\n const minutes = date.getUTCMinutes();\n const day = date.getUTCDate();\n const months = [\n \"Jan\",\n \"Feb\",\n \"Mar\",\n \"Apr\",\n \"May\",\n \"Jun\",\n \"Jul\",\n \"Aug\",\n \"Sep\",\n \"Oct\",\n \"Nov\",\n \"Dec\",\n ];\n const month = months[date.getUTCMonth()];\n\n // Convert to 12-hour format and set AM or PM\n const ampm = hours >= 12 ? \"PM\" : \"AM\";\n hours = hours % 12;\n hours = hours ? hours : 12; // the hour '0' should be '12'\n\n // Formatting minutes to always be two digits\n const formattedMinutes = minutes < 10 ? \"0\" + minutes : minutes;\n\n // Construct the formatted string\n return `${hours}:${formattedMinutes} ${ampm} at ${day} ${month}`;\n}\n\nreturn (\n <Content>\n <div\n style={{\n flex: 1,\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"flex-start\",\n alignItems: \"center\",\n margin: 20,\n width: \"calc(100% - 40px)\",\n }}\n >\n {notifications?.map((item, index) => (\n <Alert key={index}>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: \"5px\" }}>\n <i class=\"bi bi-clock\" style={{ color: \"#7269e1\" }}></i>\n <p style={{ marginBottom: 0, color: \"#7269e1\" }}>\n {timeAgo(item?.createdAt || \"\")}\n </p>\n </div>\n <p style={{ color: \"#4d3bc2\" }}>{item?.message}</p>\n\n {item.showButton && (\n <a href={item.url} target=\"_blank\">\n <AlertButton>\n <i\n class=\"bi bi-map\"\n style={{\n width: \"14\",\n height: \"14\",\n color: \"#4d3bc2\",\n }}\n ></i>\n {item.buttonLabel}\n </AlertButton>\n </a>\n )}\n </Alert>\n ))}\n\n <div\n style={{\n border: `2px ${theme.borderColor} solid`,\n borderRadius: 8,\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\",\n\n aspectRatio: 1 / 1,\n }}\n >\n <h1\n style={{\n fontSize: 64,\n fontWeight: 500,\n margin: 0,\n letterSpacing: \"-5px\",\n }}\n >\n {state?.userData?.balance?.replace?.(\"0000000000000000000000\", \"\")}\n </h1>\n <h3\n style={{\n fontSize: 30,\n fontWeight: 500,\n margin: 0,\n color: \"#00EC97\",\n }}\n >\n NCON\n </h3>\n\n <div\n style={{\n marginTop: 24,\n width: 300,\n marginBottom: 24,\n display: \"flex\",\n justifyContent: \"space-around\",\n }}\n >\n <Button\n href={`/${ownerId}/widget/Mobile.Home.SendAddress`}\n style={{\n textDecoration: \"none\",\n }}\n >\n <ButtonIcon>\n <Widget src={`${ownerId}/widget/Icons.SendMoney`} />\n </ButtonIcon>\n\n <h6 style={{ fontWeight: \"400\", color: \"#000000\" }}>Send</h6>\n </Button>\n\n <Button\n href={`/${ownerId}/widget/Mobile.Home.Recieve`}\n style={{\n textDecoration: \"none\",\n }}\n >\n <ButtonIcon>\n <Widget src={`${ownerId}/widget/Icons.Receive`} />\n </ButtonIcon>\n\n <h6 style={{ fontWeight: \"400\", color: \"#000000\" }}>Receive</h6>\n </Button>\n\n <Link\n href={`/${ownerId}/widget/Mobile.Home.Scan`}\n style={{\n border: \"none\",\n backgroundColor: \"transparent\",\n color: \"#000000\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n flexDirection: \"column\",\n gap: 8,\n\n textDecoration: \"none\",\n }}\n >\n <ButtonIcon>\n <Widget src={`${ownerId}/widget/Icons.Scan`} />\n </ButtonIcon>\n\n <h6 style={{ fontWeight: \"400\", color: \"#000000\" }}>Scan</h6>\n </Link>\n </div>\n\n <p\n style={{\n textAlign: \"center\",\n color: theme.textColor3,\n padding: \"0 20px\",\n maxWidth: 425,\n fontSize: 12,\n fontWeight: 400,\n }}\n >\n All NCON expire at the end of the conference\n <br /> and are worth no monetary value.\n </p>\n </div>\n {(transactions ?? [])?.length !== 0 && (\n <>\n <div style={{ paddingTop: 10 }}>\n <p style={{ color: \"#868682\", fontSize: 16 }}>\n Recent Transactions\n </p>\n {([...transactions.slice(0, 2)] ?? []).map((item) => (\n <Widget\n props={{\n sent: item.senderId === state.userData.nearconId,\n amount: item.amount,\n image:\n item.senderId === state.userData.nearconId\n ? item?.receiverCid\n : item.senderCid,\n accountId:\n item.senderId === state.userData.nearconId\n ? item.receiverId\n : item.senderId,\n time: convertToReadableDate(item.createdAt),\n }}\n src={`${ownerId}/widget/Components.TransactionCard`}\n />\n ))}\n\n <button\n onClick={() => {\n State.update({ redirectToTransactions: true });\n }}\n style={{\n backgroundColor: \"#E3E3E0\",\n borderWidth: 0,\n borderRadius: 100,\n color: \"#000\",\n padding: 10,\n marginBottom: 20,\n fontWeight: \"500\",\n paddingLeft: 20,\n marginTop: 10,\n paddingRight: 20,\n }}\n >\n Show More\n </button>\n </div>\n </>\n )}\n </div>\n </Content>\n);\n" } } } } }