Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

update scroll #160

Merged
merged 1 commit into from
May 17, 2023
Merged

update scroll #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4,875 changes: 2,656 additions & 2,219 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

42 changes: 11 additions & 31 deletions src/components/DeveloperIDE/CurrentProject/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,37 +17,17 @@ const CurrentProject = observer(() => {
} = useStore();

return (
<Box>
<Flex
mb="15px"
alignItems="center"
color="#0F0F0F"
fontSize="14px"
cursor="pointer"
bg="#fff"
p="10px 15px"
w="86px"
borderRadius='4px'
onClick={() => {
project.allProjects.onSelect(-1);
project.resetSelectedNames();
}}
>
<ChevronLeftIcon />
<Box ml="10px">Back</Box>
</Flex>
<Flex w="100%" h="calc(100vh - 180px)" overflow={'hidden'} position="relative">
<ToolBar borderRadius="8px" overflowY="auto" />
<Box ml="20px" w="100%" h="100%" p="20px" pb="50px" bg="#fff" boxSizing='content-box' borderRadius="8px" overflow={'auto'}>
{showContent === 'METRICS' && <Metrics />}
{showContent === 'CURRENT_PUBLISHERS' && <Publishers />}
{(showContent === 'CONTRACT_LOGS' || showContent === 'CHAIN_TX' || showContent === 'CHAIN_HEIGHT') && <Triggers />}
{showContent === 'DB_TABLE' && <DBTable />}
{showContent === 'CURRENT_EVENT_LOGS' && <EventLogs />}
{showContent === 'SETTINGS' && <Settings />}
</Box>
</Flex>
</Box>
<Flex w="100%">
<ToolBar borderRadius="8px" overflowY="auto" />
<Box ml="220px" w="100%" p="20px" bg="#fff" boxSizing='content-box' borderRadius="8px">
{showContent === 'METRICS' && <Metrics />}
{showContent === 'CURRENT_PUBLISHERS' && <Publishers />}
{(showContent === 'CONTRACT_LOGS' || showContent === 'CHAIN_TX' || showContent === 'CHAIN_HEIGHT') && <Triggers />}
{showContent === 'DB_TABLE' && <DBTable />}
{showContent === 'CURRENT_EVENT_LOGS' && <EventLogs />}
{showContent === 'SETTINGS' && <Settings />}
</Box>
</Flex>
);
});

