diff --git a/apps/trading/client-pages/competitions/competitions-create-team.tsx b/apps/trading/client-pages/competitions/competitions-create-team.tsx index 21661fef3..19710ffef 100644 --- a/apps/trading/client-pages/competitions/competitions-create-team.tsx +++ b/apps/trading/client-pages/competitions/competitions-create-team.tsx @@ -1,5 +1,10 @@ -import { useSearchParams } from 'react-router-dom'; -import { Intent, TradingAnchorButton } from '@vegaprotocol/ui-toolkit'; +import { Link, useSearchParams } from 'react-router-dom'; +import { + Intent, + TradingAnchorButton, + VegaIcon, + VegaIconNames, +} from '@vegaprotocol/ui-toolkit'; import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet'; import { addDecimalsFormatNumber } from '@vegaprotocol/utils'; import { useT } from '../../lib/use-t'; @@ -30,6 +35,19 @@ export const CompetitionsCreateTeam = () => {
+ + {' '} + + {t('Go back to the competitions')} + +

{isSolo ? t('Create solo team') : t('Create a team')}

@@ -78,15 +96,17 @@ const CreateTeamFormContainer = ({ isSolo }: { isSolo: boolean }) => {

{t('Team creation transaction successful')}

{code && ( <> -

- Your team ID is:{' '} - - {code} - -

+
+
{t('Your team ID:')}
+
+ + {code} + +
+
{ const t = useT(); @@ -29,6 +37,19 @@ export const CompetitionsUpdateTeam = () => {
+ + {' '} + + {t('Go back to the team profile')} + +

{t('Update a team')}

@@ -57,7 +78,8 @@ const UpdateTeamFormContainer = ({ pubKey: string; }) => { const t = useT(); - const { team, loading, error } = useTeam(teamId, pubKey); + const [refetching, setRefetching] = useState(false); + const { team, loading, error, refetch } = useTeam(teamId, pubKey); const { err, status, onSubmit } = useReferralSetTransaction({ onSuccess: () => { @@ -65,7 +87,15 @@ const UpdateTeamFormContainer = ({ }, }); - if (loading) { + // refetch when saved + useEffect(() => { + if (refetch && status === 'confirmed') { + refetch(); + setRefetching(true); + } + }, [refetch, status]); + + if (loading && !refetching) { return ; } if (error) { @@ -84,6 +114,33 @@ const UpdateTeamFormContainer = ({ return ; } + if (status === 'confirmed') { + return ( +
+

+ {' '} + {t('Changes successfully saved to your team.')} +

+ + + {t('View team')} + +
+ ); + } + const defaultValues: FormFields = { id: team.teamId, name: team.name, diff --git a/apps/trading/components/competitions/team-avatar.tsx b/apps/trading/components/competitions/team-avatar.tsx index 7e8be0ecb..2b50a51ba 100644 --- a/apps/trading/components/competitions/team-avatar.tsx +++ b/apps/trading/components/competitions/team-avatar.tsx @@ -1,4 +1,6 @@ +import { isValidUrl } from '@vegaprotocol/utils'; import classNames from 'classnames'; +import { useEffect, useState } from 'react'; const NUM_AVATARS = 20; const AVATAR_PATHNAME_PATTERN = '/team-avatars/{id}.png'; @@ -11,6 +13,26 @@ export const getFallbackAvatar = (teamId: string) => { return AVATAR_PATHNAME_PATTERN.replace('{id}', avatarId); }; +const useAvatar = (teamId: string, url: string) => { + const fallback = getFallbackAvatar(teamId); + const [avatar, setAvatar] = useState(fallback); + + useEffect(() => { + if (!isValidUrl(url)) return; + fetch(url, { cache: 'force-cache' }) + .then((response) => { + if (response.ok) { + setAvatar(url); + } + }) + .catch(() => { + /** noop */ + }); + }); + + return avatar; +}; + export const TeamAvatar = ({ teamId, imgUrl, @@ -22,7 +44,7 @@ export const TeamAvatar = ({ alt?: string; size?: 'large' | 'small'; }) => { - const img = imgUrl && imgUrl.length > 0 ? imgUrl : getFallbackAvatar(teamId); + const img = useAvatar(teamId, imgUrl); return ( // eslint-disable-next-line @next/next/no-img-element