fixing lint errors

app/client/web/src/StagingFiles.ts

@@ -5,9 +5,9 @@ export class StagingFiles implements Staging {
   public async clear(): Promise<void> {}
 
   private base64ToUint8Array(base64: string): Uint8Array {
-    var binaryString = atob(base64);
+    const binaryString = atob(base64);
-    var bytes = new Uint8Array(binaryString.length);
+    const bytes = new Uint8Array(binaryString.length);
-    for (var i = 0; i < binaryString.length; i++) {
+    for (let i = 0; i < binaryString.length; i++) {
       bytes[i] = binaryString.charCodeAt(i);
     }
     return bytes;
@@ -22,15 +22,15 @@ export class StagingFiles implements Staging {
     return window.btoa(binary);
   }
 
-  private loadFileData(file: any): Promise<ArrayBuffer> {
+  private loadFileData(file: File): Promise<ArrayBuffer> {
     return new Promise(resolve => {
       const reader = new FileReader()
-      reader.onloadend = (res) => { resolve(reader.result as ArrayBuffer) }
+      reader.onloadend = () => { resolve(reader.result as ArrayBuffer) }
       reader.readAsArrayBuffer(file)
     })
   };
 
-  public async read(source: any): Promise<{ size: number, getData: (position: number, length: number)=>Promise<string>, close: ()=>Promise<void> }> {
+  public async read(source: File): Promise<{ size: number, getData: (position: number, length: number)=>Promise<string>, close: ()=>Promise<void> }> {
     const data = await this.loadFileData(source);
     const size = data.byteLength;
     const getData = async (position: number, length: number) => {

app/client/web/src/accounts/Accounts.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import classes from './Accounts.module.css'
 import { useAccounts } from './useAccounts.hook'
-import { Modal, Divider, Text, ActionIcon, Button } from '@mantine/core'
+import { Modal, Text, ActionIcon, Button } from '@mantine/core'
 import { IconUserPlus, IconUserCheck, IconCopy, IconCheck, IconReload, IconSettings, IconLockOpen2, IconUserCancel, IconTrash } from '@tabler/icons-react'
 import { Card } from '../card/Card'
 import { Colors } from '../constants/Colors';
@@ -176,7 +176,7 @@ export function Accounts({ openSetup }: { openSetup: ()=>void }) {
       <div className={classes.content}>
         <div className={classes.header}>
           { state.layout !== 'large' && (
-            <ActionIcon className={classes.action} variant="light" onClick={actions.reload} loading={loading}> 
+            <ActionIcon className={classes.action} variant="light" onClick={loadAccounts} loading={loading}> 
               <IconReload />
             </ActionIcon>
           )}
@@ -184,7 +184,7 @@ export function Accounts({ openSetup }: { openSetup: ()=>void }) {
             <Text className={classes.title}>{ state.strings.accounts }</Text>
           </div>
           { state.layout === 'large' && (
-            <ActionIcon className={classes.action} variant="light" onClick={actions.reload} loading={loading}> 
+            <ActionIcon className={classes.action} variant="light" onClick={loadAccounts} loading={loading}> 
               <IconReload />
             </ActionIcon>
           )}

app/client/web/src/accounts/useAccounts.hook.ts

@@ -1,4 +1,4 @@
-import {useEffect, useState, useContext, useRef} from 'react';
+import {useEffect, useState, useContext} from 'react';
 import {AppContext} from '../context/AppContext';
 import {DisplayContext} from '../context/DisplayContext';
 import {ContextType} from '../context/ContextType';
@@ -15,6 +15,7 @@ export function useAccounts() {
     secretText: '',
   });
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const updateState = (value: any) => {
     setState(s => ({...s, ...value}));
   };

app/client/web/src/base/useBase.hook.ts

@@ -34,7 +34,7 @@ export function useBase() {
       updateState({ cardSet: cards.length > 0 });
     }
     const setChannels = ({ channels, cardId }: { channels: Channel[]; cardId: string | null }) => {
-      updateState({ channelSet: channels.length > 0 });
+      updateState({ channelSet: cardId && channels.length > 0 });
     }
     const setContent = (loaded: boolean) => {
       updateState({ contentSet: loaded });

app/client/web/src/call/Call.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { useCall } from './useCall.hook';
 import classes from './Call.module.css'
-import { Card as Contact } from '../card/Card';
 import { Colors } from '../constants/Colors';
 import { modals } from '@mantine/modals'
 import { Image, Text, ActionIcon } from '@mantine/core'
@@ -12,9 +11,6 @@ export function Call() {
   const [ending, setEnding] = useState(false);
   const [applyingAudio, setApplyingAudio] = useState(false);
   const [applyingVideo, setApplyingVideo] = useState(false);
-  const [accepting, setAccepting] = useState(null as null|string);
-  const [ignoring, setIgnoring] = useState(null as null|string);
-  const [declining, setDeclining] = useState(null as null|string);
   const remote = useRef(null as null|HTMLVideoElement);
   const local = useRef(null as null|HTMLVideoElement);
 

app/client/web/src/calling/Calling.tsx

@@ -4,7 +4,7 @@ import { type Card } from 'databag-client-sdk'
 import { useCalling } from './useCalling.hook';
 import { Card as Contact } from '../card/Card';
 import { Loader, Image, Text, ActionIcon } from '@mantine/core'
-import { IconEyeX, IconPhone, IconPhoneOff, IconMicrophone, IconMicrophoneOff, IconVideo, IconVideoOff } from '@tabler/icons-react'
+import { IconEyeX, IconPhone, IconMicrophone, IconMicrophoneOff, IconVideo, IconVideoOff } from '@tabler/icons-react'
 import { modals } from '@mantine/modals'
 import { Colors } from '../constants/Colors'
 

app/client/web/src/calling/useCalling.hook.ts

@@ -1,4 +1,4 @@
-import { useState, useContext, useEffect, useRef } from 'react'
+import { useState, useContext, useEffect } from 'react'
 import { RingContext } from '../context/RingContext'
 import { DisplayContext } from '../context/DisplayContext'
 import { ContextType } from '../context/ContextType'

app/client/web/src/contacts/Contacts.tsx

@@ -3,8 +3,7 @@ import { useContacts } from './useContacts.hook'
 import { Text, ActionIcon, TextInput, Button } from '@mantine/core'
 import { IconUserCheck, IconCancel, IconRefresh, IconSearch, IconUserPlus, IconSortAscending, IconSortDescending, IconMessage2, IconPhone } from '@tabler/icons-react'
 import classes from './Contacts.module.css'
-import { type Card } from 'databag-client-sdk';
+import { Card } from '../card/Card'
-import { Card as Contact } from '../card/Card'
 import { ProfileParams } from '../profile/Profile'
 import { Colors } from '../constants/Colors'
 import { modals } from '@mantine/modals'
@@ -48,8 +47,12 @@ export function Contacts({ openRegistry, openContact, textContact, closeContacts
         const phone = <IconPhone size={24} />
         const text = <IconMessage2 size={24} />
         return [
-          <Action key="phone" icon={phone} color={Colors.connected} select={async () => { await actions.call(card), closeContacts() }} strings={state.strings} />,
+          <Action key="phone" icon={phone} color={Colors.connected}
-          <Action key="text" icon={text} color={Colors.connected} select={async () => textContact(card.cardId)} strings={state.strings} />,
+            select={async () => { await actions.call(card); closeContacts() }}
+            strings={state.strings} />,
+          <Action key="text" icon={text} color={Colors.connected}
+            select={async () => textContact(card.cardId)}
+            strings={state.strings} />,
         ]
       } else if (status === 'offsync') {
         const resync = <IconRefresh size={24} />
@@ -76,7 +79,7 @@ export function Contacts({ openRegistry, openContact, textContact, closeContacts
     }
 
     return (
-      <Contact key={idx} className={classes.card} imageUrl={card.imageUrl} name={card.name} handle={card.handle} node={card.node} placeholder={state.strings.name} select={select} actions={options} />
+      <Card key={idx} className={classes.card} imageUrl={card.imageUrl} name={card.name} handle={card.handle} node={card.node} placeholder={state.strings.name} select={select} actions={options} />
     )
   })
 

app/client/web/src/context/useRingContext.hook.ts

@@ -1,5 +1,4 @@
 import { useState, useContext, useEffect, useRef } from 'react'
-import { DisplayContext } from '../context/DisplayContext';
 import { AppContext } from '../context/AppContext'
 import { ContextType } from '../context/ContextType'
 import { Link, type Card } from 'databag-client-sdk';
@@ -8,13 +7,13 @@ const CLOSE_POLL_MS = 100;
 
 export function useRingContext() {
   const app = useContext(AppContext) as ContextType;
-  const display = useContext(DisplayContext) as ContextType;
   const call = useRef(null as { peer: RTCPeerConnection, link: Link, candidates: RTCIceCandidate[] } | null);
   const localStream = useRef(null as null|MediaStream);
   const localAudio = useRef(null as null|MediaStreamTrack);
   const localVideo = useRef(null as null|MediaStreamTrack);
   const remoteStream = useRef(null as null|MediaStream);
   const updatingPeer = useRef(false);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const peerUpdate = useRef([] as {type: string, data?: any}[]);
   const connecting = useRef(false);
   const closing = useRef(false);
@@ -75,7 +74,6 @@ export function useRingContext() {
 
   const linkStatus = async (status: string) => {
     if (call.current) {
-      const { peer, link } = call.current;
       if (status === 'connected') {
         const connectedTime = Math.floor((new Date()).getTime() / 1000);
         updateState({ connected: true, connectedTime });
@@ -91,6 +89,7 @@ export function useRingContext() {
     }
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const updatePeer = async (type: string, data?: any) => {
     peerUpdate.current.push({ type, data });
 
@@ -101,11 +100,12 @@ export function useRingContext() {
         const { type, data } = peerUpdate.current.shift() || { type: '' };
         try {
           switch (type) {
-            case 'negotiate':
+            case 'negotiate': {
               const description = await peer.createOffer();
               await peer.setLocalDescription(description);
               await link.sendMessage({ description });
               break;
+            }
             case 'candidate':
               await link.sendMessage({ data });
               break;
@@ -183,6 +183,7 @@ export function useRingContext() {
     const candidates = [] as RTCIceCandidate[];
     call.current = { peer, link, candidates };
     link.setStatusListener(linkStatus);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     link.setMessageListener((msg: any) => updatePeer('message', msg));
     updateState({ calling: card, failed: false, connected: false, connectedTime: 0,
       audioEnabled: false, videoEnabled: false, localVideo: false, remoteVideo: false,
@@ -209,7 +210,7 @@ export function useRingContext() {
       localAudio.current = null;
     }
     localStream.current = null;
-    remoteStream.current = null,
+    remoteStream.current = null;
     peerUpdate.current = [];
     updateState({ calling: null, connected: false, connectedTime: 0, fullscreen: false,
       failed: false, localStream: null, remoteStream: null, localVideo: false, remoteVideo: false });
@@ -219,19 +220,18 @@ export function useRingContext() {
   const transmit = (ice: { urls: string; username: string; credential: string }[]) => {
     const peerConnection = new RTCPeerConnection({ iceServers: ice });
     peerConnection.addEventListener( 'connectionstatechange', event => {
-      console.log("????CONNECTION STATE", event);
+      console.log(peerConnection, event);
-      console.log(peerConnection);
     });
     peerConnection.addEventListener( 'icecandidate', event => {
       updatePeer('candidate', event.candidate);
     });
     peerConnection.addEventListener( 'icecandidateerror', event => {
-      console.log("ICE ERROR");
+      console.log("ICE ERROR", event);
     });
     peerConnection.addEventListener( 'iceconnectionstatechange', event => {
       console.log("ICE STATE CHANGE", event);
     });
-    peerConnection.addEventListener( 'negotiationneeded', event => {
+    peerConnection.addEventListener( 'negotiationneeded', () => {
       updatePeer('negotiate');
     });
     peerConnection.addEventListener( 'signalingstatechange', event => {

app/client/web/src/conversation/Conversation.tsx

@@ -1,8 +1,7 @@
-import React, {useState, useEffect, useRef, useCallback} from 'react'
+import React, {useState, useEffect, useRef} from 'react'
-import { Focus } from 'databag-client-sdk'
 import classes from './Conversation.module.css'
 import { useConversation } from './useConversation.hook';
-import { IconSend, IconTextSize, IconTextColor, IconVideo, IconFile, IconDisc, IconCamera, IconX, IconSettings, IconHome, IconServer, IconShield, IconLock, IconExclamationCircle } from '@tabler/icons-react'
+import { IconSend, IconTextSize, IconTextColor, IconVideo, IconFile, IconDisc, IconCamera, IconSettings, IconHome, IconServer, IconShield, IconExclamationCircle } from '@tabler/icons-react'
 import { CloseButton, Menu, Divider, Text, Textarea, ActionIcon, Loader } from '@mantine/core'
 import { Message } from '../message/Message';
 import { modals } from '@mantine/modals'
@@ -15,7 +14,6 @@ import AnimateHeight from 'react-animate-height';
 import { useResizeDetector } from 'react-resize-detector';
 
 const PAD_HEIGHT = (1024 - 64);
-const LOAD_DEBOUNCE = 1000;
 
 export type MediaAsset = {
   encrypted?: { type: string, thumb: string, label: string, extension: string, parts: { blockIv: string, partId: string }[] },
@@ -28,14 +26,13 @@ export type MediaAsset = {
 export function Conversation({ openDetails }: { openDetails: ()=>void }) {
   const thread = useRef(null as HTMLDivElement | null);
   const scrollPos = useRef(0);
-  const debounce = useRef(false);
   const [sending, setSending] = useState(false);
   const { state, actions } = useConversation();
   const attachImage = useRef({ click: ()=>{} } as HTMLInputElement);
   const attachVideo = useRef({ click: ()=>{} } as HTMLInputElement);
   const attachAudio = useRef({ click: ()=>{} } as HTMLInputElement);
   const attachBinary = useRef({ click: ()=>{} } as HTMLInputElement);
-  const { width, height, ref } = useResizeDetector();
+  const { height, ref } = useResizeDetector();
   const input = useRef(null as null | HTMLTextAreaElement);
 
   const addImage = (image: File | undefined) => {

app/client/web/src/conversation/audioFile/AudioFile.tsx

@@ -6,7 +6,7 @@ import audio from '../../images/audio.png'
 import { IconX } from '@tabler/icons-react'
 
 export function AudioFile({ source, updateLabel, disabled, remove }: {source: File, updateLabel: (label: string)=>void, disabled: boolean, remove: ()=>void}) {
-  const { state, actions } = useAudioFile(source);
+  const { state } = useAudioFile(source);
 
   useEffect(() => {
     updateLabel(state.label);

app/client/web/src/conversation/binaryFile/BinaryFile.tsx

@@ -6,7 +6,7 @@ import binary from '../../images/binary.png'
 import { IconX } from '@tabler/icons-react'
 
 export function BinaryFile({ source, disabled, remove }: {source: File, disabled: boolean, remove: ()=>void}) {
-  const { state, actions } = useBinaryFile(source);
+  const { state } = useBinaryFile(source);
 
   return (
     <div className={classes.asset}>

app/client/web/src/conversation/imageFile/ImageFile.tsx

@@ -5,7 +5,7 @@ import classes from './ImageFile.module.css'
 import { IconX } from '@tabler/icons-react'
 
 export function ImageFile({ source, disabled, remove }: {source: File, disabled: boolean, remove: ()=>void}) {
-  const { state, actions } = useImageFile(source);
+  const { state } = useImageFile(source);
 
   return (
     <div className={classes.asset}>

app/client/web/src/conversation/useConversation.hook.ts

@@ -1,10 +1,9 @@
-import { useState, useContext, useEffect, useRef } from 'react'
+import { useState, useContext, useEffect } from 'react'
 import { AppContext } from '../context/AppContext'
 import { DisplayContext } from '../context/DisplayContext'
-import { Focus, FocusDetail, Topic, Profile, Card, AssetType, AssetSource, HostingMode, TransformType } from 'databag-client-sdk'
+import { Focus, FocusDetail, Topic, Profile, Card, AssetType, AssetSource, TransformType } from 'databag-client-sdk'
 import { ContextType } from '../context/ContextType'
 import Resizer from "react-image-file-resizer";
-import { placeholder } from '../constants/Icons';
 
 const IMAGE_SCALE_SIZE = (128 * 1024);
 const GIF_TYPE = 'image/gif';
@@ -19,7 +18,7 @@ function getImageThumb(file: File) {
       reader.onload = function () {
         resolve(reader.result as string);
       };
-      reader.onerror = function (error) {
+      reader.onerror = function () {
         reject();
       };
     }
@@ -35,12 +34,12 @@ function getImageThumb(file: File) {
 function getVideoThumb(file: File, position?: number) {
   return new Promise<string>((resolve, reject) => {
     const url = URL.createObjectURL(file);
-    var video = document.createElement("video");
+    const video = document.createElement("video");
-    var timeupdate = function (ev: any) {
+    const timeupdate = function () {
       video.removeEventListener("timeupdate", timeupdate);
       video.pause();
       setTimeout(() => {
-        var canvas = document.createElement("canvas");
+        const canvas = document.createElement("canvas");
         if (!canvas) {
           reject();
         } else {
@@ -57,7 +56,7 @@ function getVideoThumb(file: File, position?: number) {
             reject();
           } else {
             context.drawImage(video, 0, 0, canvas.width, canvas.height);
-            var image = canvas.toDataURL("image/jpeg", 0.75);
+            const image = canvas.toDataURL("image/jpeg", 0.75);
             resolve(image);
           }
         }
@@ -116,6 +115,7 @@ export function useConversation() {
     setState((s) => ({ ...s, ...value }))
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const updateAsset = (index: number, value: any) => {
     setState((s) => {
       s.assets[index] = { ...s.assets[index], ...value };

app/client/web/src/conversation/videoFile/VideoFile.tsx

@@ -6,7 +6,7 @@ import { IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react'
 import { placeholder } from '../../constants/Icons'
 
 export function VideoFile({ source, thumbPosition, disabled, remove }: {source: File, thumbPosition: (position: number)=>void, disabled: boolean, remove: ()=>void}) {
-  const { state, actions } = useVideoFile(source);
+  const { state } = useVideoFile(source);
   const [ error, setError ] = useState(false);
   const [loaded, setLoaded] = useState(false);
   const position = useRef(0);

app/client/web/src/details/Details.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { useDetails } from './useDetails.hook'
 import classes from './Details.module.css'
-import { IconUserCog, IconEyeOff, IconAlertHexagon, IconMessageX, IconLogout2, IconHome, IconServer, IconShield, IconShieldOff, IconCalendarClock, IconExclamationCircle, IconX, IconEdit, IconDeviceFloppy, IconArrowBack, IconLabel } from '@tabler/icons-react'
+import { IconUserCog, IconEyeOff, IconAlertHexagon, IconMessageX, IconLogout2, IconHome, IconServer, IconShield, IconShieldOff, IconCalendarClock, IconExclamationCircle, IconX, IconDeviceFloppy, IconArrowBack, IconLabel } from '@tabler/icons-react'
-import { Switch, Button, Modal, Divider, Text, Textarea, Image, TextInput, ActionIcon } from '@mantine/core'
+import { Switch, Button, Modal, Divider, Text, TextInput, ActionIcon } from '@mantine/core'
 import { Card } from '../card/Card';
 import { modals } from '@mantine/modals'
 import { useDisclosure } from '@mantine/hooks'

app/client/web/src/details/useDetails.hook.ts

@@ -69,6 +69,8 @@ export function useDetails() {
   }, [display.state]);
 
   useEffect(() => {
+console.log("DETAILS", state.detail);
+
     const hostCard = state.cards.find(entry => entry.cardId == state.cardId);
     const profileRemoved = state.detail?.members ? state.detail.members.filter(member => state.profile?.guid != member.guid) : [];
     const contactCards = profileRemoved.map(member => state.cards.find(card => card.guid === member.guid));

app/client/web/src/message/Message.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState, useCallback } from 'react';
+import React, { useRef, useEffect, useState, useCallback } from 'react';
 import { avatar } from '../constants/Icons'
 import { Topic, Card, Profile } from 'databag-client-sdk';
 import classes from './Message.module.css'
@@ -126,16 +126,16 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
     const hostPattern = new RegExp('^https?:\\/\\/', 'i');
 
     let plain = '';
-    let clickable = [];
+    const clickable = [];
     const parsed = !text ? [] : text.split(' ');
 
     if (parsed?.length > 0) {
       const words = parsed as string[];
       words.forEach((word, index) => {
-        if (!!urlPattern.test(word)) {
+        if (urlPattern.test(word)) {
           clickable.push(<span key={index}>{ plain }</span>);
           plain = '';
-          const url = !!hostPattern.test(word) ? word : `https://${word}`;
+          const url = hostPattern.test(word) ? word : `https://${word}`;
           clickable.push(<a key={'link-'+index} target="_blank" rel="noopener noreferrer" href={sanitizeUrl(url)}>{ `${word} ` }</a>);
         }
         else {
@@ -166,8 +166,6 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
     }
   }
 
-  const options = [];
-
   const media = !assets ? [] : assets.map((asset: MediaAsset, index: number) => {
     if (asset.image || asset.encrypted?.type === 'image') {
       return <ImageAsset key={index} topicId={topicId} asset={asset as MediaAsset} />

app/client/web/src/message/audioAsset/useAudioAsset.hook.ts

@@ -1,6 +1,5 @@
-import { useState, useContext, useEffect, useRef } from 'react'
+import { useState, useContext, useRef } from 'react'
 import { AppContext } from '../../context/AppContext'
-import { Focus } from 'databag-client-sdk'
 import { ContextType } from '../../context/ContextType'
 import { MediaAsset } from '../../conversation/Conversation';
 

app/client/web/src/message/binaryAsset/BinaryAsset.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { MediaAsset } from '../../conversation/Conversation';
 import { useBinaryAsset } from './useBinaryAsset.hook';
 import { Progress, ActionIcon, Image } from '@mantine/core'

app/client/web/src/message/binaryAsset/useBinaryAsset.hook.ts

@@ -1,6 +1,5 @@
-import { useState, useContext, useEffect, useRef } from 'react'
+import { useState, useContext, useRef } from 'react'
 import { AppContext } from '../../context/AppContext'
-import { Focus } from 'databag-client-sdk'
 import { ContextType } from '../../context/ContextType'
 import { MediaAsset } from '../../conversation/Conversation';
 

app/client/web/src/message/imageAsset/useImageAsset.hook.ts

@@ -1,6 +1,5 @@
 import { useState, useContext, useEffect, useRef } from 'react'
 import { AppContext } from '../../context/AppContext'
-import { Focus } from 'databag-client-sdk'
 import { ContextType } from '../../context/ContextType'
 import { MediaAsset } from '../../conversation/Conversation';
 

app/client/web/src/message/useMessage.hook.ts

@@ -41,6 +41,7 @@ export function useMessage() {
         await focus.removeTopic(topicId);
       }
     },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     saveSubject: async (topicId: string, sealed: boolean, subject: any) => {
       const focus = app.state.focus;
       if (focus) {

app/client/web/src/message/videoAsset/useVideoAsset.hook.ts

@@ -1,6 +1,5 @@
 import { useState, useContext, useEffect, useRef} from 'react'
 import { AppContext } from '../../context/AppContext'
-import { Focus } from 'databag-client-sdk'
 import { ContextType } from '../../context/ContextType'
 import { MediaAsset } from '../../conversation/Conversation';
 

app/client/web/src/profile/Profile.tsx

@@ -3,7 +3,6 @@ import { useProfile } from './useProfile.hook'
 import classes from './Profile.module.css'
 import { modals } from '@mantine/modals'
 import {
-  IconX,
   IconMapPin,
   IconBook,
   IconUserX,

app/client/web/src/profile/useProfile.hook.ts

@@ -104,7 +104,7 @@ export function useProfile(params: ProfileParams) {
     },
     saveAndConnect: async () => {
       const contact = app.state.session?.getContact();
-      const added = await contact.addAndConnectCard(state.node, state.guid);
+      await contact.addAndConnectCard(state.node, state.guid);
     },
     remove: async () => {
       const contact = app.state.session?.getContact()

app/client/web/src/registry/useRegistry.hook.ts

@@ -61,7 +61,6 @@ export function useRegistry() {
         identity.removeProfileListener(setProfile);
       };
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {

app/client/web/src/ring/Ring.tsx

@@ -5,8 +5,8 @@ import { Card as Contact } from '../card/Card';
 import { Card } from 'databag-client-sdk';
 import { Colors } from '../constants/Colors';
 import { modals } from '@mantine/modals'
-import { Loader, Image, Text, ActionIcon } from '@mantine/core'
+import { Loader, Text, ActionIcon } from '@mantine/core'
-import { IconBell, IconVideoPlus, IconEyeX, IconPhone, IconPhoneOff, IconArrowsMaximize, IconMicrophone, IconMicrophoneOff } from '@tabler/icons-react'
+import { IconBell, IconVideoPlus, IconEyeX, IconPhone, IconArrowsMaximize, IconMicrophone, IconMicrophoneOff } from '@tabler/icons-react'
 
 export function Ring() {
   const { state, actions } = useRing();
@@ -117,7 +117,7 @@ export function Ring() {
     const acceptButton = <ActionIcon key="accept" variant="subtle" loading={accepting===ring.callId} onClick={()=>accept(callId, card)} color={Colors.primary}><IconPhone /></ActionIcon>
 
     return (
-      <Contact className={classes.card} placeholder={''} imageUrl={imageUrl} name={name} node={node} handle={handle} actions={[ignoreButton, declineButton, acceptButton]} />
+      <Contact key={`ring-${index}`} className={classes.card} placeholder={''} imageUrl={imageUrl} name={name} node={node} handle={handle} actions={[ignoreButton, declineButton, acceptButton]} />
     )
   });
 

app/client/web/src/service/Service.tsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import { Text, Drawer } from '@mantine/core'
+import { Drawer } from '@mantine/core'
-import { DisplayContext } from '../context/DisplayContext'
-import { ContextType } from '../context/ContextType'
 import classes from './Service.module.css'
 import { useService } from './useService.hook'
 import { IconAddressBook, IconSettings } from '@tabler/icons-react'

app/client/web/src/service/useService.hook.ts

@@ -1,4 +1,4 @@
-import {useEffect, useState, useContext, useRef} from 'react';
+import {useEffect, useState, useContext} from 'react';
 import {AppContext} from '../context/AppContext';
 import {DisplayContext} from '../context/DisplayContext';
 import {ContextType} from '../context/ContextType';
@@ -12,6 +12,7 @@ export function useService() {
     strings: {},
   });
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const updateState = (value: any) => {
     setState(s => ({...s, ...value}));
   };

app/client/web/src/session/Session.tsx

@@ -1,8 +1,6 @@
 import React, { useState } from 'react'
 import { Text, Drawer } from '@mantine/core'
-import { DisplayContext } from '../context/DisplayContext'
 import { RingContextProvider } from '../context/RingContext'
-import { ContextType } from '../context/ContextType'
 import classes from './Session.module.css'
 import { useSession } from './useSession.hook'
 import { IconAddressBook, IconMessages, IconSettings } from '@tabler/icons-react'
@@ -14,7 +12,6 @@ import { Profile, ProfileParams } from '../profile/Profile'
 import { Details } from '../details/Details';
 import { Content } from '../content/Content'
 import { Conversation } from '../conversation/Conversation'
-import { Focus, Card } from 'databag-client-sdk'
 import { useDisclosure } from '@mantine/hooks'
 import { IconAlertCircle } from '@tabler/icons-react'
 import { Base } from '../base/Base';

app/client/web/src/session/useSession.hook.ts

@@ -1,4 +1,4 @@
-import { useState, useContext, useEffect, useRef } from 'react'
+import { useState, useContext, useEffect } from 'react'
 import { AppContext } from '../context/AppContext'
 import { DisplayContext } from '../context/DisplayContext'
 import { ContextType } from '../context/ContextType'

app/client/web/src/settings/useSettings.hook.ts

@@ -2,7 +2,7 @@ import { useEffect, useState, useContext, useRef } from 'react'
 import { AppContext } from '../context/AppContext'
 import { DisplayContext } from '../context/DisplayContext'
 import { ContextType } from '../context/ContextType'
-import { type Profile, type Config, type PushParams, PushType } from 'databag-client-sdk'
+import { type Profile, type Config, PushType } from 'databag-client-sdk'
 import { Point, Area } from 'react-easy-crop/types'
 
 const IMAGE_DIM = 192
@@ -17,7 +17,7 @@ function urlB64ToUint8Array(b64: string) {
   const rawData = window.atob(base64);
   const outputArray = new Uint8Array(rawData.length);
 
-  for (var i = 0; i < rawData.length; ++i) {
+  for (let i = 0; i < rawData.length; ++i) {
       outputArray[i] = rawData.charCodeAt(i);
   }
   return outputArray;

app/client/web/src/setup/Setup.tsx

@@ -1,8 +1,7 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
 import classes from './Setup.module.css'
 import { useSetup } from './useSetup.hook'
 import { PinInput, Image, Button, Radio, Group, Loader, Modal, Divider, Text, TextInput, Switch, ActionIcon } from '@mantine/core'
-import { modals } from '@mantine/modals'
 import { useDisclosure } from '@mantine/hooks'
 import { IconCheck, IconLogout, IconCopy } from '@tabler/icons-react'
 

app/client/web/src/setup/useSetup.hook.ts

@@ -30,6 +30,7 @@ export function useSetup() {
     confirmMFAuthImage: '',
   });
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const updateState = (value: any) => {
     setState(s => ({...s, ...value}));
   };