Merge pull request #181 from permaweb/ucm-cache

persist ucm

src/api/assets.ts

@@ -143,32 +143,10 @@ export async function getAssetById(args: { id: string }): Promise<AssetDetailTyp
 				}
 			}
 
-			let assetOrders: AssetOrderType[] | null = null;
-			if (store.getState().ucmReducer) {
-				const ucmReducer = store.getState().ucmReducer;
-				const existingEntry = ucmReducer.Orderbook.find((entry: any) => {
-					return entry.Pair ? entry.Pair[0] === args.id : null;
-				});
-				if (existingEntry) {
-					assetOrders = existingEntry.Orders.map((order: any) => {
-						let currentAssetOrder: AssetOrderType = {
-							creator: order.Creator,
-							dateCreated: order.DateCreated,
-							id: order.Id,
-							originalQuantity: order.OriginalQuantity,
-							quantity: order.Quantity,
-							token: order.Token,
-							currency: existingEntry.Pair[1],
-						};
-
-						if (order.Price) currentAssetOrder.price = order.Price;
-						return currentAssetOrder;
-					});
-				}
-			}
-
 			const assetDetail: AssetDetailType = { ...structuredAsset, state: assetState };
+			const assetOrders = getAssetOrders({ id: args.id });
 			if (assetOrders) assetDetail.orders = assetOrders;
+
 			return assetDetail;
 		}
 
@@ -178,6 +156,41 @@ export async function getAssetById(args: { id: string }): Promise<AssetDetailTyp
 	}
 }
 
+export function getExistingEntry(args: { id: string }) {
+	if (store.getState().ucmReducer) {
+		const ucmReducer = store.getState().ucmReducer;
+		return ucmReducer.Orderbook.find((entry: any) => {
+			return entry.Pair ? entry.Pair[0] === args.id : null;
+		});
+	}
+
+	return null;
+}
+
+export function getAssetOrders(args: { id: string }) {
+	let assetOrders: AssetOrderType[] | null = null;
+
+	const existingEntry = getExistingEntry({ id: args.id });
+	if (existingEntry) {
+		assetOrders = existingEntry.Orders.map((order: any) => {
+			let currentAssetOrder: AssetOrderType = {
+				creator: order.Creator,
+				dateCreated: order.DateCreated,
+				id: order.Id,
+				originalQuantity: order.OriginalQuantity,
+				quantity: order.Quantity,
+				token: order.Token,
+				currency: existingEntry.Pair[1],
+			};
+
+			if (order.Price) currentAssetOrder.price = order.Price;
+			return currentAssetOrder;
+		});
+	}
+
+	return assetOrders;
+}
+
 export function structureAssets(gqlResponse: DefaultGQLResponseType): AssetType[] {
 	const structuredAssets: AssetType[] = [];
 

src/app/App.tsx

@@ -17,8 +17,6 @@ import { useLocationProvider } from 'providers/LocationProvider';
 import { RootState } from 'store';
 import * as currencyActions from 'store/currencies/actions';
 import * as stampsActions from 'store/stamps/actions';
-import * as streakActions from 'store/streaks/actions';
-import * as ucmActions from 'store/ucm/actions';
 import { getCampaignBackground } from 'views/Campaign';
 
 import * as S from './styles';
@@ -54,27 +52,6 @@ export default function App() {
 	React.useEffect(() => {
 		(async function () {
 			try {
-				const ucmState = await readHandler({
-					processId: AO.ucm,
-					action: 'Info',
-				});
-
-				dispatch(ucmActions.setUCM(ucmState));
-
-				const streaks = await readHandler({
-					processId: AO.pixl,
-					action: 'Get-Streaks',
-				});
-
-				if (streaks.Streaks) {
-					for (let key in streaks.Streaks) {
-						if (streaks.Streaks[key].days === 0) {
-							delete streaks.Streaks[key];
-						}
-					}
-					dispatch(streakActions.setStreaks(streaks.Streaks));
-				}
-
 				if (!currenciesReducer) {
 					const defaultTokenState = await readHandler({
 						processId: AO.defaultToken,
@@ -100,7 +77,7 @@ export default function App() {
 				console.error(e);
 			}
 		})();
-	}, [currenciesReducer, dispatch]);
+	}, [currenciesReducer]);
 
 	React.useEffect(() => {
 		(async function () {

src/app/styles.ts

@@ -198,9 +198,9 @@ export const GlobalStyle = createGlobalStyle`
     padding: 0 20px;
   }
 
-	.modal-wrapper {
-		padding: 0 20px 20px 20px !important;
-	}
+  .modal-wrapper {
+	padding: 0 20px 20px 20px !important;
+  }
 
   .info-text {
     padding: 0 4.25px;
@@ -213,7 +213,17 @@ export const GlobalStyle = createGlobalStyle`
       font-size: ${(props) => props.theme.typography.size.xxxSmall};
       font-weight: ${(props) => props.theme.typography.weight.medium};
       white-space: nowrap;
-	  }
+	}
+  }
+
+  .message {
+    span {
+      color: ${(props) => props.theme.colors.font.primary};
+      font-size: ${(props) => props.theme.typography.size.xxSmall};
+      font-weight: ${(props) => props.theme.typography.weight.bold};
+	  font-family: ${(props) => props.theme.typography.family.alt1};
+      white-space: nowrap;
+	}
   }
 
   .overlay {

src/components/atoms/Notification/styles.ts

@@ -16,6 +16,8 @@ export const Wrapper = styled.div<{ warning: boolean | undefined }>`
 	padding: 11.5px 17.5px;
 	background: ${(props) => (props.warning ? props.theme.colors.warning.alt1 : props.theme.colors.indicator.primary)};
 	border-radius: ${STYLING.dimensions.radius.primary};
+	box-shadow: 0 0 0.25rem 0.0225rem ${(props) => props.theme.colors.shadow.alt3},
+		0 0.0225rem 0.0225rem ${(props) => props.theme.colors.shadow.alt3};
 	@media (max-width: ${STYLING.cutoffs.secondary}) {
 		width: 90vw;
 	}

src/components/organisms/ProfileManage/ProfileManage.tsx

@@ -25,6 +25,14 @@ const MAX_IMAGE_SIZE = 100000;
 const ALLOWED_BANNER_TYPES = 'image/png, image/jpeg, image/gif';
 const ALLOWED_AVATAR_TYPES = 'image/png, image/jpeg, image/gif';
 
+interface IProfileData {
+	DisplayName?: string;
+	UserName?: string;
+	Description?: string;
+	CoverImage?: string;
+	ProfileImage?: string;
+}
+
 export default function ProfileManage(props: IProps) {
 	const arProvider = useArweaveProvider();
 
@@ -58,13 +66,17 @@ export default function ProfileManage(props: IProps) {
 		if (props.handleUpdate) props.handleUpdate();
 	}
 
-	interface IProfileData {
-		DisplayName?: string;
-		UserName?: string;
-		Description?: string;
-		CoverImage?: string;
-		ProfileImage?: string;
-	}
+	const getFieldDataChanged = (profileValue, newValue) => {
+		if ((newValue === '' || newValue == null) && Boolean(profileValue)) {
+			return '';
+		}
+		if (profileValue !== newValue && typeof newValue === 'string' && newValue.length > 0) {
+			return newValue;
+		} else {
+			return undefined;
+		}
+	};
+
 	async function handleSubmit() {
 		if (arProvider.wallet) {
 			setLoading(true);
@@ -114,19 +126,7 @@ export default function ProfileManage(props: IProps) {
 					}
 				}
 			}
-			// send undefined
-			const getFieldDataChanged = (profileValue, newValue) => {
-				// if new is '' and profilevalue is not empty, then clear
-				if ((newValue === '' || newValue == null) && Boolean(profileValue)) {
-					return '';
-				}
-				if (profileValue !== newValue && typeof newValue === 'string' && newValue.length > 0) {
-					return newValue;
-				} else {
-					return undefined;
-				}
-			};
-			// either send undefined if no change, or '' if clear, or a value.
+
 			data.UserName = getFieldDataChanged(props.profile?.username, username);
 			data.DisplayName = getFieldDataChanged(props.profile?.displayName, name);
 			data.CoverImage = getFieldDataChanged(props.profile?.banner, bannerTx);

src/components/organisms/Stamps/Stamps.tsx

@@ -115,6 +115,11 @@ export default function Stamps(props: IProps) {
 						status: true,
 						message: `${language.stampSuccess}!`,
 					});
+				} else {
+					setResponse({
+						status: false,
+						message: stamp?.Messages?.[0].Data,
+					});
 				}
 			}
 		} catch (e: any) {

src/components/organisms/Streaks/Streaks.tsx

@@ -195,7 +195,7 @@ export default function Streaks(props: IProps) {
 		return (
 			<>
 				{getStreakIcon(count ?? 0)}
-				{arProvider.profile && <span>{count ?? '...'}</span>}
+				{<span>{count ?? '...'}</span>}
 			</>
 		);
 	}, [count]);

src/components/organisms/TrendingTokens/TrendingTokens.tsx

@@ -30,13 +30,18 @@ export default function TrendingTokens() {
 				responses = JSON.parse(cachedTokens);
 			} else {
 				for (const tokenProcess of tokenProcesses) {
-					const tokenResponse = await readHandler({
-						processId: tokenProcess,
-						action: 'Info',
-					});
+					try {
+						const tokenResponse = await readHandler({
+							processId: tokenProcess,
+							action: 'Info',
+						});
 
-					if (tokenResponse) {
-						responses.push({ ProcessId: tokenProcess, ...tokenResponse });
+						if (tokenResponse) {
+							responses.push({ ProcessId: tokenProcess, ...tokenResponse });
+							setTokens(responses);
+						}
+					} catch (e: any) {
+						console.error(e);
 					}
 				}
 

src/helpers/language.ts

@@ -91,6 +91,7 @@ export const language = {
 		noActivity: `No activity found`,
 		noListings: `No listings`,
 		orderProcessed: `Your order has been processed`,
+		ordersUpdating: `Orders are being updated`,
 		other: `Other`,
 		owner: `Owner`,
 		owners: `Owners`,
@@ -170,6 +171,7 @@ export const language = {
 		unitPrice: `Unit price`,
 		updating: `Updating`,
 		updatingAsset: `Updating asset`,
+		updatingUCM: `Updating UCM`,
 		uploadAvatar: `Upload avatar`,
 		uploadBanner: `Upload banner`,
 		username: `Handle`,

src/helpers/themes.ts

@@ -32,6 +32,7 @@ export const lightTheme = {
 	light1: '#FFFFFF',
 	light2: '#DADADA',
 	dark1: '#151515',
+	dark2: '#333333',
 	stats: {
 		primary: '#FF8385',
 		alt1: '#A3DEE2',
@@ -80,6 +81,7 @@ export const darkTheme = {
 	light1: '#FFFFFF',
 	light2: '#DADADA',
 	dark1: '#151515',
+	dark2: '#333333',
 	stats: {
 		primary: '#FF8080',
 		alt1: '#9BD4E0',
@@ -195,6 +197,9 @@ export const theme = (currentTheme: any): DefaultTheme => ({
 			alt10: {
 				background: currentTheme.primary2,
 			},
+			alt11: {
+				background: currentTheme.dark2,
+			},
 		},
 		font: {
 			primary: currentTheme.neutralA1,
@@ -331,7 +336,7 @@ export const theme = (currentTheme: any): DefaultTheme => ({
 			xLg: '24px',
 			h1: 'clamp(38px, 4.5vw, 62px)',
 			h2: 'clamp(32px, 3.75vw, 44px)',
-			h4: 'clamp(28px, 2.5vw, 34px)',
+			h4: 'clamp(24px, 2.5vw, 34px)',
 		},
 		weight: {
 			medium: '500',

src/index.tsx

@@ -5,6 +5,7 @@ import { PersistGate } from 'redux-persist/integration/react';
 
 import { App } from 'app';
 import { GlobalStyle } from 'app/styles';
+import { AppProvider } from 'providers/AppProvider';
 import { ArweaveProvider } from 'providers/ArweaveProvider';
 import { CustomThemeProvider } from 'providers/CustomThemeProvider';
 import ErrorBoundary from 'providers/ErrorBoundary';
@@ -20,10 +21,12 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
 					<LocationProvider>
 						<ErrorBoundary>
 							<ArweaveProvider>
-								<HashRouter>
-									<GlobalStyle />
-									<App />
-								</HashRouter>
+								<AppProvider>
+									<HashRouter>
+										<GlobalStyle />
+										<App />
+									</HashRouter>
+								</AppProvider>
 							</ArweaveProvider>
 						</ErrorBoundary>
 					</LocationProvider>

src/navigation/Header/styles.ts

@@ -69,6 +69,12 @@ export const ActionsWrapper = styled.div`
 	gap: 20px;
 `;
 
+export const MessageWrapper = styled.div`
+	@media (max-width: ${STYLING.cutoffs.secondary}) {
+		display: none;
+	}
+`;
+
 export const MWrapper = styled.div`
 	display: none;
 	@media (max-width: ${STYLING.cutoffs.secondary}) {