Expand Down
2 changes: 1 addition & 1 deletion src/components/DeveloperIDE/DeveloperDBTable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const DeveloperDBTable = () => {
const { w3s } = useStore();

return (
<Flex pos="relative" w="100%" minH={'calc(100vh - 140px)'} >
<Flex pos="relative" w="100%" minH={'calc(100vh - 240px)'} >
<Box minW="200px" minH={'100%'} paddingBottom={'100px'} border="1px solid rgba(230, 230, 230, 0.75)" borderRadius="8px">
<DBTableSideBar />
</Box>
Expand Down
4 changes: 2 additions & 2 deletions src/components/DeveloperIDE/Metrics/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ const Metrics = () => {
}, []);

return (
<Box w="100%" paddingBottom={'100px'}>
<Flex mb="10px" align="center" bg="#fff" borderRadius="8px" overflowY="auto">
<Box w="100%">
<Flex mb="10px" align="center" bg="#fff" borderRadius="8px">
<Flex
p="10px 20px"
alignItems="center"
Expand Down
4 changes: 2 additions & 2 deletions src/components/DeveloperIDE/Settings/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ const Settings = () => {
}, [store.curApplet]);

return (
<Box w="100%" paddingBottom={'100px'}>
<Flex mt="20px" justifyContent="space-between">
<Box w="100%">
<Flex justifyContent="space-between">
<Box fontSize="18px" fontWeight={700}>
General
</Box>
Expand Down
235 changes: 124 additions & 111 deletions src/components/DeveloperIDE/ToolBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,125 +14,138 @@ const ToolBar = (props: ToolBar) => {
const { w3s } = useStore();

return (
<Flex minW="200px" h="100%" direction="column" align="center" p="16px" bg="#fff" {...props}>
<Box position={'fixed'} h="calc(100vh - 100px)" overflow={'auto'}>
<Flex
mb="20px"
mt="8px"
mb="15px"
alignItems="center"
color="#7A7A7A"
color="#0F0F0F"
fontSize="14px"
cursor="pointer"
>
{w3s.project.curProject?.name}
</Flex>
<Flex
w="100%"
p="18px"
alignItems="center"
cursor="pointer"
color="rgba(15, 15, 15, 0.75)"
borderRadius="8px"
{...getSelectedStyles(w3s.showContent === 'METRICS')}
onClick={(e) => {
w3s.showContent = 'METRICS';
}}
>
<Icon as={BiBarChartSquare} boxSize={6} />
<Box ml="15px" fontSize="16px">
Metrics
</Box>
</Flex>
<Flex
w="100%"
mt="16px"
p="18px"
alignItems="center"
cursor="pointer"
color="rgba(15, 15, 15, 0.75)"
borderRadius="8px"
{...getSelectedStyles(w3s.showContent === 'CURRENT_PUBLISHERS')}
onClick={(e) => {
w3s.showContent = 'CURRENT_PUBLISHERS';
}}
>
<Icon as={TbDeviceDesktop} boxSize={6} />
<Box ml="15px" fontSize="16px">
Devices
</Box>
</Flex>
<Flex
w="100%"
mt="16px"
p="18px"
alignItems="center"
cursor="pointer"
color="rgba(15, 15, 15, 0.75)"
borderRadius="8px"
{...getSelectedStyles(w3s.showContent === 'CONTRACT_LOGS' || w3s.showContent === 'CHAIN_TX' || w3s.showContent === 'CHAIN_HEIGHT')}
onClick={(e) => {
w3s.showContent = 'CONTRACT_LOGS';
bg="#fff"
p="10px 15px"
w="86px"
borderRadius="4px"
onClick={() => {
w3s.project.allProjects.onSelect(-1);
w3s.project.resetSelectedNames();
}}
>
<Icon as={TbHandClick} boxSize={6} />
<Box ml="15px" fontSize="16px">
Triggers
</Box>
<ChevronLeftIcon />
<Box ml="10px">Back</Box>
</Flex>
<Flex
w="100%"
mt="16px"
p="18px"
alignItems="center"
cursor="pointer"
color="rgba(15, 15, 15, 0.75)"
borderRadius="8px"
{...getSelectedStyles(w3s.showContent === 'DB_TABLE')}
onClick={(e) => {
w3s.showContent = 'DB_TABLE';
}}
>
<Icon as={HiOutlineDatabase} boxSize={6} />
<Box ml="15px" fontSize="16px">
Data
</Box>
</Flex>
<Flex
w="100%"
mt="16px"
p="18px"
alignItems="center"
cursor="pointer"
color="rgba(15, 15, 15, 0.75)"
borderRadius="8px"
{...getSelectedStyles(w3s.showContent === 'CURRENT_EVENT_LOGS')}
onClick={(e) => {
w3s.showContent = 'CURRENT_EVENT_LOGS';
}}
>
<Icon as={AiOutlineFileText} boxSize={6} />
<Box ml="15px" fontSize="16px">
Log
</Box>
</Flex>
<Flex
w="100%"
mt="16px"
p="18px"
alignItems="center"
cursor="pointer"
color="rgba(15, 15, 15, 0.75)"
borderRadius="8px"
{...getSelectedStyles(w3s.showContent === 'SETTINGS')}
onClick={(e) => {
w3s.showContent = 'SETTINGS';
}}
>
<Icon as={TbSettings} boxSize={6} />
<Box ml="15px" fontSize="16px">
Settings
</Box>
<Flex minW="200px" direction="column" align="center" p="16px" bg="#fff" {...props}>
<Flex mb="20px" mt="8px" alignItems="center" color="#7A7A7A" fontSize="14px" cursor="pointer">
{w3s.project.curProject?.name}
</Flex>
<Flex
w="100%"
p="18px"
alignItems="center"
cursor="pointer"
color="rgba(15, 15, 15, 0.75)"
borderRadius="8px"
{...getSelectedStyles(w3s.showContent === 'METRICS')}
onClick={(e) => {
w3s.showContent = 'METRICS';
}}
>
<Icon as={BiBarChartSquare} boxSize={6} />
<Box ml="15px" fontSize="16px">
Metrics
</Box>
</Flex>
<Flex
w="100%"
mt="16px"
p="18px"
alignItems="center"
cursor="pointer"
color="rgba(15, 15, 15, 0.75)"
borderRadius="8px"
{...getSelectedStyles(w3s.showContent === 'CURRENT_PUBLISHERS')}
onClick={(e) => {
w3s.showContent = 'CURRENT_PUBLISHERS';
}}
>
<Icon as={TbDeviceDesktop} boxSize={6} />
<Box ml="15px" fontSize="16px">
Devices
</Box>
</Flex>
<Flex
w="100%"
mt="16px"
p="18px"
alignItems="center"
cursor="pointer"
color="rgba(15, 15, 15, 0.75)"
borderRadius="8px"
{...getSelectedStyles(w3s.showContent === 'CONTRACT_LOGS' || w3s.showContent === 'CHAIN_TX' || w3s.showContent === 'CHAIN_HEIGHT')}
onClick={(e) => {
w3s.showContent = 'CONTRACT_LOGS';
}}
>
<Icon as={TbHandClick} boxSize={6} />
<Box ml="15px" fontSize="16px">
Triggers
</Box>
</Flex>
<Flex
w="100%"
mt="16px"
p="18px"
alignItems="center"
cursor="pointer"
color="rgba(15, 15, 15, 0.75)"
borderRadius="8px"
{...getSelectedStyles(w3s.showContent === 'DB_TABLE')}
onClick={(e) => {
w3s.showContent = 'DB_TABLE';
}}
>
<Icon as={HiOutlineDatabase} boxSize={6} />
<Box ml="15px" fontSize="16px">
Data
</Box>
</Flex>
<Flex
w="100%"
mt="16px"
p="18px"
alignItems="center"
cursor="pointer"
color="rgba(15, 15, 15, 0.75)"
borderRadius="8px"
{...getSelectedStyles(w3s.showContent === 'CURRENT_EVENT_LOGS')}
onClick={(e) => {
w3s.showContent = 'CURRENT_EVENT_LOGS';
}}
>
<Icon as={AiOutlineFileText} boxSize={6} />
<Box ml="15px" fontSize="16px">
Log
</Box>
</Flex>
<Flex
w="100%"
mt="16px"
p="18px"
alignItems="center"
cursor="pointer"
color="rgba(15, 15, 15, 0.75)"
borderRadius="8px"
{...getSelectedStyles(w3s.showContent === 'SETTINGS')}
onClick={(e) => {
w3s.showContent = 'SETTINGS';
}}
>
<Icon as={TbSettings} boxSize={6} />
<Box ml="15px" fontSize="16px">
Settings
</Box>
</Flex>
</Flex>
</Flex>
</Box>
);
};

Expand Down
2 changes: 1 addition & 1 deletion src/components/DeveloperIDE/Triggers/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const Triggers = () => {
const [tabIndex, setTabIndex] = useState(0);

return (
<Box w="calc(100vw - 300px)" paddingBottom={'100px'}>
<Box w="calc(100vw - 300px)">
<Flex alignItems="center">
<Box fontSize="18px" color="#0F0F0F" fontWeight={700}>
Event Source
Expand Down
4 changes: 2 additions & 2 deletions src/components/DeveloperIDE/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ const DeveloperIDE = observer(() => {
} = useStore();

return (
<Box w="100vw" h="100vh" overflow="hidden" bg="#F8F8FA">
<Box w="100vw" h="100vh" overflow="auto" bg="#F8F8FA" paddingTop={'60px'}>
<Header />
<Box mt="80px" w="100%" px="30px">
<Box w="100%" p="20px">
{w3s.currentHeaderTab === 'PROJECTS' && <>{w3s.project.curProject ? <CurrentProject /> : <Projects />}</>}
{w3s.currentHeaderTab === 'LABS' && <Labs />}
{w3s.currentHeaderTab === 'FLOW' && <Flow />}
Expand Down
2 changes: 1 addition & 1 deletion src/components/IDE/EventLogs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const EventLogs = observer(() => {
const { loading, logs } = store;

return (
<Box pos="relative" bg="#000" borderRadius="8px" paddingBottom={'50px'}>
<Box pos="relative" bg="#000" borderRadius="8px">
<Icon
as={AiOutlineClear}
pos="absolute"
Expand Down
2 changes: 1 addition & 1 deletion src/components/JSONMetricsView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export interface JSONMetricsView {

export const JSONMetricsView = ({ data }: { data: JSONMetricsView[] }) => {
return (
<Stack h="calc(100vh - 100px)" spacing={6} p="10px">
<Stack minH="70vh" spacing={6} p="10px">
{data.map((item) => {
switch (item.type) {
case 'ProgressCard':
Expand Down
2 changes: 1 addition & 1 deletion src/pages/api/w3bapp/[...slug].ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
});
res.status(axiosResponse.status).json(axiosResponse.data);
} catch (error) {
res.status(error.response.status).send(error.response.data);
res.status(error.response?.status).send(error.response?.data);
}
};

Expand Down