Merge pull request #107 from terra-money/feature/playground

Feature/playground
terra-money · Mar 5, 2024 · eb9b32d · eb9b32d
2 parents 742d030 + a0dc40f
commit eb9b32d
Show file tree

Hide file tree

Showing 25 changed files with 12,935 additions and 25 deletions.
diff --git a/apps/shared/package.json b/apps/shared/package.json
@@ -33,7 +33,7 @@
     "@mui/material": "^5.10.2",
     "@terra-money/feather.js": "^1.0.11",
     "@terra-money/wallet-kit": "^1.0.11",
-    "@terra-money/warp-sdk": "^0.2.2",
+    "@terra-money/warp-sdk": "^0.2.10",
     "assert": "^2.0.0",
     "big.js": "^6.2.1",
     "buffer": "^6.0.3",

diff --git a/apps/warp-protocol/config-overrides.js b/apps/warp-protocol/config-overrides.js
@@ -1,7 +1,7 @@
 const webpack = require('webpack');
 const path = require('path');
 
-const { override, babelInclude } = require('customize-cra');
+const { override, babelInclude, addWebpackModuleRule } = require('customize-cra');
 
 module.exports = function (config, env) {
   const fallback = config.resolve.fallback || {};
@@ -36,7 +36,14 @@ module.exports = function (config, env) {
         /* transpile (converting to es5) code in src/ and shared component library */
         path.resolve('src'),
         path.resolve('../shared'),
-      ])
+      ]),
+      addWebpackModuleRule({
+        test: /\.txt$/i,
+        loader: 'raw-loader',
+        options: {
+          esModule: false,
+        },
+      })
     )(config, env)
   );
 };
diff --git a/apps/warp-protocol/package.json b/apps/warp-protocol/package.json
@@ -6,10 +6,24 @@
     "build": "react-app-rewired build",
     "format": "prettier --write \"**/*.{js,ts,tsx}\"",
     "generate-types": "node --experimental-specifier-resolution=node --loader ts-node/esm ../../scripts/generate-types.ts warp-protocol",
+    "generate-dts": "node --experimental-specifier-resolution=node --loader ts-node/esm ../../scripts/generate-dts.ts",
     "lint": "eslint \"./src/{**/*,*}.{ts,tsx}\"",
     "start": "PORT=4002 react-app-rewired start",
     "test": "react-app-rewired test --passWithNoTests"
   },
+  "generate-dts": {
+    "deps": [
+      {
+        "path": "../../../warp-sdk",
+        "name": "@terra-money/warp-sdk"
+      },
+      {
+        "path": "../../../feather.js",
+        "name": "@terra-money/feather.js"
+      }
+    ],
+    "output": "src/pages/playground/types"
+  },
   "lint-staged": {
     "./src/{**/*,*}.{ts,tsx}": [
       "prettier --write",
@@ -36,13 +50,14 @@
   "dependencies": {
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.10.2",
     "@mui/material": "^5.10.2",
     "@popperjs/core": "^2.11.6",
     "@terra-money/feather.js": "^1.0.11",
     "@terra-money/terra-station-mobile": "1.0.8",
     "@terra-money/wallet-kit": "^1.0.11",
-    "@terra-money/warp-sdk": "^0.2.2",
+    "@terra-money/warp-sdk": "^0.2.10",
     "assert": "^2.0.0",
     "big.js": "^6.2.1",
     "brace": "^0.11.1",
@@ -53,10 +68,12 @@
     "crypto-browserify": "^3.12.0",
     "d3-ease": "^3.0.1",
     "d3-timer": "^3.0.1",
+    "esbuild-wasm": "^0.20.1",
     "export-from-json": "^1.6.0",
     "https-browserify": "^1.0.0",
     "json-schema-to-typescript": "^11.0.2",
     "jsonpath": "^1.1.1",
+    "monaco-editor": "^0.46.0",
     "notistack": "^2.0.5",
     "os-browserify": "^0.3.0",
     "parse-duration": "^1.0.2",
@@ -108,6 +125,7 @@
     "jest-watch-typeahead": "2.1.1",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
+    "raw-loader": "^4.0.2",
     "react-app-rewired": "^2.2.1",
     "ts-node": "^10.9.1"
   },

diff --git a/apps/warp-protocol/src/App.tsx b/apps/warp-protocol/src/App.tsx
@@ -24,6 +24,7 @@ import { FundingAccounts } from 'pages/funding-accounts';
 import { useTermsOfUseDialog } from 'components/dialog/terms-of-use/TermsOfUseDialog';
 import TerraStationMobileWallet from '@terra-money/terra-station-mobile';
 import { useEffect, useMemo } from 'react';
+import { Playground } from 'pages/playground/Playground';
 
 const queryClient = new QueryClient();
 
@@ -43,6 +44,7 @@ const Main = () => {
         <Route path="/job-new/*" element={<JobNew />} />
         <Route path="/jobs/*" element={<Jobs />} />
         <Route path="/jobs/:jobId" element={<JobPage />} />
+        <Route path="/playground" element={<Playground />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </Layout>

diff --git a/apps/warp-protocol/src/components/assets/Code.svg b/apps/warp-protocol/src/components/assets/Code.svg
diff --git a/apps/warp-protocol/src/components/layout/NavigationMenu.module.sass b/apps/warp-protocol/src/components/layout/NavigationMenu.module.sass
@@ -26,9 +26,21 @@
       path
         stroke: rgb(51, 53, 55)
 
+    .code_icon
+      path
+        fill: rgb(51, 53, 55)
+      rect
+        fill: rgb(51, 53, 55)
+
   &:hover
     border-color: #34383A
 
+.code_icon
+  path
+    fill: rgba(215, 224, 223, 1)
+  rect
+    fill: rgba(215, 224, 223, 1)
+
 .tooltip
   display: flex
   flex-direction: row

diff --git a/apps/warp-protocol/src/components/layout/NavigationMenu.tsx b/apps/warp-protocol/src/components/layout/NavigationMenu.tsx
@@ -6,6 +6,7 @@ import { ReactComponent as DashboardIcon } from 'components/assets/Dashboard.svg
 import { ReactComponent as LightningStrokeIcon } from 'components/assets/LightningStroke.svg';
 import { ReactComponent as DotsCircleIcon } from 'components/assets/DotsCircle.svg';
 import { ReactComponent as TerminalIcon } from 'components/assets/Terminal.svg';
+import { ReactComponent as CodeIcon } from 'components/assets/Code.svg';
 import { NavLink } from 'react-router-dom';
 import styles from './NavigationMenu.module.sass';
 import { useNewActionDialog } from './dialogs/NewActionDialog';
@@ -23,6 +24,7 @@ const routes: RouteProps[] = [
   { to: '/funding-accounts', label: 'Funding Accounts', icon: <DotsCircleIcon /> },
   { to: '/variables', label: 'Variables', icon: <LightningStrokeIcon /> },
   { to: '/templates', label: 'Templates', icon: <TerminalIcon /> },
+  { to: '/playground', label: 'Playground', icon: <CodeIcon className={styles.code_icon} /> },
 ];
 
 interface RouteTooltipProps {
@@ -39,7 +41,7 @@ const Route = (props: RouteProps) => {
   return (
     <NavLink className={classNames(styles.route, 'route')} to={to}>
       <div className={styles.iconWrapper}>
-        <span className={styles.icon}>{icon}</span>
+        {icon}
         <RouteTooltip label={label} />
       </div>
     </NavLink>

diff --git a/apps/warp-protocol/src/components/layout/feedback/FeedbackDialog.module.sass b/apps/warp-protocol/src/components/layout/feedback/FeedbackDialog.module.sass
@@ -13,9 +13,15 @@
 
   > *
     font-family: PolySans-Normal
+    color: var(--text-color-title) !important
 
 .description
   line-height: 22px
+  margin-bottom: 20px
+  display: inline-block
 
 .transaction
-  margin-top: 16px
+  margin-top: 16px
+
+.footer
+  flex-direction: column
diff --git a/apps/warp-protocol/src/components/layout/feedback/FeedbackDialog.tsx b/apps/warp-protocol/src/components/layout/feedback/FeedbackDialog.tsx
@@ -1,6 +1,6 @@
 import { Button, Text } from 'components/primitives';
 import { useDialog, DialogProps } from '@terra-money/apps/hooks';
-import { Dialog, DialogBody, DialogFooter, DialogHeader } from 'components/dialog';
+import { Dialog, DialogBody, DialogHeader } from 'components/dialog';
 import { ReactComponent as ArrowLinkIcon } from 'components/assets/ArrowLink.svg';
 import styles from './FeedbackDialog.module.sass';
 
@@ -14,11 +14,11 @@ export const FeedbackDialog = (props: DialogProps<FeedbackDialogProps, boolean>)
       <DialogHeader title="We'd love to hear from you!" onClose={() => closeDialog(undefined)} />
       <DialogBody className={styles.body}>
         <Text variant="label" className={styles.description}>
-          We want to keep improving Warp Protocol for our community. Share your thoughts about existing features and
-          ideas for the future by clicking a button below.
+          At Warp Protocol, your feedback is crucial for product enhancement and shaping future innovations. Whether you
+          have insights on our existing features or are interested in discussing potential integrations, we're eager to
+          collaborate and explore new possibilities together.
         </Text>
-      </DialogBody>
-      <DialogFooter>
+
         <Button
           variant="secondary"
           className={styles.btn}
@@ -27,10 +27,21 @@ export const FeedbackDialog = (props: DialogProps<FeedbackDialogProps, boolean>)
             closeDialog(undefined);
           }}
         >
-          <Text variant="text">Feedback form</Text>
+          <Text variant="text">Feedback</Text>
+          <ArrowLinkIcon />
+        </Button>
+        <Button
+          variant="secondary"
+          className={styles.btn}
+          onClick={async () => {
+            window.open('https://forms.gle/AVfrfDStd95qjnGQ9');
+            closeDialog(undefined);
+          }}
+        >
+          <Text variant="text">Partnerships</Text>
           <ArrowLinkIcon />
         </Button>
-      </DialogFooter>
+      </DialogBody>
     </Dialog>
   );
 };

diff --git a/apps/warp-protocol/src/forms/QueryExprForm/EditorInput.tsx b/apps/warp-protocol/src/forms/QueryExprForm/EditorInput.tsx
@@ -42,7 +42,7 @@ export interface EditorInputProps {
   onEditorCursorChange?: (editor: IAceEditor) => void;
 }
 
-const defaultExample = (
+export const defaultExample = (
   contractAddress: string,
   query: warp_resolver.QueryRequestFor_String
 ): warp_resolver.WarpMsg => ({
@@ -66,8 +66,6 @@ const EditorInput = (props: EditorInputProps) => {
 
   const queryExample = useQueryExample();
 
-  console.log({ contracts: sdk.chain.contracts });
-
   const {
     endLabel,
     className,

diff --git a/apps/warp-protocol/src/hooks/useCopy.tsx b/apps/warp-protocol/src/hooks/useCopy.tsx
@@ -4,11 +4,12 @@ import { useCallback } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { CopySnackbar } from 'components/snackbar/copy/CopySnackbar';
 
-type CopyField = 'address' | 'message';
+type CopyField = 'address' | 'message' | 'code';
 
 const copyFieldToText: Record<CopyField, string> = {
   address: 'Address copied to clipboard!',
   message: 'Message copied to clipboard!',
+  code: 'Code copied to clipboard!',
 };
 
 export const useCopy = (field: CopyField, walletAddress?: string) => {

diff --git a/apps/warp-protocol/src/pages/playground/Playground.module.sass b/apps/warp-protocol/src/pages/playground/Playground.module.sass
@@ -0,0 +1,69 @@
+.root
+  height: 100%
+
+.title_container
+  position: relative
+  display: flex
+  width: 1000px
+  flex-direction: column
+  align-items: flex-start
+  margin-bottom: 40px
+
+.back
+  min-height: 0
+  margin-top: 24px
+
+.bottom
+  flex-direction: row
+  height: 100%
+  width: 100%
+
+.description
+  margin-top: 24px
+  line-height: 22px
+
+.title
+  font-weight: 600
+  font-size: 40px
+
+.tabs
+  margin-bottom: 40px
+
+.tab
+  border-radius: 16px
+  text-transform: capitalize
+  margin-right: 12px
+
+  &:not(.selected_tab)
+    opacity: 0.4
+
+.playground
+  height: 100%
+
+.editor
+  width: 100%
+  height: 500px
+
+.center
+  width: 100%
+  align-items: flex-start
+
+.right
+  width: 800px
+  margin-left: 40px
+
+.left
+  height: 100%
+  width: 100%
+
+.run
+  margin-bottom: 40px
+
+.copy
+  margin-left: auto
+
+.msg
+  height: 510px !important
+
+.msg_editor
+  height: 470px !important