added storybook

.storybook/helpers.tsx

@@ -0,0 +1,19 @@
+import { motion } from 'framer-motion';
+
+export const ModalsDecorator = (Story: any) => {
+  const onClose = () => { };
+  return (
+    <motion.div
+      initial={false}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      className='w-screen h-full fixed inset-0 py-32 md:py-64 flex flex-col justify-center items-center overflow-x-hidden overflow-y-hidden no-scrollbar'
+    >
+      <div
+        className="w-screen h-full bg-gray-300 bg-opacity-50 absolute inset-0"
+        onClick={onClose}
+      ></div>
+      <Story />
+    </motion.div>
+  );
+}

.storybook/main.js

@@ -0,0 +1,41 @@
+const path = require("path");
+
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+  ],
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        {
+          loader: "postcss-loader",
+          options: {
+            ident: "postcss",
+            plugins: [require("tailwindcss"), require("autoprefixer")],
+          },
+        },
+      ],
+      include: path.resolve(__dirname, "../"),
+    });
+    config.module.rules.push({
+      type: "javascript/auto",
+      test: /\.mjs$/,
+      include: /node_modules/,
+    });
+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+
+      "@/SB": path.resolve(__dirname),
+      "@/Components": path.resolve(__dirname, "../src/Components"),
+      "@/Api": path.resolve(__dirname, "../src/api"),
+      "@/Utils": path.resolve(__dirname, "../src/utils"),
+    };
+
+    return config;
+  },
+};

.storybook/preview.js

@@ -0,0 +1,33 @@
+import "../src/index.css";
+import { configure, addDecorator } from "@storybook/react";
+import { store } from "../src/redux/store";
+import React from "react";
+import { Provider } from "react-redux";
+import { QueryClient, QueryClientProvider } from "react-query";
+import "react-multi-carousel/lib/styles.css";
+import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
+import { BrowserRouter } from "react-router-dom";
+
+const queryClient = new QueryClient();
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+addDecorator((S) => (
+  <QueryClientProvider client={queryClient}>
+    <Provider store={store}>
+      <BrowserRouter>
+        <S />
+      </BrowserRouter>
+    </Provider>
+  </QueryClientProvider>
+));
+
+configure(require.context("../src", true, /\.stories\.ts$/), module);

build/asset-manifest.json

@@ -1,26 +1,26 @@
 {
   "files": {
-    "main.css": "./static/css/main.5e6dbc1b.chunk.css",
-    "main.js": "./static/js/main.1dcb6923.chunk.js",
-    "main.js.map": "./static/js/main.1dcb6923.chunk.js.map",
-    "runtime-main.js": "./static/js/runtime-main.1d3ad3fe.js",
-    "runtime-main.js.map": "./static/js/runtime-main.1d3ad3fe.js.map",
+    "main.css": "./static/css/main.48b7759f.chunk.css",
+    "main.js": "./static/js/main.c3951f3e.chunk.js",
+    "main.js.map": "./static/js/main.c3951f3e.chunk.js.map",
+    "runtime-main.js": "./static/js/runtime-main.01a5915a.js",
+    "runtime-main.js.map": "./static/js/runtime-main.01a5915a.js.map",
     "static/css/2.4cfadce7.chunk.css": "./static/css/2.4cfadce7.chunk.css",
-    "static/js/2.3c900185.chunk.js": "./static/js/2.3c900185.chunk.js",
-    "static/js/2.3c900185.chunk.js.map": "./static/js/2.3c900185.chunk.js.map",
-    "static/js/3.b6363b85.chunk.js": "./static/js/3.b6363b85.chunk.js",
-    "static/js/3.b6363b85.chunk.js.map": "./static/js/3.b6363b85.chunk.js.map",
+    "static/js/2.0594dcef.chunk.js": "./static/js/2.0594dcef.chunk.js",
+    "static/js/2.0594dcef.chunk.js.map": "./static/js/2.0594dcef.chunk.js.map",
+    "static/js/3.c08babba.chunk.js": "./static/js/3.c08babba.chunk.js",
+    "static/js/3.c08babba.chunk.js.map": "./static/js/3.c08babba.chunk.js.map",
     "index.html": "./index.html",
     "static/css/2.4cfadce7.chunk.css.map": "./static/css/2.4cfadce7.chunk.css.map",
-    "static/css/main.5e6dbc1b.chunk.css.map": "./static/css/main.5e6dbc1b.chunk.css.map",
-    "static/js/2.3c900185.chunk.js.LICENSE.txt": "./static/js/2.3c900185.chunk.js.LICENSE.txt",
+    "static/css/main.48b7759f.chunk.css.map": "./static/css/main.48b7759f.chunk.css.map",
+    "static/js/2.0594dcef.chunk.js.LICENSE.txt": "./static/js/2.0594dcef.chunk.js.LICENSE.txt",
     "static/media/styles.css": "./static/media/revicons.e8746a62.woff"
   },
   "entrypoints": [
-    "static/js/runtime-main.1d3ad3fe.js",
+    "static/js/runtime-main.01a5915a.js",
     "static/css/2.4cfadce7.chunk.css",
-    "static/js/2.3c900185.chunk.js",
-    "static/css/main.5e6dbc1b.chunk.css",
-    "static/js/main.1dcb6923.chunk.js"
+    "static/js/2.0594dcef.chunk.js",
+    "static/css/main.48b7759f.chunk.css",
+    "static/js/main.c3951f3e.chunk.js"
   ]
 }

