bigger data requires premium

src/components/Graph/PremiumView.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import styled from "styled-components";
+import { Button } from "../Button";
+
+const StyledPremiumView = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  img {
+    filter: drop-shadow(2px 4px 6px black);
+  }
+`;
+
+const StyledTitle = styled.h2`
+  font-size: 48px;
+  margin-bottom: 0;
+  background: linear-gradient(to right, #cf0642 0%, #9344cf 100%);
+  -webkit-text-fill-color: transparent;
+  -webkit-text-stroke: 3px black;
+  -webkit-background-clip: text;
+`;
+
+const StyledInfo = styled.p`
+  width: 60%;
+  font-weight: 600;
+  font-size: 20px;
+  text-align: center;
+  color: ${({ theme }) => theme.TEXT_NORMAL};
+`;
+
+export const PremiumView = () => (
+  <StyledPremiumView>
+    <StyledTitle>PLAY BIG!</StyledTitle>
+    <StyledInfo>
+      Upgrade JSON Crack to premium and explore & unlock full potantial of your data!
+    </StyledInfo>
+    <Button status="TERTIARY" href="https://www.patreon.com/jsoncrack" link target="_blank">DO IT!</Button>
+    <img src="/assets/undraw_to_the_stars_re_wq2x.svg" width="300" height="300" alt="oops" />
+  </StyledPremiumView>
+);

src/components/Graph/index.tsx

@@ -3,9 +3,11 @@ import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from "reac
 import { Canvas, Edge, ElkRoot } from "reaflow";
 import { CustomNode } from "src/components/CustomNode";
 import useGraph from "src/store/useGraph";
+import useUser from "src/store/useUser";
 import styled from "styled-components";
 import { Loading } from "../Loading";
 import { ErrorView } from "./ErrorView";
+import { PremiumView } from "./PremiumView";
 
 interface GraphProps {
   isWidget?: boolean;
@@ -37,6 +39,7 @@ const StyledEditorWrapper = styled.div<{ isWidget: boolean }>`
 `;
 
 const GraphComponent = ({ isWidget = false, openModal, setSelectedNode }: GraphProps) => {
+  const isPremium = useUser(state => state.isPremium);
   const setLoading = useGraph(state => state.setLoading);
   const setZoomPanPinch = useGraph(state => state.setZoomPanPinch);
   const centerView = useGraph(state => state.centerView);
@@ -95,6 +98,9 @@ const GraphComponent = ({ isWidget = false, openModal, setSelectedNode }: GraphP
     if (input) input.blur();
   }, []);
 
+  if (nodes.length > 1_000 && !isWidget) {
+    if (!isPremium()) return <PremiumView />;
+  }
   if (nodes.length > 8_000) return <ErrorView />;
 
   return (