nitro-web 0.0.1

package/client/app.js

@@ -0,0 +1,300 @@
+import { createBrowserRouter, redirect, useParams, RouterProvider } from 'react-router-dom' 
+import ReactDOM from 'react-dom/client'
+import { createContainer } from 'react-tracked'
+import { axios, camelCase, pick, toArray, setTimeoutPromise } from '../util.js'
+
+export async function setupApp(config, layouts) {
+  // Fetch state and init app
+  const settings = {
+    middleware: Object.assign(defaultMiddleware, config.middleware || {}),
+    beforeApp: config.beforeApp || defaultBeforeApp,
+    beforeStoreUpdate: config.beforeStoreUpdate || defaultBeforeStoreUpdate,
+    layouts: layouts,
+  }
+  if (!settings.layouts) throw new Error('layouts are required')
+  const data = (await settings.beforeApp()) || {}
+  window.sharedStore = createStore(data, settings.beforeStoreUpdate)
+
+  const root = ReactDOM.createRoot(document.getElementById('app'))
+  root.render(<App settings={settings} />)
+}
+
+function App({ settings }) {
+  // Should only render once
+  const Provider = window.sharedStore.Provider
+  // const themeNormalised = theme
+  const router = getRouter(settings)
+  // const theme = pick(themeNormalised, []) // e.g. 'topPanelHeight'
+
+  useEffect(() => {
+    /**
+     * Save the scroll position before navigating to a new react route, works in react-router-dom@6.24.1
+     * https://stackoverflow.com/a/71399121/1900648
+     * 
+     * We will need to save the scroll position to sessionStorage since popstate (via the back button) has already 
+     * updated window.history.state before this function is called, but the route/layout has not yet changed.
+     * 
+     * Note that an empty loader function is required in the route object for this to work. If missing, only the 
+     * 'idle' event is fired, after route/layout change.
+     */
+    const sessionHistory = JSON.parse(sessionStorage.getItem('sessionHistory') || '{}')
+    router.subscribe((state, a, b) => { // eslint-disable-line
+      // @param state.historyAction - 'POP', 'PUSH', 'REPLACE'
+      // @param state.navigation.state - 'loading', 'idle' (after navigation)
+      if (state.navigation.state === 'idle') return
+      sessionHistory[state.location.key] = scrollbarElement().scrollTop // 100k pages == 1.6MB (we're good, lol)
+      sessionStorage.setItem('sessionHistory', JSON.stringify(sessionHistory))
+    })
+  }, [])
+
+  return (
+    <Provider>
+      {/* <ThemeProvider theme={themeNormalised}> */}
+        <RouterProvider router={router} />
+        <AfterApp settings={settings} />
+      {/* </ThemeProvider> */}
+    </Provider>
+  )
+}
+
+function AfterApp(settings) {
+  if (settings.afterApp) settings.afterApp()
+  return (null)
+}
+
+function createStore(newStoreData, beforeStoreUpdate) {
+  // @param {object} newStoreData - normally provided from a /login or /state request data
+  return createContainer(() => {
+    // Normally only setup once
+    // Fast reload - rebuilds <Root/>, and then createContainer() without providing the initialState
+    // Hot reload - rebuilds the whole app
+    let [store, setStore] = useState(() => beforeStoreUpdate(null, newStoreData || window.sharedStoreCache || {})) // runs only once
+
+    // Wrap the setState function to always run beforeStoreUpdate
+    const wrappedSetStore = (updater) => {
+      if (typeof updater === 'function') {
+        setStore((prevStore) => {
+          const nextState = updater(prevStore)
+          return beforeStoreUpdate(prevStore, nextState)
+        })
+      } else {
+        setStore((prevStore) => beforeStoreUpdate(prevStore, updater))
+      }
+    }
+    
+    window.sharedStoreCache = store
+    newStoreData = null
+    return [store, wrappedSetStore]
+  })
+}
+
+function getRouter(settings) {
+  /**
+   * Get all routes from components folder
+   * @return {array} routes for for creatingBrowserRouter
+   */
+  // During build time, webpack returns `require` function, which also contains all matching files 
+  // https://webpack.js.org/guides/dependency-management/#requirecontext
+
+  let requireContext
+  try {
+    requireContext = import.meta.webpackContext('componentsDir', { // components is the alias in webpack.config.js
+      recursive: true,
+      regExp: /(?<!\.api)\.(j|t)sx$/,
+    })
+  } catch (e) {
+    const text = 'Please add resolve.alias: { components: path.join(dirname, "components") } to your webpack configuration:'
+    console.error(text, e)
+    throw new Error(text)
+  }
+  // Loop files
+  // const components = {}
+  const layouts = []
+
+  for (const filename of requireContext.keys()) {
+    const file = requireContext(filename) // require
+
+    // Loop exported file components
+    for (const key in file) {
+      const isReactFnComponentOrFnRef = typeof file[key] === 'function' || !!file[key]?.render
+      if (!file.hasOwnProperty(key) || key.match(/route/i) || !isReactFnComponentOrFnRef) continue
+      const componentRoutes = toArray(file[key].route || file.route || file.Route)
+      const componentName = key || camelCase(key.replace(/^.*[\\\/]|\.jsx$/g, '')) // eslint-disable-line
+      // console.log(file)
+      // Todo: need to retrieve the original function name for default exports during minification.
+      // console.log(1, file[key].name, key, componentName, file[key])
+
+      // Create global component
+      // if (components[componentName]) continue
+      // components[componentName] = file[key]
+
+      // Loop component's routes
+      for (let i=0, l=componentRoutes.length; i<l; i++) {
+        const route = componentRoutes[i]
+        const routePaths = Object.keys(pick(route, /^(get\s+)?\/|^\*$/))
+        
+        for (const routePath of routePaths) {
+          const layoutNum = (route.meta?.layout || 1) - 1
+          // get the routes middleware
+          const middleware = toArray(route[routePath]).filter(o => {
+            if (o === true) return // ignore true
+            else if (settings.middleware[o]) return true
+            else console.error(`No middleware named '${o}' defined under config.middleware, skipping..`)
+          })
+          // Push route to layout
+          if (!layouts[layoutNum]) layouts[layoutNum] = []
+          layouts[layoutNum].push({
+            component: file[key],
+            meta: {
+              ...(route.meta || {}),
+              layout: layoutNum,
+            },
+            middleware: middleware,
+            name: componentName,
+            path: routePath,
+            redirect: route.redirect,
+          })
+        }
+      }
+    }
+  }
+
+  // Generate createBrowserRouter array
+  let nonce
+  const createBrowserRouterArray = layouts.map((routes, i) => {
+    if (!routes) return
+    const Layout = settings.layouts[i]
+    if (!Layout) throw new Error(`Please pass Layout${i+1 || ''} to appSetup()`)
+    return {
+      // path: '/', // (disbaled: page component with path:'/' doesnt work)
+      element: <> 
+        <Layout />
+        <RestoreScroll />
+      </>,
+      children: routes.map((route) => {
+        return {
+          element: <RouteComponent route={route} />,
+          path: route.path,
+          loader: async (/*{ request }*/) => {
+            // wait for sharedStore/sharedStoreCache to be setup
+            if (!nonce) nonce = true && await setTimeoutPromise(() => {}, 0) // eslint-disable-line
+            for (let key of route.middleware) {
+              let error = settings.middleware[key](route, window.sharedStoreCache||{})
+              if (error && error.redirect) {
+                return redirect(error.redirect)
+              }
+            }
+            return null
+          },
+        }
+      }),
+    }
+  }).filter(o => o)
+
+  // console.log(createBrowserRouterArray) ////////////////////////
+
+  // Create BrowserRouter (if there is no error above otheriwse router will be empty)
+  if (createBrowserRouterArray.length) {
+    return createBrowserRouter(createBrowserRouterArray)
+  }
+}
+
+function RestoreScroll() {
+  const location = useLocation()
+
+  useEffect(() => {
+    // Restore scroll position after navigation over 1 second to account for requests
+    const sessionHistory = JSON.parse(sessionStorage.getItem('sessionHistory') || '{}')
+    const previousScrollY = sessionHistory[location.key] || 0
+    // console.log(3, previousScrollY, window.history.state)
+    const attemptScroll = (attempts = 0) => {
+      if (scrollbarElement().scrollTop !== previousScrollY && attempts < 100) {
+        scrollbarElement().scrollTo(0, previousScrollY)
+        setTimeout(() => attemptScroll(attempts + 1), 10)
+      }
+    }
+    attemptScroll()
+  }, [location])
+
+  return (null)
+}
+
+function RouteComponent({ route }) {
+  const params = useParams()
+  const location = useLocation()
+  document.title = route.meta.title
+  return <route.component route={route} params={params} location={location} />
+}
+
+function scrollbarElement() {
+  // main element that has page scrollbar
+  // this needs to be non-body element otherwise the Modal.jsx doesn't open/close smoothly
+  return document.getElementById('app') // was window.scrollY
+}
+
+// ---- Overridable defaults ------------
+
+async function defaultBeforeApp() {
+  /**
+   * Gets called once before React is initialised
+   * @return {promise} - newStoreData which is used for window.store, later merged with the config.store() defaults
+   */
+  let newStoreData
+  try {
+    // Unload prehot data
+    if (window.prehot) {
+      window.sharedStoreCache = window.prehot.sharedStoreCache
+      delete window.prehot
+    }
+    if (!window.sharedStoreCache) {
+      newStoreData = (await axios().get('/api/state', { 'axios-retry': { retries: 7 }, timeout: 4000 })).data
+    }
+  } catch (err) {
+    console.error('We had trouble connecting to the API, please refresh')
+    console.log(err)
+  }
+  return newStoreData || window.sharedStoreCache
+}
+
+function defaultBeforeStoreUpdate(store, newStoreData) {
+  /**
+   * Get store object (called on signup/signin/signout/state)
+   * @param {object} store - existing store
+   * @param {object} <newStoreData> - pass to override store with /login or /state request data
+   * @return {object} store
+   */
+  if (!newStoreData) return newStoreData
+  store = {
+    ...(store || {
+      message: null,
+      stripeProducts: [],
+      user: null, // defined if user is signed in
+    }),
+    ...(newStoreData || {}),
+  }
+
+  // Used to verify if the current cookie belongs to this user
+  // E.g. signout > signin (to a different user on another tab)
+  axios().defaults.headers.userid = store?.user?._id
+  return store
+}
+
+const defaultMiddleware = {
+  // Global middleware that can referenced from component routes
+  isAdmin: (route, store) => {
+    let user = store.user || { type: 'visitor' }
+    if (user.type.match(/admin/)) return
+    else if (user.type && user.type !== 'visitor') return { redirect: '/signin?unauth' }
+    else return { redirect: '/signin?signin' }
+  },
+  isSubscribed: (route, store) => {
+    let user = store.user || { type: 'visitor', company: {} }
+    if (!user.company.currentSubscription) return
+    else return { redirect: '/plans/subscribe' }
+  },
+  isUser: (route, store) => {
+    let user = store.user || { type: 'visitor' }
+    if (user.type !== 'visitor') return
+    else return { redirect: '/signin?signin' }
+  },
+}

