diff --git a/frontend/src/basic/Main.tsx b/frontend/src/basic/Main.tsx index 1ec99a23..989c997b 100644 --- a/frontend/src/basic/Main.tsx +++ b/frontend/src/basic/Main.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useEffect } from 'react'; import { MemoryRouter, BrowserRouter, Routes, Route } from 'react-router-dom'; import { Box, Slide, Typography, styled } from '@mui/material'; import { type UseAppStoreType, AppContext, closeAll } from '../contexts/AppContext'; @@ -34,11 +34,6 @@ const Main: React.FC = () => { useContext(AppContext); const { federation, sortedCoordinators } = useContext(FederationContext); const { garage } = useContext(GarageContext); - const [avatarBaseUrl, setAvatarBaseUrl] = useState(hostUrl); - - useEffect(() => { - setAvatarBaseUrl(federation.getCoordinator(sortedCoordinators[0]).getBaseUrl()); - }, [settings.network, settings.selfhostedClient, federation, sortedCoordinators]); const onLoad = (): void => { garage.updateSlot({ avatarLoaded: true }); @@ -48,8 +43,7 @@ const Main: React.FC = () => { { appear={slideDirection.in !== undefined} >
- +
} diff --git a/frontend/src/basic/NavBar/NavBar.tsx b/frontend/src/basic/NavBar/NavBar.tsx index 5f7148ac..3ca0f286 100644 --- a/frontend/src/basic/NavBar/NavBar.tsx +++ b/frontend/src/basic/NavBar/NavBar.tsx @@ -130,8 +130,7 @@ const NavBar = (): JSX.Element => { ) : ( <> diff --git a/frontend/src/basic/RobotPage/Onboarding.tsx b/frontend/src/basic/RobotPage/Onboarding.tsx index 2b666f53..389723aa 100644 --- a/frontend/src/basic/RobotPage/Onboarding.tsx +++ b/frontend/src/basic/RobotPage/Onboarding.tsx @@ -164,7 +164,7 @@ const Onboarding = ({ diff --git a/frontend/src/basic/RobotPage/RobotProfile.tsx b/frontend/src/basic/RobotPage/RobotProfile.tsx index 1cb9d066..f0835db6 100644 --- a/frontend/src/basic/RobotPage/RobotProfile.tsx +++ b/frontend/src/basic/RobotPage/RobotProfile.tsx @@ -44,7 +44,7 @@ const RobotProfile = ({ setView, width, }: RobotProfileProps): JSX.Element => { - const { windowSize, hostUrl } = useContext(AppContext); + const { windowSize } = useContext(AppContext); const { garage, robotUpdatedAt, orderUpdatedAt } = useContext(GarageContext); const { sortedCoordinators } = useContext(FederationContext); @@ -127,7 +127,7 @@ const RobotProfile = ({ {robot?.found === true && slot?.lastShortAlias != null ? ( @@ -275,11 +274,10 @@ const RobotProfile = ({ > diff --git a/frontend/src/basic/RobotPage/index.tsx b/frontend/src/basic/RobotPage/index.tsx index 793a4abd..3b747dc2 100644 --- a/frontend/src/basic/RobotPage/index.tsx +++ b/frontend/src/basic/RobotPage/index.tsx @@ -23,11 +23,7 @@ import { validateTokenEntropy } from '../../utils'; import { FederationContext, type UseFederationStoreType } from '../../contexts/FederationContext'; import { GarageContext, type UseGarageStoreType } from '../../contexts/GarageContext'; -interface RobotPageProps { - avatarBaseUrl: string; -} - -const RobotPage = ({ avatarBaseUrl }: RobotPageProps): JSX.Element => { +const RobotPage = (): JSX.Element => { const { torStatus, windowSize, settings, page } = useContext(AppContext); const { garage } = useContext(GarageContext); const { federation, sortedCoordinators } = useContext(FederationContext); @@ -158,7 +154,6 @@ const RobotPage = ({ avatarBaseUrl }: RobotPageProps): JSX.Element => { inputToken={inputToken} setInputToken={setInputToken} getGenerateRobot={getGenerateRobot} - avatarBaseUrl={avatarBaseUrl} /> ) : null} @@ -170,7 +165,6 @@ const RobotPage = ({ avatarBaseUrl }: RobotPageProps): JSX.Element => { inputToken={inputToken} setInputToken={setInputToken} getGenerateRobot={getGenerateRobot} - avatarBaseUrl={avatarBaseUrl} /> ) : null} diff --git a/frontend/src/components/BookTable/index.tsx b/frontend/src/components/BookTable/index.tsx index aa0fddb2..54c21067 100644 --- a/frontend/src/components/BookTable/index.tsx +++ b/frontend/src/components/BookTable/index.tsx @@ -220,14 +220,13 @@ const BookTable = ({ > @@ -257,14 +256,13 @@ const BookTable = ({ }} > ); @@ -293,12 +291,10 @@ const BookTable = ({ > diff --git a/frontend/src/components/Dialogs/Coordinator.tsx b/frontend/src/components/Dialogs/Coordinator.tsx index bddb67ae..288094b4 100644 --- a/frontend/src/components/Dialogs/Coordinator.tsx +++ b/frontend/src/components/Dialogs/Coordinator.tsx @@ -362,12 +362,10 @@ const CoordinatorDialog = ({ open = false, onClose, network, shortAlias }: Props diff --git a/frontend/src/components/Dialogs/Profile.tsx b/frontend/src/components/Dialogs/Profile.tsx index 3a48b2f9..248ebdb1 100644 --- a/frontend/src/components/Dialogs/Profile.tsx +++ b/frontend/src/components/Dialogs/Profile.tsx @@ -83,8 +83,7 @@ const ProfileDialog = ({ open = false, baseUrl, onClose }: Props): JSX.Element = diff --git a/frontend/src/components/FederationTable/index.tsx b/frontend/src/components/FederationTable/index.tsx index 8958afc9..8c7cf816 100644 --- a/frontend/src/components/FederationTable/index.tsx +++ b/frontend/src/components/FederationTable/index.tsx @@ -75,12 +75,10 @@ const FederationTable = ({ > diff --git a/frontend/src/components/OrderDetails/index.tsx b/frontend/src/components/OrderDetails/index.tsx index 48cc52e8..d913801d 100644 --- a/frontend/src/components/OrderDetails/index.tsx +++ b/frontend/src/components/OrderDetails/index.tsx @@ -264,12 +264,7 @@ const OrderDetails = ({ {' '} - + @@ -283,10 +278,9 @@ const OrderDetails = ({ @@ -315,12 +309,11 @@ const OrderDetails = ({ diff --git a/frontend/src/components/RobotAvatar/index.tsx b/frontend/src/components/RobotAvatar/index.tsx index 98b74b7a..5266ffbd 100644 --- a/frontend/src/components/RobotAvatar/index.tsx +++ b/frontend/src/components/RobotAvatar/index.tsx @@ -1,15 +1,15 @@ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'; import SmoothImage from 'react-smooth-image'; import { Avatar, Badge, Tooltip } from '@mui/material'; import { SendReceiveIcon } from '../Icons'; -import { apiClient } from '../../services/api'; import placeholder from './placeholder.json'; import { robohash } from './RobohashGenerator'; +import { AppContext, UseAppStoreType } from '../../contexts/AppContext'; interface Props { - nickname: string | undefined; + shortAlias?: string | undefined; + hashId?: string | undefined; smooth?: boolean; - coordinator?: boolean; small?: boolean; flipHorizontally?: boolean; style?: object; @@ -21,7 +21,6 @@ interface Props { tooltipPosition?: string; avatarClass?: string; onLoad?: () => void; - baseUrl: string; } interface BackgroundData { @@ -30,7 +29,8 @@ interface BackgroundData { } const RobotAvatar: React.FC = ({ - nickname, + shortAlias, + hashId, orderType, statusColor, tooltip, @@ -43,14 +43,13 @@ const RobotAvatar: React.FC = ({ avatarClass = 'flippedSmallAvatar', imageStyle = {}, onLoad = () => {}, - coordinator = false, - baseUrl, }) => { - const [avatarSrc, setAvatarSrc] = useState(); - const [nicknameReady, setNicknameReady] = useState(false); + const [avatarSrc, setAvatarSrc] = useState(''); + const [avatarReady, setAvatarReady] = useState(false); const [activeBackground, setActiveBackground] = useState(true); + const { hostUrl } = useContext(AppContext); + const backgroundFadeTime = 3000; - const path = coordinator ? '/static/federation/avatars/' : '/static/assets/avatars/'; const [backgroundData] = useState( placeholderType === 'generating' ? placeholder.generating : placeholder.loading, ); @@ -59,38 +58,44 @@ const RobotAvatar: React.FC = ({ useEffect(() => { // TODO: HANDLE ANDROID AVATARS TOO (when window.NativeRobosats !== undefined) - if (nickname !== undefined && !coordinator) { + if (hashId !== undefined) { robohash - .generate(nickname, small ? 'small' : 'large') // TODO: should hash_id + .generate(hashId, small ? 'small' : 'large') .then((avatar) => { setAvatarSrc(avatar); }) .catch(() => { setAvatarSrc(''); }); - setNicknameReady(true); - setActiveBackground(false); + setAvatarReady(true); + setTimeout(() => { + setActiveBackground(false); + }, backgroundFadeTime); } + }, [hashId]); - if (coordinator) { + useEffect(() => { + if (shortAlias !== undefined) { if (window.NativeRobosats === undefined) { setAvatarSrc( - `${baseUrl}/static/federation/avatars/${nickname}${small ? '.small' : ''}.webp`, + `${hostUrl}/static/federation/avatars/${shortAlias}${small ? '.small' : ''}.webp`, ); } else { setAvatarSrc( - `file:///android_asset/Web.bundle/assets/federation/avatars/${nickname}${ + `file:///android_asset/Web.bundle/assets/federation/avatars/${shortAlias}${ small ? ' .small' : '' }.webp`, ); } - setNicknameReady(true); - setActiveBackground(false); + setAvatarReady(true); + setTimeout(() => { + setActiveBackground(false); + }, backgroundFadeTime); } else { - setNicknameReady(false); + setAvatarReady(false); setActiveBackground(true); } - }, [nickname]); // TODO: should hash_id + }, [shortAlias]); // TODO: should hashId const statusBadge = (
@@ -106,6 +111,7 @@ const RobotAvatar: React.FC = ({ ); const avatar = useMemo(() => { + console.log(avatarSrc, avatarReady); if (smooth) { return (
= ({ >
{ - setActiveBackground(false); - }, 5000), }} />
@@ -140,8 +143,8 @@ const RobotAvatar: React.FC = ({ = ({ /> ); } - }, [nickname, nicknameReady, avatarSrc, statusColor, tooltip, avatarClass]); + }, [hashId, shortAlias, avatarReady, avatarSrc, statusColor, tooltip, avatarClass]); const getAvatarWithBadges = useCallback(() => { let component = avatar; diff --git a/frontend/src/contexts/FederationContext.ts b/frontend/src/contexts/FederationContext.ts index d22e606a..7ce19769 100644 --- a/frontend/src/contexts/FederationContext.ts +++ b/frontend/src/contexts/FederationContext.ts @@ -151,19 +151,11 @@ export const useFederationStore = (): UseFederationStoreType => { const slot = garage.getSlot(); const robot = slot?.getRobot(); -<<<<<<< HEAD if (robot != null && garage.currentSlot != null) { if (open.profile && slot?.avatarLoaded === true && slot.token != null) { void federation.fetchRobot(garage, slot.token); // refresh/update existing robot } else if ( !(slot?.avatarLoaded === true) && -======= - if (robot != null && garage.currentSlot) { - if (open.profile && slot?.avatarLoaded && slot.token) { - void federation.fetchRobot(garage, slot.token); // refresh/update existing robot - } else if ( - !slot?.avatarLoaded && ->>>>>>> f861207a (Add robo-identity-wasm) robot.token !== undefined && robot.encPrivKey !== undefined && robot.pubKey !== undefined diff --git a/frontend/src/models/Order.model.ts b/frontend/src/models/Order.model.ts index 78b9e927..62a82b96 100644 --- a/frontend/src/models/Order.model.ts +++ b/frontend/src/models/Order.model.ts @@ -62,7 +62,9 @@ export interface Order { is_buyer: boolean; is_seller: boolean; maker_nick: string; + maker_hash_id: string; taker_nick: string; + taker_hash_id: string; status_message: string; is_fiat_sent: boolean; is_disputed: boolean; @@ -150,7 +152,9 @@ export const defaultOrder: Order = { is_buyer: false, is_seller: false, maker_nick: '', + maker_hash_id: '', taker_nick: '', + taker_hash_id: '', status_message: '', is_fiat_sent: false, is_disputed: false, diff --git a/frontend/src/models/Robot.model.ts b/frontend/src/models/Robot.model.ts index 6f525f7e..ea5cfb8e 100644 --- a/frontend/src/models/Robot.model.ts +++ b/frontend/src/models/Robot.model.ts @@ -15,7 +15,7 @@ class Robot { constructor(garageRobot?: Robot) { if (garageRobot != null) { this.token = garageRobot?.token ?? undefined; - this.hash_id = garageRobot?.hash_id ?? undefined; + this.hashId = garageRobot?.hashId ?? undefined; this.tokenSHA256 = garageRobot?.tokenSHA256 ?? (this.token != null ? hexToBase91(sha256(this.token)) : ''); this.pubKey = garageRobot?.pubKey ?? undefined; @@ -25,7 +25,7 @@ class Robot { public nickname?: string; public token?: string; - public hash_id?: string; + public hashId?: string; public bitsEntropy?: number; public shannonEntropy?: number; public tokenSHA256: string = ''; @@ -45,13 +45,15 @@ class Robot { update = (attributes: Record): void => { Object.assign(this, attributes); + + // generate robo identity if (attributes.token != null) { - const hash_id = sha256(sha256(attributes.token)); - this.hash_id = hash_id; - this.nickname = generate_roboname(hash_id); + const hashId = sha256(sha256(attributes.token)); + this.hashId = hashId; + this.nickname = generate_roboname(hashId); // trigger RoboHash avatar generation in webworker and store in RoboHash class cache. - robohash.generate(hash_id, 'small'); - robohash.generate(hash_id, 'large'); + robohash.generate(hashId, 'small'); + robohash.generate(hashId, 'large'); } };