Skip to content

Commit

Permalink
Merge branch 'develop' into write-methods
Browse files Browse the repository at this point in the history
  • Loading branch information
henrypalacios authored Nov 15, 2023
2 parents 2c67f0d + 0bcb3ca commit ff9f816
Show file tree
Hide file tree
Showing 14 changed files with 121 additions and 92 deletions.
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
import { useEffect } from 'react'
import { ContractInteractionProps } from '.'
import {
Box,
CircularProgress,
Stack,
Typography,
FormHelperText
} from '@mui/material'
import { Box, Stack, Typography } from '@mui/material'
import { MethodDocumentation } from '../MethodDocumentation'
import { AbiParam } from '@/services/substrate/types'
import { ButtonCall } from './styled'
import { useContractCaller } from '@/hooks/useContractCaller'
import { CopyBlock, atomOneDark } from 'react-code-blocks'
import { getDecodedOutput } from '@/utils/contractExecResult'
import { CopyToClipboardButton, StyledTextField } from '@/view/components'

type Props = React.PropsWithChildren<
Omit<ContractInteractionProps, 'type'> & {
Expand Down Expand Up @@ -49,11 +44,13 @@ export function ReadMethodsForm({
>
<Box minWidth="50%">
<>
{abiParams.length > 0 && <Typography>Message to send</Typography>}
{abiParams.length > 0 && (
<Typography variant="overline">Message to send</Typography>
)}
{children}
</>
<Box display="block">
<Typography variant="caption">Outcome</Typography>
<Typography variant="overline">Outcome</Typography>
</Box>

<Stack direction="row" justifyContent="space-between">
Expand All @@ -65,27 +62,36 @@ export function ReadMethodsForm({
justifyContent: 'center'
}}
>
{caller.isSubmitting ? (
<CircularProgress color="primary" />
) : (
<>
<CopyBlock
text={outcome}
language="text"
theme={atomOneDark}
showLineNumbers={false}
codeBlock={true}
wrapLongLines={true}
<Box
sx={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: '1rem'
}}
>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
}}
>
<StyledTextField placeholder="0" value={outcome} />
<CopyToClipboardButton
id="copy-contract-address"
sx={{ marginLeft: '0.5rem' }}
data={outcome}
/>
{error && (
<FormHelperText error id={`error-${abiMessage.method}`}>
{error}
</FormHelperText>
)}
</>
)}
</Box>
<ButtonCall
isLoading={caller.isSubmitting}
onClick={() => caller.send(inputData)}
>
Recall
</ButtonCall>
</Box>
</Box>
<ButtonCall onClick={() => caller.send(inputData)}>Recall</ButtonCall>
</Stack>
</Box>
<Box sx={{ maxWidth: '45%', minWidth: '40%' }}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,13 @@ export function WriteMethodsForm({
>
<Box minWidth="50%">
<>
{abiParams.length > 0 && <Typography>Message to send</Typography>}
{abiParams.length > 0 && (
<Typography variant="overline">Message to send</Typography>
)}
{children}
</>
<Box display="block">
<Typography variant="caption">Outcome</Typography>
<Typography variant="overline">Outcome</Typography>
</Box>

<Stack direction="row" justifyContent="space-between">
Expand Down
23 changes: 15 additions & 8 deletions src/view/ContractDetailView/ContractInteractionForm/styled.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
import { LoadingButton, LoadingButtonProps } from '@/view/components'
import styled from '@emotion/styled'
import { styled } from '@mui/material/styles'

export const ButtonCall = styled(LoadingButton)<LoadingButtonProps>(() => ({
fontSize: '1rem',
height: '2.5rem',
borderRadius: '1.5rem',
textTransform: 'none',
border: 'none'
}))
export const ButtonCall = styled(LoadingButton)<LoadingButtonProps>(
({ theme }) => ({
fontSize: '1rem',
height: '2.5rem',
borderRadius: '1.5rem',
textTransform: 'none',
border: theme.palette.primary.main,
background: theme.palette.primary.main,
color: theme.palette.common.white,
'& .MuiCircularProgress-root': {
color: theme.palette.common.white
}
})
)
14 changes: 7 additions & 7 deletions src/view/ContractDetailView/ContractsTabInteraction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
import { useContractPromiseFromSource } from '@/hooks/useContractPromise'
import { FallbackSpinner } from '@/components/FallbackSpinner'
import { ContractPromise, Registry } from '@/services/substrate/types'
import { ContractInteractionForm } from './ContractInteractionForm'
import { ContractInteractionForm } from '@/view/ContractDetailView/ContractInteractionForm'

const types: ContractTabType[] = ['Read Contract', 'Write Contract']
const groupedIndex: Record<ContractTabType, keyof GroupedAbiMessages> = {
Expand Down Expand Up @@ -93,8 +93,8 @@ export function ContractsTabInteraction({ userContract }: Props) {
<Box sx={{ width: '100%' }}>
<BasicTabs
options={[
`Read Contract (${sortedAbiMessages.nonMutating.length})`,
`Write Contract (${sortedAbiMessages.mutating.length})`
`Read (${sortedAbiMessages.nonMutating.length})`,
`Write (${sortedAbiMessages.mutating.length})`
]}
onChange={handleChange}
>
Expand All @@ -105,8 +105,8 @@ export function ContractsTabInteraction({ userContract }: Props) {
Learn more about your contract 🔁
</Typography>
<Typography variant="body1">
Let&apos;start to work with your contract displaying each
method.
Explore the smart contract&apos;s data by selecting the
desired information.
</Typography>
</>
) : (
Expand All @@ -115,8 +115,8 @@ export function ContractsTabInteraction({ userContract }: Props) {
Interact with your contract 🔁
</Typography>
<Typography variant="body1">
Let&apos;s start to work with your contract doing different
querys.
Select the method you want to execute and fill in the required
parameters to perform a transaction.
</Typography>
</>
)}
Expand Down
5 changes: 2 additions & 3 deletions src/view/ContractDetailView/MethodDocumentation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,13 @@ export function MethodDocumentation({ abiMessage }: Props) {
borderColor: 'primary.main',
borderRadius: '0.5rem',
borderStyle: 'solid',
p: 2,
bgcolor: 'background.paper'
p: 2
}}
>
<Typography variant="h5" component="h2" gutterBottom>
{abiMessage.method}
</Typography>
<Typography variant="body1">{abiMessage.docs}</Typography>
<Typography variant="caption">{abiMessage.docs}</Typography>
</Box>
)
}
28 changes: 20 additions & 8 deletions src/view/CustomContracts/detail/SkeletonContractDetail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,25 @@ import MainContainer from '@/view/layout/MainContainer'
export function ContractDetailSkeleton() {
return (
<MainContainer>
<Stack direction="row" justifyContent="space-between">
<MySkeleton variant="text" width={200} height={50} />
<MySkeleton variant="text" width={150} height={30} />
</Stack>
<Stack direction="row" spacing={2}>
<MySkeleton variant="text" width={300} height={30} />
<Stack direction="row" width={'100%'} justifyContent="space-between">
<Stack spacing={3}>
<MySkeleton variant="text" width={200} height={60} />
</Stack>
<Stack
direction="row"
width={'100%'}
spacing={3}
display="flex"
alignItems="center"
justifyContent="flex-end"
>
<MySkeleton variant="rounded" width={'22%'} height={35} />
<MySkeleton variant="rounded" width={'22%'} height={35} />
</Stack>
</Stack>
<MySkeleton variant="text" width={400} height={30} />

<Stack direction="row" spacing={2}></Stack>

<Box mt={4}>
<Stack direction="row" width={'100%'} spacing={2}>
Expand All @@ -24,8 +36,8 @@ export function ContractDetailSkeleton() {
</Box>
<Box mt={8}>
<Stack direction="row" width={'100%'} spacing={1}>
<MySkeleton variant="rectangular" width={'25%'} height={60} />
<MySkeleton variant="rectangular" width={'25%'} height={60} />
<MySkeleton variant="rectangular" width={'12%'} height={50} />
<MySkeleton variant="rectangular" width={'12%'} height={50} />
</Stack>
<MySkeleton variant="rectangular" height={350} />
</Box>
Expand Down
2 changes: 1 addition & 1 deletion src/view/components/Accordion/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default function SimpleAccordion({
}

return (
<StyledAccordionContainer mt={8}>
<StyledAccordionContainer mt={6}>
{elements.map(row => (
<Accordion
key={row.id}
Expand Down
12 changes: 1 addition & 11 deletions src/view/components/CodeBlock/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,17 +30,7 @@ export const CodeBlock: React.FC<PropsWithChildren<CodeBlockProps>> = ({
...sx
}}
>
<FormLabel
sx={{
marginTop: '-2em',
zIndex: 2,
position: 'absolute',
fontSize: '0.75em',
width: 'auto'
}}
>
{label}
</FormLabel>
<FormLabel>{label}</FormLabel>
{_children}
</Box>
)
Expand Down
15 changes: 12 additions & 3 deletions src/view/components/FactoryInputArgument/ArgBooleanSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,18 @@ export function ArgBooleanSelect({
return (
<>
<InputLabel>{label}</InputLabel>
<Select value={stringValue} onChange={handleChange} label={label}>
<MenuItem value="true">True</MenuItem>
<MenuItem value="false">False</MenuItem>
<Select
sx={{ color: 'white' }}
value={stringValue}
onChange={handleChange}
label={label}
>
<MenuItem sx={{ color: 'white' }} value="true">
True
</MenuItem>
<MenuItem sx={{ color: 'white' }} value="false">
False
</MenuItem>
</Select>
</>
)
Expand Down
3 changes: 2 additions & 1 deletion src/view/components/FactoryInputArgument/ArgEnum.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export function ArgEnum({
/>
</InputLabel>
<Select
sx={{ color: 'white' }}
labelId="enum-select-label"
value={variantIndex}
onChange={event => setVariantIndex(event.target.value as number)}
Expand All @@ -82,7 +83,7 @@ export function ArgEnum({
}
>
{variants.map(({ name }, index) => (
<MenuItem key={index} value={index}>
<MenuItem sx={{ color: 'white' }} key={index} value={index}>
{name}
</MenuItem>
))}
Expand Down
4 changes: 2 additions & 2 deletions src/view/components/FactoryInputArgument/ArgInputBn.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { TextField } from '@mui/material'
import BN from 'bn.js'
import { useCallback, useState } from 'react'

import { ArgumentComponentProps } from '@/domain/common/substrateInputTypes'
import { getMinMax } from '@/services/substrate/utils'
import { StyledTextField } from '../Input'

type Props = ArgumentComponentProps<BN>

Expand All @@ -30,7 +30,7 @@ export function InputBn({
)

return (
<TextField
<StyledTextField
onChange={handleChange}
placeholder="Input a number"
value={displayValue}
Expand Down
8 changes: 4 additions & 4 deletions src/view/components/FactoryInputArgument/ArgTextField.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { TextField } from '@mui/material'
import { StyledTextField } from '@/view/components'

import { SimpleSpread } from '@/domain/common/utilityTsTypes'

Expand Down Expand Up @@ -30,8 +30,8 @@ export function ArgTextField({
}

return (
<div className={`w-full ${isError ? 'isError' : ''}`}>
<TextField
<>
<StyledTextField
className={`w-full rounded text-sm ${
isDisabled ? 'dark:text-gray-500' : ''
} ${className}`}
Expand All @@ -47,6 +47,6 @@ export function ArgTextField({
fullWidth
/>
{children}
</div>
</>
)
}
10 changes: 6 additions & 4 deletions src/view/components/Tabs/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import Box from '@mui/material/Box'
import Tab from '@mui/material/Tab'
import Tabs from '@mui/material/Tabs'
import * as React from 'react'
import { Box, Typography, Tab, Tabs } from '@mui/material'
import { StyledTabsContainer } from './styled'

interface TabPanelProps {
Expand Down Expand Up @@ -51,7 +49,11 @@ export default function BasicTabs(props: BasicTabsProps) {
<StyledTabsContainer>
<Tabs value={value} onChange={handleChange}>
{props.options.map((option, index) => (
<Tab key={option} label={option} {...a11yProps(index)} />
<Tab
key={option}
label={<Typography variant="h5">{option}</Typography>}
{...a11yProps(index)}
/>
))}
</Tabs>
<CustomTabPanel value={value} index={value}>
Expand Down
Loading

0 comments on commit ff9f816

Please sign in to comment.