package/client/css/components.css

@@ -0,0 +1,84 @@
+
+/* ---- Tailwind UI Components ---------- */
+
+@layer base {
+  .border-bottom-with-space {
+    @apply relative mb-[6px] after:content-[""] after:absolute after:bottom-[-4px] after:left-0 after:h-[1px] after:w-full after:bg-gray-200;
+  }
+}
+
+@layer components {
+  .btn-blue {
+    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
+  }
+}
+
+/* ---- Typography (wysiwyg) ------------ */
+
+.content {
+  ol a,
+  ul a,
+  p a {
+    text-decoration: none;
+  }
+  ol a:hover,
+  ul a:hover,
+  p a:hover,
+  ol a:focus,
+  ul a:focus,
+  p a:focus {
+    text-decoration: none;
+  }
+}
+
+/* ---- Elements --------------------- */
+
+.underline1,
+.underline2,
+.underline3 {
+  /* e.g. new project subscribe title */
+  position: relative;
+  display: inline-block;
+  &:before {
+    content: "";
+    position: absolute;
+    bottom: 0.15em;
+    height: 1px;
+    width: 100%;
+    background-color: transparent;
+    transition: background 0.2s ease;
+  }
+  &.is-active,
+  &:hover {
+    &:before {
+      background-color: currentColor;
+    }
+    &.is-white:before {
+      background-color: white;
+    }
+  }
+  &.underline2:before {
+    bottom: 0.1em;
+  }
+  /* more of a dotted line, e.g. subscription features */
+  &.underline3 {
+    &:before {
+      bottom: -0.08em;
+      background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 0 6px) top;
+      opacity: 0.12;
+      transition: opacity 0.15s ease;
+    }
+    &.is-active,
+    &:hover {
+      &:before {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+/* ---- Misc ------------------------- */
+
+.__PrivateStripeElementLoader {
+  display: none !important;
+}

package/client/css/fonts.css

@@ -0,0 +1,67 @@
+
+/* ---- Font Inter ------------ */
+
+/* https://gwfh.mranftl.com/fonts/inter?subsets=latin */
+/* inter-300 - latin */
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url('/assets/fonts/inter-v13-latin-300.woff2') format('woff2'); 
+  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* inter-regular - latin */
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/assets/fonts/inter-v13-latin-regular.woff2') format('woff2'); 
+  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* inter-500 - latin */
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url('/assets/fonts/inter-v13-latin-500.woff2') format('woff2'); 
+  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* inter-600 - latin */
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  src: url('/assets/fonts/inter-v13-latin-600.woff2') format('woff2'); 
+  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* inter-700 - latin */
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/assets/fonts/inter-v13-latin-700.woff2') format('woff2'); 
+  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* inter-800 - latin */
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  src: url('/assets/fonts/inter-v13-latin-800.woff2') format('woff2'); 
+  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* inter-900 - latin */
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 900;
+  src: url('/assets/fonts/inter-v13-latin-900.woff2') format('woff2'); 
+  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}

package/client/imgs/icons/calendar.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 3.5H13V3V2.5C13 2.0124 12.8443 1.58884 12.4698 1.313C12.1287 1.06182 11.6906 1 11.2778 1H2.72222C2.30939 1 1.87133 1.06182 1.53024 1.313C1.15567 1.58884 1 2.0124 1 2.5V3V3.5H1.5H12.5ZM1.5 4H1V4.5V11.2778C1 11.8402 1.28355 12.2851 1.66974 12.5738C2.0478 12.8564 2.53263 13 3.00698 13H11.2778C11.7597 13 12.2031 12.8506 12.5268 12.5268C12.8506 12.2031 13 11.7597 13 11.2778V4.5V4H12.5H1.5ZM0.5 2.52778C0.5 1.41483 1.41483 0.5 2.52778 0.5H11.4722C12.5852 0.5 13.5 1.41483 13.5 2.52778V11.4722C13.5 12.5852 12.5852 13.5 11.4722 13.5H2.52778C1.41483 13.5 0.5 12.5852 0.5 11.4722V2.52778ZM3.36053 6.47164C3.44909 6.38309 3.5692 6.33333 3.69444 6.33333C3.81969 6.33333 3.9398 6.38309 4.02836 6.47164C4.11692 6.5602 4.16667 6.68032 4.16667 6.80556C4.16667 6.9308 4.11692 7.05091 4.02836 7.13947C3.9398 7.22803 3.81969 7.27778 3.69444 7.27778C3.5692 7.27778 3.44909 7.22803 3.36053 7.13947C3.27197 7.05091 3.22222 6.9308 3.22222 6.80556C3.22222 6.68031 3.27197 6.5602 3.36053 6.47164ZM6.66609 6.47164C6.75465 6.38309 6.87476 6.33333 7 6.33333C7.12524 6.33333 7.24535 6.38309 7.33391 6.47164C7.42247 6.5602 7.47222 6.68031 7.47222 6.80556C7.47222 6.9308 7.42247 7.05091 7.33391 7.13947C7.24535 7.22803 7.12524 7.27778 7 7.27778C6.87476 7.27778 6.75465 7.22803 6.66609 7.13947C6.57753 7.05091 6.52778 6.9308 6.52778 6.80556C6.52778 6.68032 6.57753 6.5602 6.66609 6.47164ZM9.97164 6.47164C10.0602 6.38309 10.1803 6.33333 10.3056 6.33333C10.4308 6.33333 10.5509 6.38309 10.6395 6.47164C10.728 6.5602 10.7778 6.68031 10.7778 6.80556C10.7778 6.9308 10.728 7.05091 10.6395 7.13947C10.5509 7.22803 10.4308 7.27778 10.3056 7.27778C10.1803 7.27778 10.0602 7.22803 9.97164 7.13947C9.88309 7.05091 9.83333 6.9308 9.83333 6.80556C9.83333 6.68031 9.88309 6.5602 9.97164 6.47164ZM3.36053 9.97164C3.44909 9.88309 3.5692 9.83333 3.69444 9.83333C3.81969 9.83333 3.9398 9.88309 4.02836 9.97164C4.11692 10.0602 4.16667 10.1803 4.16667 10.3056C4.16667 10.4308 4.11691 10.5509 4.02836 10.6395C3.9398 10.728 3.81969 10.7778 3.69444 10.7778C3.5692 10.7778 3.44909 10.728 3.36053 10.6395C3.27197 10.5509 3.22222 10.4308 3.22222 10.3056C3.22222 10.1803 3.27197 10.0602 3.36053 9.97164ZM6.66609 9.97164C6.75465 9.88309 6.87476 9.83333 7 9.83333C7.12524 9.83333 7.24535 9.88309 7.33391 9.97164C7.42247 10.0602 7.47222 10.1803 7.47222 10.3056C7.47222 10.4308 7.42247 10.5509 7.33391 10.6395C7.24535 10.728 7.12524 10.7778 7 10.7778C6.87476 10.7778 6.75465 10.728 6.66609 10.6395C6.57753 10.5509 6.52778 10.4308 6.52778 10.3056C6.52778 10.1803 6.57753 10.0602 6.66609 9.97164Z" stroke="#D6CBE2"/>
+</svg>

package/client/imgs/icons/email.svg

@@ -0,0 +1,6 @@
+<svg width="13" height="10" viewBox="0 0 13 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g>
+<rect x="0.85" y="0.85" width="11.3" height="8.3" rx="1.15" stroke="#D6CBE2" stroke-width="1.7"/>
+<path d="M1 2.5L5.35117 5.26893C6.04435 5.71004 6.93679 5.68234 7.60127 5.19908L12 2" stroke="#D6CBE2" stroke-width="1.7"/>
+</g>
+</svg>

package/client/imgs/icons/eye-open.svg

@@ -0,0 +1,4 @@
+<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.1142 5.9414L16.1143 5.94168L16.1462 6.00025L16.1144 6.05878C14.5319 8.96792 11.6062 10.75 8.5 10.75C5.39365 10.75 2.46796 8.96776 0.885708 6.05893C0.885684 6.05889 0.885659 6.05884 0.885634 6.05879L0.853633 5.99993L0.885415 5.94145C2.46806 3.03206 5.39362 1.25 8.5 1.25C11.6062 1.25 14.5319 3.03227 16.1142 5.9414Z" stroke="#8D8399" stroke-width="1.5"/>
+<path d="M10.75 6C10.75 7.24264 9.74264 8.25 8.5 8.25C7.25736 8.25 6.25 7.24264 6.25 6C6.25 4.75736 7.25736 3.75 8.5 3.75C9.74264 3.75 10.75 4.75736 10.75 6Z" stroke="#8D8399" stroke-width="1.5"/>
+</svg>

package/client/imgs/icons/eye.svg

@@ -0,0 +1,5 @@
+<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.1142 5.9414L16.1143 5.94168L16.1462 6.00025L16.1144 6.05878C14.5319 8.96792 11.6062 10.75 8.5 10.75C5.39365 10.75 2.46796 8.96776 0.885708 6.05893C0.885684 6.05889 0.885659 6.05884 0.885634 6.05879L0.853633 5.99993L0.885415 5.94145C2.46806 3.03206 5.39362 1.25 8.5 1.25C11.6062 1.25 14.5319 3.03227 16.1142 5.9414Z" stroke="#8D8399" stroke-width="1.5"/>
+<path d="M10.75 6C10.75 7.24264 9.74264 8.25 8.5 8.25C7.25736 8.25 6.25 7.24264 6.25 6C6.25 4.75736 7.25736 3.75 8.5 3.75C9.74264 3.75 10.75 4.75736 10.75 6Z" stroke="#8D8399" stroke-width="1.5"/>
+<path d="M2 9.5L15 2.5" stroke="#FBFBFB" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/imgs/icons/filter.svg

@@ -0,0 +1,7 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g>
+<rect width="12" height="2" rx="1" fill="#D6CBE2"/>
+<rect x="2" y="4" width="8" height="2" rx="1" fill="#D6CBE2"/>
+<rect x="4" y="8" width="4" height="2" rx="1" fill="#D6CBE2"/>
+</g>
+</svg>

package/client/imgs/icons/left-circle.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.22222 5.66667L4.88889 8M4.88889 8L7.22222 10.3333M4.88889 8H11.1111M1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/imgs/icons/left.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.01779 1.09998L1.01779 5.49998L5.01779 9.89998" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/imgs/icons/line-options.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="37" viewBox="0 0 24 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11.8934" cy="25" r="2" fill="#3A3942"/>
+<circle cx="11.8934" cy="18" r="2" fill="#3A3942"/>
+<circle cx="11.8934" cy="11" r="2" fill="#3A3942"/>
+</svg>

package/client/imgs/icons/line.svg

@@ -0,0 +1,3 @@
+<svg width="3" height="18" viewBox="0 0 3 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="1.5" y1="2.18557e-08" x2="1.5" y2="18" stroke="#EEEDEF"/>
+</svg>

package/client/imgs/icons/person.svg

@@ -0,0 +1,7 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g>
+<path d="M13 7.00002H10.3333M11.6667 8.33335L11.6667 5.66669" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M1 11.741C1 10.1323 2.13155 8.76197 3.66936 8.50843L3.80788 8.4856C5.03928 8.28258 6.29405 8.28258 7.52545 8.4856L7.66397 8.50843C9.20178 8.76197 10.3333 10.1323 10.3333 11.741C10.3333 12.4363 9.78768 13 9.11458 13H2.21875C1.54565 13 1 12.4363 1 11.741Z" stroke="white" stroke-width="1.5"/>
+<path d="M8.3889 3.625C8.3889 5.07475 7.17012 6.25 5.66668 6.25C4.16324 6.25 2.94446 5.07475 2.94446 3.625C2.94446 2.17525 4.16324 1 5.66668 1C7.17012 1 8.3889 2.17525 8.3889 3.625Z" stroke="white" stroke-width="1.5"/>
+</g>
+</svg>

package/client/imgs/icons/plus-circle.svg

@@ -0,0 +1,5 @@
+<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="14.5" cy="14.5" r="13.5" stroke="#E8E8E8" stroke-width="2"/>
+<line x1="14.5" y1="18.5" x2="14.5" y2="10.5" stroke="#1E1D20" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="18.5" y1="14.5" x2="10.5" y2="14.5" stroke="#1E1D20" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/imgs/icons/plus.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g>
+<path d="M1.5 6H10.5M6 1.5L6 10.5" stroke="white" stroke-width="1.8" stroke-linecap="round"/>
+</g>
+</svg>

package/client/imgs/icons/right-circle.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.77778 10.3333L11.1111 8M11.1111 8L8.77778 5.66667M11.1111 8H4.88889M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/imgs/icons/right.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.93219 9.90002L5.93219 5.50002L1.93219 1.10002" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/imgs/icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2275 9.59501C10.2576 9.61776 10.2868 9.64294 10.3145 9.67057L12.752 12.1081C12.8296 12.183 12.8915 12.2727 12.934 12.3718C12.9766 12.4709 12.999 12.5776 13 12.6854C13.0009 12.7933 12.9804 12.9003 12.9395 13.0002C12.8986 13.1 12.8383 13.1907 12.762 13.267C12.6857 13.3433 12.595 13.4036 12.4952 13.4445C12.3953 13.4853 12.2883 13.5059 12.1804 13.505C12.0726 13.504 11.9659 13.4816 11.8668 13.439C11.7677 13.3964 11.678 13.3345 11.6031 13.2569L9.16558 10.8194C9.13839 10.7923 9.11314 10.7632 9.09002 10.7325C7.93912 11.5957 6.50386 11.9906 5.07338 11.8378C3.64289 11.685 2.32346 10.9958 1.38087 9.90897C0.438275 8.82215 -0.0574365 7.41851 -0.006413 5.98079C0.0446105 4.54306 0.638577 3.17809 1.65584 2.16083C2.6731 1.14357 4.03807 0.5496 5.4758 0.498577C6.91352 0.447553 8.31716 0.943264 9.40398 1.88586C10.4908 2.82845 11.18 4.14788 11.3328 5.57837C11.4857 7.00885 11.0907 8.44411 10.2275 9.59501ZM5.67751 10.245C6.75496 10.245 7.78827 9.81699 8.55014 9.05513C9.31201 8.29326 9.74002 7.25995 9.74002 6.1825C9.74002 5.10506 9.31201 4.07175 8.55014 3.30988C7.78827 2.54801 6.75496 2.12 5.67751 2.12C4.60007 2.12 3.56676 2.54801 2.80489 3.30988C2.04302 4.07175 1.61501 5.10506 1.61501 6.1825C1.61501 7.25995 2.04302 8.29326 2.80489 9.05513C3.56676 9.81699 4.60007 10.245 5.67751 10.245Z" fill="#D6CBE2"/>
+</svg>

package/client/imgs/icons/shield.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g>
+<path d="M9.90654 13.8235L10.042 13.7264C10.4657 13.4226 10.6776 13.2706 10.8671 13.1077C11.8971 12.2225 12.5888 10.9885 12.8191 9.62598C12.8614 9.37522 12.8835 9.10994 12.9275 8.5794L12.9503 8.30507C13.0232 7.4269 13.0159 6.54361 12.9286 5.66685L12.9015 5.39553C12.7487 3.86121 11.8404 2.51644 10.4983 1.83738C8.29161 0.720874 5.70839 0.720874 3.50169 1.83738C2.15956 2.51644 1.25128 3.86121 1.09845 5.39553L1.07143 5.66685C0.984097 6.54361 0.97683 7.4269 1.04972 8.30507L1.07249 8.5794C1.11653 9.10994 1.13855 9.37522 1.18092 9.62598C1.41116 10.9885 2.10292 12.2225 3.13285 13.1077C3.32239 13.2706 3.53433 13.4226 3.95805 13.7264L4.09346 13.8235C4.66955 14.2366 4.95762 14.4432 5.24631 14.5868C6.35447 15.1377 7.64553 15.1377 8.75369 14.5868C9.04238 14.4432 9.33045 14.2367 9.90654 13.8235Z" stroke="white" stroke-width="1.5"/>
+<path d="M4.82291 7.8021L6.40624 9.38544L9.17707 6.41669" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/client/imgs/icons/tick-circle-solid.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g>
+<circle cx="10" cy="10" r="9.25" stroke="#7647DA" stroke-width="1.5"/>
+<path d="M6.55145 10.2475L9.27492 13.0064L13.425 7.04828" stroke="#7647DA" stroke-width="1.5" stroke-linejoin="round"/>
+<circle cx="10" cy="10" r="10" fill="#8656ED"/>
+<path d="M5.88235 9.80394L8.62745 12.549L14.1176 7.05884" stroke="white" stroke-width="2.35294"/>
+</g>
+</svg>

package/client/imgs/icons/tick-circle.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g>
+<circle cx="10" cy="10" r="9.25" stroke="#7647DA" stroke-width="1.5"/>
+<path d="M6.55145 10.2475L9.27492 13.0064L13.425 7.04828" stroke="#7647DA" stroke-width="1.5" stroke-linejoin="round"/>
+</g>
+</svg>

package/client/imgs/icons/tick.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g>
+<path d="M10.8 1L3.94287 9L1.20001 5.8" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/client/imgs/icons/up2-small.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16.72H14V19H0V16.72Z" fill="#D6CBE2"/>
+<path d="M5.64095 12.8102V5.17819C5.64095 5.17819 3.6021 7.65608 2.93926 8.22031C2.27642 8.78454 0.847125 7.52269 1.33939 6.67005C1.64216 6.14565 3.2952 3.64443 4.38675 2.2717C5.4783 0.898964 5.8342 0.624404 6.28508 0.235452C6.73595 -0.153499 7.4478 0.00658673 7.75629 0.235409L7.76852 0.244473C8.07639 0.472719 8.51675 0.799185 9.65465 2.2717C10.8123 3.76972 12.1189 5.7509 12.7031 6.67005C13.2872 7.5892 11.6963 8.69302 11.0862 8.22031C10.476 7.7476 8.40897 5.17819 8.40897 5.17819V12.8102C8.40897 13.8258 5.64095 13.8079 5.64095 12.8102Z" fill="#D6CBE2"/>
+</svg>

package/client/imgs/icons/up2.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="25" viewBox="0 0 18 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 22H18V25H0V22Z" fill="#D6CBE2"/>
+<path d="M7.25265 16.8555V6.81341C7.25265 6.81341 4.63127 10.0738 3.77905 10.8162C2.92683 11.5586 1.08916 9.89827 1.72208 8.77638C2.11134 8.08638 4.23668 4.7953 5.64011 2.98907C7.04353 1.18285 7.50112 0.821585 8.08081 0.309806C8.66051 -0.201973 9.57574 0.00866675 9.97238 0.309749L9.98809 0.321675C10.3839 0.621999 10.9501 1.05156 12.4131 2.98907C13.9015 4.96016 15.5814 7.56698 16.3325 8.77638C17.0836 9.98579 15.0381 11.4382 14.2536 10.8162C13.4692 10.1942 10.8115 6.81341 10.8115 6.81341V16.8555C10.8115 18.1918 7.25265 18.1683 7.25265 16.8555Z" fill="#D6CBE2"/>
+</svg>

package/client/imgs/icons/updown.svg

@@ -0,0 +1,6 @@
+<svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g>
+<path d="M1 10.1818L5 13.3636L9 10.1818" stroke="#D6CBE2" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 4.18182L5 1.00001L9 4.18182" stroke="#D6CBE2" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/client/imgs/icons/v-big-dark.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.71043 3.82593L9.0065 8.7079L14.3026 3.82593" stroke="#3A3942" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/imgs/icons/v-dark.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.88589 2.86945L7.00506 6.53092L11.1242 2.86945" stroke="#3A3942" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/imgs/icons/v.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="9" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.88589 2.86945L7.00506 6.53092L11.1242 2.86945" stroke="#D6CBE2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/client/imgs/icons/v2-active.svg

@@ -0,0 +1,6 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_3047_23129" fill="white">
+<path d="M5.50001 0.0649414L10.4498 5.01469L5.50001 9.96444L0.55026 5.01469L5.50001 0.0649414Z"/>
+</mask>
+<path d="M5.50001 9.96444L4.08579 11.3786L5.50001 12.7929L6.91422 11.3786L5.50001 9.96444ZM9.03554 3.60048L4.08579 8.55022L6.91422 11.3786L11.864 6.4289L9.03554 3.60048ZM6.91422 8.55022L1.96447 3.60048L-0.863953 6.4289L4.08579 11.3786L6.91422 8.55022Z" fill="black" mask="url(#path-1-inside-1_3047_23129)"/>
+</svg>

package/client/imgs/icons/x1.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line y1="-1" x2="16" y2="-1" transform="matrix(0.707104 0.70711 -0.707104 0.70711 1.17761 2.59583)" stroke="black" stroke-width="2"/>
+<line y1="-1" x2="16" y2="-1" transform="matrix(0.707107 -0.707107 0.707112 0.707101 2.50867 13.9096)" stroke="black" stroke-width="2"/>
+</svg>