Merge pull request #80 from FuelLabs/sophie/sharable-link

feat: Sharable permanent links using gists

Cargo.toml

@@ -11,4 +11,6 @@ tokio = { version = "1", features = ["full"] }
 serde_json = "1.0.91"
 regex = "1.7.0"
 rocket = { version = "0.5.0-rc.2", features = ["tls", "json"] }
-serde = { version = "1.0", features = ["derive"] }
+serde = { version = "1.0", features = ["derive"] }
+octocrab = "0.38.0"
+thiserror = "1.0.60"

app/package.json

@@ -21,6 +21,7 @@
     "react": "^18.2.0",
     "react-ace": "^10.1.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0",
     "react-scripts": "^5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

app/src/App.tsx

@@ -11,19 +11,25 @@ import {
 } from './utils/localStorage';
 import InteractionDrawer from './features/interact/components/InteractionDrawer';
 import { useLog } from './features/editor/hooks/useLog';
-import { Toolchain } from './features/editor/components/ToolchainDropdown';
+import {
+  Toolchain,
+  isToolchain,
+} from './features/editor/components/ToolchainDropdown';
 import { useTranspile } from './features/editor/hooks/useTranspile';
 import EditorView from './features/editor/components/EditorView';
 import { Analytics, track } from '@vercel/analytics/react';
+import { useGist } from './features/editor/hooks/useGist';
+import { useSearchParams } from 'react-router-dom';
+import Copyable from './components/Copyable';
 
 const DRAWER_WIDTH = '40vw';
 
 function App() {
   // The current sway code in the editor.
-  const [swayCode, setSwayCode] = useState(loadSwayCode());
+  const [swayCode, setSwayCode] = useState<string>(loadSwayCode());
 
   // The current solidity code in the editor.
-  const [solidityCode, setSolidityCode] = useState(loadSolidityCode());
+  const [solidityCode, setSolidityCode] = useState<string>(loadSolidityCode());
 
   // An error message to display to the user.
   const [showSolidity, setShowSolidity] = useState(false);
@@ -56,12 +62,28 @@ function App() {
   // An error message to display to the user.
   const [drawerOpen, setDrawerOpen] = useState(false);
 
+  // The query parameters for the current URL.
+  const [searchParams] = useSearchParams();
+
+  // If showSolidity is toggled on, reset the compiled state.
   useEffect(() => {
     if (showSolidity) {
       setIsCompiled(false);
     }
   }, [showSolidity]);
 
+  // Load the query parameters from the URL and set the state accordingly. Gists are loaded in useGist.
+  useEffect(() => {
+    if (searchParams.get('transpile') === 'true') {
+      setShowSolidity(true);
+    }
+    let toolchainParam = searchParams.get('toolchain');
+
+    if (isToolchain(toolchainParam)) {
+      setToolchain(toolchainParam);
+    }
+  }, [searchParams, setShowSolidity, setToolchain]);
+
   const onSwayCodeChange = useCallback(
     (code: string) => {
       saveSwayCode(code);
@@ -80,13 +102,49 @@ function App() {
     [setSolidityCode]
   );
 
+  // Loading shared code by query parameter and get a function for creating sharable permalinks.
+  const { newGist } = useGist(onSwayCodeChange, onSolidityCodeChange);
+
   const setError = useCallback(
     (error: string | undefined) => {
       updateLog(error);
     },
     [updateLog]
   );
 
+  const onShareClick = useCallback(async () => {
+    track('Share Click', { toolchain });
+    const response = await newGist(swayCode, {
+      contract: solidityCode,
+      language: 'solidity',
+    });
+    if (!!response) {
+      const permalink = `${window.location.origin}/?toolchain=${toolchain}&transpile=${showSolidity}&gist=${response.id}`;
+      console.log('permalink: ', permalink);
+      updateLog([
+        <Copyable
+          href
+          value={permalink}
+          tooltip='permalink to your code'
+          label='Permalink to Playground'
+        />,
+        <Copyable
+          href
+          value={response?.url}
+          tooltip='link to gist'
+          label='Link to Gist'
+        />,
+      ]);
+    }
+  }, [
+    newGist,
+    swayCode,
+    solidityCode,
+    updateLog,
+    toolchain,
+    showSolidity,
+  ]);
+
   const onCompileClick = useCallback(() => {
     track('Compile Click', { toolchain });
     if (showSolidity) {
@@ -124,6 +182,7 @@ function App() {
       <ActionToolbar
         deployState={deployState}
         setContractId={setContractId}
+        onShareClick={onShareClick}
         onCompile={onCompileClick}
         isCompiled={isCompiled}
         setDeployState={setDeployState}

app/src/components/Copyable.tsx

@@ -8,20 +8,21 @@ export interface CopyableProps {
   value: string;
   label: string;
   tooltip: string;
+  href?: boolean;
 }
 
 async function handleCopy(value: string) {
   await navigator.clipboard.writeText(value);
 }
 
-function Copyable({ value, label, tooltip }: CopyableProps) {
+function Copyable({ value, label, tooltip, href }: CopyableProps) {
   return (
     <div
       style={{ cursor: 'pointer', color: darkColors.gray6 }}
       onClick={() => handleCopy(value)}>
       <Tooltip title={`Click to copy ${tooltip}`}>
         <span>
-          <span style={{ padding: '8px 0 8px' }}>{label}</span>
+          {href ? (<a href={value} target='_blank' rel='noreferrer'>{label}</a>) : (<span style={{ padding: '8px 0 8px' }}>{label}</span>)}
           <IconButton disableRipple aria-label='copy'>
             <ContentCopyIcon style={{ fontSize: '14px' }} />
           </IconButton>

app/src/components/Providers.tsx

@@ -5,6 +5,7 @@ import { queryClient } from '../utils/queryClient';
 import { FuelProvider } from '@fuels/react';
 import { defaultConnectors } from '@fuels/connectors';
 
+
 type ProvidersProps = {
   children: ReactNode;
 };

app/src/components/SecondaryButton.tsx

@@ -24,7 +24,7 @@ function SecondaryButton({
   if (!!header) {
     style = {
       ...style,
-      minWidth: '115px',
+      minWidth: '105px',
       height: '40px',
       marginRight: '15px',
       marginBottom: '10px',

app/src/features/editor/components/ToolchainDropdown.tsx

@@ -16,6 +16,11 @@ const ToolchainNames = [
 ] as const;
 export type Toolchain = (typeof ToolchainNames)[number];
 
+export function isToolchain(value: string | null): value is Toolchain {
+  const found = ToolchainNames.find(name => name === value);
+  return !!value && found !== undefined;
+}
+
 export interface ToolchainDropdownProps {
   toolchain: Toolchain;
   setToolchain: (toolchain: Toolchain) => void;

app/src/features/editor/examples/examples.test.ts

@@ -17,7 +17,7 @@ describe(`test examples`, () => {
         method: 'POST',
         body: JSON.stringify({
           contract: code,
-          lanaguage: 'solidity',
+          language: 'solidity',
         }),
       });