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);