From a67f65d6d023c2de74a90f49e7af91b00a8a2821 Mon Sep 17 00:00:00 2001
From: Quentin Burg <quentin@marigold.dev>
Date: Tue, 22 Aug 2023 18:54:27 +0200
Subject: [PATCH] :construction:

---
 batcher-ui/components/BatcherInfo/index.tsx | 15 +++++++++------
 batcher-ui/contexts/events.tsx              | 16 ++++++++--------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/batcher-ui/components/BatcherInfo/index.tsx b/batcher-ui/components/BatcherInfo/index.tsx
index 75ecb23c..22249be1 100644
--- a/batcher-ui/components/BatcherInfo/index.tsx
+++ b/batcher-ui/components/BatcherInfo/index.tsx
@@ -26,7 +26,7 @@ const BatcherInfo = () => {
 
   return (
     <div className="font-custom">
-      <div className="flex flex-row p-3">
+      <div className="flex flex-col md:flex-row p-3">
         <div className="flex flex-direction-col border-solid border-2 border-[#7B7B7E]">
           <div className="p-3">
             <p className="text-xl font-mono">Batcher Time Remaining</p>
@@ -47,7 +47,7 @@ const BatcherInfo = () => {
                 <p>
                   {`${
                     status === BatcherStatus.CLEARED
-                      ? 'LastBatch'
+                      ? 'Last batch : '
                       : 'Current batch : '
                   } ${batchNumber}`}
                 </p>
@@ -59,7 +59,7 @@ const BatcherInfo = () => {
         </div>
         <div className="border-[#7B7B7E] border-2 border-solid">
           <div className="flex flex-col batcher-balance-title">
-            <div className="flex border-solid border-2 border-[#7B7B7E]">
+            <div className="flex flex-row border-solid border-2 border-[#7B7B7E] justify-between">
               <p className="batcher-title p-3">Balances</p>
               <p className="batcher-title p-3">
                 {currentSwap.isReverse
@@ -85,15 +85,18 @@ const BatcherInfo = () => {
               </p>
             </div>
           </div>
-          <div className="flex flex-row border-[#7B7B7E] border-2 border-solid">
+          <div className="flex flex-row border-[#7B7B7E] border-2 border-solid justify-between">
             <p className="p-4">Address</p>
             {userAddress ? (
-              <p>{userAddress}</p>
+              <p className="p-4">{`${userAddress.substring(
+                0,
+                3
+              )}...${userAddress.substring(userAddress.length - 3)}`}</p>
             ) : (
               <p className="p-4">No Wallet connected</p>
             )}
           </div>
-          <div className="flex flex-row border-[#7B7B7E] border-2 border-solid">
+          <div className="flex flex-row border-[#7B7B7E] border-2 border-solid justify-between">
             <p className="p-4">Oracle Price</p>
             <p className="p-4">
               {oraclePrice} {tokenPair}
diff --git a/batcher-ui/contexts/events.tsx b/batcher-ui/contexts/events.tsx
index 152503d0..d0818021 100644
--- a/batcher-ui/contexts/events.tsx
+++ b/batcher-ui/contexts/events.tsx
@@ -1,24 +1,24 @@
-import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
-import React, { createContext, useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { /* HubConnection */ HubConnectionBuilder } from '@microsoft/signalr';
+import React, { createContext, useEffect } from 'react';
+// import { useSelector } from 'react-redux';
 import { useDispatch } from 'react-redux';
 import { newEvent } from 'src/actions/events';
-import { userAddressSelector } from 'src/reducers';
-import { setup, subscribeTokenBalances } from 'utils/webSocketUtils';
+// import { userAddressSelector } from 'src/reducers';
+import { setup /* subscribeTokenBalances */ } from 'utils/webSocketUtils';
 
 export const EventsContext = createContext<{}>({});
 
 export const EventsProvider = ({ children }: { children: React.ReactNode }) => {
-  const [socket, setSocket] = useState<HubConnection | undefined>(undefined);
+  // const [socket, setSocket] = useState<HubConnection | undefined>(undefined);
   const dispatch = useDispatch();
-  const userAddress = useSelector(userAddressSelector);
+  // const userAddress = useSelector(userAddressSelector);
 
   useEffect(() => {
     const socket = new HubConnectionBuilder()
       .withUrl(process.env.NEXT_PUBLIC_TZKT_URI_API + '/v1/ws')
       .build();
     setup(socket);
-    setSocket(socket);
+    // setSocket(socket);
     socket.on('bigmaps', e => {
       if (e.data) dispatch(newEvent(e));
     });