Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-02-20 12:19:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Small fixes

Browse Source
This commit is contained in:
Reckless_Satoshi 2023-12-02 12:12:52 +00:00
parent 7e97c325f1
commit 4fda9370fd
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
14 changed files with 64 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/basic/Main.tsx
View File

@ -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<UseAppStoreType>(AppContext);
const { federation, sortedCoordinators } = useContext<UseFederationStoreType>(FederationContext);
const { garage } = useContext<UseGarageStoreType>(GarageContext);
const [avatarBaseUrl, setAvatarBaseUrl] = useState<string>(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 = () => {
<Router>
<RobotAvatar
style={{ display: 'none' }}
nickname={garage.getSlot()?.getRobot()?.nickname}
baseUrl={federation.getCoordinator(sortedCoordinators[0]).getBaseUrl()}
hashId={garage.getSlot()?.getRobot()?.hashId}
onLoad={onLoad}
/>
<Notifications
@ -81,7 +75,7 @@ const Main: React.FC = () => {
appear={slideDirection.in !== undefined}
>
<div>
<RobotPage avatarBaseUrl={avatarBaseUrl} />
<RobotPage />
</div>
</Slide>
}

3
frontend/src/basic/NavBar/NavBar.tsx
View File

@ -130,8 +130,7 @@ const NavBar = (): JSX.Element => {
<RobotAvatar
style={{ width: '2.3em', height: '2.3em', position: 'relative', top: '0.2em' }}
avatarClass={theme.palette.mode === 'dark' ? 'navBarAvatarDark' : 'navBarAvatar'}
nickname={slot?.getRobot()?.nickname}
baseUrl={hostUrl}
hashId={slot?.getRobot()?.hashId}
/>
) : (
<></>

3
frontend/src/basic/RobotPage/Onboarding.tsx
View File

@ -164,7 +164,7 @@ const Onboarding = ({
<Grid item sx={{ width: '13.5em' }}>
<RobotAvatar
nickname={robot?.nickname}
hashId={robot?.hashId}
smooth={true}
style={{ maxWidth: '12.5em', maxHeight: '12.5em' }}
placeholderType='generating'
@ -176,7 +176,6 @@ const Onboarding = ({
width: '12.4em',
}}
tooltipPosition='top'
baseUrl={hostUrl}
/>
</Grid>

8
frontend/src/basic/RobotPage/RobotProfile.tsx
View File

@ -44,7 +44,7 @@ const RobotProfile = ({
setView,
width,
}: RobotProfileProps): JSX.Element => {
const { windowSize, hostUrl } = useContext<UseAppStoreType>(AppContext);
const { windowSize } = useContext<UseAppStoreType>(AppContext);
const { garage, robotUpdatedAt, orderUpdatedAt } = useContext<UseGarageStoreType>(GarageContext);
const { sortedCoordinators } = useContext<UseFederationStoreType>(FederationContext);
@ -127,7 +127,7 @@ const RobotProfile = ({
<Grid item sx={{ width: `13.5em` }}>
<RobotAvatar
nickname={robot?.nickname}
hashId={robot?.hashId}
smooth={true}
style={{ maxWidth: '12.5em', maxHeight: '12.5em' }}
placeholderType='generating'
@ -140,7 +140,6 @@ const RobotProfile = ({
}}
tooltip={t('This is your trading avatar')}
tooltipPosition='top'
baseUrl={hostUrl}
/>
{robot?.found === true && slot?.lastShortAlias != null ? (
<Typography align='center' variant='h6'>
@ -275,11 +274,10 @@ const RobotProfile = ({
>
<Grid item>
<RobotAvatar
nickname={slot?.getRobot()?.nickname}
hashId={slot?.getRobot()?.hashId}
smooth={true}
style={{ width: '2.6em', height: '2.6em' }}
placeholderType='loading'
baseUrl={hostUrl}
small={true}
/>
</Grid>

8
frontend/src/basic/RobotPage/index.tsx
View File

@ -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<UseAppStoreType>(AppContext);
const { garage } = useContext<UseGarageStoreType>(GarageContext);
const { federation, sortedCoordinators } = useContext<UseFederationStoreType>(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}

10
frontend/src/components/BookTable/index.tsx
View File

@ -220,14 +220,13 @@ const BookTable = ({
>
<ListItemAvatar>
<RobotAvatar
nickname={params.row.maker_nick}
hashId={params.row.maker_hash_id}
style={{ width: '3.215em', height: '3.215em' }}
smooth={true}
flipHorizontally={true}
orderType={params.row.type}
statusColor={statusBadgeColor(params.row.maker_status)}
tooltip={t(params.row.maker_status)}
baseUrl={url + basePath}
small={true}
/>
</ListItemAvatar>
@ -257,14 +256,13 @@ const BookTable = ({
}}
>
<RobotAvatar
nickname={params.row.maker_nick}
hashId={params.row.maker_hash_id}
smooth={true}
flipHorizontally={true}
style={{ width: '3.215em', height: '3.215em' }}
orderType={params.row.type}
statusColor={statusBadgeColor(params.row.maker_status)}
tooltip={t(params.row.maker_status)}
baseUrl={url + basePath}
/>
</div>
);
@ -293,12 +291,10 @@ const BookTable = ({
>
<ListItemAvatar>
<RobotAvatar
nickname={params.row.coordinatorShortAlias}
coordinator={true}
shortAlias={params.row.coordinatorShortAlias}
style={{ width: '3.215em', height: '3.215em' }}
smooth={true}
flipHorizontally={true}
baseUrl={hostUrl}
small={true}
/>
</ListItemAvatar>

4
frontend/src/components/Dialogs/Coordinator.tsx
View File

@ -362,12 +362,10 @@ const CoordinatorDialog = ({ open = false, onClose, network, shortAlias }: Props
<Grid container direction='column' alignItems='center' padding={0}>
<Grid item>
<RobotAvatar
nickname={coordinator?.shortAlias}
coordinator={true}
shortAlias={coordinator?.shortAlias}
style={{ width: '7.5em', height: '7.5em' }}
smooth={true}
flipHorizontally={false}
baseUrl={hostUrl}
/>
</Grid>
<Grid item>

3
frontend/src/components/Dialogs/Profile.tsx
View File

@ -83,8 +83,7 @@ const ProfileDialog = ({ open = false, baseUrl, onClose }: Props): JSX.Element =
<RobotAvatar
avatarClass='profileAvatar'
style={{ width: 65, height: 65 }}
nickname={garage.getSlot()?.getRobot()?.nickname}
baseUrl={baseUrl}
hashId={garage.getSlot()?.getRobot()?.hashId}
/>
</ListItemAvatar>
</ListItem>

4
frontend/src/components/FederationTable/index.tsx
View File

@ -75,12 +75,10 @@ const FederationTable = ({
>
<Grid item>
<RobotAvatar
nickname={params.row.shortAlias}
coordinator={true}
shortAlias={params.row.shortAlias}
style={{ width: '3.215em', height: '3.215em' }}
smooth={true}
flipHorizontally={true}
baseUrl={hostUrl}
small={true}
/>
</Grid>

15
frontend/src/components/OrderDetails/index.tsx
View File

@ -264,12 +264,7 @@ const OrderDetails = ({
{' '}
<Grid container direction='row' justifyContent='center' alignItems='center'>
<Grid item xs={2}>
<RobotAvatar
nickname={coordinator.shortAlias}
coordinator={true}
baseUrl={hostUrl}
small={true}
/>
<RobotAvatar shortAlias={coordinator.shortAlias} coordinator={true} small={true} />
</Grid>
<Grid item xs={4}>
<ListItemText primary={coordinator.longAlias} secondary={t('Order host')} />
@ -283,10 +278,9 @@ const OrderDetails = ({
<ListItemAvatar sx={{ width: '4em', height: '4em' }}>
<RobotAvatar
statusColor={statusBadgeColor(currentOrder?.maker_status ?? '')}
nickname={currentOrder?.maker_nick}
hashId={currentOrder?.maker_hash_id}
tooltip={t(currentOrder?.maker_status ?? '')}
orderType={currentOrder?.type}
baseUrl={baseUrl}
small={true}
/>
</ListItemAvatar>
@ -315,12 +309,11 @@ const OrderDetails = ({
<RobotAvatar
avatarClass='smallAvatar'
statusColor={statusBadgeColor(currentOrder?.taker_status ?? '')}
nickname={
currentOrder?.taker_nick === 'None' ? undefined : currentOrder?.taker_nick
hashId={
currentOrder?.taker_hash_id === 'None' ? undefined : currentOrder?.taker_hash_id
}
tooltip={t(currentOrder?.taker_status ?? '')}
orderType={currentOrder?.type === 0 ? 1 : 0}
baseUrl={baseUrl}
small={true}
/>
</ListItemAvatar>

61
frontend/src/components/RobotAvatar/index.tsx
View File

@ -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<Props> = ({
nickname,
shortAlias,
hashId,
orderType,
statusColor,
tooltip,
@ -43,14 +43,13 @@ const RobotAvatar: React.FC<Props> = ({
avatarClass = 'flippedSmallAvatar',
imageStyle = {},
onLoad = () => {},
coordinator = false,
baseUrl,
}) => {
const [avatarSrc, setAvatarSrc] = useState<string>();
const [nicknameReady, setNicknameReady] = useState<boolean>(false);
const [avatarSrc, setAvatarSrc] = useState<string>('');
const [avatarReady, setAvatarReady] = useState<boolean>(false);
const [activeBackground, setActiveBackground] = useState<boolean>(true);
const { hostUrl } = useContext<UseAppStoreType>(AppContext);
const backgroundFadeTime = 3000;
const path = coordinator ? '/static/federation/avatars/' : '/static/assets/avatars/';
const [backgroundData] = useState<BackgroundData>(
placeholderType === 'generating' ? placeholder.generating : placeholder.loading,
);
@ -59,38 +58,44 @@ const RobotAvatar: React.FC<Props> = ({
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 = (
<div style={{ position: 'relative', left: '0.428em', top: '0.07em' }}>
@ -106,6 +111,7 @@ const RobotAvatar: React.FC<Props> = ({
);
const avatar = useMemo(() => {
console.log(avatarSrc, avatarReady);
if (smooth) {
return (
<div
@ -121,15 +127,12 @@ const RobotAvatar: React.FC<Props> = ({
>
<div className={className}>
<SmoothImage
src={nicknameReady ? avatarSrc : null}
src={avatarReady ? avatarSrc : null}
imageStyles={{
borderRadius: '50%',
border: '0.3px solid #55555',
filter: 'dropShadow(0.5px 0.5px 0.5px #000000)',
...imageStyle,
onLoad: setTimeout(() => {
setActiveBackground(false);
}, 5000),
}}
/>
</div>
@ -140,8 +143,8 @@ const RobotAvatar: React.FC<Props> = ({
<Avatar
className={avatarClass}
style={style}
alt={nickname}
src={nicknameReady ? avatarSrc : null}
alt={hashId ?? shortAlias ?? 'unknown'}
src={avatarReady ? avatarSrc : ''}
imgProps={{
sx: { transform: flipHorizontally ? 'scaleX(-1)' : '' },
style: { transform: flipHorizontally ? 'scaleX(-1)' : '' },
@ -150,7 +153,7 @@ const RobotAvatar: React.FC<Props> = ({
/>
);
}
}, [nickname, nicknameReady, avatarSrc, statusColor, tooltip, avatarClass]);
}, [hashId, shortAlias, avatarReady, avatarSrc, statusColor, tooltip, avatarClass]);
const getAvatarWithBadges = useCallback(() => {
let component = avatar;

8
frontend/src/contexts/FederationContext.ts
View File

@ -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

4
frontend/src/models/Order.model.ts
View File

@ -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,

16
frontend/src/models/Robot.model.ts
View File

@ -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<string, any>): 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');
}
};