Websockets on Tor android (#1615)

* Websockets on Tor android * Show turtle mode on android * Display lnp2pbot orders (#1617) * P2PBOT working * Display LNP2POrders * Filter by robosats orders * Robosats hosts filter by default and better browse text --------- Co-authored-by: Reckless_Satoshi <[email protected]>
RoboSats · Nov 24, 2024 · 673037c · 673037c
1 parent be80cc1
commit 673037c
Show file tree

Hide file tree

Showing 61 changed files with 1,865 additions and 1,026 deletions.
diff --git a/docs/_sass/minimal-mistakes/skins/_robosats.scss b/docs/_sass/minimal-mistakes/skins/_robosats.scss
@@ -5,7 +5,7 @@
 /* Colors */
 $background-color: #ffffff !default;
 $text-color: #2c2c2c !default;
-$muted-text-color: #393e46 !default;
+$muted-text-color: hsl(217, 10%, 25%) !default;
 $primary-color: #1976d2 !default;
 $primary-light-color: #42a5f5 !default;
 $primary-dark-color: #1565c0 !default;

diff --git a/frontend/src/basic/BookPage/index.tsx b/frontend/src/basic/BookPage/index.tsx
@@ -9,20 +9,38 @@ import BookTable from '../../components/BookTable';
 import { BarChart, FormatListBulleted, Map } from '@mui/icons-material';
 import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
 import MapChart from '../../components/Charts/MapChart';
+import thirdParties from '../../../static/thirdparties.json';
+import { FederationContext, type UseFederationStoreType } from '../../contexts/FederationContext';
+import VisitThirdParty from '../../components/Dialogs/VisitThirdParty';
+import { type PublicOrder } from '../../models';
 
 const BookPage = (): JSX.Element => {
   const { windowSize } = useContext<UseAppStoreType>(AppContext);
+  const { federation } = useContext<UseFederationStoreType>(FederationContext);
   const { t } = useTranslation();
   const navigate = useNavigate();
   const [view, setView] = useState<'list' | 'depth' | 'map'>('list');
+  const [openVisitThirdParty, setOpenVisitThirdParty] = useState<boolean>(false);
+  const [thirdPartyOrder, setThirdPartyOrder] = useState<PublicOrder>();
 
   const doubleView = windowSize.width > 115;
   const width = windowSize.width * 0.9;
   const maxBookTableWidth = 85;
   const chartWidthEm = width - maxBookTableWidth;
 
   const onOrderClicked = function (id: number, shortAlias: string): void {
-    navigate(`/order/${shortAlias}/${id}`);
+    const thirdParty = thirdParties[shortAlias];
+    if (thirdParty) {
+      const thirdPartyOrder = Object.values(federation.book).find(
+        (o) => o?.id === id && o?.coordinatorShortAlias === shortAlias,
+      );
+      if (thirdPartyOrder) {
+        setThirdPartyOrder(thirdPartyOrder);
+        setOpenVisitThirdParty(true);
+      }
+    } else {
+      navigate(`/order/${shortAlias}/${id}`);
+    }
   };
 
   const NavButtons = function (): JSX.Element {
@@ -69,6 +87,13 @@ const BookPage = (): JSX.Element => {
 
   return (
     <Grid container direction='column' alignItems='center' spacing={1} sx={{ minWidth: 400 }}>
+      <VisitThirdParty
+        open={openVisitThirdParty}
+        onClose={() => {
+          setOpenVisitThirdParty(false);
+        }}
+        thirdPartyOrder={thirdPartyOrder}
+      />
       <Grid item xs={12}>
         {doubleView ? (
           <Grid

diff --git a/frontend/src/basic/MainDialogs/index.tsx b/frontend/src/basic/MainDialogs/index.tsx
@@ -11,6 +11,7 @@ import {
 } from '../../components/Dialogs';
 import { AppContext, type UseAppStoreType, closeAll } from '../../contexts/AppContext';
 import { FederationContext, type UseFederationStoreType } from '../../contexts/FederationContext';
+import ThirdPartyDialog from '../../components/Dialogs/ThirdParty';
 
 export interface OpenDialogs {
   more: boolean;
@@ -24,6 +25,7 @@ export interface OpenDialogs {
   update: boolean;
   profile: boolean;
   recovery: boolean;
+  thirdParty: string;
 }
 
 const MainDialogs = (): JSX.Element => {
@@ -95,6 +97,13 @@ const MainDialogs = (): JSX.Element => {
         }}
         shortAlias={open.coordinator}
       />
+      <ThirdPartyDialog
+        open={Boolean(open.thirdParty)}
+        onClose={() => {
+          setOpen(closeAll);
+        }}
+        shortAlias={open.thirdParty}
+      />
     </>
   );
 };

diff --git a/frontend/src/basic/MakerPage/index.tsx b/frontend/src/basic/MakerPage/index.tsx
@@ -11,6 +11,8 @@ import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
 import { NoRobotDialog } from '../../components/Dialogs';
 import { FederationContext, type UseFederationStoreType } from '../../contexts/FederationContext';
 import { GarageContext, type UseGarageStoreType } from '../../contexts/GarageContext';
+import VisitThirdParty from '../../components/Dialogs/VisitThirdParty';
+import { PublicOrder } from '../../models';
 
 const MakerPage = (): JSX.Element => {
   const { fav, windowSize, navbarHeight } = useContext<UseAppStoreType>(AppContext);
@@ -23,6 +25,8 @@ const MakerPage = (): JSX.Element => {
   const [showMatches, setShowMatches] = useState<boolean>(false);
   const [openNoRobot, setOpenNoRobot] = useState<boolean>(false);
   const [clickedOrder, setClickedOrder] = useState<{ id: number; shortAlias: string }>();
+  const [openVisitThirdParty, setOpenVisitThirdParty] = useState<boolean>(false);
+  const [thirdPartyOrder, setThirdPartyOrder] = useState<PublicOrder>();
 
   const matches = useMemo(() => {
     return filterOrders({
@@ -31,7 +35,7 @@ const MakerPage = (): JSX.Element => {
         currency: fav.currency === 0 ? 1 : fav.currency,
         type: fav.type,
         mode: fav.mode,
-        coordinator: 'any',
+        coordinator: 'robosats',
       },
       premium: Number(maker.premium) ?? null,
       paymentMethods: maker.paymentMethods,
@@ -53,16 +57,34 @@ const MakerPage = (): JSX.Element => {
   ]);
 
   const onOrderClicked = function (id: number, shortAlias: string): void {
-    if (garage.getSlot()?.hashId) {
-      navigate(`/order/${shortAlias}/${id}`);
+    const thirdParty = thirdParties[shortAlias];
+    if (thirdParty) {
+      const thirdPartyOrder = Object.values(federation.book).find(
+        (o) => o?.id === id && o?.coordinatorShortAlias === shortAlias,
+      );
+      if (thirdPartyOrder) {
+        setThirdPartyOrder(thirdPartyOrder);
+        setOpenVisitThirdParty(true);
+      }
     } else {
-      setClickedOrder({ id, shortAlias });
-      setOpenNoRobot(true);
+      if (garage.getSlot()?.hashId) {
+        navigate(`/order/${shortAlias}/${id}`);
+      } else {
+        setClickedOrder({ id, shortAlias });
+        setOpenNoRobot(true);
+      }
     }
   };
 
   return (
     <Grid container direction='column' alignItems='center' spacing={1}>
+      <VisitThirdParty
+        open={openVisitThirdParty}
+        onClose={() => {
+          setOpenVisitThirdParty(false);
+        }}
+        thirdPartyOrder={thirdPartyOrder}
+      />
       <NoRobotDialog
         open={openNoRobot}
         onClose={() => {

diff --git a/frontend/src/basic/SettingsPage/index.tsx b/frontend/src/basic/SettingsPage/index.tsx
@@ -19,7 +19,7 @@ const SettingsPage = (): JSX.Element => {
   const onionUrlPattern = /^((http|https):\/\/)?[a-zA-Z2-7]{16,56}\.onion$/;
 
   const addCoordinator: () => void = () => {
-    if (federation.coordinators[newAlias]) {
+    if (federation.getCoordinator(newAlias)) {
       setError(t('Alias already exists'));
     } else {
       if (onionUrlPattern.test(newUrl)) {

diff --git a/frontend/src/components/BookTable/BookControl.tsx b/frontend/src/components/BookTable/BookControl.tsx
@@ -22,6 +22,8 @@ import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import SwapCalls from '@mui/icons-material/SwapCalls';
 import { FederationContext, type UseFederationStoreType } from '../../contexts/FederationContext';
 import RobotAvatar from '../RobotAvatar';
+import RoboSats from '../Icons/RoboSats';
+import RoboSatsNoText from '../Icons/RoboSatsNoText';
 
 interface BookControlProps {
   width: number;
@@ -350,7 +352,13 @@ const BookControl = ({
                     <FlagWithProps code='ANY' />
                   </div>
                 </MenuItem>
-                {Object.values(federation.coordinators)
+                <MenuItem value='robosats'>
+                  <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
+                    <RoboSatsNoText sx={{ color: '#1976d2' }} />
+                  </div>
+                </MenuItem>
+                {federation
+                  .getCoordinators()
                   .filter((coord) => coord.enabled)
                   .map((coordinator) => (
                     <MenuItem

diff --git a/frontend/src/components/BookTable/index.tsx b/frontend/src/components/BookTable/index.tsx
@@ -40,6 +40,7 @@ import { Fullscreen, FullscreenExit, Refresh } from '@mui/icons-material';
 import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
 import { FederationContext, type UseFederationStoreType } from '../../contexts/FederationContext';
 import headerStyleFix from '../DataGrid/HeaderFix';
+import thirdParties from '../../../static/thirdparties.json';
 
 const ClickThroughDataGrid = styled(DataGrid)({
   '& .MuiDataGrid-overlayWrapperInner': {
@@ -183,6 +184,7 @@ const BookTable = ({
       headerName: t('Robot'),
       width: width * fontSize,
       renderCell: (params: any) => {
+        const thirdParty = thirdParties[params.row.coordinatorShortAlias];
         return (
           <ListItemButton
             style={{ cursor: 'pointer' }}
@@ -203,7 +205,7 @@ const BookTable = ({
               />
             </ListItemAvatar>
             <ListItemText
-              primary={params.row.maker_nick}
+              primary={params.row.maker_nick ?? thirdParty.longAlias}
               sx={{ position: 'relative', left: '-1.3em', bottom: '0.6em' }}
             />
           </ListItemButton>
@@ -218,9 +220,11 @@ const BookTable = ({
       headerName: t('Robot'),
       width: width * fontSize,
       renderCell: (params: any) => {
+        const coordinator = federation.getCoordinator(params.row.coordinatorShortAlias);
+        const thirdParty = thirdParties[params.row.coordinatorShortAlias];
         return (
           <div
-            style={{ position: 'relative', left: '-0.34em', cursor: 'pointer', bottom: '0.2em' }}
+            style={{ position: 'relative', cursor: 'pointer', bottom: '0.2em' }}
             onClick={() => {
               onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
             }}
@@ -233,6 +237,10 @@ const BookTable = ({
               orderType={params.row.type}
               statusColor={statusBadgeColor(params.row.maker_status)}
               tooltip={t(params.row.maker_status)}
+              coordinatorShortAlias={
+                thirdParty?.shortAlias ??
+                (coordinator?.federated ? params.row.coordinatorShortAlias : undefined)
+              }
             />
           </div>
         );
@@ -242,7 +250,12 @@ const BookTable = ({
 
   const onClickCoordinator = function (shortAlias: string): void {
     setOpen((open) => {
-      return { ...open, coordinator: shortAlias };
+      const thirdParty = thirdParties[shortAlias];
+      if (thirdParty) {
+        return { ...open, thirdParty: shortAlias };
+      } else {
+        return { ...open, coordinator: shortAlias };
+      }
     });
   };
 
@@ -252,7 +265,8 @@ const BookTable = ({
       headerName: t('Host'),
       width: width * fontSize,
       renderCell: (params: any) => {
-        const coordinator = federation.coordinators[params.row.coordinatorShortAlias];
+        const coordinator = federation.getCoordinator(params.row.coordinatorShortAlias);
+        const thirdParty = thirdParties[params.row.coordinatorShortAlias];
         return (
           <ListItemButton
             style={{ cursor: 'pointer' }}
@@ -262,8 +276,11 @@ const BookTable = ({
           >
             <ListItemAvatar sx={{ position: 'relative', left: '-1.54em', bottom: '0.4em' }}>
               <RobotAvatar
-                shortAlias={coordinator.federated ? params.row.coordinatorShortAlias : undefined}
-                hashId={coordinator.federated ? undefined : coordinator.mainnet.onion}
+                shortAlias={
+                  thirdParty?.shortAlias ??
+                  (coordinator?.federated ? params.row.coordinatorShortAlias : undefined)
+                }
+                hashId={coordinator?.federated ? undefined : coordinator?.shortAlias}
                 style={{ width: '3.215em', height: '3.215em' }}
                 smooth={true}
                 small={true}
@@ -426,7 +443,9 @@ const BookTable = ({
       width: width * fontSize,
       renderCell: (params: any) => {
         const currencyCode = String(currencyDict[params.row.currency.toString()]);
-        const coordinator = federation.getCoordinator(params.row.coordinatorShortAlias);
+        const coordinator =
+          federation.getCoordinator(params.row.coordinatorShortAlias) ??
+          federation.getCoordinators()[0];
         const premium = parseFloat(params.row.premium);
         const limitPrice = coordinator.limits[params.row.currency.toString()]?.price;
         const price = (limitPrice ?? 1) * (1 + premium / 100);
@@ -523,7 +542,7 @@ const BookTable = ({
               onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
             }}
           >
-            {hours > 0 ? `${hours}h` : `${minutes}m`}
+            {hours > 0 ? `${hours}h` : minutes ? `${minutes}m` : '-'}
           </div>
         );
       },
@@ -585,7 +604,9 @@ const BookTable = ({
       type: 'number',
       width: width * fontSize,
       renderCell: (params: any) => {
-        const coordinator = federation.getCoordinator(params.row.coordinatorShortAlias);
+        const coordinator =
+          federation.getCoordinator(params.row.coordinatorShortAlias) ??
+          federation.getCoordinators()[0];
         const amount =
           params.row.has_range === true
             ? parseFloat(params.row.max_amount)
@@ -646,7 +667,9 @@ const BookTable = ({
             onClick={() => {
               onOrderClicked(params.row.id, params.row.coordinatorShortAlias);
             }}
-          >{`${Number(params.row.bond_size)}%`}</div>
+          >
+            {params.row.bond_size ? `${Number(params.row.bond_size)}%` : '-'}
+          </div>
         );
       },
     };
@@ -698,18 +721,10 @@ const BookTable = ({
           object: robotObj,
         },
         small: {
-          width: 4.1,
+          width: 5.1,
           object: robotSmallObj,
         },
       },
-      coordinatorShortAlias: {
-        priority: 5,
-        order: 3,
-        normal: {
-          width: 4.1,
-          object: coordinatorObj,
-        },
-      },
       price: {
         priority: 6,
         order: 11,
@@ -742,24 +757,43 @@ const BookTable = ({
           object: satoshisObj,
         },
       },
-      type: {
+      coordinatorShortAlias: {
         priority: 10,
+        order: 3,
+        normal: {
+          width: 4.1,
+          object: coordinatorObj,
+        },
+        small: {
+          width: 5.1,
+          object: () => {
+            return {
+              field: 'coordinatorShortAlias',
+              headerName: '',
+              width: 0,
+              renderCell: () => <></>,
+            };
+          },
+        },
+      },
+      type: {
+        priority: 11,
         order: 2,
         normal: {
           width: fav.mode === 'swap' ? 7 : 4.3,
           object: typeObj,
         },
       },
       bond_size: {
-        priority: 11,
+        priority: 12,
         order: 11,
         normal: {
           width: 4.2,
           object: bondObj,
         },
       },
       id: {
-        priority: 12,
+        priority: 13,
         order: 13,
         normal: {
           width: 4.8,

diff --git a/frontend/src/components/Charts/DepthChart/index.tsx b/frontend/src/components/Charts/DepthChart/index.tsx
@@ -68,8 +68,8 @@ const DepthChart: React.FC<DepthChartProps> = ({
   useEffect(() => {
     if (Object.values(federation.book).length > 0) {
       const enriched = Object.values(federation.book).map((order) => {
-        if (order?.coordinatorShortAlias && order?.currency) {
-          const limits = federation.getCoordinator(order.coordinatorShortAlias)?.limits;
+        if (order?.currency) {
+          const limits = federation.getCoordinators()[0]?.limits;
 
           const originalPrice =
             (limits[order.currency]?.price ?? 0) * (1 + parseFloat(order.premium) / 100);