2x weekly promotion of develop to main

.env.example

@@ -15,3 +15,5 @@ NEXT_PUBLIC_COMMIT_MODAL_BYPASS_SOURCES=
 # sidebar or marketing layout
 NEXT_PUBLIC_SIDEBAR_LAYOUT=true
 NEXT_PUBLIC_IDOS_CREATE_ACCOUNT_URL="https://app.fractal.id/authorize?client_id=PXAbBxPErSPMXiKmMYQ3ged8Qxwqg1Px7ymhsuhaGP4&redirect_uri=https%3A%2F%2Fdev.near.org%2Fsettings&response_type=code&scope=contact%3Aread%20verification.uniqueness%3Aread%20verification.uniqueness.details%3Aread%20verification.idos%3Aread%20verification.idos.details%3Aread%20verification.wallet-near%3Aread%20verification.wallet-near.details%3Aread"
+# gleap support
+NEXT_PUBLIC_GLEAP_SDK_TOKEN=

README.md

@@ -31,9 +31,7 @@ To start local component development you need to follow this steps:
 
 ## Local VM Development
 
-> This section needs testing since switch to pnpm
-
-If you need to make changes to the VM and test locally, you can easily link your local copy of the VM:
+If you need to make changes to the VM and test locally, you can link your local copy of the VM:
 
 1. Clone the VM repo as a sibling of `near-discovery`:
 
@@ -48,6 +46,16 @@ Folder Structure:
 /VM
 ```
 
-2. Run `pnpm link ../VM`
+2. Make sure both directories are running the exact same version of Node. You can check by running `node --version`.
+3. If you haven't already, run `pnpm i` inside `near-discovery`
+4. Open `near-discovery/next.config.js` and modify by adding `experimental: { esmExternals: 'loose', },` to the root of `const nextConfig = { ... }`
+5. Inside `near-discovery`, run `pnpm link ../VM`
+6. Inside `VM` directory, run `rm -rf node_modules pnpm-lock.yaml`, then run `yarn`, then run `yarn build`
+7. Inside `near-discovery`, run `pnpm dev`
+8. Any time you make changes to the `VM`, run `yarn build` inside the `VM` project in order for the gateway project to pick up the changes
+
+To revert out of local development mode for the VM:
 
-3. Any time you make changes to the `VM`, run `pnpm build` inside the `VM` project in order for the viewer project to pick up the changes
+1. Inside `near-discovery`, run `pnpm unlink ../VM`
+2. Revert the changes to `near-discovery/next.config.js`
+3. Restart `pnpm dev`

package.json

@@ -51,12 +51,13 @@
  "classnames": "^2.5.1",
  "dompurify": "^3.1.0",
  "firebase": "^9.23.0",
+ "gleap": "^13.7.6",
  "iframe-resizer-react": "^1.1.0",
  "local-storage": "^2.0.0",
  "lodash": "^4.17.21",
  "moment": "^2.30.1",
- "near-fastauth-wallet": "0.1.0",
- "near-social-vm": "github:NearSocial/VM#dev",
+ "near-fastauth-wallet": "2.0.1",
+ "near-social-vm": "github:calebjacob/VM#dev",
  "next": "^13.5.6",
  "next-pwa": "^5.6.0",
  "react": "^18.2.0",

src/components/vm/VmInitializer.tsx

@@ -95,6 +95,10 @@ export default function VmInitializer() {
  setupNightly(),
  setupWelldoneWallet(),
  setupFastAuthWallet({
+ walletUrl:
+ networkId === 'testnet'
+ ? 'https://wallet.testnet.near.org/fastauth'
+ : 'https://wallet.near.org/fastauth',
  relayerUrl:
  networkId === 'testnet'
  ? 'http://34.70.226.83:3030/relay'
@@ -252,7 +256,6 @@ export default function VmInitializer() {
  setSignedAccountId(null);
  resetAnalytics();
  resetNavigation();
- localStorage.removeItem('accountId');
  }, [idosSDK, near, resetNavigation]);
 
  const refreshAllowance = useCallback(async () => {

src/hooks/useGatewayEvents.ts

@@ -1,35 +1,37 @@
+import Gleap from 'gleap';
 import { useCallback } from 'react';
 
 import { useSidebarLayoutEnabled } from '@/components/sidebar-navigation/hooks';
 import { useNavigationStore } from '@/components/sidebar-navigation/store';
 import type { PinnedApp } from '@/components/sidebar-navigation/utils';
 
+type GleapGatewayEvent = {
+ type: 'GLEAP';
+ action: 'CLOSE' | 'OPEN';
+};
+
 type PinnedAppsGatewayEvent = {
  type: 'PINNED_APPS';
  app?: PinnedApp;
  action: 'FEATURE_ENABLED' | 'PINNED' | 'UNPINNED';
 };
 
-type GenericGatewayEvent = {
- type: 'GENERIC';
- data: any;
-};
-
-type GatewayEvent = GenericGatewayEvent | PinnedAppsGatewayEvent;
+type GatewayEvent = GleapGatewayEvent | PinnedAppsGatewayEvent;
 
 const COMPONENT_AUTHOR_ID_WHITELIST = ['near', 'discom.testnet', 'discom-dev.testnet'];
 
 export function useGatewayEvents() {
  const { sidebarLayoutEnabled } = useSidebarLayoutEnabled();
  const modifyPinnedApps = useNavigationStore((store) => store.modifyPinnedApps);
 
- const handleGenericEvent = useCallback((event: GenericGatewayEvent) => {
- /* 
- This event doesn't have a use case right now, but it serves as an example of 
- how we could implement different event types in the future.
- */
-
- console.log('Generic gateway event recorded with data:', event);
+ const handleGleapEvent = useCallback((event: GleapGatewayEvent) => {
+ if (event.action === 'CLOSE') {
+ Gleap.close();
+ } else if (event.action === 'OPEN') {
+ Gleap.open();
+ } else {
+ console.error('Unimplemented gleap gateway event recorded:', event);
+ }
  }, []);
 
  const handlePinnedAppsEvent = useCallback(
@@ -48,15 +50,15 @@ export function useGatewayEvents() {
  const emitGatewayEvent = useCallback(
  (event: GatewayEvent) => {
  switch (event.type) {
- case 'GENERIC':
- return handleGenericEvent(event);
+ case 'GLEAP':
+ return handleGleapEvent(event);
  case 'PINNED_APPS':
  return handlePinnedAppsEvent(event);
  default:
  console.error('Unimplemented gateway event recorded:', event);
  }
  },
- [handleGenericEvent, handlePinnedAppsEvent],
+ [handleGleapEvent, handlePinnedAppsEvent],
  );
 
  const shouldPassGatewayEventProps = useCallback((componentAuthorId: string) => {

src/pages/_app.tsx

@@ -5,6 +5,7 @@ import '@near-wallet-selector/modal-ui/styles.css';
 import 'react-bootstrap-typeahead/css/Typeahead.css';
 import 'react-bootstrap-typeahead/css/Typeahead.bs5.css';
 
+import Gleap from 'gleap';
 import type { AppProps } from 'next/app';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
@@ -20,6 +21,7 @@ import { useHashUrlBackwardsCompatibility } from '@/hooks/useHashUrlBackwardsCom
 import { usePageAnalytics } from '@/hooks/usePageAnalytics';
 import { useAuthStore } from '@/stores/auth';
 import { init as initializeAnalytics, recordHandledError, setReferrer } from '@/utils/analytics';
+import { gleapSdkToken } from '@/utils/config';
 import { setNotificationsLocalStorage } from '@/utils/notificationsLocalStorage';
 import type { NextPageWithLayout } from '@/utils/types';
 import { styleZendesk } from '@/utils/zendesk';
@@ -32,6 +34,10 @@ type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
 };
 
+if (typeof window !== 'undefined') {
+ if (gleapSdkToken) Gleap.initialize(gleapSdkToken);
+}
+
 export default function App({ Component, pageProps }: AppPropsWithLayout) {
  useBosLoaderInitializer();
  useHashUrlBackwardsCompatibility();
@@ -40,8 +46,6 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page) => page);
  const router = useRouter();
  const signedIn = useAuthStore((store) => store.signedIn);
- const accountId = useAuthStore((store) => store.accountId);
- const componentSrc = router.query;
 
  useEffect(() => {
  const referred_from_wallet = document.referrer.indexOf('https://wallet.near.org/') !== -1;
@@ -76,17 +80,6 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
  initializeAnalytics();
  }, []);
 
- useEffect(() => {
- // Displays the Zendesk widget only if user is signed in and on the home page
- if (!window.zE) return;
- if (!signedIn || Boolean(componentSrc?.componentAccountId && componentSrc?.componentName)) {
- window.zE('webWidget', 'hide');
- return;
- }
- localStorage.setItem('accountId', accountId);
- window.zE('webWidget', 'show');
- }, [accountId, signedIn, componentSrc]);
-
  useEffect(() => {
  const interval = setInterval(zendeskCheck, 20);
 
@@ -117,38 +110,6 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
 
  <Script id="phosphor-icons" src="https://unpkg.com/@phosphor-icons/web" async />
 
- <Script
- src="https://static.zdassets.com/ekr/snippet.js?key=1736c8d0-1d86-4080-b622-12accfdb74ca"
- id="ze-snippet"
- async
- />
-
- <Script id="zendesk-config" strategy="afterInteractive">
- {`
- window.zESettings = {
- webWidget: {
- color: { theme: '#2b2f31' },
- zIndex: 1022,
- offset: {
- horizontal: '10px',
- vertical: '10px',
- mobile: { horizontal: '2px', vertical: '65px', from: 'right' },
- },
- contactForm: {
- attachments: true,
- title: { '*': 'Feedback and Support' },
- fields: [
- {
- id: 13149356989591,
- prefill: { '*': localStorage.getItem('accountId') },
- },
- ],
- },
- },
- };
- `}
- </Script>
-
  <Script id="bootstrap" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" />
 
  <VmInitializer />

src/pages/documentation/[[...slug]].tsx

@@ -1,7 +1,8 @@
+import { useRouter } from 'next/router';
 import { useEffect } from 'react';
+
 import { useDefaultLayout } from '@/hooks/useLayout';
 import type { NextPageWithLayout } from '@/utils/types';
-import { useRouter } from 'next/router';
 
 const Documentation: NextPageWithLayout = () => {
  const router = useRouter();

src/utils/config.ts

@@ -68,6 +68,7 @@ export const eventsApiUrl = process.env.NEXT_PUBLIC_EVENTS_API_URL;
 export const eventsApiKey = process.env.NEXT_PUBLIC_EVENTS_API_KEY;
 export const sidebarLayoutEnabled = process.env.NEXT_PUBLIC_SIDEBAR_LAYOUT === 'true';
 export const idosCreateAccountUrl = process.env.NEXT_PUBLIC_IDOS_CREATE_ACCOUNT_URL;
+export const gleapSdkToken = process.env.NEXT_PUBLIC_GLEAP_SDK_TOKEN;
 
 export const commitModalBypassAuthorIds = (process.env.NEXT_PUBLIC_COMMIT_MODAL_BYPASS_AUTHOR_IDS ?? '')
  .split(',')