Current Component
- {
- props.focusChange(true);
- }}
- onBlur={() => {
- props.focusChange(false);
- }}
- >
-
- );
-};
diff --git a/src/components/marketing-navigation/icons/close.svg b/src/components/marketing-navigation/icons/close.svg
deleted file mode 100644
index 1ee908d50..000000000
--- a/src/components/marketing-navigation/icons/close.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
\ No newline at end of file
diff --git a/src/components/marketing-navigation/icons/near-icon.svg b/src/components/marketing-navigation/icons/near-icon.svg
deleted file mode 100644
index ed33db6be..000000000
--- a/src/components/marketing-navigation/icons/near-icon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/components/marketing-navigation/icons/near-logo.svg b/src/components/marketing-navigation/icons/near-logo.svg
deleted file mode 100644
index 22162c97a..000000000
--- a/src/components/marketing-navigation/icons/near-logo.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-
diff --git a/src/components/marketing-navigation/icons/return.svg b/src/components/marketing-navigation/icons/return.svg
deleted file mode 100644
index 3da7d1e0a..000000000
--- a/src/components/marketing-navigation/icons/return.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-
\ No newline at end of file
diff --git a/src/components/marketing-navigation/icons/search.svg b/src/components/marketing-navigation/icons/search.svg
deleted file mode 100644
index d1d5e6453..000000000
--- a/src/components/marketing-navigation/icons/search.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/components/marketing-navigation/mobile/AccordionMenu.tsx b/src/components/marketing-navigation/mobile/AccordionMenu.tsx
deleted file mode 100644
index 7aea322c7..000000000
--- a/src/components/marketing-navigation/mobile/AccordionMenu.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import * as Accordion from '@radix-ui/react-accordion';
-import Link from 'next/link';
-import styled from 'styled-components';
-
-import { useCurrentComponentStore } from '@/stores/current-component';
-
-import { navigationCategories } from '../categories';
-import { CurrentComponent } from '../CurrentComponent';
-
-type Props = {
- onCloseMenu: () => void;
-};
-
-const Wrapper = styled.div`
- margin: 0 -24px;
-`;
-
-const AccordionRoot = styled(Accordion.Root)``;
-
-const AccordionItem = styled(Accordion.Item)``;
-
-const AccordionHeader = styled(Accordion.Header)`
- display: block;
- margin: 0;
-`;
-
-const AccordionTrigger = styled(Accordion.Trigger)`
- all: unset;
- box-sizing: border-box;
- background: var(--white);
- font: var(--text-base);
- font-weight: 600;
- color: var(--sand12);
- padding: 0 24px;
- height: 48px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
-
- i {
- transition: transform 200ms;
- }
-
- &[data-state='open'] {
- i {
- transform: rotate(-180deg);
- }
- }
-`;
-
-const AccordionContent = styled(Accordion.Content)`
- background: var(--sand3);
- overflow: hidden;
-
- &[data-state='open'] {
- animation: slideDown 200ms;
- }
- &[data-state='closed'] {
- animation: slideUp 200ms;
- }
-
- @keyframes slideDown {
- from {
- height: 0;
- }
- to {
- height: var(--radix-accordion-content-height);
- }
- }
-
- @keyframes slideUp {
- from {
- height: var(--radix-accordion-content-height);
- }
- to {
- height: 0;
- }
- }
-`;
-
-const Section = styled.div`
- padding: 0.5rem 0;
-
- a {
- display: block;
- font: var(--text-s);
- color: var(--sand12);
- padding: 0.5rem 10px;
- margin: 0;
- }
-`;
-
-const CurrentComponentSection = styled.div`
- padding: 24px;
- border-top: 1px solid var(--sand6);
-
- > div {
- max-width: 350px;
- }
-`;
-
-const SectionTitle = styled.p`
- font: var(--text-xs);
- color: var(--sand10);
- font-weight: 450;
- padding: 0.5rem 24px 1rem;
- margin: 0 0 0.5rem;
- letter-spacing: 0.24px;
- border-bottom: 1px solid var(--sand6);
-`;
-
-const Icon = styled.i`
- font-weight: 'bold';
- font-size: 18px;
- color: #868682;
- padding-left: 1rem;
- margin-top: -0.3em;
-`;
-
-const NavSection = styled.div`
- display: flex;
- flex-direction: row;
- align-items: center;
-`;
-
-export const AccordionMenu = (props: Props) => {
- const currentComponentSrc = useCurrentComponentStore((store) => store.src);
-
- return (
-
-
- );
-}
diff --git a/src/components/sandbox/Buttons/OnboardingPublishButton.js b/src/components/sandbox/Buttons/OnboardingPublishButton.js
deleted file mode 100644
index ede791b0f..000000000
--- a/src/components/sandbox/Buttons/OnboardingPublishButton.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { useRouter } from 'next/router';
-import React from 'react';
-
-export default function OnboardPublishButton({ currentStep, refs, disable }) {
- const router = useRouter();
-
- return (
-
-
-
-
-
-
- );
-}
diff --git a/src/components/sandbox/Buttons/OpenCreateButton.js b/src/components/sandbox/Buttons/OpenCreateButton.js
deleted file mode 100644
index 69a56e239..000000000
--- a/src/components/sandbox/Buttons/OpenCreateButton.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { ModalTypes } from '../utils/const';
-
-export default function OpenCreateButton({ setShowModal, disable }) {
- return (
-
- );
-}
diff --git a/src/components/sandbox/Buttons/OpenInNewTabButton.js b/src/components/sandbox/Buttons/OpenInNewTabButton.js
deleted file mode 100644
index 661d549b6..000000000
--- a/src/components/sandbox/Buttons/OpenInNewTabButton.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-
-export default function OpenInNewTabButton({ widgetPath, disable }) {
- return (
-
- Open Component
-
- );
-}
diff --git a/src/components/sandbox/Buttons/PublishButton.js b/src/components/sandbox/Buttons/PublishButton.js
deleted file mode 100644
index b2431d403..000000000
--- a/src/components/sandbox/Buttons/PublishButton.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { VmCommitButton } from '@/components/vm/VmCommitButton';
-
-export default function PublishButton({ widgetName, path, code, metadata, disable, handleCommit, refs }) {
- return (
-
-
- Publish
-
-
- );
-}
diff --git a/src/components/sandbox/Buttons/PublishDraftAsMainButton.js b/src/components/sandbox/Buttons/PublishDraftAsMainButton.js
deleted file mode 100644
index 12317a70a..000000000
--- a/src/components/sandbox/Buttons/PublishDraftAsMainButton.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { VmCommitButton } from '@/components/vm/VmCommitButton';
-
-export default function PublishDraftAsMainButton({ widgetName, path, code, metadata, disable, handleCommit }) {
- return (
-
-
- );
-}
diff --git a/src/components/sandbox/Buttons/SaveDraftButton.js b/src/components/sandbox/Buttons/SaveDraftButton.js
deleted file mode 100644
index f4b6294ff..000000000
--- a/src/components/sandbox/Buttons/SaveDraftButton.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { ModalTypes } from '../utils/const';
-
-export default function SaveDraftButton({ widgetName, setShowModal, disable }) {
- return (
-
- );
-}
diff --git a/src/components/sandbox/Mobile/MobileBlocker.js b/src/components/sandbox/Mobile/MobileBlocker.js
deleted file mode 100644
index 1c0fa2177..000000000
--- a/src/components/sandbox/Mobile/MobileBlocker.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
- position: absolute;
- z-index: 95;
- width: 100%;
- height: 100%;
- background: #fff;
- display: none;
- top: 40px;
-
- h4 {
- color: #1b1b18;
- font-weight: 700;
- }
-
- @media only screen and (max-width: 1024px) {
- .mobile {
- ${'' /* display: block; */}
- }
- }
-`;
-
-const MobileBlocker = ({ onboarding }) => (
- <>
- {onboarding && (
-
-
-
-
-
-
-
- Please visit the onboarding flow from a larger screen. -
- {`Oops...We're gonna need a bigger screen.`}
-- Please visit the onboarding flow from a larger screen. -
Open existing components or modules, or create your own.
-
-
- or
-
-
- {!DISABLE_MODULES && (
- <>
- or
-
-
-
-
-
- )}
-
-
-
- Save and commit your changes to the on-chain version history. Give your version a description what changed.
- Then save to the on-chain version history.
-
-
-
-
-
- );
-}
diff --git a/src/components/sandbox/Navigation/NavigationLeft.js b/src/components/sandbox/Navigation/NavigationLeft.js
deleted file mode 100644
index 95416ee62..000000000
--- a/src/components/sandbox/Navigation/NavigationLeft.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import { Nav } from 'react-bootstrap';
-
-import OpenCreateButton from '../Buttons/OpenCreateButton';
-import RenameButton from '../Buttons/RenameButton';
-import FileTab from './FileTab';
-
-export default function NavigationLeft({
- filesObject,
- jpath,
- changeFile,
- setShowModal,
- closeFile,
- disable,
- onboarding,
-}) {
- const onboardingLimitation = (file) =>
- onboarding ? ['Onboarding.Starter', 'Onboarding.Starter-fork'].includes(file.name) : true;
-
- return (
-
- );
-}
diff --git a/src/components/sandbox/Navigation/NavigationRight.js b/src/components/sandbox/Navigation/NavigationRight.js
deleted file mode 100644
index 2173a5052..000000000
--- a/src/components/sandbox/Navigation/NavigationRight.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react';
-import { Nav } from 'react-bootstrap';
-
-import ForkButton from '../Buttons/ForkButton';
-import OnboardingPublishButton from '../Buttons/OnboardingPublishButton';
-import PublishButton from '../Buttons/PublishButton';
-import PublishDraftAsMainButton from '../Buttons/PublishDraftAsMainButton';
-import SaveDraftButton from '../Buttons/SaveDraftButton';
-
-const NavigationRight = ({
- jpath,
- widgetName,
- setShowModal,
- forkFile,
- near,
- path,
- metadata,
- isDraft,
- refs,
- onboarding,
- currentStep,
- requestSignIn,
- disable,
- handleCommit,
- accountId,
- filesObject,
-}) => {
- const file = filesObject[JSON.stringify(path)];
- const code = file?.codeVisible;
- const forkOf = file?.forkOf;
- if (forkOf && !metadata?.forkOf) {
- metadata = { ...metadata, fork_of: forkOf };
- }
-
- return (
-
- );
-};
-
-export default NavigationRight;
diff --git a/src/components/sandbox/Navigation/index.js b/src/components/sandbox/Navigation/index.js
deleted file mode 100644
index 31232cc52..000000000
--- a/src/components/sandbox/Navigation/index.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-
-import NavigationLeft from './NavigationLeft';
-import NavigationRight from './NavigationRight';
-
-const Navigation = ({
- jpath,
- forkFile,
- filesObject,
- widgetName,
- near,
- path,
- metadata,
- closeFile,
- setShowModal,
- isDraft,
- changeFile,
- refs,
- onboarding,
- currentStep,
- requestSignIn,
- disable,
- handleCommit,
- accountId,
-}) => (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
- {widgetName}
- {file.isDraft && Draft
}
-
-
-
-);
-
-export default Navigation;
diff --git a/src/components/sandbox/NavigationSub/index.js b/src/components/sandbox/NavigationSub/index.js
deleted file mode 100644
index 2fb24df63..000000000
--- a/src/components/sandbox/NavigationSub/index.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import ls from 'local-storage';
-import React from 'react';
-
-import OpenInNewTabButton from '../Buttons/OpenInNewTabButton';
-import RenderPreviewButton from '../Buttons/RenderPreviewButton';
-import { EditorLayoutKey, Layout, Tab } from '../utils/const';
-
-const NavigationSub = ({
- layout,
- path,
- accountId,
- tab,
- widgetPath,
- setTab,
- setLayoutState,
- refs,
- handleRender,
- disable,
-}) => {
- const onLayoutChange = (e) => {
- const layout = e.target.value;
- if (layout === Layout.Split && tab === Tab.Widget) {
- setTab(Tab.Editor);
- }
- setLayout(layout);
- };
-
- const setLayout = (layout) => {
- ls.set(EditorLayoutKey, layout);
- setLayoutState(layout);
- };
-
- return (
- <>
-
-
-
-
-
- {(Tab.Widget === tab || layout === Layout.Split) && (
-
-
- );
-};
-
-export default NavigationSub;
diff --git a/src/components/sandbox/OnBoarding/OnboardingWelcome.js b/src/components/sandbox/OnBoarding/OnboardingWelcome.js
deleted file mode 100644
index c38844435..000000000
--- a/src/components/sandbox/OnBoarding/OnboardingWelcome.js
+++ /dev/null
@@ -1,177 +0,0 @@
-import Image from 'next/image';
-import { useRouter } from 'next/router';
-import React from 'react';
-import styled from 'styled-components';
-
-import Arrow from './icons/arrow.svg';
-import Onboarding1 from './icons/onboarding-1.svg';
-import Onboarding2 from './icons/onboarding-2.svg';
-import Onboarding3 from './icons/onboarding-3.svg';
-import Point1 from './icons/point-1.svg';
-import Point2 from './icons/point-2.svg';
-
-const Wrapper = styled.div`
- z-index: 1000;
-`;
-
-const SubTitle = styled.h6`
- color: #706f6c;
-`;
-
-const Title = styled.h4`
- color: #1b1b18;
- font-weight: 700;
-`;
-
-const Tag = styled.div`
- border: 1px solid #e3e3e0;
- border-radius: 4px;
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06);
- height: 32px;
- line-height: 32px;
- padding: 0 12px;
- margin-right: 10px;
- color: #706f6c;
- font-size: 12px;
-
- img {
- margin: -4px 4px 0 0;
- }
-`;
-
-const Desc = styled.div`
- margin-top: 30px;
-`;
-
-const Point = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- margin-top: 40px;
-
- .title {
- font-weight: 600;
- font-size: 16px;
- line-height: 150%;
- }
-
- .desc {
- padding-top: 4px;
- font-weight: 450;
- font-size: 14px;
- line-height: 150%;
- color: #706f6c;
- }
-
- .img {
- margin-right: 24px;
- }
-`;
-
-const ButtonGetStarted = styled.button`
- margin-top: 60px;
- width: 100%;
- height: 48px;
- background: #63e3a4;
- border: 0.5px solid #37cd83;
- border-radius: 50px;
- font-weight: 600;
- font-size: 16px;
- line-height: 150%;
- text-align: center;
-
- :hover {
- opacity: 0.9;
- }
-`;
-
-const ButtonSkip = styled.button`
- all: unset;
- margin-top: 20px;
- width: 100%;
- height: 48px;
- border-radius: 50px;
- font-weight: 600;
- font-size: 16px;
- line-height: 150%;
- text-align: center;
- color: #706f6c;
-
- :hover {
- color: #000;
- }
-`;
-
-export default function OnboardingWelcome({ handleNext }) {
- // TODO move to somewhere cleaner
- const router = useRouter();
- return (
-
-
- )}
- {path?.type === 'widget' && accountId &&
-
-
-
-
-
-
-
-
-
- Getting Started
- Build with Open Web Components
-
- We’ll guide you through a basic development workflow to fork, modify, and compose with open web components.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Develop with the NEAR Sandbox
-
- Inspect components, compose applications, and preview your changes in real time.
-
-
-
-
-
- Compose with Components
- Discover components built by the community and embed them within your project.
-
-
-
-
- Publish Your First Components On-Chain
-
- Build a contribution graph, deploy it on chain, and connect with thousands of other builders on BOS!
-
-
-
- Get Started
- {
- router.push('/signup');
- }}
- >
- Skip and Create an Account
-
-
-
-
- );
-}
diff --git a/src/components/sandbox/OnBoarding/Step10.js b/src/components/sandbox/OnBoarding/Step10.js
deleted file mode 100644
index 259c3372e..000000000
--- a/src/components/sandbox/OnBoarding/Step10.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-export default function Step10() {
- return (
- Fork your first component
-
- In the Sandbox, you’re able to fork, experiment, and build new components and applications with NEAR, all in the
- browser. Get started by forking your first component.
-
-
-
- );
-}
diff --git a/src/components/sandbox/OnBoarding/Step2.js b/src/components/sandbox/OnBoarding/Step2.js
deleted file mode 100644
index 348495c76..000000000
--- a/src/components/sandbox/OnBoarding/Step2.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-
-export default function Step2() {
- return (
- Awesome Job! Now let’s publish your first component.
-
- Your component is complete! Click “Publish” to publish it with a NEAR account, and to see your contributions
- reflected in your graph.
-
-
-
- );
-}
diff --git a/src/components/sandbox/OnBoarding/Step3.js b/src/components/sandbox/OnBoarding/Step3.js
deleted file mode 100644
index ea9f9cd4b..000000000
--- a/src/components/sandbox/OnBoarding/Step3.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import copy from 'copy-to-clipboard';
-import Image from 'next/image';
-import React from 'react';
-import styled from 'styled-components';
-
-import CopyIcon from './icons/copy.svg';
-
-const Wrapper = styled.div`
- .buttons {
- width: 100%;
- margin-top: 0px;
-
- button {
- text-align: center;
- width: 100%;
- height: 32px;
- line-height: 32px;
- padding: 0 12px;
- background: #ffffff;
- border-radius: 50px;
- font-size: 12px;
- color: #1b1b18;
-
- :hover {
- opacity: 0.9;
- }
-
- img {
- margin: -2px 4px 0;
-
- &.revert {
- transform: rotate(180deg);
- }
- }
- }
- }
-`;
-
-const CodeEx = styled.div`
- padding: 16px;
- margin: 20px 0;
- background: #353431;
- border-radius: 6px;
-
- color: #a1a09a;
- font-family: Menlo, Monaco, ' Courier New ', monospace;
- font-style: normal;
- font-weight: 500;
- font-size: 12px;
- line-height: 150%;
-
- pre {
- margin: 0px;
- padding: 0px;
- }
-`;
-
-const codeExample = `Easy as that, let’s add some code
-
- Code published on NEAR is open source by default. This means you can inspect, modify, and compose with every
- component you see.
-
-
- Next, we’ll modify your component using the sandbox editor. -
- -
- Next, we’ll modify your component using the sandbox editor. -
Edit your first Component
-
- The following code snippet gets the total number of contributions you have made to the NEAR blockchain.
-
-
- Copy the snippet and replace the placeholder code on line 4 to display your total contributions. -
- -
- Copy the snippet and replace the placeholder code on line 4 to display your total contributions. -
{codeVisible}
-
-
-
-
-
- );
-}
diff --git a/src/components/sandbox/OnBoarding/Step5.js b/src/components/sandbox/OnBoarding/Step5.js
deleted file mode 100644
index 415643bf1..000000000
--- a/src/components/sandbox/OnBoarding/Step5.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-export default function Step5() {
- return (
- Preview Your Changes Live
-
- Once you’ve modified your component, refresh your render preview to see the changes live right beside the
- editor.
-
-
-
- );
-}
diff --git a/src/components/sandbox/OnBoarding/Step6.js b/src/components/sandbox/OnBoarding/Step6.js
deleted file mode 100644
index 1befdddb8..000000000
--- a/src/components/sandbox/OnBoarding/Step6.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import copy from 'copy-to-clipboard';
-import Image from 'next/image';
-import React from 'react';
-import styled from 'styled-components';
-
-import CopyIcon from './icons/copy.svg';
-
-const Wrapper = styled.div`
- .buttons {
- width: 100%;
- margin-top: 0px;
- margin-bottom: 10px;
-
- button {
- text-align: center;
- width: 100%;
- height: 32px;
- line-height: 32px;
- padding: 0 12px;
- background: #ffffff;
- border-radius: 50px;
- font-size: 12px;
- color: #1b1b18;
-
- :hover {
- opacity: 0.9;
- }
-
- img {
- margin: -2px 4px 0;
-
- &.revert {
- transform: rotate(180deg);
- }
- }
- }
- }
-`;
-
-const CodeEx = styled.div`
- padding: 16px;
- margin: 20px 0;
- background: #353431;
- border-radius: 6px;
- color: #a1a09a;
- font-family: Menlo, Monaco, ' Courier New ', monospace;
- font-style: normal;
- font-weight: 500;
- font-size: 12px;
- line-height: 150%;
-
- pre {
- margin: 0px;
- padding: 0px;
- }
-`;
-
-const codeExample = 'Onboarding.ComponentCollection';
-
-export default function Step6() {
- return (
- Great Start! Now let’s add a component built by the community.
-
- Your component now displays your total contributions, but we need a way to visualize your contributions over
- time.
-
- Search for Community Components
-
- You can search the platform at any point for community components to inspire new experiences, or to use in your
- own projects.
-
-
- In the search bar, type or paste in: -{codeExample}
-
- -
- In the search bar, type or paste in: -
-
-
- to search for this component.
-
-
- );
-}
diff --git a/src/components/sandbox/OnBoarding/Step8.js b/src/components/sandbox/OnBoarding/Step8.js
deleted file mode 100644
index b6b52c4cf..000000000
--- a/src/components/sandbox/OnBoarding/Step8.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-
-export default function Step8() {
- return (
- Embedding Components
-
- Components you find can be embedded by copying their embed code, and pasting it in your component file.
-
-
- Copy the embed code for “near/widget/ComponentCollection”, and replace the placeholder code on line 6. -
- -
- Copy the embed code for “near/widget/ComponentCollection”, and replace the placeholder code on line 6. -
-
- );
-}
diff --git a/src/components/sandbox/OnBoarding/Step9.js b/src/components/sandbox/OnBoarding/Step9.js
deleted file mode 100644
index 48e0da765..000000000
--- a/src/components/sandbox/OnBoarding/Step9.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-export default function Step9() {
- return (
- Paste the embed code and preview your changes
- Paste the embedded code on line 6 and review the changes by clicking “Render Preview”
-
-
- );
-}
diff --git a/src/components/sandbox/OnBoarding/icons/arrow-small.svg b/src/components/sandbox/OnBoarding/icons/arrow-small.svg
deleted file mode 100644
index d972224ac..000000000
--- a/src/components/sandbox/OnBoarding/icons/arrow-small.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/components/sandbox/OnBoarding/icons/arrow.svg b/src/components/sandbox/OnBoarding/icons/arrow.svg
deleted file mode 100644
index fd0da5977..000000000
--- a/src/components/sandbox/OnBoarding/icons/arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/components/sandbox/OnBoarding/icons/copy.svg b/src/components/sandbox/OnBoarding/icons/copy.svg
deleted file mode 100644
index f70faa12d..000000000
--- a/src/components/sandbox/OnBoarding/icons/copy.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/components/sandbox/OnBoarding/icons/onboarding-1.svg b/src/components/sandbox/OnBoarding/icons/onboarding-1.svg
deleted file mode 100644
index e6f2b9b83..000000000
--- a/src/components/sandbox/OnBoarding/icons/onboarding-1.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/src/components/sandbox/OnBoarding/icons/onboarding-2.svg b/src/components/sandbox/OnBoarding/icons/onboarding-2.svg
deleted file mode 100644
index acde9111c..000000000
--- a/src/components/sandbox/OnBoarding/icons/onboarding-2.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/src/components/sandbox/OnBoarding/icons/onboarding-3.svg b/src/components/sandbox/OnBoarding/icons/onboarding-3.svg
deleted file mode 100644
index 8ade6af4c..000000000
--- a/src/components/sandbox/OnBoarding/icons/onboarding-3.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-
diff --git a/src/components/sandbox/OnBoarding/icons/point-1.svg b/src/components/sandbox/OnBoarding/icons/point-1.svg
deleted file mode 100644
index b00a0f927..000000000
--- a/src/components/sandbox/OnBoarding/icons/point-1.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/components/sandbox/OnBoarding/icons/point-2.svg b/src/components/sandbox/OnBoarding/icons/point-2.svg
deleted file mode 100644
index b9a26c996..000000000
--- a/src/components/sandbox/OnBoarding/icons/point-2.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/src/components/sandbox/OnBoarding/index.js b/src/components/sandbox/OnBoarding/index.js
deleted file mode 100644
index 163a1adfc..000000000
--- a/src/components/sandbox/OnBoarding/index.js
+++ /dev/null
@@ -1,285 +0,0 @@
-import Image from 'next/image';
-import { useRouter } from 'next/router';
-import React, { useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components';
-
-import { Layout } from '../utils/const';
-import { ONBOARDING_STORAGE, onboardingComponents, onboardingDisable, onboardingSteps } from '../utils/onboarding';
-import ArrowSmall from './icons/arrow-small.svg';
-import OnboardingWelcome from './OnboardingWelcome';
-
-const Wrapper = styled.div``;
-
-const Tooltip = styled.div`
- width: 300px;
-
- position: absolute;
- z-index: 90;
-
- background: #161615;
- border-radius: 12px;
- padding: 20px 14px;
-
- .title {
- color: #ededec;
- line-height: 150%;
- font-weight: 600;
- }
-
- .desc {
- color: #a1a09a;
- font-size: 14px;
- line-height: 150%;
- margin-top: 12px;
- }
-
- .closeIcon {
- position: absolute;
- font-size: 26px;
- top: 0px;
- right: 6px;
- color: #999;
- cursor: pointer;
- border-radius: 100%;
-
- &:hover {
- color: #fff;
- }
- }
-
- .buttons {
- display: flex;
- margin-top: 24px;
-
- .right {
- margin-left: auto;
- }
- .left {
- button {
- padding-right: 16px;
- background: transparent;
- color: #999;
- }
- }
-
- button {
- height: 36px;
- line-height: 32px;
- padding: 0 12px;
- background: #ffffff;
- border-radius: 50px;
- font-size: 12px;
- color: #1b1b18;
- border: 0px;
-
- :hover {
- opacity: 0.9;
- }
-
- img {
- margin: -2px 4px 0;
-
- &.revert {
- transform: rotate(180deg);
- }
- }
- }
- }
-`;
-
-const OnBoarding = ({
- onboarding,
- refs,
- setCurrentStep,
- currentStep,
- refEditor,
- refSearch,
- setLayoutState,
- cache,
- near,
- closeFile,
- setDisable,
- selectFile,
-}) => {
- const [tooltipPosition, setTooltipPosition] = useState({});
- const [adjustPosition, setAdjustPosition] = useState({ x: 0, y: 0 });
- const router = useRouter();
- zE('webWidget', 'hide');
-
- const getPosition = useCallback(() => {
- setTooltipPosition(() =>
- Object.keys(onboardingSteps).reduce(
- (x, key) => ({
- ...x,
- [key]: {
- x: refs[key].current?.offsetLeft,
- y: refs[key].current?.offsetTop,
- },
- }),
- {},
- ),
- );
- }, [refs]);
-
- useEffect(() => {
- getPosition();
- }, [currentStep, getPosition]);
-
- useEffect(() => {
- window.addEventListener('resize', getPosition);
- }, [getPosition]);
-
- const enableStep = useCallback(
- (name) =>
- setDisable((state) => ({
- ...state,
- [name]: false,
- })),
- [setDisable],
- );
-
- const disableAll = useCallback(() => setDisable(onboardingDisable), [setDisable]);
-
- // glowing
- useEffect(() => {
- Object.keys(onboardingSteps).map((key) => {
- if (refs[key].current) {
- refs[key].current.className = '';
- }
- });
-
- if ([2, 3, 8].includes(currentStep)) {
- return;
- }
-
- if (refs[`step${currentStep}`]?.current) {
- refs[`step${currentStep}`].current.className = 'glow';
- }
- }, [currentStep, refs]);
-
- useEffect(() => {
- if (!onboarding) {
- return;
- }
-
- setLayoutState(Layout.Split);
-
- // select proper component
- if (currentStep === 1) {
- selectFile(onboardingComponents.starter);
- }
- if (currentStep > 1) {
- selectFile(onboardingComponents.starterFork);
- }
-
- // disable
- if (currentStep === 1) {
- enableStep('forkButton');
- } else if (currentStep === 4) {
- enableStep('renderPreviewButton');
- } else if (currentStep === 6) {
- enableStep('search');
- } else if (currentStep === 7) {
- enableStep('search');
- } else if (currentStep === 9) {
- enableStep('renderPreviewButton');
- } else if (currentStep === 10) {
- enableStep('onboardingPublishButton');
- enableStep('publishButton');
- } else {
- disableAll();
- }
-
- // AdjustPosition
- if (currentStep === 2 || currentStep === 3 || currentStep === 8) {
- setAdjustPosition({ x: refEditor.current.offsetWidth - 70, y: -16 });
- } else if (currentStep === 6) {
- setAdjustPosition({ x: refSearch.current.offsetWidth - 600, y: 0 });
- } else if (currentStep === 7) {
- setAdjustPosition({ x: refSearch.current.offsetWidth - 400, y: 48 });
- } else {
- setAdjustPosition({ x: 0, y: 0 });
- }
- }, [
- currentStep,
- cache,
- near,
- onboarding,
- setLayoutState,
- selectFile,
- enableStep,
- disableAll,
- closeFile,
- refEditor,
- refSearch,
- ]);
-
- const handleNext = () => updateStep(currentStep + 1);
-
- const handlePrev = () => updateStep(currentStep - 1);
-
- const updateStep = (step) => {
- setCurrentStep(step);
- localStorage.setItem(ONBOARDING_STORAGE, JSON.stringify({ step }));
- };
-
- const finishOnboarding = () => {
- updateStep(0);
- router.push('/sandbox');
- };
-
- return (
- Preview your changes live!
-
- {`Once you've modified your component, refresh your render preview to see the changes live right beside the
- editor.`}
-
- {step.component}
-
-
-
-
-
-
- {step.button && (
-
- )}
-
- {currentStep === 10 && (
-
- )}
-
-
-
-
-
-
-);
-
-export default Preview;
diff --git a/src/components/sandbox/PreviewMetadata/index.js b/src/components/sandbox/PreviewMetadata/index.js
deleted file mode 100644
index fb2a53ae4..000000000
--- a/src/components/sandbox/PreviewMetadata/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { useMemo } from 'react';
-
-import { VmComponent } from '@/components/vm/VmComponent';
-
-import { Tab } from '../utils/const';
-
-const PreviewMetadata = ({ tab, jpath, widgets, metadata, accountId, widgetName }) => (
-
-
-
-
-
-
-
- {renderCode ? (
-
-
-
- ) : (
- !isModule && (
-
- {/*
- )
- )}
-
-
-);
-
-export default PreviewMetadata;
diff --git a/src/components/sandbox/Sandbox.js b/src/components/sandbox/Sandbox.js
deleted file mode 100644
index a56e14ed2..000000000
--- a/src/components/sandbox/Sandbox.js
+++ /dev/null
@@ -1,673 +0,0 @@
-import ls from 'local-storage';
-import { useRouter } from 'next/router';
-import prettier from 'prettier';
-import parserBabel from 'prettier/parser-babel';
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
-
-import { useBosComponents } from '@/hooks/useBosComponents';
-import { useCurrentComponentStore } from '@/stores/current-component';
-import { useVmStore } from '@/stores/vm';
-import { recordHandledError } from '@/utils/analytics';
-
-import { NearContext } from '../WalletSelector';
-import BannerOboarding from './Banners/BannerOboarding';
-import VsCodeBanner from './Banners/VsCodeBanner';
-import MainWrapper from './css/MainWrapper';
-import MobileBlocker from './Mobile/MobileBlocker';
-import Modals from './Modals';
-import Navigation from './Navigation';
-import NavigationSub from './NavigationSub';
-import OnBoarding from './OnBoarding';
-import Preview from './Preview';
-import PreviewMetadata from './PreviewMetadata';
-import Search from './Search';
-import TabEditor from './TabEditor';
-import TabMetadata from './TabMetadata';
-import TabProps from './TabProps';
-import Tabs from './Tabs';
-import {
- EditorLayoutKey,
- fileObjectDefault,
- Filetype,
- getForkName,
- Layout,
- StorageDomain,
- StorageType,
- Tab,
- WidgetPropsKey,
-} from './utils/const';
-import {
- checkChangesMade,
- createFilesObject,
- fileToJpath,
- fileToPath,
- generateNewName,
- getDefaultCode,
- getSrcByNameOrPath,
- getWidgetDetails,
- nameToPath,
- toPath,
- updateCodeLocalStorage,
- updateLocalStorage,
-} from './utils/editor';
-import {
- generateRefs,
- getStepLocalStorage,
- ONBOARDING_STORAGE,
- onboardingComponents,
- onboardingDisable,
-} from './utils/onboarding';
-import Welcome from './Welcome';
-import MainLoader from './Welcome/MainLoader';
-
-export const Sandbox = ({ onboarding = false }) => {
- const near = useVmStore((store) => store.near);
- const cache = useVmStore((store) => store.cache);
- const { signedAccountId, wallet } = useContext(NearContext);
-
- const router = useRouter();
- const widgets = useBosComponents();
-
- const [mainLoader, setMainLoader] = useState(false);
- const [filesObject, setFilesObject] = useState({});
- const [localChecked, setLocalChecked] = useState();
- const [path, setPath] = useState(undefined);
- const [lastPath, setLastPath] = useState(undefined);
- const [renderCode, setRenderCode] = useState();
- const [widgetProps, setWidgetProps] = useState(ls.get(WidgetPropsKey) || '{}');
- const [parsedWidgetProps, setParsedWidgetProps] = useState({});
- const [propsError, setPropsError] = useState(null);
- const [metadata, setMetadata] = useState(undefined);
- const [showModal, setShowModal] = useState(null);
- const [tab, setTab] = useState(Tab.Editor);
- const [layout, setLayoutState] = useState(ls.get(EditorLayoutKey) || Layout.Tabs);
- const [defaultWidget, setDefaultWidget] = useState(null);
- const [currentStep, setCurrentStep] = useState(0);
- const [disable, setDisable] = useState({});
-
- const widgetName = path?.name?.split('/')[0];
- const widgetPath = `${signedAccountId}/${path?.type}/${path?.name}`;
- const jpath = JSON.stringify(path);
- const { isDraft } = filesObject[jpath] || {};
- const showEditor = !!Object.keys(filesObject)?.length || !localChecked;
- const isModule = path?.type === 'module';
- const layoutClass = layout === Layout.Split ? 'col-lg-6' : '';
- const setComponentSrc = useCurrentComponentStore((store) => store.setSrc);
-
- const getFileData = useCallback(
- (file) => {
- if (!file.src) {
- return;
- }
-
- const path = fileToPath(file);
- const jpath = fileToJpath(file);
- const widgetSrc = `${file.src}/**`;
-
- const fetchCode = () => {
- const widgetObject = cache.socialGet(near, widgetSrc, false, undefined, undefined, fetchCode);
- fetch(`${near.config.apiUrl}/keys`, {
- method: 'POST',
- body: JSON.stringify({ keys: [file.src], options: { return_type: 'BlockHeight' } }),
- headers: {
- 'Content-Type': 'application/json',
- },
- })
- .then((response) => response.json())
- .then((sourceWidget) => {
- const srcArr = file.src.split('/');
- const forkOf = file.src + '@' + sourceWidget[srcArr[0]][srcArr[1]][srcArr[2]];
-
- if (widgetObject && file.new) {
- const { codeMain, codeDraft, isDraft } = getWidgetDetails(widgetObject);
- const onChainCode = codeDraft || codeMain;
- cache
- .asyncLocalStorageGet(StorageDomain, {
- path,
- type: StorageType.Code,
- })
- .then(({ code } = {}) => {
- setFilesObject((state) => ({
- ...state,
- [jpath]: {
- ...state[jpath],
- codeMain,
- codeDraft,
- isDraft,
- savedOnChain: true,
- changesMade: code ? checkChangesMade(onChainCode, codeDraft, code) : false,
- codeLocalStorage: code || onChainCode,
- codeVisible: code || state[jpath].codeVisible || onChainCode,
- forkOf,
- },
- }));
- });
- }
-
- cache
- .asyncLocalStorageGet(StorageDomain, {
- path,
- type: StorageType.Code,
- })
- .then(({ code } = {}) => {
- setFilesObject((state) => ({
- ...state,
- [jpath]: {
- ...state[jpath],
- codeLocalStorage: code,
- codeVisible: code || state[jpath].codeVisible,
- },
- }));
- });
- });
- };
- fetchCode();
- },
- [cache, near],
- );
-
- const addFile = useCallback(
- (file) => {
- const newFilesObject = {
- ...filesObject,
- [fileToJpath(file)]: file,
- };
- setFilesObject(newFilesObject);
- updateLocalStorage(newFilesObject, fileToPath(file), cache);
- },
- [cache, filesObject],
- );
-
- const loadAndOpenFile = useCallback(
- (nameOrPath, type) => {
- const onboardingId = onboarding && 'near';
- const src = getSrcByNameOrPath(nameOrPath, onboardingId || signedAccountId, type);
- const path = toPath(type, nameOrPath);
-
- const newFile = {
- ...fileObjectDefault,
- ...path,
- src,
- codeMain: '',
- codeDraft: '',
- codeLocalStorage: '',
- isDraft: false,
- changesMade: false,
- savedOnChain: false,
- new: true,
- };
- addFile(newFile);
- setRenderCode(null);
- selectFile(path);
- getFileData(newFile);
- },
- [signedAccountId, addFile, getFileData, onboarding],
- );
-
- useEffect(() => {
- if (!defaultWidget || onboarding) {
- return;
- }
-
- setLocalChecked(true);
- loadAndOpenFile(defaultWidget, defaultWidget.split('/')[1]);
- setDefaultWidget(null);
- router.replace('/sandbox');
- }, [defaultWidget, loadAndOpenFile, onboarding, router]);
-
- const selectFile = (file) => {
- setPath(fileToPath(file));
- setLastPath(fileToPath(file));
- setMetadata(undefined);
- };
-
- const collectAllFileData = useCallback(
- (filesObject) => {
- Object.values(filesObject).map((file) => {
- getFileData(file);
- });
- },
- [getFileData],
- );
-
- const firstLoad = useCallback(() => {
- setComponentSrc(null);
-
- cache.asyncLocalStorageGet(StorageDomain, { type: StorageType.Files }).then(({ files, lastPath } = {}) => {
- let path;
- let filesObject;
-
- if (onboarding && currentStep === 1) {
- path = onboardingComponents.starter;
- filesObject = createFilesObject([onboardingComponents.starter]);
- } else if (onboarding && currentStep > 1) {
- path = onboardingComponents.starterFork;
- filesObject = createFilesObject([onboardingComponents.starter, onboardingComponents.starterFork]);
- } else {
- path = lastPath;
- filesObject = createFilesObject(files);
- }
-
- setFilesObject(filesObject);
- selectFile(filesObject[fileToJpath(path)]);
- collectAllFileData(filesObject);
-
- if (onboarding) {
- return;
- }
-
- const { componentSrc } = router.query;
-
- if (!Array.isArray(router.query.componentSrc)) {
- setLocalChecked(true);
- return;
- }
-
- setDefaultWidget(componentSrc.join('/'));
- });
- }, [cache, collectAllFileData, currentStep, onboarding, router.query, setComponentSrc]);
-
- const renameFile = (newName) => {
- const pathNew = nameToPath(path.type, newName);
- const jpathNew = fileToJpath(pathNew);
-
- const onboardingId = onboarding && 'near';
- const src = getSrcByNameOrPath(pathNew.name, onboardingId || signedAccountId, pathNew.type);
-
- setFilesObject((state) => {
- const newState = {
- ...state,
- [jpathNew]: {
- ...state[jpath],
- src,
- name: newName,
- },
- };
- delete newState[jpath];
- updateLocalStorage(newState, pathNew, cache);
- return newState;
- });
- selectFile(pathNew);
- setRenderCode(null);
- };
-
- const changeCode = (path, code) => {
- const jpath = JSON.stringify(path);
-
- setFilesObject((state) => ({
- ...state,
- [jpath]: {
- ...state[jpath],
- codeLocalStorage: code,
- codeVisible: code,
- savedOnChain: false,
- changesMade: checkChangesMade(state[jpath].codeMain, state[jpath].codeDraft, code),
- },
- }));
- updateCodeLocalStorage(path, code, cache);
- };
-
- const reformat = (path, code) => {
- try {
- const formattedCode = prettier.format(code, {
- parser: 'babel',
- plugins: [parserBabel],
- });
- changeCode(path, formattedCode);
- } catch (e) {
- console.error(e);
- recordHandledError({ scope: 'sandbox reformatting', message: e.message || e });
- }
- };
-
- const closeFile = (path) => {
- const jpath = JSON.stringify(path);
- const newFilesObject = { ...filesObject };
- delete newFilesObject[jpath];
- setFilesObject(newFilesObject);
-
- const lastFile = !Object.keys(newFilesObject).length;
-
- if (lastFile) {
- updateLocalStorage(newFilesObject, undefined, cache);
- return;
- }
-
- if (jpath !== JSON.stringify(lastPath)) {
- updateLocalStorage(newFilesObject, lastPath, cache);
- return;
- }
-
- if (jpath === JSON.stringify(lastPath)) {
- const newFile = Object.values(newFilesObject)[0];
- const newPath = fileToPath(newFile);
- selectFile(newPath);
- setRenderCode(null);
- updateLocalStorage(newFilesObject, newPath, cache);
- }
- };
-
- const changeFile = (path) => {
- if (filesObject[JSON.stringify(path)]) {
- setRenderCode(null);
- selectFile(path);
- updateLocalStorage(filesObject, path, cache);
- }
- };
-
- const handleRender = () => {
- setRenderCode(filesObject[JSON.stringify(path)]?.codeVisible);
-
- if (layout === Layout.Tabs) {
- setTab(Tab.Widget);
- }
-
- if (onboarding) {
- if (currentStep === 4) {
- const nextStep = 5;
- setCurrentStep(nextStep);
- localStorage.setItem(ONBOARDING_STORAGE, JSON.stringify({ step: nextStep }));
- }
- if (currentStep === 9) {
- const nextStep = 10;
- setCurrentStep(nextStep);
- localStorage.setItem(ONBOARDING_STORAGE, JSON.stringify({ step: nextStep }));
- }
- }
- };
-
- const forkFile = () => {
- const forkName = getForkName(widgetName);
- const forkPath = nameToPath(Filetype.Widget, forkName);
- const forkedFile = filesObject[JSON.stringify(path)];
- const newFile = {
- ...forkedFile,
- ...forkPath,
- codeDraft: '',
- isDraft: false,
- changesMade: true,
- savedOnChain: false,
- new: false,
- loading: false,
- };
- addFile(newFile);
- updateCodeLocalStorage(forkPath, newFile.codeLocalStorage, cache);
- setRenderCode(null);
- selectFile(forkPath);
-
- if (onboarding) {
- if (currentStep === 1) {
- const nextStep = currentStep + 1;
- setCurrentStep(nextStep);
- localStorage.setItem(ONBOARDING_STORAGE, JSON.stringify({ step: nextStep }));
- }
- }
- };
-
- const createFile = (type) => {
- const newCode = getDefaultCode(type);
- const files = Object.values(filesObject).map((file) => ({
- type: file.type,
- name: file.name,
- }));
-
- const newName = generateNewName(type, files).name;
-
- const onboardingId = onboarding && 'near';
- const src = getSrcByNameOrPath(newName, onboardingId || signedAccountId, type);
- const path = toPath(type, newName);
-
- const newFile = {
- ...fileObjectDefault,
- ...path,
- src,
- type,
- name: newName,
- codeMain: '',
- codeDraft: '',
- codeLocalStorage: newCode,
- codeVisible: newCode,
- isDraft: false,
- changesMade: true,
- savedOnChain: false,
- new: false,
- };
-
- const newPath = fileToPath(newFile);
-
- addFile(newFile);
- updateCodeLocalStorage(newPath, newCode, cache);
- setRenderCode(null);
- selectFile(newPath);
- };
-
- // possibly unused
- const reloadFile = () => {
- console.log('reloadFile which is never called');
- const onboardingPath = onboardingComponents.starter;
- selectFile(onboardingPath);
- setMainLoader(false);
- loadAndOpenFile('near/widget/Onboarding.Starter', Filetype.Widget);
- };
-
- const handleCommit = () => {
- loadAndOpenFile(lastPath.name, Filetype.Widget);
- };
-
- // onboarding
- const refs = generateRefs();
- const refEditor = useRef();
- const refSearch = useRef();
-
- useEffect(() => {
- setCurrentStep(getStepLocalStorage().step);
- }, []);
-
- useEffect(() => {
- setDisable(onboarding ? onboardingDisable : {});
- }, [onboarding]);
-
- const handleExitOnboarding = () => {
- setCurrentStep(0);
- router.replace('/sandbox');
- };
-
- useEffect(() => {
- const pathArr = router.asPath.split('/');
- if (onboarding && pathArr[2] === 'start') {
- setCurrentStep(0);
- router.replace('/onboarding');
- }
- }, [router, onboarding]);
-
- useEffect(() => {
- ls.set(WidgetPropsKey, widgetProps);
- try {
- const parsedWidgetProps = JSON.parse(widgetProps);
- setParsedWidgetProps(parsedWidgetProps);
- setPropsError(null);
- } catch (e) {
- setParsedWidgetProps({});
- setPropsError(e.message);
- recordHandledError({ scope: 'setting component props within the sandbox editor', message: e.message || e });
- }
- }, [widgetProps]);
-
- useEffect(() => {
- if (!cache || !near) {
- return;
- }
- firstLoad();
- }, [cache, firstLoad, near]);
-
- // if (!shouldRender) return
-
-
-
-
- ({ metadata, accountId, widgetName }), [metadata, accountId, widgetName])}
- />
-
-
-
-
- {onboarding ||
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
- );
-};
-
-export default Search;
diff --git a/src/components/sandbox/TabEditor/index.js b/src/components/sandbox/TabEditor/index.js
deleted file mode 100644
index c00b0b451..000000000
--- a/src/components/sandbox/TabEditor/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import Editor from '@monaco-editor/react';
-import React from 'react';
-
-import { Tab } from '../utils/const';
-
-const TabEditor = ({
- tab,
- // codeVisible,
- widgetPath,
- changeCode,
- path,
- reformat,
- refs,
- refEditor,
- filesObject,
-}) => {
- const jpath = JSON.stringify(path);
- const codeVisible = filesObject[jpath]?.codeVisible;
-
- return (
-
-
-
-
-
-
-
-
-
- {/* We use the component search widget as a VM entry point to add a TOS check wrapper.
- It does not need to be this component, just some ({
- extraButtons: ({ widgetName, widgetPath, onHide }) => (
- {`Open "${widgetName}" component in the editor`}}
- >
-
-
- ),
- }),
- }}
- />
-
-
-
- );
-};
-
-export default TabEditor;
diff --git a/src/components/sandbox/TabMetadata/index.js b/src/components/sandbox/TabMetadata/index.js
deleted file mode 100644
index 88594421d..000000000
--- a/src/components/sandbox/TabMetadata/index.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { useMemo } from 'react';
-
-import { VmComponent } from '@/components/vm/VmComponent';
-
-import { Tab } from '../utils/const';
-
-const TabMetadata = ({ tab, widgets, jpath, widgetPath, setMetadata }) => (
-
-
-
-
-
-
-
- changeCode(path, code)}
- wrapperProps={{
- onBlur: () => reformat(path, codeVisible),
- }}
- />
-
-
-
-
-);
-
-export default TabMetadata;
diff --git a/src/components/sandbox/TabProps/index.js b/src/components/sandbox/TabProps/index.js
deleted file mode 100644
index 247c5cde4..000000000
--- a/src/components/sandbox/TabProps/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Editor from '@monaco-editor/react';
-import React, { useCallback } from 'react';
-
-import { recordHandledError } from '@/utils/analytics';
-
-import { Tab } from '../utils/const';
-
-const TabProps = ({ tab, widgetProps, setWidgetProps, propsError }) => {
- const reformatProps = useCallback(
- (props) => {
- try {
- const formattedProps = JSON.stringify(JSON.parse(props), null, 2);
- setWidgetProps(formattedProps);
- } catch (e) {
- console.log(e);
- recordHandledError({ scope: 'sandbox reformatProps', message: e.message || e });
- }
- },
- [setWidgetProps],
- );
-
- return (
-
- ({
- widgetPath,
- onChange: setMetadata,
- }),
- [setMetadata, widgetPath],
- )}
- />
-
-
-
- );
-};
-
-export default TabProps;
diff --git a/src/components/sandbox/Tabs/index.js b/src/components/sandbox/Tabs/index.js
deleted file mode 100644
index 9dd9f1759..000000000
--- a/src/components/sandbox/Tabs/index.js
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Layout, Tab } from '../utils/const';
-
-const TabButton = styled.button`
- &.active {
- isolation: isolate;
- }
-`;
-
-const Tabs = ({ isModule, tab, setTab, widgets, layout, setRenderCode, filesObject, path }) => {
- const code = filesObject[JSON.stringify(path)]?.codeVisible;
-
- return (
-
- setWidgetProps(props)}
- wrapperProps={{
- onBlur: () => reformatProps(widgetProps),
- }}
- />
-
- ^^ Props for debugging (in JSON)
- {propsError && {propsError}}
-
-
- );
-};
-
-export default Tabs;
diff --git a/src/components/sandbox/Welcome/MainLoader.js b/src/components/sandbox/Welcome/MainLoader.js
deleted file mode 100644
index 8e2451b37..000000000
--- a/src/components/sandbox/Welcome/MainLoader.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-
-export default function MainLoader({ mainLoader }) {
- return (
- mainLoader && (
-
- )
- );
-}
diff --git a/src/components/sandbox/Welcome/index.js b/src/components/sandbox/Welcome/index.js
deleted file mode 100644
index e41fb5842..000000000
--- a/src/components/sandbox/Welcome/index.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import Image from 'next/image';
-import { useRouter } from 'next/router';
-import React from 'react';
-import styled from 'styled-components';
-
-import Arrow from '../OnBoarding/icons/arrow.svg';
-import Point1 from '../OnBoarding/icons/point-1.svg';
-import Point2 from '../OnBoarding/icons/point-2.svg';
-import { Filetype, ModalTypes } from '../utils/const';
-
-const ButtonGetStarted = styled.button`
- margin-top: 20px;
- width: 100%;
- height: 48px;
- background: #63e3a4;
- border: 0.5px solid #37cd83;
- border-radius: 50px;
- font-weight: 600;
- font-size: 16px;
- line-height: 150%;
- text-align: center;
-
- :hover {
- opacity: 0.9;
- }
-
- &.outlined {
- background: #fff;
- border: 0.5px solid #37cd83;
- }
-`;
-
-const Title = styled.h4`
- color: #1b1b18;
- font-weight: 700;
-
- &.second {
- margin-top: 80px;
- }
-`;
-
-const Tag = styled.div`
- border: 1px solid #e3e3e0;
- border-radius: 4px;
- box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06);
- height: 32px;
- line-height: 32px;
- padding: 0 12px;
- margin-right: 10px;
- color: #706f6c;
- font-size: 12px;
-
- img {
- margin: -4px 4px 0 0;
- }
-`;
-
-const Desc = styled.div`
- margin-top: 10px;
-`;
-
-const Welcome = ({ setShowModal, createFile, showEditor }) => {
- const router = useRouter();
-
- const handleNew = (type) => {
- createFile(type);
- setShowModal();
- };
-
- const handleSandbox = () => {
- router.push('/onboarding/start');
- };
-
- if (showEditor) {
- return null;
- }
-
- return (
- -
- {isModule && (
-
-
-
setTab(Tab.Editor)} - > - Module - -
- )}
- {isModule || (
- <>
- -
-
setTab(Tab.Editor)} - > - Component - -
- -
-
setTab(Tab.Props)} - > - Props - -
- {widgets.widgetMetadataEditor && (
- -
-
setTab(Tab.Metadata)} - > - Metadata - -
- )}
- {/* remove, and add show preview button on the right column */}
- {layout === Layout.Tabs && (
- -
-
{ - setRenderCode(code); - setTab(Tab.Widget); - }} - > - Component Preview - -
- )}
-
- )}
-
-
- );
-};
-
-export default Welcome;
diff --git a/src/components/sandbox/css/MainWrapper.js b/src/components/sandbox/css/MainWrapper.js
deleted file mode 100644
index a85a7e3f3..000000000
--- a/src/components/sandbox/css/MainWrapper.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import styled from 'styled-components';
-
-export default styled.div`
- position: relative;
-
- .glow {
- -webkit-animation: glowing 1000ms infinite;
- -moz-animation: glowing 1000ms infinite;
- -o-animation: glowing 1000ms infinite;
- animation: glowing 1000ms infinite;
-
- border-radius: 6px;
-
- @-webkit-keyframes glowing {
- 0% {
- border-color: #0d6efd;
- -webkit-box-shadow: 0 0 3px #0d6efd;
- }
- 50% {
- border-color: #0d6efd;
- -webkit-box-shadow: 0 0 15px #0d6efd;
- }
- 100% {
- border-color: #0d6efd;
- -webkit-box-shadow: 0 0 3px #0d6efd;
- }
- }
- @keyframes glowing {
- 0% {
- border-color: #0d6efd;
- box-shadow: 0 0 3px #0d6efd;
- }
- 50% {
- border-color: #0d6efd;
- box-shadow: 0 0 15px #0d6efd;
- }
- 100% {
- border-color: #0d6efd;
- box-shadow: 0 0 3px #0d6efd;
- }
- }
- }
-
- .onboardingDisable {
- &::before {
- border: 10px;
- content: '';
- display: block;
- width: 100%;
- height: 100%;
- position: absolute;
- z-index: 10;
- background: white;
- opacity: 0.5;
- }
- }
-`;
diff --git a/src/components/sandbox/index.ts b/src/components/sandbox/index.ts
deleted file mode 100644
index e457fa0f8..000000000
--- a/src/components/sandbox/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Sandbox';
diff --git a/src/components/sandbox/utils/const.js b/src/components/sandbox/utils/const.js
deleted file mode 100644
index 724fd7858..000000000
--- a/src/components/sandbox/utils/const.js
+++ /dev/null
@@ -1,56 +0,0 @@
-export const DISABLE_MODULES = true;
-
-const LsKey = 'social.near:v01:';
-export const EditorLayoutKey = LsKey + 'editorLayout:';
-export const WidgetPropsKey = LsKey + 'widgetProps:';
-
-export const DefaultEditorCode = 'return
- Follow our getting started guided tutorial
-
- We’ll guide you through a basic development workflow to fork, modify, and compose with open web components.
-
-
- Get Started
-
- Welcome to the Component Sandbox!
- setShowModal(ModalTypes.OpenModal)}>
- Open Component
-
- handleNew(Filetype.Widget)}>Create New Component
-
-
-
-
-
-
-
- - Use this sandbox to create, inspect, modify, and compose components to create new experiences on NEAR. -
-Hello World
;';
-export const DefaultEditorModuleCode = 'function square(number) {\n return number * number;\n}\n';
-
-export const getForkName = (name) => `${name}-fork`;
-
-export const Filetype = {
- Widget: 'widget',
- Module: 'module',
-};
-
-export const StorageDomain = {
- page: 'editor',
-};
-
-export const StorageType = {
- Code: 'code',
- Files: 'files',
-};
-
-export const Tab = {
- Editor: 'Editor',
- Props: 'Props',
- Metadata: 'Metadata',
- Widget: 'Widget',
-};
-
-export const Layout = {
- Tabs: 'Tabs',
- Split: 'Split',
-};
-
-export const ModalTypes = {
- RenameModal: 'RenameModal',
- OpenModal: 'OpenModal',
- OpenModuleModal: 'OpenModuleModal',
- AddModal: 'AddModal',
- CreateModal: 'CreateModal',
- SaveDraftModal: 'SaveDraftModal',
-};
-
-export const fileObjectDefault = {
- codeMain: '',
- codeDraft: '',
- codeLocalStorage: '',
- isDraft: false,
- changesMade: false,
- savedOnChain: undefined,
- new: true,
- loading: false,
-};
diff --git a/src/components/sandbox/utils/editor.js b/src/components/sandbox/utils/editor.js
deleted file mode 100644
index ea7052e5e..000000000
--- a/src/components/sandbox/utils/editor.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import {
- DefaultEditorCode,
- DefaultEditorModuleCode,
- fileObjectDefault,
- Filetype,
- StorageDomain,
- StorageType,
-} from './const';
-
-export const toPath = (type, nameOrPath) => {
- const name = nameOrPath.indexOf('/') >= 0 ? nameOrPath.split('/').slice(2).join('/') : nameOrPath;
- return { type, name };
-};
-
-export const generateNewName = (type, files) => {
- for (let i = 0; ; i++) {
- const name = `Untitled-${i}`;
- const path = toPath(type, name);
- if (!files?.find((file) => file.name === name)) {
- return path;
- }
- }
-};
-
-export const getSrcByNameOrPath = (nameOrPath, accountId, type) => {
- return nameOrPath.indexOf('/') >= 0 ? nameOrPath : `${accountId}/${type.toLocaleLowerCase()}/${nameOrPath}`;
-};
-
-export const getDefaultCode = (type) => {
- return type === Filetype.Module ? DefaultEditorModuleCode : DefaultEditorCode;
-};
-
-export const checkChangesMade = (codeMain, codeDraft, code) => {
- let changesMade;
- if (codeDraft) {
- changesMade = codeDraft != code;
- } else if (codeMain) {
- changesMade = codeMain !== code;
- } else if (code) {
- changesMade = true;
- } else {
- changesMade = false;
- }
- return changesMade;
-};
-
-export const getWidgetDetails = (widgetObject) => {
- const codeMain = widgetObject?.[''];
- const codeDraft = widgetObject?.branch?.draft?.[''] || '';
- const isDraft = (!codeDraft && !codeMain) || !!codeDraft;
-
- return {
- codeMain,
- codeDraft,
- isDraft,
- };
-};
-
-export const updateLocalStorage = (newFilesObject, path, cache) => {
- const newFiles = Object.values(newFilesObject).map((file) => ({
- type: file.type || Filetype.Widget,
- name: file.name,
- src: file.src,
- }));
- cache.localStorageSet(
- StorageDomain,
- {
- type: StorageType.Files,
- },
- { files: newFiles, lastPath: path },
- );
-};
-
-export const updateCodeLocalStorage = (path, code, cache) => {
- cache.localStorageSet(
- StorageDomain,
- {
- path,
- type: StorageType.Code,
- },
- {
- code,
- time: Date.now(),
- },
- );
-};
-
-export const nameToPath = (type, name) => ({ type, name });
-
-export const fileToPath = (file = {}) => ({ type: file.type, name: file.name });
-
-export const fileToJpath = (file = {}) => JSON.stringify(fileToPath(file));
-
-export const fileToSrc = (file = {}, accountId) => `${accountId}/${file.type}/${file.name}/**`;
-
-export const createFilesObject = (files = []) =>
- files.reduce(
- (x, file) => ({
- ...x,
- [fileToJpath(file)]: {
- ...file,
- ...fileObjectDefault,
- },
- }),
- {},
- );
diff --git a/src/components/sandbox/utils/onboarding.js b/src/components/sandbox/utils/onboarding.js
deleted file mode 100644
index f68d98a64..000000000
--- a/src/components/sandbox/utils/onboarding.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, { useRef } from 'react';
-
-import Step1 from '../OnBoarding/Step1';
-import Step2 from '../OnBoarding/Step2';
-import Step3 from '../OnBoarding/Step3';
-import Step4 from '../OnBoarding/Step4';
-import Step5 from '../OnBoarding/Step5';
-import Step6 from '../OnBoarding/Step6';
-import Step7 from '../OnBoarding/Step7';
-import Step8 from '../OnBoarding/Step8';
-import Step9 from '../OnBoarding/Step9';
-import Step10 from '../OnBoarding/Step10';
-
-export const onboardingComponents = {
- starter: {
- type: 'widget',
- name: 'Onboarding.Starter',
- src: 'near/widget/Onboarding.Starter',
- },
- starterFork: {
- type: 'widget',
- name: 'Onboarding.Starter-fork',
- src: 'near/widget/Onboarding.Starter-fork',
- },
-};
-
-export const onboardingDisable = {
- search: true,
- fileTab: true,
- openCreateButton: true,
- renameButton: true,
- publishDraftAsMainButton: true,
- onboardingPublishButton: true,
- publishButton: true,
- saveDraftButton: true,
- forkButton: true,
- renderPreviewButton: true,
- openInNewTabButton: true,
- changeViewButton: true,
-};
-
-export const ONBOARDING_STORAGE = 'onboarding-v0';
-
-export const onboardingSteps = {
- step1: {
- component: