Merge pull request #1316 from near/fixes

VM Fixes

src/components/near-org/ComponentWrapperPage.tsx

@@ -1,8 +1,5 @@
-import { useEffect } from 'react';
-
 import { VmComponent } from '@/components/vm/VmComponent';
 import { useGatewayEvents } from '@/hooks/useGatewayEvents';
-import { useCurrentComponentStore } from '@/stores/current-component';
 
 import { MetaTags } from '../MetaTags';
 
@@ -16,26 +13,8 @@ type Props = {
 };
 
 export function ComponentWrapperPage(props: Props) {
-  const setCurrentComponentSrc = useCurrentComponentStore((store) => store.setSrc);
   const { emitGatewayEvent } = useGatewayEvents();
 
-  useEffect(() => {
-    if (
-      props.componentProps &&
-      'targetComponent' in props.componentProps &&
-      typeof props.componentProps.targetComponent === 'string'
-    ) {
-      /*
-        If we're rendering a wrapper component, we want to display the component being wrapped
-        (props.componentProps.targetComponent). Without this check, we'd be rendering "GatewayWrapper"
-        or "TosCheck" as the current component instead of something like "ActivityPage".
-      */
-      setCurrentComponentSrc(props.componentProps.targetComponent);
-    } else {
-      setCurrentComponentSrc(props.src);
-    }
-  }, [setCurrentComponentSrc, props]);
-
   return (
     <>
       {props.meta && <MetaTags {...props.meta} />}

src/pages/[...arbitrary].tsx

@@ -47,7 +47,6 @@ const finiteRoutes: Record<string, string> = {
 import IframeResizer from '@iframe-resizer/react';
 import type { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from 'next';
 
-import { useClearCurrentComponent } from '@/hooks/useClearCurrentComponent';
 import { useDefaultLayout } from '@/hooks/useLayout';
 import type { NextPageWithLayout } from '@/utils/types';
 
@@ -102,7 +101,6 @@ export const getStaticProps: GetStaticProps<StaticProps> = async (context) => {
 };
 
 const IframePage: NextPageWithLayout = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
-  useClearCurrentComponent();
   return (
     <>
       <IframeResizer license="GPLv3" src={props.url} style={{ width: '1px', minWidth: '100%' }} checkOrigin={false} />

src/pages/[componentAccountId]/widget/[componentName].tsx

@@ -13,7 +13,6 @@ import { useBosComponents } from '@/hooks/useBosComponents';
 import { useGatewayEvents } from '@/hooks/useGatewayEvents';
 import { useDefaultLayout } from '@/hooks/useLayout';
 import { useSignInRedirect } from '@/hooks/useSignInRedirect';
-import { useCurrentComponentStore } from '@/stores/current-component';
 import type { NextPageWithLayout } from '@/utils/types';
 
 type ComponentMetaPreview = {
@@ -92,7 +91,6 @@ export const getServerSideProps: GetServerSideProps<{
 
 const ViewComponentPage: NextPageWithLayout = ({ meta }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
   const router = useRouter();
-  const setComponentSrc = useCurrentComponentStore((store) => store.setSrc);
   const componentSrc = `${router.query.componentAccountId}/widget/${router.query.componentName}`;
   const [componentProps, setComponentProps] = useState<Record<string, unknown>>({});
   const { wallet, signedAccountId } = useContext(NearContext);
@@ -107,10 +105,6 @@ const ViewComponentPage: NextPageWithLayout = ({ meta }: InferGetServerSideProps
     }
   }, [signedAccountId, componentProps, requestAuthentication]);
 
-  useEffect(() => {
-    setComponentSrc(componentSrc);
-  }, [setComponentSrc, componentSrc]);
-
   useEffect(() => {
     setComponentProps(router.query);
   }, [router.query]);

src/pages/cookies/index.tsx

@@ -1,12 +1,10 @@
 import { MetaTags } from '@/components/MetaTags';
 import { VmComponent } from '@/components/vm/VmComponent';
 import { useBosComponents } from '@/hooks/useBosComponents';
-import { useClearCurrentComponent } from '@/hooks/useClearCurrentComponent';
 import { useDefaultLayout } from '@/hooks/useLayout';
 import type { NextPageWithLayout } from '@/utils/types';
 
 const CookiesOverviewPage: NextPageWithLayout = () => {
-  useClearCurrentComponent();
   const components = useBosComponents();
 
   return (

src/pages/embed/[accountId]/widget/[componentName].tsx

@@ -8,22 +8,16 @@ import { privacyDomainName, termsDomainName } from '@/config';
 import { useBosComponents } from '@/hooks/useBosComponents';
 import { useGatewayEvents } from '@/hooks/useGatewayEvents';
 import { useSimpleLayout } from '@/hooks/useLayout';
-import { useCurrentComponentStore } from '@/stores/current-component';
 import type { NextPageWithLayout } from '@/utils/types';
 
 const EmbedComponentPage: NextPageWithLayout = () => {
   const router = useRouter();
   const components = useBosComponents();
   const { wallet } = useContext(NearContext);
-  const setComponentSrc = useCurrentComponentStore((store) => store.setSrc);
   const componentSrc = `${router.query.accountId}/widget/${router.query.componentName}`;
   const [componentProps, setComponentProps] = useState<Record<string, unknown>>({});
   const { emitGatewayEvent, shouldPassGatewayEventProps } = useGatewayEvents();
 
-  useEffect(() => {
-    setComponentSrc(componentSrc);
-  }, [setComponentSrc, componentSrc]);
-
   useEffect(() => {
     setComponentProps(router.query);
   }, [router.query]);

src/pages/flags.tsx

@@ -5,7 +5,6 @@ import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import styled from 'styled-components';
 
-import { useClearCurrentComponent } from '@/hooks/useClearCurrentComponent';
 import { useFlags } from '@/hooks/useFlags';
 import { useDefaultLayout } from '@/hooks/useLayout';
 import type { NextPageWithLayout } from '@/utils/types';
@@ -42,8 +41,6 @@ const FlagsPage: NextPageWithLayout = () => {
   const [flags, setFlags] = useFlags();
   const form = useForm<FormData>();
 
-  useClearCurrentComponent();
-
   useEffect(() => {
     form.setValue('bosLoaderUrl', flags?.bosLoaderUrl || '');
   }, [form, flags]);

src/pages/index.tsx

@@ -18,6 +18,16 @@ export interface NearBlocks {
   total_txns: string;
 }
 
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 280px;
+  background-size: 54px;
+  padding: 16px 0px;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGeSURBVHgB7doxTisxEAbgeY/mvQro6NiSDo6QkpJbcA2OwjWooKQMJ2DpKENJBV7FEYoBeQSIZr9PGk2cItWvsdfZnSBjKHVf6rnUbdD1N8g4K7VX6jhIEaycofaTIEWwcoam0yFYOYe179WiQ7Byhk8+8wnB6munlHNWgmD1tUGyFSYIVl8bJFcOCYLV106s/aBrJ2hNE+qo1GmpRanz2J5aB6X+x/oQv/l+FWz5E/O1iHU4pom0W/u0/uoZahnrgN2VGuv6Jpidl1+o2T5BznkrfKj9MdZT6l9836r+3k2pq1KXMVNz3gpbU7hOmj49AQ7x/lJ0WWsK5xhv2+AYkHQR29vbddDluqFvbNZPQZdg9S07az4gWH3tHZVgJQhW3xjb4XIZyo+Z3nffHN79CZ1gYuXc1b4KEytFsHLGptMhWDlj7Q9BimDlbJ4Ex4AftggHdwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIpXoUVLSWulnzoAAAAASUVORK5CYII=');
+`;
+
 const StyledCard = ({ href, title, description }: { href: string; title: string; description: string }) => {
   return (
     <Card style={{ padding: '2rem 1rem', border: 0, textDecoration: 'none' }} href={href}>
@@ -59,16 +69,6 @@ const HomePage: NextPageWithLayout = () => {
     getAvrTx();
   }, [nearStats]);
 
-  const Header = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 280px;
-    background-size: 54px;
-    padding: 16px 0px;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGeSURBVHgB7doxTisxEAbgeY/mvQro6NiSDo6QkpJbcA2OwjWooKQMJ2DpKENJBV7FEYoBeQSIZr9PGk2cItWvsdfZnSBjKHVf6rnUbdD1N8g4K7VX6jhIEaycofaTIEWwcoam0yFYOYe179WiQ7Byhk8+8wnB6munlHNWgmD1tUGyFSYIVl8bJFcOCYLV106s/aBrJ2hNE+qo1GmpRanz2J5aB6X+x/oQv/l+FWz5E/O1iHU4pom0W/u0/uoZahnrgN2VGuv6Jpidl1+o2T5BznkrfKj9MdZT6l9836r+3k2pq1KXMVNz3gpbU7hOmj49AQ7x/lJ0WWsK5xhv2+AYkHQR29vbddDluqFvbNZPQZdg9S07az4gWH3tHZVgJQhW3xjb4XIZyo+Z3nffHN79CZ1gYuXc1b4KEytFsHLGptMhWDlj7Q9BimDlbJ4Ex4AftggHdwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIpXoUVLSWulnzoAAAAASUVORK5CYII=');
-  `;
-
   return (
     <Section grow="available">
       <Flex stack gap="l" style={{ padding: deviceType === 'mobile' ? '0' : '0 var(--gap-l)' }}>

src/pages/signin.tsx

@@ -6,7 +6,6 @@ import styled from 'styled-components';
 
 import { NearContext } from '@/components/wallet-selector/WalletSelector';
 import { signInContractId } from '@/config';
-import { useClearCurrentComponent } from '@/hooks/useClearCurrentComponent';
 import { useDefaultLayout } from '@/hooks/useLayout';
 import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import signedOutRoute from '@/utils/route/signedOutRoute';
@@ -46,8 +45,6 @@ const SignInPage: NextPageWithLayout = () => {
     }
   }, [searchParams, wallet]);
 
-  useClearCurrentComponent();
-
   const onSubmit = handleSubmit(async (data) => {
     if (!data.email || !wallet) return;
 

src/pages/signup.tsx

@@ -8,7 +8,6 @@ import styled from 'styled-components';
 import { NearContext } from '@/components/wallet-selector/WalletSelector';
 import { network, signInContractId } from '@/config';
 import { useDefaultLayout } from '@/hooks/useLayout';
-import { useCurrentComponentStore } from '@/stores/current-component';
 import type { NextPageWithLayout } from '@/utils/types';
 
 import { accountAddressPatternNoSubaccount, emailPattern, getEmailId, isValidEmail } from '../utils/form-validation';
@@ -19,7 +18,6 @@ const ErrorText = styled.p`
 
 const SignUpPage: NextPageWithLayout = () => {
   const router = useRouter();
-  const setComponentSrc = useCurrentComponentStore((store) => store.setSrc);
   const [isAccountAvailable, setIsAccountAvailable] = useState<boolean | null>(null);
   const [isAccountValid, setIsAccountValid] = useState<boolean | null>(null);
   const {
@@ -40,10 +38,6 @@ const SignUpPage: NextPageWithLayout = () => {
     }
   }, [router, signedAccountId]);
 
-  useEffect(() => {
-    setComponentSrc(null);
-  }, [setComponentSrc]);
-
   const checkIsAccountAvailable = useCallback(async (desiredUsername: string) => {
     // set to null to show loading
     setIsAccountAvailable(null);