feat: redirect map from bosLoaderUrl

add support for getting redirect map from localStorage flags item
with bosLoaderURL like near discovery

README.md

@@ -58,3 +58,5 @@ The result of applying this redirect map is that the widget `devhub.near/widget/
 The `near-social-viewer` web component supports loading a redirect map from the session storage, which is useful when using the viewer for local development or test pipelines.
 
 By setting the session storage key `nearSocialVMredirectMap` to the JSON value of the redirect map, the web component will pass this to the VM Widget config.
+
+You can also use the same mechanism as [near-discovery](https://github.com/near/near-discovery/) where you can load components from a locally hosted [bos-loader](https://github.com/near/bos-loader) by adding the key `flags` to localStorage with the value `{"bosLoaderUrl": "http://127.0.0.1:3030" }`.

src/App.js

@@ -12,6 +12,8 @@ import {
   useInitNear,
 } from "near-social-vm";
 
+const SESSION_STORAGE_REDIRECT_MAP_KEY = 'nearSocialVMredirectMap';
+
 function Viewer() {
   const [widgetProps, setWidgetProps] = useState({});
   const location = useLocation();
@@ -32,11 +34,22 @@ function Viewer() {
     src = 'devhub.near/widget/app';
   }
 
-  const redirectMap = JSON.parse(sessionStorage.getItem('nearSocialVMredirectMap'));
-  const config = {
-    redirectMap
-  }
-  return <Widget src={src} props={widgetProps} config={config} />;
+  const [redirectMap, setRedirectMap] = useState(null);
+  useEffect(() => {
+    (async () => {
+      const localStorageFlags = JSON.parse(localStorage.getItem('flags'));
+
+      if (localStorageFlags?.bosLoaderUrl) {
+        setRedirectMap(
+          (await fetch(localStorageFlags.bosLoaderUrl).then(r => r.json())).components
+        );
+      } else {
+        setRedirectMap(JSON.parse(sessionStorage.getItem(SESSION_STORAGE_REDIRECT_MAP_KEY)));
+      }
+    })();
+  }, []);
+
+  return <Widget src={src} props={widgetProps} config={{ redirectMap }} />;
 }
 
 function App(props) {