Merge pull request #1293 from near/upgrade-ui-lib-1.0.0

Upgrade UI library to 1.0.0
near · Aug 13, 2024 · fd10dee · fd10dee
2 parents 3742e3f + 34ba67e
commit fd10dee
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -2,13 +2,11 @@
     "name": "near-discovery",
     "version": "0.1.0",
     "private": true,
-    "engines":
-    {
+    "engines": {
         "node": ">=18.0.0",
         "pnpm": ">=8.5.0"
     },
-    "scripts":
-    {
+    "scripts": {
         "dev": "next dev",
         "build": "next build",
         "start": "next start",
@@ -20,13 +18,12 @@
         "commit": "cz",
         "ts:check": "tsc --noEmit --incremental"
     },
-    "dependencies":
-    {
+    "dependencies": {
         "@idos-network/idos-sdk": "^0.0.30",
         "@keypom/selector": "1.2.3",
         "@monaco-editor/react": "^4.6.0",
         "@near-js/biometric-ed25519": "0.3.0",
-        "@near-pagoda/ui": "^0.3.0",
+        "@near-pagoda/ui": "^1.0.0",
         "@near-wallet-selector/core": "8.9.7",
         "@near-wallet-selector/here-wallet": "8.9.7",
         "@near-wallet-selector/ledger": "^8.9.7",
@@ -79,8 +76,7 @@
         "typescript": "^5.4.5",
         "zustand": "^4.5.2"
     },
-    "devDependencies":
-    {
+    "devDependencies": {
         "@commitlint/cli": "^19.3.0",
         "@commitlint/config-conventional": "^19.2.2",
         "@types/big.js": "^6.2.2",
@@ -101,10 +97,8 @@
         "is-ci": "^3.0.1",
         "prettier": "^2.8.8"
     },
-    "config":
-    {
-        "commitizen":
-        {
+    "config": {
+        "commitizen": {
             "path": "./node_modules/cz-conventional-changelog"
         }
     }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/CookiePrompt.tsx b/src/components/CookiePrompt.tsx
@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 
 import { useBosComponents } from '@/hooks/useBosComponents';
+import { useCookieStore } from '@/stores/cookieData';
 
 import { VmComponent } from './vm/VmComponent';
-import { useCookieStore } from '@/stores/cookieData';
 
 const Wrapper = styled.div`
   position: fixed;

diff --git a/src/components/research-form-wizard/ResearchFormWizard.tsx b/src/components/research-form-wizard/ResearchFormWizard.tsx
@@ -3,11 +3,11 @@ import Modal from 'react-bootstrap/Modal';
 import styled from 'styled-components';
 
 import { useResearchWizardEvents } from '@/hooks/useResearchWizardEvents';
+import { useCookieStore } from '@/stores/cookieData';
 import { useResearchWizardStore } from '@/stores/researchWizard';
 import { recordEventWithProps } from '@/utils/analytics';
 
 import { StepLayout } from './StepLayout';
-import { useCookieStore } from '@/stores/cookieData';
 
 const MobileWrapper = styled.div`
   width: 276px;

diff --git a/src/components/vm/VmInitializer.tsx b/src/components/vm/VmInitializer.tsx
@@ -35,6 +35,7 @@ import { useEthersProviderContext } from '@/data/web3';
 import { useIdOS } from '@/hooks/useIdOS';
 import { useSignInRedirect } from '@/hooks/useSignInRedirect';
 import { useAuthStore } from '@/stores/auth';
+import { useCookieStore } from '@/stores/cookieData';
 import { useIdosStore } from '@/stores/idosStore';
 import { useVmStore } from '@/stores/vm';
 import {
@@ -54,7 +55,6 @@ import {
 import { KEYPOM_OPTIONS } from '@/utils/keypom-options';
 
 import { useNavigationStore } from '../sidebar-navigation/store';
-import { useCookieStore } from '@/stores/cookieData';
 
 export default function VmInitializer() {
   const [signedIn, setSignedIn] = useState(false);
@@ -177,7 +177,7 @@ export default function VmInitializer() {
           enableWidgetSrcWithCodeOverride: isLocalEnvironment,
         },
       });
-  }, [initNear, router.query]);
+  }, [initNear, router.query, setCookieData]);
 
   useEffect(() => {
     if (!near || !idOS) {

diff --git a/src/hooks/useResearchWizardEvents.tsx b/src/hooks/useResearchWizardEvents.tsx
@@ -1,6 +1,7 @@
-import { useResearchWizardStore } from '@/stores/researchWizard';
 import { useEffect, useState } from 'react';
 
+import { useResearchWizardStore } from '@/stores/researchWizard';
+
 export function useResearchWizardEvents() {
   const set = useResearchWizardStore((state) => state.set);
   const [showMobileResearchForm, setShowMobileResearchForm] = useState<boolean>(false);

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -7,11 +7,12 @@ import '@near-wallet-selector/modal-ui/styles.css';
 import 'react-bootstrap-typeahead/css/Typeahead.css';
 import 'react-bootstrap-typeahead/css/Typeahead.bs5.css';
 
-import { openToast, Toaster } from '@near-pagoda/ui';
+import { openToast, PagodaUiProvider, Toaster } from '@near-pagoda/ui';
 import Gleap from 'gleap';
 import type { AppProps } from 'next/app';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
+import Link from 'next/link';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { useEffect } from 'react';
@@ -23,13 +24,13 @@ import { useClickTracking } from '@/hooks/useClickTracking';
 import { useHashUrlBackwardsCompatibility } from '@/hooks/useHashUrlBackwardsCompatibility';
 import { usePageAnalytics } from '@/hooks/usePageAnalytics';
 import { useAuthStore } from '@/stores/auth';
+import { useCookieStore } from '@/stores/cookieData';
+import { useResearchWizardStore } from '@/stores/researchWizard';
 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';
-import { useResearchWizardStore } from '@/stores/researchWizard';
-import { useCookieStore } from '@/stores/cookieData';
 
 const VmInitializer = dynamic(() => import('../components/vm/VmInitializer'), {
   ssr: false,
@@ -113,53 +114,61 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
     } else {
       Gleap.showFeedbackButton(true);
     }
-  }, [isResearchFormDismissed, cookieData, gleapSdkToken]);
+  }, [isResearchFormDismissed, cookieData]);
 
   useEffect(() => {
     checkCookieData();
   }, [checkCookieData]);
 
   return (
     <>
-      <Head>
-        <meta name="google-site-verification" content="CDEVFlJTyVZ2vM7ePugKgWsl_7Rd-MrfDv42u0vZ0B0" />
-        <link rel="icon" href="favicon.ico" />
-        <link rel="canonical" href={`${process.env.NEXT_PUBLIC_HOSTNAME}${router.asPath}`} key="canonical" />
-        <link rel="manifest" href="manifest.json" />
-      </Head>
-
-      <Script id="phosphor-icons" src="https://unpkg.com/@phosphor-icons/web" async />
-
-      <Script id="bootstrap" src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" />
-
-      <VmInitializer />
-
-      {getLayout(<Component {...pageProps} />)}
-
-      <Toaster />
-
-      <CookiePrompt />
-
-      <ResearchFormWizard />
-
-      <div
-        id="idos_container"
-        style={
-          !router.route.startsWith('/settings')
-            ? ({
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: 0,
-                height: 0,
-                margin: 0,
-                padding: 0,
-                opacity: 0,
-                overflow: 'hidden',
-              } as React.CSSProperties)
-            : undefined
-        }
-      />
+      <PagodaUiProvider
+        value={{
+          routerPrefetch: router.prefetch,
+          routerPush: router.push,
+          Link,
+        }}
+      >
+        <Head>
+          <meta name="google-site-verification" content="CDEVFlJTyVZ2vM7ePugKgWsl_7Rd-MrfDv42u0vZ0B0" />
+          <link rel="icon" href="favicon.ico" />
+          <link rel="canonical" href={`${process.env.NEXT_PUBLIC_HOSTNAME}${router.asPath}`} key="canonical" />
+          <link rel="manifest" href="manifest.json" />
+        </Head>
+
+        <Script id="phosphor-icons" src="https://unpkg.com/@phosphor-icons/web" async />
+
+        <Script id="bootstrap" src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" />
+
+        <VmInitializer />
+
+        {getLayout(<Component {...pageProps} />)}
+
+        <Toaster />
+
+        <CookiePrompt />
+
+        <ResearchFormWizard />
+
+        <div
+          id="idos_container"
+          style={
+            !router.route.startsWith('/settings')
+              ? ({
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: 0,
+                  height: 0,
+                  margin: 0,
+                  padding: 0,
+                  opacity: 0,
+                  overflow: 'hidden',
+                } as React.CSSProperties)
+              : undefined
+          }
+        />
+      </PagodaUiProvider>
     </>
   );
 }