mirror of
https://github.com/aljazceru/landscape-template.git
synced 2026-02-23 15:34:21 +01:00
fix: added errors/retries to api client
This commit is contained in:
MTG2000
@@ -61,8 +61,9 @@
|
||||
"predeploy": "env-cmd -f ./environments/.prod.github.env npm run build",
|
||||
"deploy": "gh-pages -d build",
|
||||
"only-deploy": "gh-pages -d build",
|
||||
"storybook": "env-cmd -f ./environments/.dev.mock-server.env start-storybook -p 6006 -s public",
|
||||
"build-storybook": "env-cmd -f ./environments/.prod.mock-server.env build-storybook -s public",
|
||||
"storybook": "env-cmd -f ./environments/.dev.preview-server.env start-storybook -p 6006 -s public",
|
||||
"storybook:mocks": "env-cmd -f ./environments/.dev.mock-server.env start-storybook -p 6006 -s public",
|
||||
"build-storybook": "env-cmd -f ./environments/.prod.preview-server.env build-storybook -s public",
|
||||
"db:migrate-dev": "prisma migrate dev",
|
||||
"db:migrate-deploy": "prisma migrate deploy",
|
||||
"db:reset": "prisma migrate reset",
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import { ModalsDecorator } from 'src/utils/storybook/decorators';
|
||||
|
||||
import Login_ExternalWalletCard from './Login_ExternalWalletCard';
|
||||
|
||||
import { ModalsDecorator } from 'src/utils/storybookDecorators'
|
||||
|
||||
export default {
|
||||
title: 'Login/External Wallet Card',
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import { ModalsDecorator } from 'src/utils/storybook/decorators';
|
||||
|
||||
import Login_NativeWalletCard from './Login_NativeWalletCard';
|
||||
|
||||
import { ModalsDecorator } from 'src/utils/storybookDecorators'
|
||||
|
||||
export default {
|
||||
title: 'Login/Native Wallet Card',
|
||||
|
||||
@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
|
||||
import Login_ScanningWalletCard from './Login_ScanningWalletCard';
|
||||
|
||||
import { ModalsDecorator } from 'src/utils/storybookDecorators'
|
||||
import { ModalsDecorator } from 'src/utils/storybook/decorators';
|
||||
|
||||
export default {
|
||||
title: 'Login/Scanning Wallet Card',
|
||||
|
||||
@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
|
||||
import Login_SuccessCard from './Login_SuccessCard';
|
||||
|
||||
import { ModalsDecorator } from 'src/utils/storybookDecorators'
|
||||
import { ModalsDecorator } from 'src/utils/storybook/decorators';
|
||||
|
||||
export default {
|
||||
title: 'Login/Success Card',
|
||||
|
||||
@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
|
||||
import Claim_CopySignatureCard from './Claim_CopySignatureCard';
|
||||
|
||||
import { ModalsDecorator } from 'src/utils/storybookDecorators'
|
||||
import { ModalsDecorator } from 'src/utils/storybook/decorators';
|
||||
|
||||
export default {
|
||||
title: 'Project/Claim/Copy Signature Card',
|
||||
|
||||
@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
|
||||
import Claim_FundWithdrawCard from './Claim_FundWithdrawCard';
|
||||
|
||||
import { ModalsDecorator } from 'src/utils/storybookDecorators'
|
||||
import { ModalsDecorator } from 'src/utils/storybook/decorators';
|
||||
|
||||
export default {
|
||||
title: 'Project/Claim/Fund Withdraw Card',
|
||||
|
||||
@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
|
||||
import Claim_GenerateSignatureCard from './Claim_GenerateSignatureCard';
|
||||
|
||||
import { ModalsDecorator } from 'src/utils/storybookDecorators'
|
||||
import { ModalsDecorator } from 'src/utils/storybook/decorators';
|
||||
|
||||
export default {
|
||||
title: 'Project/Claim/Generate Signature Card',
|
||||
|
||||
@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
|
||||
import Claim_SubmittedCard from './Claim_SubmittedCard';
|
||||
|
||||
import { ModalsDecorator } from 'src/utils/storybookDecorators'
|
||||
import { ModalsDecorator } from 'src/utils/storybook/decorators';
|
||||
|
||||
export default {
|
||||
title: 'Project/Claim/Submitted Card',
|
||||
|
||||
@@ -3,7 +3,7 @@ import { ModifyArgs } from 'src/utils/storybook/utils'
|
||||
import ProjectDetailsCard from './ProjectDetailsCard';
|
||||
import ProjectDetailsCardSkeleton from './ProjectDetailsCard.Skeleton';
|
||||
|
||||
import { ModalsDecorator } from 'src/utils/storybookDecorators'
|
||||
import { ModalsDecorator } from 'src/utils/storybook/decorators';
|
||||
|
||||
export default {
|
||||
title: 'Project/Project Details Card',
|
||||
|
||||
@@ -33,7 +33,6 @@ export default function ProjectDetailsCard({ onClose, direction, ...props }: Pro
|
||||
isMobileScreen: state.ui.isMobileScreen
|
||||
}));
|
||||
|
||||
console.log(projectId);
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
|
||||
import VoteButton from './VoteButton';
|
||||
import { centerDecorator } from 'src/utils/storybookDecorators'
|
||||
import { centerDecorator } from 'src/utils/storybook/decorators';
|
||||
|
||||
export default {
|
||||
title: 'Project/Tip Button',
|
||||
|
||||
@@ -2,7 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
|
||||
import VoteCard from './VoteCard';
|
||||
|
||||
import { ModalsDecorator } from 'src/utils/storybookDecorators'
|
||||
import { ModalsDecorator } from 'src/utils/storybook/decorators';
|
||||
|
||||
export default {
|
||||
title: 'Project/Vote Card',
|
||||
|
||||
@@ -1,32 +1,15 @@
|
||||
import { store } from '../redux/store';
|
||||
import { Provider } from 'react-redux';
|
||||
import { BrowserRouter } from 'react-router-dom'
|
||||
|
||||
import 'react-multi-carousel/lib/styles.css';
|
||||
import 'react-loading-skeleton/dist/skeleton.css'
|
||||
|
||||
|
||||
import {
|
||||
ApolloClient,
|
||||
InMemoryCache,
|
||||
ApolloProvider
|
||||
} from "@apollo/client";
|
||||
import { ApolloProvider } from "@apollo/client";
|
||||
import { apolloClient } from './apollo';
|
||||
import { useAppDispatch, useResizeListener } from './hooks';
|
||||
import { useCallback, useLayoutEffect } from 'react';
|
||||
import { setIsMobileScreen } from 'src/redux/features/ui.slice';
|
||||
import { isMobileScreen } from './helperFunctions';
|
||||
|
||||
let apiClientUri = '/.netlify/functions/graphql';
|
||||
|
||||
if (process.env.REACT_APP_API_END_POINT)
|
||||
apiClientUri = process.env.REACT_APP_API_END_POINT
|
||||
|
||||
|
||||
const client = new ApolloClient({
|
||||
uri: apiClientUri,
|
||||
cache: new InMemoryCache()
|
||||
});
|
||||
|
||||
import 'react-multi-carousel/lib/styles.css';
|
||||
import 'react-loading-skeleton/dist/skeleton.css'
|
||||
|
||||
let basename = '/';
|
||||
|
||||
@@ -55,7 +38,7 @@ export const useWrapperSetup = () => {
|
||||
export default function Wrapper(props: any) {
|
||||
|
||||
return (
|
||||
<ApolloProvider client={client}>
|
||||
<ApolloProvider client={apolloClient}>
|
||||
<Provider store={store}>
|
||||
<BrowserRouter basename={basename}>
|
||||
{props.children}
|
||||
|
||||
49
src/utils/apollo.ts
Normal file
49
src/utils/apollo.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
import { ApolloClient, HttpLink, InMemoryCache, from } from "@apollo/client";
|
||||
import { onError } from "@apollo/client/link/error";
|
||||
import { RetryLink } from "@apollo/client/link/retry";
|
||||
|
||||
let apiClientUri = '/.netlify/functions/graphql';
|
||||
|
||||
if (process.env.REACT_APP_API_END_POINT)
|
||||
apiClientUri = process.env.REACT_APP_API_END_POINT
|
||||
|
||||
const httpLink = new HttpLink({
|
||||
uri: apiClientUri
|
||||
});
|
||||
|
||||
const errorLink = onError(({ graphQLErrors, networkError }) => {
|
||||
if (graphQLErrors)
|
||||
graphQLErrors.forEach(({ message, locations, path }) =>
|
||||
console.log(
|
||||
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
|
||||
),
|
||||
);
|
||||
|
||||
if (networkError) console.log(`[Network error]: ${networkError}`);
|
||||
});
|
||||
|
||||
|
||||
const retryLink = new RetryLink({
|
||||
delay: {
|
||||
initial: 100,
|
||||
max: 2000,
|
||||
jitter: true,
|
||||
},
|
||||
attempts: {
|
||||
max: 5,
|
||||
retryIf: (error, operation) => {
|
||||
const doNotRetryCodes = [500, 400];
|
||||
return !!error && !doNotRetryCodes.includes(error.statusCode);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
export const apolloClient = new ApolloClient({
|
||||
link: from([
|
||||
retryLink,
|
||||
errorLink,
|
||||
httpLink
|
||||
]),
|
||||
cache: new InMemoryCache()
|
||||
});
|
||||
@@ -1,286 +0,0 @@
|
||||
<nav>
|
||||
<div class="p-16 bg-gray-100 flex items-center">
|
||||
<div class="w-40 h-40 bg-gray-300 rounded-8 mr-16 overflow-hidden">
|
||||
<img
|
||||
class="w-full h-full object-cover"
|
||||
src="https://www.figma.com/file/OFowr5RJk9YZCW35KT7D5K/image/07b85d84145942255afd215b3da26dbbf1dd03bd?fuid=772401335362859303"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<h2 class="text-h5 font-bold mr-64">makers.bolt.fun</h2>
|
||||
</div>
|
||||
<div class="sm:max-w-[400px] border shadow-lg sm:p-32">
|
||||
<div class="px-16">
|
||||
<input
|
||||
class="btn bg-gray-100 w-full py-12 px-40 rounded-24 mt-16 placeholder-gray-500"
|
||||
placeholder="Search"
|
||||
/>
|
||||
<button class="btn btn-primary w-full py-12 px-40 rounded-24 my-16">
|
||||
Submit ⚡ app️
|
||||
</button>
|
||||
</div>
|
||||
<ul class="py-16 gap-64 border-t border-b">
|
||||
<li class="text-body4 p-16 hover:bg-gray-200">
|
||||
<a href="#">Exlore 🏡</a>
|
||||
</li>
|
||||
<li class="text-body4 p-16 hover:bg-gray-200">
|
||||
<a href="#">Hottest 🔥</a>
|
||||
</li>
|
||||
<li class="text-body4 p-16 hover:bg-gray-200">
|
||||
<a href="#">Categories 🕹</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="px-16 py-16 flex flex-wrap gap-y-12">
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">About Us</a>
|
||||
</li>
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">Support</a>
|
||||
</li>
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">Press</a>
|
||||
</li>
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">Contacts</a>
|
||||
</li>
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">Careers</a>
|
||||
</li>
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">Sitemap</a>
|
||||
</li>
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">Legal</a>
|
||||
</li>
|
||||
<li class="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
|
||||
<a href="#">Cookies Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="hidden lg:flex py-36 px-32 bg-gray-100 items-center">
|
||||
<h2 class="text-h5 font-bold mr-40 lg:mr-64">makers.bolt.fun</h2>
|
||||
<ul class="flex gap-32 lg:gap-64">
|
||||
<li class="text-body4"><a href="#">Exlore 🏡</a></li>
|
||||
<li class="text-body4"><a href="#">Hottest 🔥</a></li>
|
||||
<li class="text-body4"><a href="#">Categories 🕹</a></li>
|
||||
</ul>
|
||||
<div class="ml-auto">
|
||||
<button class="btn btn-primary py-12 px-32 lg:px-40">Submit ⚡ app️</button>
|
||||
<span class="chip mx-12 h-full mr-24 p-12">⚡ 2.2k sats </span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="py-[100px]">
|
||||
<hr class="my-40 mb-96" />
|
||||
<div class="flex gap-40 justify-center md:justify-between">
|
||||
<div
|
||||
class="flex-grow rounded-20 h-[280px] relative overflow-hidden p-24 flex flex-col items-start justify-end"
|
||||
>
|
||||
<img
|
||||
class="w-full h-full object-cover absolute top-0 left-0 z-[-2]"
|
||||
src="https://www.figma.com/file/OFowr5RJk9YZCW35KT7D5K/image/07b85d84145942255afd215b3da26dbbf1dd03bd?fuid=772401335362859303"
|
||||
alt=""
|
||||
/>
|
||||
<div
|
||||
class="w-full h-full object-cover bg-black opacity-40 absolute top-0 left-0 z-[-1]"
|
||||
></div>
|
||||
<h3 class="text-white text-h3 max-w-md">
|
||||
Join the next wave of the Lightning Network in November’s ‘Shock the
|
||||
Web’ hackathon
|
||||
</h3>
|
||||
<a class="btn btn-primary font-regular mt-36">Register Now</a>
|
||||
</div>
|
||||
<div
|
||||
class="hidden flex-grow rounded-20 h-[280px] relative overflow-hidden p-24 md:flex flex-col items-start justify-end"
|
||||
>
|
||||
<img
|
||||
class="w-full h-full object-cover absolute top-0 left-0 z-[-2]"
|
||||
src="https://s3-alpha-sig.figma.com/img/be1b/cd75/1baa911b3875134c0889d6755c4ba2cb?Expires=1637539200&Signature=QExmgJCGGSES~zIwM-2G8yd7aPR-j5eFnV3tOg6BkSdXVB9AMhHQPbRpbfOv~rD3hdMdSPMkS9kfjyFbAuonltV2zrf5GOwGxrF2GVdhpIGc6RiqGLWVVY8mXysEm6~0fVj~2SK8hec~YnV1h0oHDQiZF5YjGi143pImGmcVERPpB7MiksSoD0Vki6RXamySopj~f-~lUGy2uKRbQKxQ4LCFTz-H9O8vpkZpCVq274FYsqsEtUihwVjniNXV8ukLxdL~rfgf8L9MeiR7gDYYQ9MSLMZKEa~TnQ-JadlngQz78a2T801WaG2xp5hGHYQMtIi1ES-N4FOg5PwEjtIetA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
|
||||
alt=""
|
||||
/>
|
||||
<div
|
||||
class="w-full h-full object-cover bg-black opacity-30 absolute top-0 left-0 z-[-1]"
|
||||
></div>
|
||||
<h3 class="text-white text-h3 max-w-md">
|
||||
Join the next wave of the Lightning Network in November’s ‘Shock the
|
||||
Web’ hackathon
|
||||
</h3>
|
||||
<button class="btn font-regular mt-36">Register Now</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-40" />
|
||||
<button class="btn btn-primary">Submit ⚡ app️</button>
|
||||
<hr class="my-40" />
|
||||
<span class="chip mx-12"> Wallet </span>
|
||||
<span class="chip-small mx-12 bg-red-100 text-red-800 font-regular">
|
||||
lightining
|
||||
</span>
|
||||
<span class="chip-small mx-12 bg-primary-100 text-primary-800 font-regular">
|
||||
lightining
|
||||
</span>
|
||||
|
||||
<hr class="my-40" />
|
||||
<div class="flex gap-12 flex-wrap">
|
||||
<span class="chip"> Art & Collectibles </span
|
||||
><span class="chip"> DeFi </span><span class="chip"> Entertainment </span
|
||||
><span class="chip"> Exchange </span>
|
||||
</div>
|
||||
|
||||
<hr class="my-40" />
|
||||
<h3 class="font-bolder text-body3 mb-20">Hottest ⚡️apps</h3>
|
||||
<div class="flex gap-24">
|
||||
<div
|
||||
class="flex-shrink-0 px-16 py-16 flex gap-16 border-gray-100 shadow-md border-2 rounded-10 w-[269px] transition-colors hover:shadow-lg hover:bg-gray-200 hover:cursor-pointer"
|
||||
>
|
||||
<div
|
||||
src=""
|
||||
class="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"
|
||||
></div>
|
||||
<div class="justify-around items-start min-w-0">
|
||||
<p
|
||||
class="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap"
|
||||
>
|
||||
{app.name}
|
||||
</p>
|
||||
<p class="text-body5 text-gray-600 font-light my-[5px]">
|
||||
{app.category}
|
||||
</p>
|
||||
<span
|
||||
class="chip-small bg-yellow-100 text-yellow-700 font-light text-body5 py-[3px] px-10"
|
||||
>
|
||||
🔥 123
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex-shrink-0 px-16 py-16 flex gap-16 border-gray-100 shadow-md border-2 rounded-10 w-[269px] transition-colors hover:shadow-lg hover:bg-gray-200 hover:cursor-pointer"
|
||||
>
|
||||
<div
|
||||
src=""
|
||||
class="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"
|
||||
></div>
|
||||
<div class="justify-around items-start min-w-0">
|
||||
<p
|
||||
class="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap"
|
||||
>
|
||||
{app.name}
|
||||
</p>
|
||||
<p class="text-body5 text-gray-600 font-light my-[5px]">
|
||||
{app.category}
|
||||
</p>
|
||||
<span
|
||||
class="chip-small bg-yellow-100 text-yellow-700 font-light text-body5 py-[3px] px-10"
|
||||
>
|
||||
🔥 123
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex-shrink-0 px-16 py-16 flex gap-16 border-gray-100 shadow-md border-2 rounded-10 w-[269px] transition-colors hover:shadow-lg hover:bg-gray-200 hover:cursor-pointer"
|
||||
>
|
||||
<div
|
||||
src=""
|
||||
class="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"
|
||||
></div>
|
||||
<div class="justify-around items-start min-w-0">
|
||||
<p
|
||||
class="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap"
|
||||
>
|
||||
{app.name}
|
||||
</p>
|
||||
<p class="text-body5 text-gray-600 font-light my-[5px]">
|
||||
{app.category}
|
||||
</p>
|
||||
<span
|
||||
class="chip-small bg-yellow-100 text-yellow-700 font-light text-body5 py-[3px] px-10"
|
||||
>
|
||||
🔥 123
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-40" />
|
||||
<div class="px-32">
|
||||
<div class="rounded-[40px] bg-gray-50 overflow-hidden">
|
||||
<div class="relative h-[152px] border">
|
||||
<img
|
||||
class="w-full h-full object-cover"
|
||||
src="https://www.figma.com/file/OFowr5RJk9YZCW35KT7D5K/image/07b85d84145942255afd215b3da26dbbf1dd03bd?fuid=772401335362859303"
|
||||
alt=""
|
||||
/>
|
||||
<button
|
||||
class="w-[48px] h-[48px] bg-white absolute top-1/2 left-32 -translate-y-1/2 rounded-full hover:bg-gray-200"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-24">
|
||||
<div class="flex gap-24 items-center">
|
||||
<div
|
||||
class="flex-shrink-0 w-[93px] h-[93px] rounded-md overflow-hidden"
|
||||
>
|
||||
<img
|
||||
class="w-full h-full object-cover"
|
||||
src="https://s3-alpha-sig.figma.com/img/be1b/cd75/1baa911b3875134c0889d6755c4ba2cb?Expires=1637539200&Signature=QExmgJCGGSES~zIwM-2G8yd7aPR-j5eFnV3tOg6BkSdXVB9AMhHQPbRpbfOv~rD3hdMdSPMkS9kfjyFbAuonltV2zrf5GOwGxrF2GVdhpIGc6RiqGLWVVY8mXysEm6~0fVj~2SK8hec~YnV1h0oHDQiZF5YjGi143pImGmcVERPpB7MiksSoD0Vki6RXamySopj~f-~lUGy2uKRbQKxQ4LCFTz-H9O8vpkZpCVq274FYsqsEtUihwVjniNXV8ukLxdL~rfgf8L9MeiR7gDYYQ9MSLMZKEa~TnQ-JadlngQz78a2T801WaG2xp5hGHYQMtIi1ES-N4FOg5PwEjtIetA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-h3 font-regular">{Project Name}</h3>
|
||||
<a class="text-blue-400 font-regular text-body4" href="#"
|
||||
>www.project.com</a
|
||||
>
|
||||
</div>
|
||||
<div class="flex ml-auto gap-16">
|
||||
<button class="btn btn-primary py-12 px-24 rounded-lg my-16">
|
||||
Play 🕹
|
||||
</button>
|
||||
<button class="btn py-12 px-24 rounded-lg my-16">Vote 🔥</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-40 text-body4 leading-normal">
|
||||
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos error ad
|
||||
voluptas. Nostrum in non quia, obcaecati ipsam aut accusantium sunt
|
||||
minus ea similique. Dolor sint minima veritatis delectus, corrupti
|
||||
quod, expedita officia molestias nobis sequi perspiciatis. Laudantium
|
||||
illo quasi a modi blanditiis iusto sequi laboriosam, harum rem beatae
|
||||
eum commodi quo tempora minus asperiores quod libero? Blanditiis,
|
||||
eligendi adipisci.
|
||||
</p>
|
||||
<div class="flex gap-24 mt-24 flex-wrap">
|
||||
<span class="chip-small bg-red-100 text-red-800 font-regular">
|
||||
payments
|
||||
</span>
|
||||
<span class="chip-small bg-primary-100 text-primary-800 font-regular">
|
||||
lightining
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-40">
|
||||
<h3 class="text-h5 font-bold">Screen Shots</h3>
|
||||
<div class="flex gap-x-24 gap-y-20">
|
||||
<div
|
||||
class="flex-none w-[164px] h-[120px] md:w-[300px] md:h-[136px] bg-gray-300 rounded-xl"
|
||||
></div>
|
||||
<div
|
||||
class="flex-none w-[164px] h-[120px] md:w-[300px] md:h-[136px] bg-gray-300 rounded-xl"
|
||||
></div>
|
||||
<div
|
||||
class="flex-none w-[164px] h-[120px] md:w-[300px] md:h-[136px] bg-gray-300 rounded-xl"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-40" />
|
||||
<div class="text-center">
|
||||
<h3 class="text-body4 font-regular">
|
||||
Are you the creator of this project?
|
||||
</h3>
|
||||
<button class="btn py-12 px-24 rounded-lg my-16">Claim 🖐</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -5,37 +5,23 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom';
|
||||
import { createReduxStore } from 'src/redux/store';
|
||||
import { useWrapperSetup } from '../Wrapper';
|
||||
import { ModifyArgs } from './utils';
|
||||
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
|
||||
import Modal from 'src/Components/Modals/Modal/Modal';
|
||||
import { worker } from 'src/mocks/browser'
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
|
||||
// Add the global stuff first (index.ts)
|
||||
// -------------------------------------------
|
||||
|
||||
import "react-multi-carousel/lib/styles.css";
|
||||
import 'react-loading-skeleton/dist/skeleton.css'
|
||||
import { ApolloProvider } from '@apollo/client';
|
||||
import { apolloClient } from '../apollo';
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
worker.start({
|
||||
onUnhandledRequest: 'bypass'
|
||||
})
|
||||
}
|
||||
|
||||
// -------------------------------------------
|
||||
// -------------------------------------------
|
||||
|
||||
|
||||
let apiClientUri = 'https://makers-bolt-fun-preview.netlify.app/.netlify/functions/graphql';
|
||||
|
||||
if (process.env.REACT_APP_API_END_POINT)
|
||||
apiClientUri = process.env.REACT_APP_API_END_POINT
|
||||
|
||||
const client = new ApolloClient({
|
||||
uri: apiClientUri,
|
||||
cache: new InMemoryCache()
|
||||
});
|
||||
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
worker.start({
|
||||
onUnhandledRequest: 'bypass'
|
||||
@@ -59,7 +45,7 @@ export const WrapperDecorator: DecoratorFn = (Story, options) => {
|
||||
|
||||
|
||||
return (
|
||||
<ApolloProvider client={client}>
|
||||
<ApolloProvider client={apolloClient}>
|
||||
<Provider store={store}>
|
||||
<Suspense fallback={<h2>Loading</h2>}>
|
||||
<MemoryRouter initialEntries={[modifyArgs.router?.currentPath!]}>
|
||||
@@ -84,3 +70,31 @@ export const wrapModal: DecoratorFn = (Component) => <Modal isOpen onClose={() =
|
||||
|
||||
export const wrapPage: DecoratorFn = (Component) => <div className='page-container'><Component /></div>
|
||||
|
||||
|
||||
|
||||
export const ModalsDecorator: DecoratorFn = (Story) => {
|
||||
const onClose = () => { };
|
||||
return (
|
||||
<motion.div
|
||||
className="w-screen fixed inset-0 overflow-x-hidden z-[2020]"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
transition: { ease: "easeInOut" },
|
||||
}}
|
||||
>
|
||||
<AnimatePresence>
|
||||
<Modal onClose={onClose} >
|
||||
<Story onClose={onClose} />
|
||||
</Modal>
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export const centerDecorator: DecoratorFn = (Story) => {
|
||||
return <div className="min-h-screen flex justify-center items-center">
|
||||
<Story />
|
||||
</div>
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import { DecoratorFn } from '@storybook/react';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import Modal from 'src/Components/Modals/Modal/Modal';
|
||||
|
||||
export const ModalsDecorator: DecoratorFn = (Story) => {
|
||||
const onClose = () => { };
|
||||
return (
|
||||
<motion.div
|
||||
className="w-screen fixed inset-0 overflow-x-hidden z-[2020]"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
transition: { ease: "easeInOut" },
|
||||
}}
|
||||
>
|
||||
<AnimatePresence>
|
||||
<Modal onClose={onClose} >
|
||||
<Story onClose={onClose} />
|
||||
</Modal>
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export const centerDecorator: DecoratorFn = (Story) => {
|
||||
return <div className="min-h-screen flex justify-center items-center">
|
||||
<Story />
|
||||
</div>
|
||||
}
|
||||
Reference in New Issue
Block a user