Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: allow sway playground to be opened from docs hub #76

Closed
wants to merge 3 commits into from
Closed

feat: allow sway playground to be opened from docs hub #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8fc358e
feat: allow sway playground to change editor code from docs hub
matt-user May 7, 2024
f728474
chore: add external domain url
matt-user May 7, 2024
a490cc5
fix: build
matt-user May 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { Toolchain } 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 { APPROVED_EXTERNAL_DOMAIN } from './constants';

const DRAWER_WIDTH = '40vw';

Expand Down Expand Up @@ -56,6 +57,28 @@ function App() {
// An error message to display to the user.
const [drawerOpen, setDrawerOpen] = useState(false);

useEffect(() => {
function setLocalStorageFromExternalDomain(message: MessageEvent) {
if (message.origin !== APPROVED_EXTERNAL_DOMAIN) {
return;
}
Comment on lines +62 to +64
Copy link
Member

@sdankel sdankel May 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be more secure to handle this on the server side in cors.rs. But I think an even better way would be to do what rust playground does:

  • upload the code to a gist
  • use the gist ID as a query parameter
  • send the toolchain name as a query parameter as well
  • sway playground fetches the code from the gist

Essentially, we can use github gists as a simple database.

Example:
https://play.rust-lang.org/?version=stable&mode=debug&edition=2021&gist=3c65be25f3334da7947b0e120dce23a1

For us it can be a little simpler:
https://sway-playground.org/?toolchain=latest&gist=3c65be25f3334da7947b0e120dce23a1

Sway playground will need to sanitize the string. But then we don't have to worry about cors, and there's no concerns about timing issues.

I would recommend using React router dom's useSearchParams for reading and writing the query params.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah this definitely seems like a better approach thanks for the feedback!


const data = JSON.parse(message.data);
const { swayCode } = data;
// I'm only expecting us to set sway code from the docs hub.
// If users want to see the corresponding solidity they can use the built-in transpiler.
if (swayCode) {
onSwayCodeChange(swayCode);
}
}

window.addEventListener('message', setLocalStorageFromExternalDomain);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested this out, but it doesn't seem to be working. When the playground link opens, it doesn't have the code from the example, and I don't see any messages in the network tab. I'm guessing it could be a timing issue; perhaps the message is sent before the playground page is rendered (and this useEffect would run).

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah it's probably a timing issue. The delay I added on the docshub was through trial and error. Another thing is you need to run the docs hub with NODE_ENV=development pnpm dev


return () => {
window.removeEventListener('message', setLocalStorageFromExternalDomain);
};
});

useEffect(() => {
if (showSolidity) {
setIsCompiled(false);
Expand Down
6 changes: 5 additions & 1 deletion app/src/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
export const FUEL_GREEN = '#00f58c';

export const LOCAL_SERVER_URI = 'http://0.0.0.0:8080';
export const SERVER_URI = process.env.REACT_APP_LOCAL_SERVER
export const IS_LOCAL = !!process.env.REACT_APP_LOCAL_SERVER;
export const SERVER_URI = IS_LOCAL
? LOCAL_SERVER_URI
: 'https://api.sway-playground.org';
export const APPROVED_EXTERNAL_DOMAIN = IS_LOCAL
? 'http://localhost:3000' // Local domain of docs hub
: 'https://docs-hub.vercel.app';
Loading