Merge pull request #63 from permaweb/permaweb-libs

Permaweb libs

.eslintrc.js

@@ -16,7 +16,16 @@ module.exports = {
 					{
 						groups: [
 							['^react', '^@?\\w'],
-							['^arweave', 'arbundles', '@irys/sdk', '^warp', '@permaweb/aoconnect', '^@permaweb/stampjs', '^@?\\w'],
+							[
+								'^arweave',
+								'arbundles',
+								'@irys/sdk',
+								'^warp',
+								'@permaweb/aoconnect',
+								'@permaweb/libs',
+								'^@permaweb/stampjs',
+								'^@?\\w',
+							],
 							['^(@|api)(/.*|$)', '^(@|gql)(/.*|$)'],
 							[
 								'^(@|app)(/.*|$)',

package.json

@@ -22,12 +22,15 @@
 		"@irys/sdk": "^0.1.0-a1",
 		"@othent/kms": "^1.0.12",
 		"@permaweb/aoconnect": "0.0.51",
+		"@permaweb/libs": "0.0.23",
 		"@permaweb/stampjs": "0.6.1",
+		"@permaweb/ucm": "^0.0.6",
 		"@stripe/react-stripe-js": "^2.4.0",
 		"@stripe/stripe-js": "^2.4.0",
 		"@types/react-router-dom": "^5.3.3",
 		"arbundles": "^0.10.1",
 		"arweave-wallet-connector": "^1.0.2",
+		"html-react-parser": "^5.2.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-markdown": "^8.0.7",

src/app/App.tsx

@@ -21,7 +21,9 @@ export default function App() {
 			<Suspense fallback={<Loader />}>
 				<Navigation />
 				<S.View className={'scroll-wrapper'}>
-					<Routes />
+					<div className={'max-view-wrapper'}>
+						<Routes />
+					</div>
 				</S.View>
 			</Suspense>
 		</>

src/app/styles.ts

@@ -164,7 +164,6 @@ export const GlobalStyle = createGlobalStyle`
 
   .border-wrapper-primary {
     background: ${(props) => props.theme.colors.container.primary.background};
-    box-shadow: 0 5px 15px 0 ${(props) => props.theme.colors.shadow.primary};
     border: 1px solid ${(props) => props.theme.colors.border.primary};
     border-radius: ${STYLING.dimensions.radius.primary};
   }
@@ -177,7 +176,6 @@ export const GlobalStyle = createGlobalStyle`
 
   .border-wrapper-alt2 {
     background: ${(props) => props.theme.colors.container.primary.background};
-    box-shadow: 0 1px 2px 0.5px ${(props) => props.theme.colors.shadow.primary};
     border: 1px solid ${(props) => props.theme.colors.border.alt4};
     border-radius: ${STYLING.dimensions.radius.primary};
   }
@@ -253,9 +251,9 @@ export const View = styled.div`
 	left: calc(${STYLING.dimensions.nav.panelWidthClosed} + 10px);
 	padding: 25px 10px 25px 25px;
 	overflow-y: scroll;
-	border: 1px solid ${(props) => props.theme.colors.border.alt4};
+	border: 1px solid ${(props) => props.theme.colors.border.primary};
 	background: ${(props) => props.theme.colors.view.background};
-	border-radius: ${STYLING.dimensions.radius.alt1};
+	border-radius: ${STYLING.dimensions.radius.primary};
 	animation: ${open} ${fadeIn1};
 	@media (max-width: ${STYLING.cutoffs.initial}) {
 		min-height: calc(100vh - ${STYLING.dimensions.nav.headerHeight});

src/components/atoms/Button/styles.ts

@@ -59,7 +59,7 @@ export const Primary = styled.button<{
 	border: 1px solid
 		${(props) =>
 			props.active ? props.theme.colors.button.primary.active.border : props.theme.colors.button.primary.border};
-	border-radius: ${STYLING.dimensions.radius.primary};
+	border-radius: 36px;
 	&:hover {
 		background: ${(props) => props.theme.colors.button.primary.active.background};
 		border: 1px solid ${(props) => props.theme.colors.button.primary.active.border};

src/components/molecules/Panel/Panel.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+
+import { IconButton } from 'components/atoms/IconButton';
+import { Portal } from 'components/atoms/Portal';
+import { ASSETS, DOM } from 'helpers/config';
+import { useLanguageProvider } from 'providers/LanguageProvider';
+import { CloseHandler } from 'wrappers/CloseHandler';
+
+import * as S from './styles';
+import { IProps } from './types';
+
+export default function Panel(props: IProps) {
+	const languageProvider = useLanguageProvider();
+	const language = languageProvider.object[languageProvider.current];
+
+	React.useEffect(() => {
+		hideDocumentBody();
+		return () => {
+			showDocumentBody();
+		};
+	}, []);
+
+	const escFunction = React.useCallback(
+		(e: any) => {
+			if (e.key === 'Escape' && props.handleClose && !props.closeHandlerDisabled) {
+				props.handleClose();
+			}
+		},
+		[props]
+	);
+
+	React.useEffect(() => {
+		document.addEventListener('keydown', escFunction, false);
+
+		return () => {
+			document.removeEventListener('keydown', escFunction, false);
+		};
+	}, [escFunction]);
+
+	function getBody() {
+		return (
+			<>
+				<S.Container noHeader={!props.header} width={props.width}>
+					<CloseHandler
+						active={props.open && !props.closeHandlerDisabled}
+						disabled={!props.open || props.closeHandlerDisabled}
+						callback={() => (props.handleClose ? props.handleClose() : {})}
+					>
+						{props.header && (
+							<S.Header>
+								<S.LT>
+									<S.Title>{props.header}</S.Title>
+								</S.LT>
+								{props.handleClose && (
+									<S.Close>
+										<IconButton
+											type={'primary'}
+											warning
+											src={ASSETS.close}
+											handlePress={() => props.handleClose()}
+											active={false}
+											dimensions={{
+												wrapper: 35,
+												icon: 20,
+											}}
+											tooltip={language.close}
+											useBottomToolTip
+										/>
+									</S.Close>
+								)}
+							</S.Header>
+						)}
+						<S.Body className={'scroll-wrapper'}>{props.children}</S.Body>
+					</CloseHandler>
+				</S.Container>
+			</>
+		);
+	}
+
+	return (
+		<Portal node={DOM.overlay}>
+			<S.Wrapper noHeader={!props.header} top={window ? (window as any).pageYOffset : 0}>
+				{getBody()}
+			</S.Wrapper>
+		</Portal>
+	);
+}
+
+let panelOpenCounter = 0;
+
+const showDocumentBody = () => {
+	panelOpenCounter -= 1;
+	if (panelOpenCounter === 0) {
+		document.body.style.overflow = 'auto';
+	}
+};
+
+const hideDocumentBody = () => {
+	panelOpenCounter += 1;
+	document.body.style.overflow = 'hidden';
+};

src/components/molecules/Panel/index.ts

@@ -0,0 +1 @@
+export { default as Panel } from './Panel';

src/components/molecules/Panel/styles.ts

@@ -0,0 +1,78 @@
+import styled from 'styled-components';
+
+import { fadeIn1, open, openRight } from 'helpers/animations';
+import { STYLING } from 'helpers/config';
+
+export const Wrapper = styled.div<{ top: number; noHeader: boolean }>`
+	min-height: 100vh;
+	height: 100%;
+	width: 100%;
+	position: fixed;
+	z-index: 15;
+	top: 0;
+	left: 0;
+	background: ${(props) => props.theme.colors.overlay.primary};
+	backdrop-filter: blur(2.5px);
+	animation: ${open} ${fadeIn1};
+`;
+
+export const Container = styled.div<{
+	noHeader: boolean;
+	width?: number;
+}>`
+	height: calc(100dvh - 20px);
+	min-width: ${(props) => (props.width ? `${props.width.toString()}px` : '425px')};
+	width: fit-content;
+	max-width: calc(100vw - 30px);
+	position: fixed;
+	overflow: hidden;
+	top: 10px;
+	right: 10px;
+	transition: width 50ms ease-out;
+	animation: ${openRight} 200ms;
+	background: ${(props) => props.theme.colors.container.primary.background};
+	border: 1px solid ${(props) => props.theme.colors.border.alt4};
+	border-radius: ${STYLING.dimensions.radius.primary};
+	@media (max-width: ${STYLING.cutoffs.secondary}) {
+		min-width: 82.5vw;
+	}
+`;
+
+export const Header = styled.div`
+	height: 65px;
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0 20px;
+`;
+
+export const LT = styled.div`
+	max-width: 75%;
+	display: flex;
+	align-items: center;
+`;
+
+export const Title = styled.p`
+	color: ${(props) => props.theme.colors.font.primary};
+	font-size: ${(props) => props.theme.typography.size.lg};
+	font-weight: ${(props) => props.theme.typography.weight.bold};
+	line-height: calc(${(props) => props.theme.typography.size.lg} + 5px);
+	font-family: ${(props) => props.theme.typography.family.alt1};
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin: 2.5px 0 0 0;
+`;
+
+export const Close = styled.div`
+	padding: 2.5px 0 0 0;
+`;
+
+export const Body = styled.div`
+	height: calc(100% - 65px);
+	width: 100%;
+	overflow-y: auto;
+	scrollbar-color: transparent transparent;
+	position: relative;
+`;

src/components/molecules/Panel/types.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export interface IProps {
+	header: string | null | undefined;
+	handleClose: () => void | null;
+	children: React.ReactNode;
+	open: boolean;
+	width?: number;
+	closeHandlerDisabled?: boolean;
+}