Move to CodeFund

packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/CodeSponsor.js

@@ -1,29 +1,27 @@
 import React from 'react';
-import './CodeSponsor.css';
 
-type Props = {
-  token: string,
-  theme: 'dark' | 'light',
-};
+const CODEFUND_LINK =
+  'https://codefund.io/scripts/1fc4e04d-9622-4844-81f9-7522c7d19ac7/embed.js?theme=codesandbox';
+let loaded = false;
 
-export default ({ token, theme }: Props) => {
-  const pixelHref = `https://codesponsor.io/t/l/${token}/pixel.png`;
-  const linkHref = `https://codesponsor.io/t/c/${token}/`;
+export default class CodeFund extends React.PureComponent {
+  componentDidMount() {
+    if (!loaded) {
+      loaded = true;
 
-  return (
-    <div className={theme === 'dark' ? 'cs__wrapper dark' : 'cs__wrapper'}>
-      <div className="cs__header">Proudly sponsored by</div>
-      <a href={linkHref} className="cs__blurb" target="_blank" rel="noopener">
-        <strong>Rollbar</strong>{' '}
-        <span>
-          Real-time error monitoring, alerting, and analytics for software
-          developers{' '}
-          <span aria-label="rocket" role="img">
-            🚀
-          </span>
-        </span>
-      </a>
-      <img alt="CodeSponsor" className="cs__pixel" src={pixelHref} />
-    </div>
-  );
-};
+      const script = document.createElement('script');
+      script.setAttribute('src', CODEFUND_LINK);
+      script.async = 'true';
+      script.setAttribute('id', 'external-js');
+      document.head.appendChild(script);
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <div id="codefund_ad" />
+      </div>
+    );
+  }
+}

packages/app/src/app/pages/Sandbox/Editor/Workspace/Advertisement/index.js

@@ -2,6 +2,4 @@ import React from 'react';
 
 import CodeSponsor from './CodeSponsor';
 
-export default () => (
-  <CodeSponsor token="a2bc283fb2c6e5c878cf6141edb03f09" theme="dark" />
-);
+export default () => <CodeSponsor />;