display warning for embed query json

src/containers/Home/index.tsx

@@ -177,7 +177,7 @@ const EmbedSection = () => (
       </Styles.StyledMinorTitle>
     </Styles.StyledSectionArea>
     <div>
-      <Styles.StyledIframge src="https://jsoncrack.com/widget?json=%5B%5B%22squadName%22%2C%22homeTown%22%2C%22formed%22%2C%22secretBase%22%2C%22active%22%2C%22members%22%2C%22a%7C0%7C1%7C2%7C3%7C4%7C5%22%2C%22Super%20hero%20squad%22%2C%22Metro%20City%22%2C%22n%7CWW%22%2C%22Super%20tower%22%2C%22b%7CT%22%2C%22name%22%2C%22age%22%2C%22secretIdentity%22%2C%22powers%22%2C%22a%7CC%7CD%7CE%7CF%22%2C%22Molecule%20Man%22%2C%22n%7CT%22%2C%22Dan%20Jukes%22%2C%22Radiation%20resistance%22%2C%22Turning%20tiny%22%2C%22Radiation%20blast%22%2C%22a%7CK%7CL%7CM%22%2C%22o%7CG%7CH%7CI%7CJ%7CN%22%2C%22Madame%20Uppercut%22%2C%22n%7Cd%22%2C%22Jane%20Wilson%22%2C%22Million%20tonne%20punch%22%2C%22Damage%20resistance%22%2C%22Superhuman%20reflexes%22%2C%22a%7CS%7CT%7CU%22%2C%22o%7CG%7CP%7CQ%7CR%7CV%22%2C%22Eternal%20Flame%22%2C%22n%7C4C92%22%2C%22Unknown%22%2C%22Immortality%22%2C%22Heat%20Immunity%22%2C%22Inferno%22%2C%22Teleportation%22%2C%22Interdimensional%20travel%22%2C%22a%7Ca%7Cb%7Cc%7Cd%7Ce%22%2C%22o%7CG%7CX%7CY%7CZ%7Cf%22%2C%22a%7CO%7CW%7Cg%22%2C%22o%7C6%7C7%7C8%7C9%7CA%7CB%7Ch%22%5D%2C%22i%22%5D"></Styles.StyledIframge>
+      <Styles.StyledIframge src="https://jsoncrack.com/widget"></Styles.StyledIframge>
     </div>
   </Styles.StyledSection>
 );

src/pages/Widget/index.tsx

@@ -47,7 +47,19 @@ interface EmbedMessage {
 }
 
 const WidgetPage = () => {
+  const { query, push } = useRouter();
   const [json, setJson] = React.useState(defaultJson);
+
+  React.useEffect(() => {
+    if (query.json)
+      setJson(
+        JSON.stringify({
+          warning: "⚠️ Query params are deprecated now",
+          new: "Check out https://jsoncrack.com/embed",
+        })
+      );
+  }, [query.json]);
+
   const [isModalVisible, setModalVisible] = React.useState(false);
   const [selectedNode, setSelectedNode] = React.useState<[string, string][]>([]);
 
@@ -56,9 +68,9 @@ const WidgetPage = () => {
   const loading = useGraph(state => state.loading);
   const setGraphValue = useGraph(state => state.setGraphValue);
   const centerView = useConfig(state => state.centerView);
-  const { push } = useRouter();
 
   const openModal = React.useCallback(() => setModalVisible(true), []);
+
   React.useEffect(() => {
     const nodeList = collapsedNodes.map(id => `[id$="node-${id}"]`);
     const edgeList = collapsedEdges.map(id => `[class$="edge-${id}"]`);