build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="A place for creators to share theier lightning apps"/><link rel="manifest" href="./manifest.json"/><title>makers.bolt.fun</title><link href="./static/css/2.4cfadce7.chunk.css" rel="stylesheet"><link href="./static/css/main.5e6dbc1b.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],s=0,p=[];s<i.length;s++)a=i[s],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);p.length;)p.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var c=t[i];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"b6363b85"}[e]+".chunk.js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpmakers.bolt.fun"]=this["webpackJsonpmakers.bolt.fun"]||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([])</script><script src="./static/js/2.3c900185.chunk.js"></script><script src="./static/js/main.1dcb6923.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="A place for creators to share theier lightning apps"/><link rel="manifest" href="./manifest.json"/><title>makers.bolt.fun</title><link href="./static/css/2.4cfadce7.chunk.css" rel="stylesheet"><link href="./static/css/main.48b7759f.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],s=0,p=[];s<i.length;s++)a=i[s],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);p.length;)p.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var c=t[i];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"c08babba"}[e]+".chunk.js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpmakers.bolt.fun"]=this["webpackJsonpmakers.bolt.fun"]||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([])</script><script src="./static/js/2.0594dcef.chunk.js"></script><script src="./static/js/main.c3951f3e.chunk.js"></script></body></html>

build/static/js/2.0594dcef.chunk.js.LICENSE.txt

@@ -19,6 +19,28 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
+/**
+ * React Router DOM v6.0.2
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
+/**
+ * React Router v6.0.2
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+
 /** @license React v0.20.2
  * scheduler.production.min.js
  *

build/static/js/3.c08babba.chunk.js

@@ -1,2 +1,2 @@
-(this["webpackJsonpmakers.bolt.fun"]=this["webpackJsonpmakers.bolt.fun"]||[]).push([[3],{148:function(t,e,n){"use strict";n.r(e),n.d(e,"getCLS",(function(){return d})),n.d(e,"getFCP",(function(){return S})),n.d(e,"getFID",(function(){return k})),n.d(e,"getLCP",(function(){return F})),n.d(e,"getTTFB",(function(){return C}));var i,a,r,o,u=function(t,e){return{name:t,value:void 0===e?-1:e,delta:0,entries:[],id:"v1-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(t,e){try{if(PerformanceObserver.supportedEntryTypes.includes(t)){if("first-input"===t&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(t){return t.getEntries().map(e)}));return n.observe({type:t,buffered:!0}),n}}catch(t){}},f=function(t,e){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(t(i),e&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},s=function(t){addEventListener("pageshow",(function(e){e.persisted&&t(e)}),!0)},m="function"==typeof WeakSet?new WeakSet:new Set,p=function(t,e,n){var i;return function(){e.value>=0&&(n||m.has(e)||"hidden"===document.visibilityState)&&(e.delta=e.value-(i||0),(e.delta||void 0===i)&&(i=e.value,t(e)))}},d=function(t,e){var n,i=u("CLS",0),a=function(t){t.hadRecentInput||(i.value+=t.value,i.entries.push(t),n())},r=c("layout-shift",a);r&&(n=p(t,i,e),f((function(){r.takeRecords().map(a),n()})),s((function(){i=u("CLS",0),n=p(t,i,e)})))},v=-1,l=function(){return"hidden"===document.visibilityState?0:1/0},h=function(){f((function(t){var e=t.timeStamp;v=e}),!0)},g=function(){return v<0&&(v=l(),h(),s((function(){setTimeout((function(){v=l(),h()}),0)}))),{get timeStamp(){return v}}},S=function(t,e){var n,i=g(),a=u("FCP"),r=function(t){"first-contentful-paint"===t.name&&(f&&f.disconnect(),t.startTime<i.timeStamp&&(a.value=t.startTime,a.entries.push(t),m.add(a),n()))},o=performance.getEntriesByName("first-contentful-paint")[0],f=o?null:c("paint",r);(o||f)&&(n=p(t,a,e),o&&r(o),s((function(i){a=u("FCP"),n=p(t,a,e),requestAnimationFrame((function(){requestAnimationFrame((function(){a.value=performance.now()-i.timeStamp,m.add(a),n()}))}))})))},y={passive:!0,capture:!0},E=new Date,w=function(t,e){i||(i=e,a=t,r=new Date,b(removeEventListener),L())},L=function(){if(a>=0&&a<r-E){var t={entryType:"first-input",name:i.type,target:i.target,cancelable:i.cancelable,startTime:i.timeStamp,processingStart:i.timeStamp+a};o.forEach((function(e){e(t)})),o=[]}},T=function(t){if(t.cancelable){var e=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,e){var n=function(){w(t,e),a()},i=function(){a()},a=function(){removeEventListener("pointerup",n,y),removeEventListener("pointercancel",i,y)};addEventListener("pointerup",n,y),addEventListener("pointercancel",i,y)}(e,t):w(e,t)}},b=function(t){["mousedown","keydown","touchstart","pointerdown"].forEach((function(e){return t(e,T,y)}))},k=function(t,e){var n,r=g(),d=u("FID"),v=function(t){t.startTime<r.timeStamp&&(d.value=t.processingStart-t.startTime,d.entries.push(t),m.add(d),n())},l=c("first-input",v);n=p(t,d,e),l&&f((function(){l.takeRecords().map(v),l.disconnect()}),!0),l&&s((function(){var r;d=u("FID"),n=p(t,d,e),o=[],a=-1,i=null,b(addEventListener),r=v,o.push(r),L()}))},F=function(t,e){var n,i=g(),a=u("LCP"),r=function(t){var e=t.startTime;e<i.timeStamp&&(a.value=e,a.entries.push(t)),n()},o=c("largest-contentful-paint",r);if(o){n=p(t,a,e);var d=function(){m.has(a)||(o.takeRecords().map(r),o.disconnect(),m.add(a),n())};["keydown","click"].forEach((function(t){addEventListener(t,d,{once:!0,capture:!0})})),f(d,!0),s((function(i){a=u("LCP"),n=p(t,a,e),requestAnimationFrame((function(){requestAnimationFrame((function(){a.value=performance.now()-i.timeStamp,m.add(a),n()}))}))}))}},C=function(t){var e,n=u("TTFB");e=function(){try{var e=performance.getEntriesByType("navigation")[0]||function(){var t=performance.timing,e={entryType:"navigation",startTime:0};for(var n in t)"navigationStart"!==n&&"toJSON"!==n&&(e[n]=Math.max(t[n]-t.navigationStart,0));return e}();if(n.value=n.delta=e.responseStart,n.value<0)return;n.entries=[e],t(n)}catch(t){}},"complete"===document.readyState?setTimeout(e,0):addEventListener("pageshow",e)}}}]);
-//# sourceMappingURL=3.b6363b85.chunk.js.map
+(this["webpackJsonpmakers.bolt.fun"]=this["webpackJsonpmakers.bolt.fun"]||[]).push([[3],{149:function(t,e,n){"use strict";n.r(e),n.d(e,"getCLS",(function(){return d})),n.d(e,"getFCP",(function(){return S})),n.d(e,"getFID",(function(){return k})),n.d(e,"getLCP",(function(){return F})),n.d(e,"getTTFB",(function(){return C}));var i,a,r,o,u=function(t,e){return{name:t,value:void 0===e?-1:e,delta:0,entries:[],id:"v1-".concat(Date.now(),"-").concat(Math.floor(8999999999999*Math.random())+1e12)}},c=function(t,e){try{if(PerformanceObserver.supportedEntryTypes.includes(t)){if("first-input"===t&&!("PerformanceEventTiming"in self))return;var n=new PerformanceObserver((function(t){return t.getEntries().map(e)}));return n.observe({type:t,buffered:!0}),n}}catch(t){}},f=function(t,e){var n=function n(i){"pagehide"!==i.type&&"hidden"!==document.visibilityState||(t(i),e&&(removeEventListener("visibilitychange",n,!0),removeEventListener("pagehide",n,!0)))};addEventListener("visibilitychange",n,!0),addEventListener("pagehide",n,!0)},s=function(t){addEventListener("pageshow",(function(e){e.persisted&&t(e)}),!0)},m="function"==typeof WeakSet?new WeakSet:new Set,p=function(t,e,n){var i;return function(){e.value>=0&&(n||m.has(e)||"hidden"===document.visibilityState)&&(e.delta=e.value-(i||0),(e.delta||void 0===i)&&(i=e.value,t(e)))}},d=function(t,e){var n,i=u("CLS",0),a=function(t){t.hadRecentInput||(i.value+=t.value,i.entries.push(t),n())},r=c("layout-shift",a);r&&(n=p(t,i,e),f((function(){r.takeRecords().map(a),n()})),s((function(){i=u("CLS",0),n=p(t,i,e)})))},v=-1,l=function(){return"hidden"===document.visibilityState?0:1/0},h=function(){f((function(t){var e=t.timeStamp;v=e}),!0)},g=function(){return v<0&&(v=l(),h(),s((function(){setTimeout((function(){v=l(),h()}),0)}))),{get timeStamp(){return v}}},S=function(t,e){var n,i=g(),a=u("FCP"),r=function(t){"first-contentful-paint"===t.name&&(f&&f.disconnect(),t.startTime<i.timeStamp&&(a.value=t.startTime,a.entries.push(t),m.add(a),n()))},o=performance.getEntriesByName("first-contentful-paint")[0],f=o?null:c("paint",r);(o||f)&&(n=p(t,a,e),o&&r(o),s((function(i){a=u("FCP"),n=p(t,a,e),requestAnimationFrame((function(){requestAnimationFrame((function(){a.value=performance.now()-i.timeStamp,m.add(a),n()}))}))})))},y={passive:!0,capture:!0},E=new Date,w=function(t,e){i||(i=e,a=t,r=new Date,b(removeEventListener),L())},L=function(){if(a>=0&&a<r-E){var t={entryType:"first-input",name:i.type,target:i.target,cancelable:i.cancelable,startTime:i.timeStamp,processingStart:i.timeStamp+a};o.forEach((function(e){e(t)})),o=[]}},T=function(t){if(t.cancelable){var e=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,e){var n=function(){w(t,e),a()},i=function(){a()},a=function(){removeEventListener("pointerup",n,y),removeEventListener("pointercancel",i,y)};addEventListener("pointerup",n,y),addEventListener("pointercancel",i,y)}(e,t):w(e,t)}},b=function(t){["mousedown","keydown","touchstart","pointerdown"].forEach((function(e){return t(e,T,y)}))},k=function(t,e){var n,r=g(),d=u("FID"),v=function(t){t.startTime<r.timeStamp&&(d.value=t.processingStart-t.startTime,d.entries.push(t),m.add(d),n())},l=c("first-input",v);n=p(t,d,e),l&&f((function(){l.takeRecords().map(v),l.disconnect()}),!0),l&&s((function(){var r;d=u("FID"),n=p(t,d,e),o=[],a=-1,i=null,b(addEventListener),r=v,o.push(r),L()}))},F=function(t,e){var n,i=g(),a=u("LCP"),r=function(t){var e=t.startTime;e<i.timeStamp&&(a.value=e,a.entries.push(t)),n()},o=c("largest-contentful-paint",r);if(o){n=p(t,a,e);var d=function(){m.has(a)||(o.takeRecords().map(r),o.disconnect(),m.add(a),n())};["keydown","click"].forEach((function(t){addEventListener(t,d,{once:!0,capture:!0})})),f(d,!0),s((function(i){a=u("LCP"),n=p(t,a,e),requestAnimationFrame((function(){requestAnimationFrame((function(){a.value=performance.now()-i.timeStamp,m.add(a),n()}))}))}))}},C=function(t){var e,n=u("TTFB");e=function(){try{var e=performance.getEntriesByType("navigation")[0]||function(){var t=performance.timing,e={entryType:"navigation",startTime:0};for(var n in t)"navigationStart"!==n&&"toJSON"!==n&&(e[n]=Math.max(t[n]-t.navigationStart,0));return e}();if(n.value=n.delta=e.responseStart,n.value<0)return;n.entries=[e],t(n)}catch(t){}},"complete"===document.readyState?setTimeout(e,0):addEventListener("pageshow",e)}}}]);
+//# sourceMappingURL=3.c08babba.chunk.js.map

build/static/js/runtime-main.01a5915a.js

@@ -1,2 +1,2 @@
-!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],s=0,p=[];s<i.length;s++)a=i[s],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);p.length;)p.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var c=t[i];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"b6363b85"}[e]+".chunk.js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpmakers.bolt.fun"]=this["webpackJsonpmakers.bolt.fun"]||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([]);
-//# sourceMappingURL=runtime-main.1d3ad3fe.js.map
+!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],s=0,p=[];s<i.length;s++)a=i[s],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);p.length;)p.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var c=t[i];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"c08babba"}[e]+".chunk.js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="./",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpmakers.bolt.fun"]=this["webpackJsonpmakers.bolt.fun"]||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([]);
+//# sourceMappingURL=runtime-main.01a5915a.js.map

package.json

@@ -35,12 +35,24 @@
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build",
-    "only-deploy": "gh-pages -d build"
+    "only-deploy": "gh-pages -d build",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
       "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
     ]
   },
   "browserslist": {
@@ -57,6 +69,13 @@
   },
   "devDependencies": {
     "@craco/craco": "^6.4.0",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-essentials": "^6.3.12",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/node-logger": "^6.3.12",
+    "@storybook/preset-create-react-app": "^3.2.0",
+    "@storybook/react": "^6.3.12",
     "@types/lodash.throttle": "^4.1.6",
     "@types/react-copy-to-clipboard": "^5.0.2",
     "autoprefixer": "^9.8.8",

src/Components/ClaimProject/Claim_CopySignatureCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Claim_CopySignatureCard from './Claim_CopySignatureCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Claim/Copy Signature Card',
+    component: Claim_CopySignatureCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Claim_CopySignatureCard>;
+
+const Template: ComponentStory<typeof Claim_CopySignatureCard> = (args) => <Claim_CopySignatureCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/ClaimProject/Claim_FundWithdrawCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Claim_FundWithdrawCard from './Claim_FundWithdrawCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Claim/Fund Withdraw Card',
+    component: Claim_FundWithdrawCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Claim_FundWithdrawCard>;
+
+const Template: ComponentStory<typeof Claim_FundWithdrawCard> = (args) => <Claim_FundWithdrawCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/ClaimProject/Claim_GenerateSignatureCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Claim_GenerateSignatureCard from './Claim_GenerateSignatureCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Claim/Generate Signature Card',
+    component: Claim_GenerateSignatureCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Claim_GenerateSignatureCard>;
+
+const Template: ComponentStory<typeof Claim_GenerateSignatureCard> = (args) => <Claim_GenerateSignatureCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/ClaimProject/Claim_SubmittedCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Claim_SubmittedCard from './Claim_SubmittedCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Claim/Submitted Card',
+    component: Claim_SubmittedCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Claim_SubmittedCard>;
+
+const Template: ComponentStory<typeof Claim_SubmittedCard> = (args) => <Claim_SubmittedCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/ExplorePage/partials/Categories.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Categories from './Categories';
+
+
+export default {
+    title: 'Explore Page/Categories',
+    component: Categories,
+
+} as ComponentMeta<typeof Categories>;
+
+const Template: ComponentStory<typeof Categories> = (args) => <Categories />;
+
+export const Default = Template.bind({});
+

src/Components/ExplorePage/partials/Header.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Header from './Header';
+
+
+export default {
+    title: 'Explore Page/Header',
+    component: Header,
+
+} as ComponentMeta<typeof Header>;
+
+const Template: ComponentStory<typeof Header> = (args) => <Header />;
+
+export const Default = Template.bind({});
+

src/Components/ExplorePage/partials/ProjectCardMini.stories.tsx

@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import mockData from 'src/api/mockData.json'
+
+import ProjectCardMini from './ProjectCardMini';
+
+
+export default {
+    title: 'Explore Page/Project Card Mini',
+    component: ProjectCardMini,
+
+} as ComponentMeta<typeof ProjectCardMini>;
+
+const Template: ComponentStory<typeof ProjectCardMini> = (args) => <ProjectCardMini {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    project: mockData.projectsCards[0]
+}
+
+
+

src/Components/ExplorePage/partials/ProjectsRow.stories.tsx

@@ -0,0 +1,33 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import mockData from 'src/api/mockData.json'
+
+import ProjectsRow from './ProjectsRow';
+import { MdLocalFireDepartment } from 'react-icons/md';
+
+
+export default {
+    title: 'Explore Page/ProjectsRow',
+    component: ProjectsRow,
+
+} as ComponentMeta<typeof ProjectsRow>;
+
+const Template: ComponentStory<typeof ProjectsRow> = (args) => <ProjectsRow {...args} />;
+
+export const Hottest = Template.bind({});
+Hottest.args = {
+    title: <>
+        Hottest
+        <MdLocalFireDepartment
+            className='inline-block text-fire align-bottom scale-125 ml-4 origin-bottom'
+        /></>,
+    categoryId: 'hottest',
+    projects: mockData.projectsCards
+}
+
+export const Defi = Template.bind({});
+Defi.args = {
+    title: 'DeFi',
+    categoryId: 'defi',
+    projects: mockData.projectsCards
+}
+

src/Components/ExplorePage/partials/ProjectsRow.tsx

@@ -1,7 +1,7 @@
 import { ReactElement, useEffect, useRef, useState } from "react";
 import { ProjectCard } from "../../../utils/interfaces";
 import Carousel from 'react-multi-carousel';
-import { MdDoubleArrow, MdLocalFireDepartment } from 'react-icons/md';
+import { MdDoubleArrow, } from 'react-icons/md';
 import { useAppDispatch } from "../../../utils/hooks";
 import { ModalId, openModal } from "../../../redux/features/modals.slice";
 import _throttle from 'lodash.throttle'

src/Components/ExplorePage/partials/ProjectsSection.stories.tsx

@@ -0,0 +1,14 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import ProjectsSection from './ProjectsSection';
+
+
+export default {
+    title: 'Explore Page/Projects Section',
+    component: ProjectsSection,
+
+} as ComponentMeta<typeof ProjectsSection>;
+
+const Template: ComponentStory<typeof ProjectsSection> = (args) => <ProjectsSection />;
+
+export const Default = Template.bind({});

src/Components/Login/Login_ExternalWalletCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Login_ExternalWalletCard from './Login_ExternalWalletCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Login/External Wallet Card',
+    component: Login_ExternalWalletCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Login_ExternalWalletCard>;
+
+const Template: ComponentStory<typeof Login_ExternalWalletCard> = (args) => <Login_ExternalWalletCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/Login/Login_NativeWalletCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Login_NativeWalletCard from './Login_NativeWalletCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Login/Native Wallet Card',
+    component: Login_NativeWalletCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Login_NativeWalletCard>;
+
+const Template: ComponentStory<typeof Login_NativeWalletCard> = (args) => <Login_NativeWalletCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/Login/Login_ScanningWalletCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Login_ScanningWalletCard from './Login_ScanningWalletCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Login/Scanning Wallet Card',
+    component: Login_ScanningWalletCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Login_ScanningWalletCard>;
+
+const Template: ComponentStory<typeof Login_ScanningWalletCard> = (args) => <Login_ScanningWalletCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/Login/Login_SuccessCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Login_SuccessCard from './Login_SuccessCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Login/Success Card',
+    component: Login_SuccessCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof Login_SuccessCard>;
+
+const Template: ComponentStory<typeof Login_SuccessCard> = (args) => <Login_SuccessCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/Login/Login_SuccessCard.tsx

@@ -12,14 +12,14 @@ export default function Login_SuccessCard({ onClose, direction, ...props }: Moda
     const handleNext = useCallback(() => {
         dispatch(closeModal())
         dispatch(openSceduledModal())
-    }, [dispatch, onClose])
+    }, [dispatch])
 
 
     useEffect(() => {
         dispatch(connectWallet());
         const timeout = setTimeout(handleNext, 3000)
         return () => clearTimeout(timeout)
-    }, [handleNext])
+    }, [handleNext, dispatch])
 
     return (
         <motion.div

src/Components/Project/ProjectCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import ProjectCard from './ProjectCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Project/Project Card',
+    component: ProjectCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof ProjectCard>;
+
+const Template: ComponentStory<typeof ProjectCard> = (args) => <ProjectCard {...args} />;
+
+export const Default = Template.bind({});
+

src/Components/Shared/Navbar/NavMobile.tsx

@@ -5,6 +5,7 @@ import { GrClose } from 'react-icons/gr';
 import { BsSearch } from 'react-icons/bs'
 import { navLinks } from "./Navbar";
 import { AiFillThunderbolt } from 'react-icons/ai';
+import { Link } from "react-router-dom";
 
 const navBtnVariant = {
     menuHide: { rotate: 90, opacity: 0 },
@@ -48,7 +49,7 @@ export default function NavMobile({ onSearch }: Props) {
                 <div className="w-40 h-40 bg-gray-100 rounded-8 mr-16 overflow-hidden">
                     <img className="w-full h-full object-cover" src="https://www.figma.com/file/OFowr5RJk9YZCW35KT7D5K/image/07b85d84145942255afd215b3da26dbbf1dd03bd?fuid=772401335362859303" alt="" />
                 </div>
-                <h2 className="text-h5 font-bold mx-auto">makers.bolt.fun</h2>
+                <Link to='/'><h2 className="text-h5 font-bold mx-auto">makers.bolt.fun</h2></Link>
                 <button className='rounded-full mr-16 text-2xl w-[50px] h-[50px] hover:bg-gray-200' onClick={handleClick}>
 
                     {!open ? (<motion.div key={open ? 1 : 0} variants={navBtnVariant} initial='menuHide' animate='menuShow'><FiMenu /></motion.div>)
@@ -81,7 +82,7 @@ export default function NavMobile({ onSearch }: Props) {
                     </div>
                     <ul className="py-16 gap-64 border-t">
                         {navLinks.map((link, idx) => <li key={idx} className="text-body3 p-16 hover:bg-gray-200">
-                            <a href={link.url}><link.icon className={`text-body2  inline-block mr-12 ${link.color}`} /> {link.text} </a></li>
+                            <Link to={link.url}><link.icon className={`text-body2  inline-block mr-12 ${link.color}`} /> {link.text} </Link></li>
                         )}
                     </ul>
                     <ul className="px-16 py-16 pb-32 flex flex-wrap gap-y-12  border-t mt-auto">

src/Components/Shared/Navbar/Navbar.stories.tsx

@@ -0,0 +1,14 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Navbar from './Navbar';
+
+export default {
+  title: 'Shared/Navbar',
+  component: Navbar,
+
+} as ComponentMeta<typeof Navbar>;
+
+const Template: ComponentStory<typeof Navbar> = (args) => <Navbar />;
+
+export const Default = Template.bind({});
+

src/Components/Shared/Navbar/Navbar.tsx

@@ -9,11 +9,12 @@ import { motion } from "framer-motion";
 import { GrClose } from 'react-icons/gr';
 import { useAppDispatch, useAppSelector } from "../../../utils/hooks";
 import { ModalId, openModal } from "../../../redux/features/modals.slice";
+import { Link } from "react-router-dom";
 
 export const navLinks = [
     { text: "Explore", url: "/", icon: FaHome, color: 'text-primary-600' },
-    { text: "Hottest", url: "/", icon: MdLocalFireDepartment, color: 'text-primary-600' },
-    { text: "Categories", url: "/", icon: IoExtensionPuzzle, color: 'text-primary-600' },
+    { text: "Hottest", url: "/categories/hottest", icon: MdLocalFireDepartment, color: 'text-primary-600' },
+    { text: "Categories", url: "/categories", icon: IoExtensionPuzzle, color: 'text-primary-600' },
 
 ]
 
@@ -63,10 +64,10 @@ export default function Navbar() {
             {/* Desktop Nav */}
 
             <nav className="hidden lg:flex py-36 px-32 items-center">
-                <h2 className="text-h5 font-bold mr-40 lg:mr-64">makers.bolt.fun</h2>
+                <Link to='/'><h2 className="text-h5 font-bold mr-40 lg:mr-64">makers.bolt.fun</h2></Link>
                 <ul className="flex gap-32 xl:gap-64">
                     {navLinks.map((link, idx) => <li key={idx} className="text-body4 hover:text-primary-600">
-                        <a href={link.url}><link.icon className={`text-body2 align-middle inline-block mr-8 ${link.color}`} /> {link.text}</a></li>
+                        <Link to={link.url}><link.icon className={`text-body2 align-middle inline-block mr-8 ${link.color}`} /> {link.text}</Link></li>
                     )}
 
                 </ul>

src/Components/Tip/TipCard.stories.tsx

@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import TipCard from './TipCard';
+
+import { ModalsDecorator } from '.storybook/helpers'
+
+export default {
+    title: 'Tip/Tip Card',
+    component: TipCard,
+
+    decorators: [ModalsDecorator]
+} as ComponentMeta<typeof TipCard>;
+
+const Template: ComponentStory<typeof TipCard> = (args) => <TipCard {...args} />;
+
+export const Default = Template.bind({});
+

src/utils/Wrapper.tsx

@@ -5,6 +5,7 @@ import { store } from '../redux/store';
 
 import 'react-multi-carousel/lib/styles.css';
 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
+import { BrowserRouter } from 'react-router-dom';
 
 
 const queryClient = new QueryClient()
@@ -13,7 +14,9 @@ export default function Wrapper(props: any) {
     return (
         <QueryClientProvider client={queryClient}>
             <Provider store={store}>
-                {props.children}
+                <BrowserRouter basename={process.env.PUBLIC_URL}>
+                    {props.children}
+                </BrowserRouter>
             </Provider>
         </QueryClientProvider>
     )

tsconfig.json

@@ -1,11 +1,8 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "baseUrl": ".",
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -20,7 +17,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }