ARCHIVE/xrpl-hooks-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into fix/renaming-ext

Browse Source
This commit is contained in:
muzam1l
2022-08-19 15:14:52 +05:30
parent 2c2bf59bcd a2077f9592
commit 0d9e9e7b45
111 changed files with 5511 additions and 5967 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
pages/_app.tsx
View File

@@ -1,60 +1,54 @@
import { useEffect } from "react";
import "../styles/globals.css";
import type { AppProps } from "next/app";
import Head from "next/head";
import { SessionProvider } from "next-auth/react";
import { ThemeProvider } from "next-themes";
import { Toaster } from "react-hot-toast";
import { useRouter } from "next/router";
import { IdProvider } from "@radix-ui/react-id";
import PlausibleProvider from "next-plausible";
import { useEffect } from 'react'
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Head from 'next/head'
import { SessionProvider } from 'next-auth/react'
import { ThemeProvider } from 'next-themes'
import { Toaster } from 'react-hot-toast'
import { useRouter } from 'next/router'
import { IdProvider } from '@radix-ui/react-id'
import PlausibleProvider from 'next-plausible'
import { darkTheme, css } from "../stitches.config";
import Navigation from "../components/Navigation";
import { fetchFiles } from "../state/actions";
import state from "../state";
import { darkTheme, css } from '../stitches.config'
import Navigation from '../components/Navigation'
import { fetchFiles } from '../state/actions'
import state from '../state'
import TimeAgo from "javascript-time-ago";
import en from "javascript-time-ago/locale/en.json";
import { useSnapshot } from "valtio";
import Alert from "../components/AlertDialog";
import { Button, Flex } from "../components";
import { ChatCircleText } from "phosphor-react";
import TimeAgo from 'javascript-time-ago'
import en from 'javascript-time-ago/locale/en.json'
import { useSnapshot } from 'valtio'
import Alert from '../components/AlertDialog'
import { Button, Flex } from '../components'
import { ChatCircleText } from 'phosphor-react'
TimeAgo.setDefaultLocale(en.locale);
TimeAgo.addLocale(en);
TimeAgo.setDefaultLocale(en.locale)
TimeAgo.addLocale(en)
function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
const router = useRouter();
const slug = router.query?.slug;
const gistId = (Array.isArray(slug) && slug[0]) ?? null;
const router = useRouter()
const slug = router.query?.slug
const gistId = (Array.isArray(slug) && slug[0]) ?? null
const origin = "https://xrpl-hooks-ide.vercel.app"; // TODO: Change when site is deployed
const shareImg = "/share-image.png";
const origin = 'https://xrpl-hooks-ide.vercel.app' // TODO: Change when site is deployed
const shareImg = '/share-image.png'
const snap = useSnapshot(state);
const snap = useSnapshot(state)
useEffect(() => {
if (gistId && router.isReady) {
fetchFiles(gistId);
fetchFiles(gistId)
} else {
if (
!gistId &&
router.isReady &&
router.pathname.includes("/develop") &&
router.pathname.includes('/develop') &&
!snap.files.length &&
!snap.mainModalShowed
) {
state.mainModalOpen = true;
state.mainModalShowed = true;
state.mainModalOpen = true
state.mainModalShowed = true
}
}
}, [
gistId,
router.isReady,
router.pathname,
snap.files,
snap.mainModalShowed,
]);
}, [gistId, router.isReady, router.pathname, snap.files, snap.mainModalShowed])
return (
<>
@@ -85,37 +79,15 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content={`${origin}${shareImg}`} />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon-16x16.png"
/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#161618" />
<meta name="application-name" content="XRPL Hooks Builder" />
<meta name="msapplication-TileColor" content="#c10ad0" />
<meta
name="theme-color"
content="#161618"
media="(prefers-color-scheme: dark)"
/>
<meta
name="theme-color"
content="#FDFCFD"
media="(prefers-color-scheme: light)"
/>
<meta name="theme-color" content="#161618" media="(prefers-color-scheme: dark)" />
<meta name="theme-color" content="#FDFCFD" media="(prefers-color-scheme: light)" />
</Head>
<IdProvider>
@@ -125,28 +97,25 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
defaultTheme="dark"
enableSystem={false}
value={{
light: "light",
dark: darkTheme.className,
light: 'light',
dark: darkTheme.className
}}
>
<PlausibleProvider
domain="hooks-builder.xrpl.org"
trackOutboundLinks
>
<PlausibleProvider domain="hooks-builder.xrpl.org" trackOutboundLinks>
<Navigation />
<Component {...pageProps} />
<Toaster
toastOptions={{
className: css({
backgroundColor: "$mauve1",
color: "$mauve10",
fontSize: "$sm",
backgroundColor: '$mauve1',
color: '$mauve10',
fontSize: '$sm',
zIndex: 9999,
".dark &": {
backgroundColor: "$mauve4",
color: "$mauve12",
},
})(),
'.dark &': {
backgroundColor: '$mauve4',
color: '$mauve12'
}
})()
}}
/>
<Alert />
@@ -155,10 +124,10 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
href="https://github.com/XRPLF/Hooks/discussions"
target="_blank"
rel="noopener noreferrer"
css={{ position: "fixed", right: "$4", bottom: "$4" }}
css={{ position: 'fixed', right: '$4', bottom: '$4' }}
>
<Button size="sm" variant="primary" outline>
<ChatCircleText size={14} style={{ marginRight: "0px" }} />
<ChatCircleText size={14} style={{ marginRight: '0px' }} />
Bugs & Discussions
</Button>
</Flex>
@@ -167,6 +136,6 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
</SessionProvider>
</IdProvider>
</>
);
)
}
export default MyApp;
export default MyApp

31
pages/_document.tsx
View File

@@ -1,35 +1,22 @@
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
} from "next/document";
import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'
import { globalStyles, getCssText } from "../stitches.config";
import { globalStyles, getCssText } from '../stitches.config'
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
const initialProps = await Document.getInitialProps(ctx)
return initialProps;
return initialProps
}
render() {
globalStyles();
globalStyles()
return (
<Html>
<Head>
<style
id="stitches"
dangerouslySetInnerHTML={{ __html: getCssText() }}
/>
<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin=""
/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&family=Work+Sans:wght@400;600;700&display=swap"
rel="stylesheet"
@@ -40,8 +27,8 @@ class MyDocument extends Document {
<NextScript />
</body>
</Html>
);
)
}
}
export default MyDocument;
export default MyDocument

16
pages/_middleware.ts
View File

@@ -1,12 +1,10 @@
import type { NextRequest, NextFetchEvent } from 'next/server';
import { NextResponse as Response } from 'next/server';
import type { NextRequest, NextFetchEvent } from 'next/server'
import { NextResponse as Response } from 'next/server'
export default function middleware(req: NextRequest, ev: NextFetchEvent) {
if (req.nextUrl.pathname === "/") {
const url = req.nextUrl.clone();
url.pathname = '/develop';
return Response.redirect(url);
if (req.nextUrl.pathname === '/') {
const url = req.nextUrl.clone()
url.pathname = '/develop'
return Response.redirect(url)
}
}
}

31
pages/api/auth/[...nextauth].ts
View File

@@ -1,4 +1,4 @@
import NextAuth from "next-auth"
import NextAuth from 'next-auth'
export default NextAuth({
// Configure one or more authentication providers
@@ -10,39 +10,38 @@ export default NextAuth({
// scope: 'user,gist'
// }),
{
id: "github",
name: "GitHub",
type: "oauth",
id: 'github',
name: 'GitHub',
type: 'oauth',
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
authorization: "https://github.com/login/oauth/authorize?scope=read:user+user:email+gist",
token: "https://github.com/login/oauth/access_token",
userinfo: "https://api.github.com/user",
authorization: 'https://github.com/login/oauth/authorize?scope=read:user+user:email+gist',
token: 'https://github.com/login/oauth/access_token',
userinfo: 'https://api.github.com/user',
profile(profile) {
return {
id: profile.id.toString(),
name: profile.name || profile.login,
username: profile.login,
email: profile.email,
image: profile.avatar_url,
image: profile.avatar_url
}
},
}
}
// ...add more providers here
],
callbacks: {
async jwt({ token, user, account, profile, isNewUser }) {
if (account && account.access_token) {
token.accessToken = account.access_token;
token.username = user?.username || '';
token.accessToken = account.access_token
token.username = user?.username || ''
}
return token
},
async session({ session, token }) {
session.accessToken = token.accessToken as string;
session['user']['username'] = token.username as string;
session.accessToken = token.accessToken as string
session['user']['username'] = token.username as string
return session
}
},
})
}
})

38
pages/api/faucet.ts
View File

@@ -6,14 +6,13 @@ interface ErrorResponse {
}
export interface Faucet {
address: string;
secret: string;
xrp: number;
hash: string;
code: string;
address: string
secret: string
xrp: number
hash: string
code: string
}
export default async function handler(
req: NextApiRequest,
res: NextApiResponse<Faucet | ErrorResponse>
@@ -21,20 +20,25 @@ export default async function handler(
if (req.method !== 'POST') {
return res.status(405).json({ error: 'Method not allowed!' })
}
const { account } = req.query;
const ip = Array.isArray(req?.headers?.["x-real-ip"]) ? req?.headers?.["x-real-ip"][0] : req?.headers?.["x-real-ip"];
const { account } = req.query
const ip = Array.isArray(req?.headers?.['x-real-ip'])
? req?.headers?.['x-real-ip'][0]
: req?.headers?.['x-real-ip']
try {
const response = await fetch(`https://${process.env.NEXT_PUBLIC_TESTNET_URL}/newcreds?account=${account ? account : ''}`, {
method: 'POST',
headers: {
'x-forwarded-for': ip || '',
},
});
const json: Faucet | ErrorResponse = await response.json();
if ("error" in json) {
const response = await fetch(
`https://${process.env.NEXT_PUBLIC_TESTNET_URL}/newcreds?account=${account ? account : ''}`,
{
method: 'POST',
headers: {
'x-forwarded-for': ip || ''
}
}
)
const json: Faucet | ErrorResponse = await response.json()
if ('error' in json) {
return res.status(429).json(json)
}
return res.status(200).json(json);
return res.status(200).json(json)
} catch (err) {
console.log(err)
return res.status(500).json({ error: 'Server error' })

5
pages/api/hello.ts
View File

@@ -5,9 +5,6 @@ type Data = {
name: string
}
export default function handler(
req: NextApiRequest,
res: NextApiResponse<Data>
) {
export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
res.status(200).json({ name: 'John Doe' })
}

25
pages/api/proxy.ts
View File

@@ -1,18 +1,15 @@
import type { NextApiRequest, NextApiResponse } from 'next'
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
try {
const { url, opts } = req.body
const r = await fetch(url, opts);
if (!r.ok) throw (r.statusText)
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
try {
const { url, opts } = req.body
const r = await fetch(url, opts)
if (!r.ok) throw r.statusText
const data = await r.json()
return res.json(data)
} catch (error) {
console.warn(error)
return res.status(500).json({ message: "Something went wrong!" })
}
const data = await r.json()
return res.json(data)
} catch (error) {
console.warn(error)
return res.status(500).json({ message: 'Something went wrong!' })
}
}

66
pages/deploy/[[...slug]].tsx
View File

@@ -1,63 +1,59 @@
import dynamic from "next/dynamic";
import React from "react";
import Split from "react-split";
import { useSnapshot } from "valtio";
import state from "../../state";
import { getSplit, saveSplit } from "../../state/actions/persistSplits";
import dynamic from 'next/dynamic'
import React from 'react'
import Split from 'react-split'
import { useSnapshot } from 'valtio'
import state from '../../state'
import { getSplit, saveSplit } from '../../state/actions/persistSplits'
const DeployEditor = dynamic(() => import("../../components/DeployEditor"), {
ssr: false,
});
const DeployEditor = dynamic(() => import('../../components/DeployEditor'), {
ssr: false
})
const Accounts = dynamic(() => import("../../components/Accounts"), {
ssr: false,
});
const Accounts = dynamic(() => import('../../components/Accounts'), {
ssr: false
})
const LogBox = dynamic(() => import("../../components/LogBox"), {
ssr: false,
});
const LogBox = dynamic(() => import('../../components/LogBox'), {
ssr: false
})
const Deploy = () => {
const { deployLogs } = useSnapshot(state);
const { deployLogs } = useSnapshot(state)
return (
<Split
direction="vertical"
gutterSize={4}
gutterAlign="center"
sizes={getSplit("deployVertical") || [40, 60]}
style={{ height: "calc(100vh - 60px)" }}
onDragEnd={(e) => saveSplit("deployVertical", e)}
sizes={getSplit('deployVertical') || [40, 60]}
style={{ height: 'calc(100vh - 60px)' }}
onDragEnd={e => saveSplit('deployVertical', e)}
>
<main style={{ display: "flex", flex: 1, position: "relative" }}>
<main style={{ display: 'flex', flex: 1, position: 'relative' }}>
<DeployEditor />
</main>
<Split
direction="horizontal"
sizes={getSplit("deployHorizontal") || [50, 50]}
sizes={getSplit('deployHorizontal') || [50, 50]}
minSize={[320, 160]}
gutterSize={4}
gutterAlign="center"
style={{
display: "flex",
flexDirection: "row",
width: "100%",
height: "100%",
display: 'flex',
flexDirection: 'row',
width: '100%',
height: '100%'
}}
onDragEnd={(e) => saveSplit("deployHorizontal", e)}
onDragEnd={e => saveSplit('deployHorizontal', e)}
>
<div style={{ alignItems: "stretch", display: "flex" }}>
<div style={{ alignItems: 'stretch', display: 'flex' }}>
<Accounts />
</div>
<div>
<LogBox
title="Deploy Log"
logs={deployLogs}
clearLog={() => (state.deployLogs = [])}
/>
<LogBox title="Deploy Log" logs={deployLogs} clearLog={() => (state.deployLogs = [])} />
</div>
</Split>
</Split>
);
};
)
}
export default Deploy;
export default Deploy

237
pages/develop/[[...slug]].tsx
View File

@@ -1,35 +1,34 @@
import { Label } from "@radix-ui/react-label";
import type { NextPage } from "next";
import dynamic from "next/dynamic";
import { FileJs, Gear, Play } from "phosphor-react";
import Hotkeys from "react-hot-keys";
import Split from "react-split";
import { useSnapshot } from "valtio";
import { ButtonGroup, Flex } from "../../components";
import Box from "../../components/Box";
import Button from "../../components/Button";
import Popover from "../../components/Popover";
import RunScript from "../../components/RunScript";
import state, { IFile } from "../../state";
import { compileCode } from "../../state/actions";
import { getSplit, saveSplit } from "../../state/actions/persistSplits";
import { styled } from "../../stitches.config";
import { getFileExtention } from "../../utils/helpers";
import { Label } from '@radix-ui/react-label'
import type { NextPage } from 'next'
import dynamic from 'next/dynamic'
import { FileJs, Gear, Play } from 'phosphor-react'
import Hotkeys from 'react-hot-keys'
import Split from 'react-split'
import { useSnapshot } from 'valtio'
import { ButtonGroup, Flex } from '../../components'
import Box from '../../components/Box'
import Button from '../../components/Button'
import Popover from '../../components/Popover'
import RunScript from '../../components/RunScript'
import state, { IFile } from '../../state'
import { compileCode } from '../../state/actions'
import { getSplit, saveSplit } from '../../state/actions/persistSplits'
import { styled } from '../../stitches.config'
import { getFileExtention } from '../../utils/helpers'
const HooksEditor = dynamic(() => import("../../components/HooksEditor"), {
ssr: false,
});
const HooksEditor = dynamic(() => import('../../components/HooksEditor'), {
ssr: false
})
const LogBox = dynamic(() => import("../../components/LogBox"), {
ssr: false,
});
const LogBox = dynamic(() => import('../../components/LogBox'), {
ssr: false
})
const OptimizationText = () => (
<span>
Specify which optimization level to use for compiling. For example -O0 means
“no optimization”: this level compiles the fastest and generates the most
debuggable code. -O2 means moderate level of optimization which enables most
optimizations. Read more about the options from{" "}
Specify which optimization level to use for compiling. For example -O0 means “no optimization”:
this level compiles the fastest and generates the most debuggable code. -O2 means moderate level
of optimization which enables most optimizations. Read more about the options from{' '}
<a
className="link"
rel="noopener noreferrer"
@@ -40,145 +39,143 @@ const OptimizationText = () => (
</a>
.
</span>
);
)
const StyledOptimizationText = styled(OptimizationText, {
color: "$mauve12 !important",
fontSize: "200px",
"span a.link": {
color: "red",
},
});
color: '$mauve12 !important',
fontSize: '200px',
'span a.link': {
color: 'red'
}
})
const CompilerSettings = () => {
const snap = useSnapshot(state);
const snap = useSnapshot(state)
return (
<Flex css={{ minWidth: 200, flexDirection: "column", gap: "$5" }}>
<Flex css={{ minWidth: 200, flexDirection: 'column', gap: '$5' }}>
<Box>
<Label
style={{
flexDirection: "row",
display: "flex",
flexDirection: 'row',
display: 'flex'
}}
>
Optimization level{" "}
Optimization level{' '}
<Popover
css={{
maxWidth: "240px",
lineHeight: "1.3",
maxWidth: '240px',
lineHeight: '1.3',
a: {
color: "$purple11",
color: '$purple11'
},
".dark &": {
backgroundColor: "$black !important",
'.dark &': {
backgroundColor: '$black !important',
".arrow": {
fill: "$colors$black",
},
},
'.arrow': {
fill: '$colors$black'
}
}
}}
content={<StyledOptimizationText />}
>
<Flex
css={{
position: "relative",
top: "-1px",
ml: "$1",
backgroundColor: "$mauve8",
borderRadius: "$full",
cursor: "pointer",
width: "16px",
height: "16px",
alignItems: "center",
justifyContent: "center",
position: 'relative',
top: '-1px',
ml: '$1',
backgroundColor: '$mauve8',
borderRadius: '$full',
cursor: 'pointer',
width: '16px',
height: '16px',
alignItems: 'center',
justifyContent: 'center'
}}
>
?
</Flex>
</Popover>
</Label>
<ButtonGroup css={{ mt: "$2", fontFamily: "$monospace" }}>
<ButtonGroup css={{ mt: '$2', fontFamily: '$monospace' }}>
<Button
css={{ fontFamily: "$monospace" }}
outline={snap.compileOptions.optimizationLevel !== "-O0"}
onClick={() => (state.compileOptions.optimizationLevel = "-O0")}
css={{ fontFamily: '$monospace' }}
outline={snap.compileOptions.optimizationLevel !== '-O0'}
onClick={() => (state.compileOptions.optimizationLevel = '-O0')}
>
-O0
</Button>
<Button
css={{ fontFamily: "$monospace" }}
outline={snap.compileOptions.optimizationLevel !== "-O1"}
onClick={() => (state.compileOptions.optimizationLevel = "-O1")}
css={{ fontFamily: '$monospace' }}
outline={snap.compileOptions.optimizationLevel !== '-O1'}
onClick={() => (state.compileOptions.optimizationLevel = '-O1')}
>
-O1
</Button>
<Button
css={{ fontFamily: "$monospace" }}
outline={snap.compileOptions.optimizationLevel !== "-O2"}
onClick={() => (state.compileOptions.optimizationLevel = "-O2")}
css={{ fontFamily: '$monospace' }}
outline={snap.compileOptions.optimizationLevel !== '-O2'}
onClick={() => (state.compileOptions.optimizationLevel = '-O2')}
>
-O2
</Button>
<Button
css={{ fontFamily: "$monospace" }}
outline={snap.compileOptions.optimizationLevel !== "-O3"}
onClick={() => (state.compileOptions.optimizationLevel = "-O3")}
css={{ fontFamily: '$monospace' }}
outline={snap.compileOptions.optimizationLevel !== '-O3'}
onClick={() => (state.compileOptions.optimizationLevel = '-O3')}
>
-O3
</Button>
<Button
css={{ fontFamily: "$monospace" }}
outline={snap.compileOptions.optimizationLevel !== "-O4"}
onClick={() => (state.compileOptions.optimizationLevel = "-O4")}
css={{ fontFamily: '$monospace' }}
outline={snap.compileOptions.optimizationLevel !== '-O4'}
onClick={() => (state.compileOptions.optimizationLevel = '-O4')}
>
-O4
</Button>
<Button
css={{ fontFamily: "$monospace" }}
outline={snap.compileOptions.optimizationLevel !== "-Os"}
onClick={() => (state.compileOptions.optimizationLevel = "-Os")}
css={{ fontFamily: '$monospace' }}
outline={snap.compileOptions.optimizationLevel !== '-Os'}
onClick={() => (state.compileOptions.optimizationLevel = '-Os')}
>
-Os
</Button>
</ButtonGroup>
</Box>
</Flex>
);
};
)
}
const Home: NextPage = () => {
const snap = useSnapshot(state);
const snap = useSnapshot(state)
const activeFile = snap.files[snap.active] as IFile | undefined;
const activeFileExt = getFileExtention(activeFile?.name);
const activeFile = snap.files[snap.active] as IFile | undefined
const activeFileExt = getFileExtention(activeFile?.name)
return (
<Split
direction="vertical"
sizes={getSplit("developVertical") || [70, 30]}
sizes={getSplit('developVertical') || [70, 30]}
minSize={[100, 100]}
gutterAlign="center"
gutterSize={4}
style={{ height: "calc(100vh - 60px)" }}
onDragEnd={e => saveSplit("developVertical", e)}
style={{ height: 'calc(100vh - 60px)' }}
onDragEnd={e => saveSplit('developVertical', e)}
>
<main style={{ display: "flex", flex: 1, position: "relative" }}>
<main style={{ display: 'flex', flex: 1, position: 'relative' }}>
<HooksEditor />
{activeFileExt === "c" && (
{activeFileExt === 'c' && (
<Hotkeys
keyName="command+b,ctrl+b"
onKeyDown={() =>
!snap.compiling && snap.files.length && compileCode(snap.active)
}
onKeyDown={() => !snap.compiling && snap.files.length && compileCode(snap.active)}
>
<Flex
css={{
position: "absolute",
bottom: "$4",
left: "$4",
alignItems: "center",
display: "flex",
cursor: "pointer",
gap: "$2",
position: 'absolute',
bottom: '$4',
left: '$4',
alignItems: 'center',
display: 'flex',
cursor: 'pointer',
gap: '$2'
}}
>
<Button
@@ -192,29 +189,27 @@ const Home: NextPage = () => {
Compile to Wasm
</Button>
<Popover content={<CompilerSettings />}>
<Button variant="primary" css={{ px: "10px" }}>
<Button variant="primary" css={{ px: '10px' }}>
<Gear size="16px" />
</Button>
</Popover>
</Flex>
</Hotkeys>
)}
{activeFileExt === "js" && (
{activeFileExt === 'js' && (
<Hotkeys
keyName="command+b,ctrl+b"
onKeyDown={() =>
!snap.compiling && snap.files.length && compileCode(snap.active)
}
onKeyDown={() => !snap.compiling && snap.files.length && compileCode(snap.active)}
>
<Flex
css={{
position: "absolute",
bottom: "$4",
left: "$4",
alignItems: "center",
display: "flex",
cursor: "pointer",
gap: "$2",
position: 'absolute',
bottom: '$4',
left: '$4',
alignItems: 'center',
display: 'flex',
cursor: 'pointer',
gap: '$2'
}}
>
<RunScript file={activeFile as IFile} />
@@ -222,25 +217,21 @@ const Home: NextPage = () => {
</Hotkeys>
)}
</main>
<Flex css={{ width: "100%" }}>
<Flex css={{ width: '100%' }}>
<Flex
css={{
flex: 1,
background: "$mauve1",
position: "relative",
borderRight: "1px solid $mauve8",
background: '$mauve1',
position: 'relative',
borderRight: '1px solid $mauve8'
}}
>
<LogBox
title="Development Log"
clearLog={() => (state.logs = [])}
logs={snap.logs}
/>
<LogBox title="Development Log" clearLog={() => (state.logs = [])} logs={snap.logs} />
</Flex>
{activeFileExt === "js" && (
{activeFileExt === 'js' && (
<Flex
css={{
flex: 1,
flex: 1
}}
>
<LogBox
@@ -253,7 +244,7 @@ const Home: NextPage = () => {
)}
</Flex>
</Split>
);
};
)
}
export default Home;
export default Home

6
pages/index.tsx
View File

@@ -1,5 +1,5 @@
const Home = () => {
return <p>homepage</p>;
};
return <p>homepage</p>
}
export default Home;
export default Home

37
pages/sign-in.tsx
View File

@@ -1,38 +1,37 @@
import { useEffect } from "react";
import { signIn, useSession } from "next-auth/react";
import { useEffect } from 'react'
import { signIn, useSession } from 'next-auth/react'
import Box from "../components/Box";
import Spinner from "../components/Spinner";
import Box from '../components/Box'
import Spinner from '../components/Spinner'
const SignInPage = () => {
const { data: session, status } = useSession();
const { data: session, status } = useSession()
useEffect(() => {
if (status !== "loading" && !session)
void signIn("github", { redirect: false });
if (status !== "loading" && session) window.close();
}, [session, status]);
if (status !== 'loading' && !session) void signIn('github', { redirect: false })
if (status !== 'loading' && session) window.close()
}, [session, status])
return (
<Box
css={{
display: "flex",
backgroundColor: "$mauve1",
position: "absolute",
display: 'flex',
backgroundColor: '$mauve1',
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: 9999,
textAlign: "center",
justifyContent: "center",
alignItems: "center",
gap: "$2",
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
gap: '$2'
}}
>
Logging in <Spinner />
</Box>
);
};
)
}
export default SignInPage;
export default SignInPage

128
pages/test/[[...slug]].tsx
View File

@@ -1,58 +1,56 @@
import dynamic from "next/dynamic";
import Split from "react-split";
import { useSnapshot } from "valtio";
import { Box, Container, Flex, Tab, Tabs } from "../../components";
import Transaction from "../../components/Transaction";
import state, { renameTxState } from "../../state";
import { getSplit, saveSplit } from "../../state/actions/persistSplits";
import { transactionsState, modifyTxState } from "../../state";
import { useEffect, useState } from "react";
import { FileJs } from "phosphor-react";
import RunScript from "../../components/RunScript";
import dynamic from 'next/dynamic'
import Split from 'react-split'
import { useSnapshot } from 'valtio'
import { Box, Container, Flex, Tab, Tabs } from '../../components'
import Transaction from '../../components/Transaction'
import state, { renameTxState } from '../../state'
import { getSplit, saveSplit } from '../../state/actions/persistSplits'
import { transactionsState, modifyTxState } from '../../state'
import { useEffect, useState } from 'react'
import { FileJs } from 'phosphor-react'
import RunScript from '../../components/RunScript'
const DebugStream = dynamic(() => import("../../components/DebugStream"), {
ssr: false,
});
const DebugStream = dynamic(() => import('../../components/DebugStream'), {
ssr: false
})
const LogBox = dynamic(() => import("../../components/LogBox"), {
ssr: false,
});
const Accounts = dynamic(() => import("../../components/Accounts"), {
ssr: false,
});
const LogBox = dynamic(() => import('../../components/LogBox'), {
ssr: false
})
const Accounts = dynamic(() => import('../../components/Accounts'), {
ssr: false
})
const Test = () => {
// This and useEffect is here to prevent useLayoutEffect warnings from react-split
const [showComponent, setShowComponent] = useState(false);
const { transactionLogs } = useSnapshot(state);
const { transactions, activeHeader } = useSnapshot(transactionsState);
const snap = useSnapshot(state);
const [showComponent, setShowComponent] = useState(false)
const { transactionLogs } = useSnapshot(state)
const { transactions, activeHeader } = useSnapshot(transactionsState)
const snap = useSnapshot(state)
useEffect(() => {
setShowComponent(true);
}, []);
setShowComponent(true)
}, [])
if (!showComponent) {
return null;
return null
}
const hasScripts = Boolean(
snap.files.filter(f => f.name.toLowerCase()?.endsWith(".js")).length
);
const hasScripts = Boolean(snap.files.filter(f => f.name.toLowerCase()?.endsWith('.js')).length)
const renderNav = () => (
<Flex css={{ gap: "$3" }}>
<Flex css={{ gap: '$3' }}>
{snap.files
.filter(f => f.name.endsWith(".js"))
.filter(f => f.name.endsWith('.js'))
.map(file => (
<RunScript file={file} key={file.name} />
))}
</Flex>
);
)
return (
<Container css={{ px: 0 }}>
<Split
direction="vertical"
sizes={
hasScripts && getSplit("testVertical")?.length === 2
hasScripts && getSplit('testVertical')?.length === 2
? [50, 20, 30]
: hasScripts
? [50, 20, 50]
@@ -60,49 +58,45 @@ const Test = () => {
}
gutterSize={4}
gutterAlign="center"
style={{ height: "calc(100vh - 60px)" }}
onDragEnd={e => saveSplit("testVertical", e)}
style={{ height: 'calc(100vh - 60px)' }}
onDragEnd={e => saveSplit('testVertical', e)}
>
<Flex
row
fluid
css={{
justifyContent: "center",
p: "$3 $2",
justifyContent: 'center',
p: '$3 $2'
}}
>
<Split
direction="horizontal"
sizes={getSplit("testHorizontal") || [50, 50]}
sizes={getSplit('testHorizontal') || [50, 50]}
minSize={[180, 320]}
gutterSize={4}
gutterAlign="center"
style={{
display: "flex",
flexDirection: "row",
width: "100%",
height: "100%",
display: 'flex',
flexDirection: 'row',
width: '100%',
height: '100%'
}}
onDragEnd={e => saveSplit("testHorizontal", e)}
onDragEnd={e => saveSplit('testHorizontal', e)}
>
<Box css={{ width: "55%", px: "$2" }}>
<Box css={{ width: '55%', px: '$2' }}>
<Tabs
label="Transaction"
activeHeader={activeHeader}
// TODO make header a required field
onChangeActive={(idx, header) => {
if (header) transactionsState.activeHeader = header;
if (header) transactionsState.activeHeader = header
}}
keepAllAlive
defaultExtension="json"
allowedExtensions={["json"]}
allowedExtensions={['json']}
onCreateNewTab={header => modifyTxState(header, {})}
onRenameTab={(idx, nwName, oldName = "") =>
renameTxState(oldName, nwName)
}
onCloseTab={(idx, header) =>
header && modifyTxState(header, undefined)
}
onRenameTab={(idx, nwName, oldName = '') => renameTxState(oldName, nwName)}
onCloseTab={(idx, header) => header && modifyTxState(header, undefined)}
>
{transactions.map(({ header, state }) => (
<Tab key={header} header={header}>
@@ -111,7 +105,7 @@ const Test = () => {
))}
</Tabs>
</Box>
<Box css={{ width: "45%", mx: "$2", height: "100%" }}>
<Box css={{ width: '45%', mx: '$2', height: '100%' }}>
<Accounts card hideDeployBtn showHookStats />
</Box>
</Split>
@@ -120,9 +114,9 @@ const Test = () => {
<Flex
as="div"
css={{
borderTop: "1px solid $mauve6",
background: "$mauve1",
flexDirection: "column",
borderTop: '1px solid $mauve6',
background: '$mauve1',
flexDirection: 'column'
}}
>
<LogBox
@@ -142,16 +136,16 @@ const Test = () => {
gutterSize={4}
gutterAlign="center"
style={{
display: "flex",
flexDirection: "row",
width: "100%",
height: "100%",
display: 'flex',
flexDirection: 'row',
width: '100%',
height: '100%'
}}
>
<Box
css={{
borderRight: "1px solid $mauve8",
height: "100%",
borderRight: '1px solid $mauve8',
height: '100%'
}}
>
<LogBox
@@ -160,14 +154,14 @@ const Test = () => {
clearLog={() => (state.transactionLogs = [])}
/>
</Box>
<Box css={{ height: "100%" }}>
<Box css={{ height: '100%' }}>
<DebugStream />
</Box>
</Split>
</Flex>
</Split>
</Container>
);
};
)
}
export default Test;
export default Test