Merge pull request #188 from permaweb/staging

Staging
permaweb · Jan 9, 2025 · 83ff2fd · 83ff2fd
2 parents ba540f7 + f460f3a
commit 83ff2fd
Show file tree

Hide file tree

Showing 25 changed files with 648 additions and 679 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -16,17 +16,7 @@ module.exports = {
 					{
 						groups: [
 							['^react', '^@?\\w'],
-							[
-								'^arweave',
-								'arbundles',
-								'@irys/sdk',
-								'^warp',
-								'^permaweb-orderbook',
-								'^permaweb-sdk',
-								'^@permaweb/aoconnect',
-								'^@permaweb/stampjs',
-								'^@?\\w',
-							],
+							['^arweave', '^@permaweb/aoconnect', '^@permaweb/stampjs', '^@permaweb/ucm', '^@?\\w'],
 							['^(@|api)(/.*|$)', '^(@|gql)(/.*|$)'],
 							[
 								'^(@|app)(/.*|$)',

diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
 		"@othent/kms": "^1.0.7",
 		"@permaweb/aoconnect": "^0.0.45",
 		"@permaweb/stampjs": "^1.0.3",
+		"@permaweb/ucm": "0.0.5",
 		"async-lock": "^1.4.1",
 		"jwt-decode": "^4.0.0",
 		"nprogress": "^0.2.0",

diff --git a/src/api/index.ts b/src/api/index.ts
@@ -1,7 +1,7 @@
+import { ArweaveWebIrys } from '@irys/sdk/build/esm/web/tokens/arweave';
 import { dispatch } from '@othent/kms';
 
 import Arweave from 'arweave';
-import { ArweaveWebIrys } from '@irys/sdk/build/esm/web/tokens/arweave';
 import { createDataItemSigner, dryrun, message, result, results } from '@permaweb/aoconnect';
 
 import { CONTENT_TYPES, CURSORS, GATEWAYS, PAGINATORS, UPLOAD_CONFIG } from 'helpers/config';

diff --git a/src/api/profiles.ts b/src/api/profiles.ts
@@ -184,18 +184,33 @@ export async function getAndUpdateRegistryProfiles(ids: string[]): Promise<Regis
 					return uniqueProfiles;
 				}, [] as RegistryProfileType[]);
 
+				// Get current Redux state
 				const profilesReducer = store.getState().profilesReducer;
-				store.dispatch(
-					profilesActions.setProfiles({
-						...(profilesReducer ?? {}),
-						registryProfiles: [
-							...(profilesReducer?.registryProfiles || []),
-							...newProfiles.filter(
-								(profile) => !profilesReducer?.registryProfiles?.some((p: RegistryProfileType) => p.id === profile.id)
-							),
-						],
-					})
-				);
+				const currentRegistryProfiles = profilesReducer?.registryProfiles || [];
+
+				// Find profiles that are new or have changed
+				const updatedProfiles = newProfiles.filter((newProfile) => {
+					const existingProfile = currentRegistryProfiles.find((p) => p.id === newProfile.id);
+					return (
+						!existingProfile || // New profile
+						JSON.stringify(existingProfile) !== JSON.stringify(newProfile) // Updated profile
+					);
+				});
+
+				// Only dispatch if there are updates
+				if (updatedProfiles.length > 0) {
+					store.dispatch(
+						profilesActions.setProfiles({
+							...(profilesReducer ?? {}),
+							registryProfiles: [
+								...currentRegistryProfiles.filter(
+									(profile) => !updatedProfiles.some((p: RegistryProfileType) => p.id === profile.id)
+								),
+								...updatedProfiles,
+							],
+						})
+					);
+				}
 			} finally {
 				newProfileIds.forEach((id) => registryFetchQueue.delete(id));
 			}

diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -1,18 +1,13 @@
-import React, { lazy, Suspense } from 'react';
+import { lazy, Suspense } from 'react';
 import { useSelector } from 'react-redux';
-import { Link } from 'react-router-dom';
 import { ReactSVG } from 'react-svg';
 
 import { Loader } from 'components/atoms/Loader';
-import { Modal } from 'components/molecules/Modal';
 import { Banner } from 'components/organisms/Banner';
-import { ASSETS, DOM, FLAGS, URLS } from 'helpers/config';
-import { getTxEndpoint } from 'helpers/endpoints';
+import { ASSETS, DOM, FLAGS } from 'helpers/config';
 import { Footer } from 'navigation/footer';
 import { Header } from 'navigation/Header';
-import { useLocationProvider } from 'providers/LocationProvider';
 import { RootState } from 'store';
-import { getCampaignBackground } from 'views/Campaign';
 
 import * as S from './styles';
 
@@ -25,20 +20,6 @@ const Routes = lazy(() =>
 export default function App() {
 	const ucmReducer = useSelector((state: RootState) => state.ucmReducer);
 
-	const locationProvider = useLocationProvider();
-
-	const [showCampaign, setShowCampaign] = React.useState<boolean>(false);
-
-	React.useEffect(() => {
-		const campaignShown = localStorage.getItem('campaignShown');
-		if (locationProvider.country !== 'US' && !campaignShown) {
-			setShowCampaign(true);
-			localStorage.setItem('campaignShown', 'true');
-		} else {
-			setShowCampaign(false);
-		}
-	}, [locationProvider.country]);
-
 	return (
 		<>
 			<div id={DOM.loader} />
@@ -54,32 +35,6 @@ export default function App() {
 						</S.View>
 						<Footer />
 					</S.AppWrapper>
-					{showCampaign && (
-						<Modal header={null} handleClose={() => setShowCampaign(false)}>
-							<S.CampaignWrapper>
-								<div className={'content'}>
-									<S.CampaignSubheader>
-										<p>A tomb opens, and a legend stirs. Do you have what it takes to awaken The Omega One? </p>
-									</S.CampaignSubheader>
-									<S.PrimaryAssetWrapper>
-										<S.PrimaryAssetOverlay>
-											<ReactSVG src={ASSETS.question} className={'fade-in'} />
-										</S.PrimaryAssetOverlay>
-										<img src={getTxEndpoint('Nt58KmL01idgtiDU2BQFWZObEbejnhfFdVyfCEFkEdU')} />
-										<S.CampaignAction>
-											<Link to={URLS.quest} onClick={() => setShowCampaign(false)}>
-												<span>Enter Tomb</span>
-											</Link>
-										</S.CampaignAction>
-									</S.PrimaryAssetWrapper>
-								</div>
-								<S.MActionWrapper>
-									<button onClick={() => setShowCampaign(false)}>Close</button>
-								</S.MActionWrapper>
-								{getCampaignBackground()}
-							</S.CampaignWrapper>
-						</Modal>
-					)}
 				</Suspense>
 			) : FLAGS.MAINTENANCE ? (
 				<div className={'app-loader'}>

diff --git a/src/app/styles.ts b/src/app/styles.ts
@@ -480,177 +480,3 @@ export const FullMessageWrapper = styled.div`
 		text-align: center;
 	}
 `;
-
-export const CampaignWrapper = styled.div`
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	position: relative;
-	overflow: hidden;
-	padding: 20px 20px 40px 20px;
-	background: linear-gradient(
-		180deg,
-		rgb(3, 22, 26),
-		rgb(4 20 24),
-		rgb(8 24 29),
-		rgb(6 28 27),
-		rgb(12, 36, 29),
-		rgb(13, 38, 28)
-	);
-	border: 1.5px solid #0f3226;
-	border-radius: ${STYLING.dimensions.radius.primary};
-	img {
-		height: 425px;
-		margin: 40px 0;
-		border: 1.5px solid #1fd014;
-		box-shadow: 0px 0px 10px 3.5px #5af650;
-	}
-
-	.content {
-		position: relative;
-		z-index: 1;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
-`;
-
-export const CampaignSubheader = styled.div`
-	max-width: 90%;
-	background: rgba(10, 10, 10, 0.625);
-	backdrop-filter: blur(15px);
-	padding: 15px 20px;
-	border-radius: ${STYLING.dimensions.radius.primary};
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 30px;
-	margin: 60px 0 0 0;
-
-	p {
-		line-height: 1.5;
-		max-width: 800px;
-		color: #d8d6a7;
-		font-size: ${(props) => props.theme.typography.size.lg};
-		font-weight: ${(props) => props.theme.typography.weight.medium};
-		font-family: 'Frank Ruhl Libre', serif;
-		text-align: center;
-	}
-`;
-
-export const PrimaryAssetWrapper = styled.div`
-	position: relative;
-`;
-
-export const MActionWrapper = styled.div`
-	position: absolute;
-	top: 20px;
-	right: 20px;
-	z-index: 1;
-	button {
-		font-size: ${(props) => props.theme.typography.size.xSmall};
-		font-weight: ${(props) => props.theme.typography.weight.xBold};
-		font-family: 'Frank Ruhl Libre', serif;
-		background: transparent;
-		border: 1px solid #c0c0c0;
-		color: #c0c0c0;
-		padding: 5px 10px;
-		border-radius: ${STYLING.dimensions.radius.alt2};
-		transition: all 175ms;
-		&:hover {
-			cursor: pointer;
-			color: #fff;
-			border: 1px solid #fff;
-		}
-	}
-`;
-
-export const GridElementOverlay = styled.div`
-	height: 389.5px;
-	width: calc(100% - 24.5px);
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	position: absolute;
-	top: 12.5px;
-	left: 12.5px;
-	display: flex;
-	background: rgba(10, 10, 10, 0.75);
-	backdrop-filter: blur(7.5px);
-	border-radius: 2.5px;
-
-	svg {
-		height: 185px;
-		width: 185px;
-		margin: -50px 0 0 0;
-		color: #d7d7d2;
-		fill: #d7d7d2;
-	}
-`;
-
-export const PrimaryAssetOverlay = styled(GridElementOverlay)`
-	height: 425px;
-	width: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	position: absolute;
-	top: 40px;
-	left: 0;
-	display: flex;
-	background: rgba(15, 15, 15, 0.55);
-	backdrop-filter: blur(2.5px);
-	border: 1px solid #585858;
-	border-radius: 0;
-
-	svg {
-		height: 200px;
-		width: 200px;
-		margin: -10px 0 0 0;
-	}
-`;
-
-export const CampaignAction = styled.div`
-	display: flex;
-	justify-content: center;
-	a {
-		width: calc(100% - 20px);
-		padding: 10px 20px;
-		border-radius: ${STYLING.dimensions.radius.primary};
-		background: linear-gradient(180deg, #80f154, #bbe948, #efe13e);
-		border: 1.5px solid #80f154;
-		box-shadow: 0 0 10px 2.5px #80f154;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		transition: all 175ms;
-		span {
-			color: #0d3f0a;
-			font-weight: ${(props) => props.theme.typography.weight.xBold};
-			font-size: ${(props) => props.theme.typography.size.xLg};
-			font-family: 'Frank Ruhl Libre', serif;
-		}
-
-		&:hover {
-			background: rgba(10, 10, 10, 0.65);
-			border: 1.5px solid #7ec9bf;
-			box-shadow: none;
-			span {
-				color: #7ec9bf;
-			}
-		}
-
-		&:disabled {
-			background: #666666;
-			box-shadow: none;
-			border: 1.5px solid #666666;
-			span {
-				color: ${(props) => props.theme.colors.font.light1};
-			}
-		}
-	}
-`;
diff --git a/src/components/atoms/CurrencyLine/CurrencyLine.tsx b/src/components/atoms/CurrencyLine/CurrencyLine.tsx
@@ -29,7 +29,7 @@ export default function CurrencyLine(props: IProps) {
 			const formattedAmount: string = (Math.round(amount) / factor).toFixed(denomination);
 			return formatCount(formattedAmount);
 		}
-		return `${language.fetching}...`;
+		return `${language.loading}...`;
 	}
 
 	function getCurrency() {

diff --git a/src/components/atoms/TxAddress/styles.ts b/src/components/atoms/TxAddress/styles.ts
@@ -4,10 +4,10 @@ export const Wrapper = styled.div<{ disabled: boolean }>`
 	display: flex;
 	align-items: center;
 	p {
-		color: ${(props) => props.theme.colors.font.primary};
+		color: ${(props) => props.theme.colors.font.primary} !important;
 		font-size: ${(props) => props.theme.typography.size.base};
-		font-family: ${(props) => props.theme.typography.family.primary};
-		font-weight: ${(props) => props.theme.typography.weight.bold};
+		font-family: ${(props) => props.theme.typography.family.primary} !important;
+		font-weight: ${(props) => props.theme.typography.weight.bold} !important;
 		text-decoration: ${(props) => (props.disabled ? 'none' : 'underline')};
 
 		&:hover {

diff --git a/src/components/molecules/Panel/Panel.tsx b/src/components/molecules/Panel/Panel.tsx
@@ -22,7 +22,7 @@ export default function Panel(props: IProps) {
 
 	const escFunction = React.useCallback(
 		(e: any) => {
-			if (e.key === 'Escape' && props.handleClose) {
+			if (e.key === 'Escape' && props.handleClose && !props.closeHandlerDisabled) {
 				props.handleClose();
 			}
 		},
@@ -41,7 +41,11 @@ export default function Panel(props: IProps) {
 		return (
 			<>
 				<S.Container noHeader={!props.header} width={props.width}>
-					<CloseHandler active={props.open} disabled={!props.open} callback={() => props.handleClose()}>
+					<CloseHandler
+						active={props.open && !props.closeHandlerDisabled}
+						disabled={!props.open || props.closeHandlerDisabled}
+						callback={() => props.handleClose()}
+					>
 						{props.header && (
 							<S.Header>
 								<S.LT>

diff --git a/src/components/molecules/Panel/types.ts b/src/components/molecules/Panel/types.ts
@@ -6,4 +6,5 @@ export interface IProps {
 	children: React.ReactNode;
 	open: boolean;
 	width?: number;
+	closeHandlerDisabled?: boolean;
 }