You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.3 KiB
42 lines
1.3 KiB
import React from 'react';
|
|
|
|
import { m } from 'framer-motion';
|
|
import JSONPretty from 'react-json-pretty';
|
|
|
|
import { useAppSelector } from '@app/hooks/useAppSelector.js';
|
|
// eslint-disable-next-line import/no-unresolved
|
|
import skypack_hashicon from '@skypack/@emeraldpay/hashicon-react';
|
|
|
|
const Hashicon = skypack_hashicon.Hashicon;
|
|
// import { Hashicon } from '@emeraldpay/hashicon-react';
|
|
|
|
export const Info = (): JSX.Element => {
|
|
const hardwareInfo = useAppSelector(
|
|
(state) => state.meshtastic.radio.hardware,
|
|
);
|
|
const node = useAppSelector((state) =>
|
|
state.meshtastic.nodes.find(
|
|
(node) => node.number === hardwareInfo.myNodeNum,
|
|
),
|
|
);
|
|
|
|
return (
|
|
<div className="flex w-full flex-grow select-none flex-col gap-4 p-4">
|
|
<m.div
|
|
whileHover={{ scale: 1.01 }}
|
|
className="flex w-full flex-col gap-4 rounded-md p-8 shadow-md dark:bg-primaryDark"
|
|
>
|
|
<div className="m-auto">
|
|
<Hashicon value={hardwareInfo.myNodeNum.toString()} size={180} />
|
|
</div>
|
|
<div className="text-center text-lg font-medium dark:text-white">
|
|
{node?.user?.longName || 'Unknown'}
|
|
</div>
|
|
</m.div>
|
|
|
|
<div className="flex-grow rounded-md p-8 shadow-md dark:bg-primaryDark">
|
|
<JSONPretty className="overflow-y-auto" data={hardwareInfo} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|