mirror
/
moonstream
kopia lustrzana https://github.com/bugout-dev/moonstream
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Merge pull request #492 from bugout-dev/improve-flow-diagram 

Flow diagram improvement
pull/517/head
Neeraj Kashyap 2021-12-23 09:54:49 -08:00 zatwierdzone przez GitHub
rodzic 2419d95f5b 08580fcb1c
commit 69aca2fc2f
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
1 zmienionych plików z 141 dodań i 186 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

327
frontend/src/components/SchematicPlayground.js
Wyświetl plik

@ -1,9 +1,9 @@
import React, { useRef } from "react";
import { Box, Button, useBreakpointValue } from "@chakra-ui/react";
import { Box, useBreakpointValue, Image } from "@chakra-ui/react";
import DragOnGrid from "./DragOnGrid";
import Xarrow from "react-xarrows";
const SchematicPlayground = () => {
// create an instance of the engine with all the defaults
const gridCellSize = useBreakpointValue({
base: 24,
sm: 32,
@ -17,15 +17,11 @@ const SchematicPlayground = () => {
const ref3 = useRef(null);
const ref4 = useRef(null);
const ref5 = useRef(null);
const ref6 = useRef(null);
const ref7 = useRef(null);
const ref8 = useRef(null);
if (!gridCellSize) return "";
return (
<>
<Box
h={`${(gridCellSize * 5 + 1).toString()}` + `px`}
// h={`301px`}
w="100%"
bgColor="white"
bgSize={`${(gridCellSize / 6).toString() + "px"} ${
@ -41,36 +37,49 @@ const SchematicPlayground = () => {
linear-gradient(to bottom, #dee3ea 1px, transparent 1px)`}
maxW={`${(gridCellSize * 11 + 1).toString()}` + `px`}
placeSelf="center"
display="block"
>
<DragOnGrid
ref={ref4}
ref={ref1}
gridStep={gridCellSize}
defaultPosition={{ x: 5, y: 2 }}
>
<Button
<Box
m={0}
ref={ref1}
p={0}
borderRadius="sm"
ref={ref4}
className="handle"
minW={`${gridCellSize.toString}` + `px`}
minH={`${gridCellSize.toString}` + `px`}
fontSize={(gridCellSize / 4).toString() + `px`}
boxSize={`${gridCellSize.toString()}` + "px"}
borderStyle="inset"
bg="green.900"
color="white"
textAlign="center"
bg="transparent"
zIndex={10}
>
MSTR
</Button>
<Image
m={0}
ref={ref1}
p={0}
pointerEvents="none"
borderRadius="sm"
minW={`${gridCellSize.toString}` + `px`}
minH={`${gridCellSize.toString}` + `px`}
fontSize={(gridCellSize / 4).toString() + `px`}
boxSize={`${gridCellSize.toString()}` + "px"}
bg="blue.900"
color="white"
textAlign="center"
src={`https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/Logo.png`}
></Image>
</Box>
</DragOnGrid>
<DragOnGrid
ref={ref2}
gridStep={gridCellSize}
defaultPosition={{ x: 4, y: 0 }}
defaultPosition={{ x: 0, y: -1 }}
>
<Button
<Box
m={0}
ref={ref2}
p={0}
@ -80,161 +89,136 @@ const SchematicPlayground = () => {
minH={`${gridCellSize.toString}` + `px`}
fontSize={(gridCellSize / 4).toString() + `px`}
boxSize={`${gridCellSize.toString()}` + "px"}
bg="blue.900"
color="white"
textAlign="center"
bg="transparent"
zIndex={10}
bgColor="red.900"
>
DEX
</Button>
<Image
m={0}
ref={ref2}
p={0}
pointerEvents="none"
borderRadius="sm"
minW={`${gridCellSize.toString}` + `px`}
minH={`${gridCellSize.toString}` + `px`}
fontSize={(gridCellSize / 4).toString() + `px`}
boxSize={`${gridCellSize.toString()}` + "px"}
bg="red.900"
color="white"
textAlign="center"
src={`https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/NFT.png`}
></Image>
</Box>
</DragOnGrid>
<DragOnGrid
ref={ref3}
gridStep={gridCellSize}
defaultPosition={{ x: 3, y: 4 }}
defaultPosition={{ x: 8, y: -1 }}
>
<Button
<Box
m={0}
ref={ref3}
p={0}
borderRadius="sm"
className="handle"
minW={`${gridCellSize.toString}` + `px`}
minH={`${gridCellSize.toString}` + `px`}
fontSize={(gridCellSize / 4).toString() + `px`}
boxSize={`${gridCellSize.toString()}` + "px"}
bg="orange.900"
color="white"
textAlign="center"
bg="transparent"
zIndex={10}
bgColor="red.900"
>
NFT
</Button>
</DragOnGrid>
<DragOnGrid
ref={ref1}
gridStep={gridCellSize}
defaultPosition={{ x: -2, y: 1 }}
>
<Button
m={0}
ref={ref1}
p={0}
borderRadius="sm"
className="handle"
minW={`${gridCellSize.toString}` + `px`}
fontSize={(gridCellSize / 4).toString() + `px`}
boxSize={`${gridCellSize.toString()}` + "px"}
bg="red.900"
color="white"
textAlign="center"
zIndex={10}
>
ERC20
</Button>
<Image
m={0}
ref={ref3}
p={0}
pointerEvents="none"
borderRadius="sm"
minW={`${gridCellSize.toString}` + `px`}
minH={`${gridCellSize.toString}` + `px`}
fontSize={(gridCellSize / 4).toString() + `px`}
boxSize={`${gridCellSize.toString()}` + "px"}
bg="orange.900"
color="white"
textAlign="center"
src={`https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/DAO .png`}
></Image>
</Box>
</DragOnGrid>
<DragOnGrid
ref={ref4}
gridStep={gridCellSize}
defaultPosition={{ x: -3, y: 4 }}
defaultPosition={{ x: 3, y: -1 }}
>
<Button
<Box
m={0}
ref={ref4}
p={0}
borderRadius="sm"
className="handle"
minW={`${gridCellSize.toString}` + `px`}
minH={`${gridCellSize.toString}` + `px`}
fontSize={(gridCellSize / 4).toString() + `px`}
boxSize={`${gridCellSize.toString()}` + "px"}
bg="transparent"
zIndex={10}
bgColor="red.900"
>
<Image
m={0}
ref={ref4}
p={0}
pointerEvents="none"
borderRadius="sm"
minW={`${gridCellSize.toString}` + `px`}
minH={`${gridCellSize.toString}` + `px`}
fontSize={(gridCellSize / 4).toString() + `px`}
boxSize={`${gridCellSize.toString()}` + "px"}
bg="green.900"
color="white"
textAlign="center"
src={`https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/ERC 20.png`}
></Image>
</Box>
</DragOnGrid>
<DragOnGrid
ref={ref4}
gridStep={gridCellSize}
defaultPosition={{ x: 9, y: 0 }}
>
<Box
m={0}
ref={ref5}
p={0}
borderRadius="sm"
className="handle"
minW={`${gridCellSize.toString}` + `px`}
minH={`${gridCellSize.toString}` + `px`}
fontSize={(gridCellSize / 4).toString() + `px`}
boxSize={`${gridCellSize.toString()}` + "px"}
bg="red.900"
color="white"
textAlign="center"
bg="transparent"
zIndex={10}
bgColor="red.900"
>
EIP1155
</Button>
</DragOnGrid>
<DragOnGrid
ref={ref4}
gridStep={gridCellSize}
defaultPosition={{ x: 3, y: 3 }}
>
<Button
m={0}
ref={ref6}
p={0}
borderRadius="sm"
className="handle"
minW={`${gridCellSize.toString}` + `px`}
fontSize={(gridCellSize / 4).toString() + `px`}
boxSize={`${gridCellSize.toString()}` + "px"}
bg="blue.900"
color="white"
textAlign="center"
zIndex={10}
>
ERC721
</Button>
</DragOnGrid>
<DragOnGrid
ref={ref4}
gridStep={gridCellSize}
defaultPosition={{ x: 4, y: 4 }}
>
<Button
m={0}
ref={ref7}
p={0}
borderRadius="sm"
className="handle"
minW={`${gridCellSize.toString}` + `px`}
fontSize={(gridCellSize / 4).toString() + `px`}
boxSize={`${gridCellSize.toString()}` + "px"}
bg="green.900"
color="white"
textAlign="center"
zIndex={10}
>
DAO
</Button>
</DragOnGrid>
<DragOnGrid
ref={ref4}
gridStep={gridCellSize}
defaultPosition={{ x: 2, y: 0 }}
>
<Button
m={0}
ref={ref8}
p={0}
borderRadius="sm"
className="handle"
minW={`${gridCellSize.toString}` + `px`}
fontSize={(gridCellSize / 4).toString() + `px`}
boxSize={`${gridCellSize.toString()}` + "px"}
bg="orange.900"
color="white"
textAlign="center"
zIndex={10}
>
Oracle
</Button>
<Image
m={0}
ref={ref5}
p={0}
pointerEvents="none"
borderRadius="sm"
minW={`${gridCellSize.toString}` + `px`}
minH={`${gridCellSize.toString}` + `px`}
fontSize={(gridCellSize / 4).toString() + `px`}
boxSize={`${gridCellSize.toString()}` + "px"}
bg="gray.900"
color="white"
textAlign="center"
src={`https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/crypto+traders.png`}
></Image>
</Box>
</DragOnGrid>
</Box>
<Xarrow
dashness={{
strokeLen: 10,
nonStrokeLen: 15,
animation: 1 * 1,
}}
color="#920050"
path="grid"
gridBreak={(gridCellSize * 0.5).toString() + "px"}
// startAnchor={"top"}
showHead={false}
start={ref3} //can be react ref
end={ref4} //or an id
/>
<Xarrow
dashness={{
strokeLen: 10,
@ -245,50 +229,8 @@ const SchematicPlayground = () => {
path="grid"
gridBreak={(gridCellSize * 0.5).toString() + "px"}
showHead={false}
start={ref2} //can be react ref
end={ref4} //or an id
/>
<Xarrow
dashness={{
strokeLen: 10,
nonStrokeLen: 15,
animation: 1 * 1,
}}
color="#92D0F0"
gridBreak={(gridCellSize * 0.5).toString() + "px"}
path="grid"
// startAnchor={"top"}
showHead={false}
start={ref1} //can be react ref
end={ref4} //or an id
/>
<Xarrow
dashness={{
strokeLen: 10,
nonStrokeLen: 15,
animation: 1 * 1,
}}
color="#92D0F0"
gridBreak={(gridCellSize * 0.5).toString() + "px"}
path="grid"
// startAnchor={"top"}
showHead={false}
start={ref5} //can be react ref
end={ref4} //or an id
/>
<Xarrow
dashness={{
strokeLen: 10,
nonStrokeLen: 15,
animation: 1 * 1,
}}
color="#92D0F0"
gridBreak={(gridCellSize * 0.5).toString() + "px"}
path="grid"
// startAnchor={"top"}
showHead={false}
start={ref6} //can be react ref
end={ref4} //or an id
start={ref1}
end={ref2}
/>
<Xarrow
dashness={{
@ -300,8 +242,8 @@ const SchematicPlayground = () => {
gridBreak={(gridCellSize * 0.5).toString() + "px"}
path="grid"
showHead={false}
start={ref7} //can be react ref
end={ref4} //or an id
start={ref1}
end={ref3}
/>
<Xarrow
dashness={{
@ -313,8 +255,21 @@ const SchematicPlayground = () => {
gridBreak={(gridCellSize * 0.5).toString() + "px"}
path="grid"
showHead={false}
start={ref8} //can be react ref
end={ref4} //or an id
start={ref1}
end={ref4}
/>
<Xarrow
dashness={{
strokeLen: 10,
nonStrokeLen: 15,
animation: 1 * 1,
}}
color="#92D0F0"
gridBreak={(gridCellSize * 0.5).toString() + "px"}
path="grid"
showHead={false}
start={ref1}
end={ref5}
/>
</>
);