Skip to content

Commit

Permalink
Merge c155150 into 0307e4f
Browse files Browse the repository at this point in the history
  • Loading branch information
@mprasanjith
mprasanjith committed Aug 22, 2022
2 parents 0307e4f + c155150 commit 534bfc6
Show file tree
Hide file tree
Showing 29 changed files with 411 additions and 253 deletions.
4 changes: 0 additions & 4 deletions src/Components/ActionsBuilder/Action/Action.styled.tsx
View file
Expand Up @@ -92,10 +92,6 @@ export const CardActions = styled.div`
align-items: center;
`;

export const ActionSummaryWrapper = styled.div`
margin-bottom: 10px;
`;

export const SectionHeader = styled(Box)`
margin-bottom: 0.5rem;
`;
Expand Down
22 changes: 6 additions & 16 deletions src/Components/ActionsBuilder/Action/Action.tsx
View file
Expand Up @@ -10,7 +10,6 @@ import { useDecodedCall } from 'hooks/Guilds/contracts/useDecodedCall';
import { useMemo, useState } from 'react';
import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
import {
ActionSummaryWrapper,
CardActions,
CardHeader,
CardLabel,
Expand All @@ -25,7 +24,6 @@ import {
} from './Action.styled';
import { ConfirmRemoveActionModal } from '../ConfirmRemoveActionModal';
import { ActionModal } from 'Components/ActionsModal';
import useBigNumberToString from 'hooks/Guilds/conversions/useBigNumberToString';

interface ActionViewProps {
call?: Call;
Expand Down Expand Up @@ -69,8 +67,6 @@ export const ActionRow: React.FC<ActionViewProps> = ({

const [isEditActionModalOpen, setIsEditActionModalOpen] = useState(false);

const parsedValueToString = useBigNumberToString(decodedCall?.value, 18);

// Get renderable components for the action
const InfoLine = getInfoLineView(decodedCall?.callType);
const ActionSummary = getSummaryView(decodedCall?.callType);
Expand All @@ -83,7 +79,10 @@ export const ActionRow: React.FC<ActionViewProps> = ({
const cardStatus: CardStatus = useMemo(() => {
if (isEditable && isDragging) return CardStatus.dragging;

if (parsedValueToString !== '0.0') return CardStatus.warning;
const hasValueTransferOnContractCall =
decodedCall?.args && decodedCall?.value?.gt(0);
if (!decodedCall || hasValueTransferOnContractCall)
return CardStatus.warning;

if (!decodedAction?.simulationResult) return CardStatus.normal;

Expand All @@ -92,12 +91,7 @@ export const ActionRow: React.FC<ActionViewProps> = ({
}

return CardStatus.normal; // default return so ESLint doesn't complain
}, [
decodedAction?.simulationResult,
isEditable,
isDragging,
parsedValueToString,
]);
}, [decodedCall, decodedAction?.simulationResult, isEditable, isDragging]);

return (
<CardWrapperWithMargin
Expand Down Expand Up @@ -157,11 +151,7 @@ export const ActionRow: React.FC<ActionViewProps> = ({
</>
)}
<DetailWrapper>
{ActionSummary && (
<ActionSummaryWrapper>
<ActionSummary decodedCall={decodedCall} />
</ActionSummaryWrapper>
)}
{ActionSummary && <ActionSummary decodedCall={decodedCall} />}
{decodedCall ? (
<CallDetails
decodedCall={decodedCall}
Expand Down
4 changes: 4 additions & 0 deletions src/Components/ActionsBuilder/CallDetails/CallDetails.styled.tsx
View file
Expand Up @@ -30,6 +30,10 @@ export const ParamDetail = styled(Box)`
overflow-wrap: break-word;
`;

export const DetailsSection = styled(Box)`
padding-top: 0.75rem;
`;

export const DetailsButton = styled(Button)<{ isExpanded: boolean }>`
font-size: 12px;
margin: 0;
Expand Down
84 changes: 44 additions & 40 deletions src/Components/ActionsBuilder/CallDetails/CallDetails.tsx
View file
Expand Up @@ -10,12 +10,14 @@ import { Divider } from 'old-components/Guilds/common/Divider';
import {
ActionParamRow,
DetailsButton,
DetailsSection,
ParamDetail,
ParamTag,
ParamTitleRow,
ParamTitleTag,
} from './CallDetails.styled';
import { useTranslation } from 'react-i18next';
import { SupportedAction } from '../types';

export const CallDetails: React.FC<ActionViewProps> = ({
decodedCall,
Expand Down Expand Up @@ -63,7 +65,7 @@ export const CallDetails: React.FC<ActionViewProps> = ({
return (
<>
{!!approveSpendTokens && (
<Box margin="0 0 0.5rem">
<Box>
<DetailsButton
onClick={() => setIsApprovalExpanded(!isApprovalExpanded)}
isExpanded={isApprovalExpanded}
Expand Down Expand Up @@ -116,47 +118,49 @@ export const CallDetails: React.FC<ActionViewProps> = ({
</Box>
)}

<Box>
<DetailsButton
onClick={() => setIsExpanded(!isExpanded)}
isExpanded={isExpanded}
variant={'secondary'}
>
{decodedCall?.function?.name} (
{decodedCall?.function?.inputs.map((param, index, params) => (
<span key={index}>
{index > 0 && <span>, </span>}
<ParamTag
key={index}
color={
isExpanded
? theme?.colors?.params?.[index]
: theme?.colors?.text
}
>
{param?.type}
</ParamTag>
</span>
))}
)
</DetailsButton>
{decodedCall.callType !== SupportedAction.NATIVE_TRANSFER && (
<DetailsSection>
<DetailsButton
onClick={() => setIsExpanded(!isExpanded)}
isExpanded={isExpanded}
variant={'secondary'}
>
{decodedCall?.function?.name} (
{decodedCall?.function?.inputs.map((param, index) => (
<span key={index}>
{index > 0 && <span>, </span>}
<ParamTag
key={index}
color={
isExpanded
? theme?.colors?.params?.[index]
: theme?.colors?.text
}
>
{param?.type}
</ParamTag>
</span>
))}
)
</DetailsButton>

{isExpanded &&
decodedCall?.function?.inputs?.map((param, index) => (
<ActionParamRow key={index}>
<ParamTitleRow>
<ParamTitleTag color={theme?.colors?.params?.[index]}>
{param.name} <em>({param.type})</em>
</ParamTitleTag>
{param.type === 'bytes' && (
<Button variant="secondary">{t('decode')}</Button>
)}
</ParamTitleRow>
{isExpanded &&
decodedCall?.function?.inputs?.map((param, index) => (
<ActionParamRow key={index}>
<ParamTitleRow>
<ParamTitleTag color={theme?.colors?.params?.[index]}>
{param.name} <em>({param.type})</em>
</ParamTitleTag>
{param.type === 'bytes' && (
<Button variant="secondary">{t('decode')}</Button>
)}
</ParamTitleRow>

{renderByParamType(param.type, decodedCall?.args?.[param.name])}
</ActionParamRow>
))}
</Box>
{renderByParamType(param.type, decodedCall?.args?.[param.name])}
</ActionParamRow>
))}
</DetailsSection>
)}
</>
);
};
Expand Down
41 changes: 21 additions & 20 deletions src/Components/ActionsBuilder/CallDetails/__snapshots__/CallDetails.test.tsx.snap
View file
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`CallDetails Should match 1`] = `
.c1 {
.c2 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
Expand All @@ -26,21 +26,21 @@ exports[`CallDetails Should match 1`] = `
width: auto;
}
.c1:disabled {
.c2:disabled {
color: initial;
opacity: 0.4;
cursor: auto;
}
.c1:hover:enabled {
.c2:hover:enabled {
border-color: #fff;
}
.c1:active:enabled {
.c2:active:enabled {
border: 1px solid #303338;
}
.c1:disabled {
.c2:disabled {
color: #303338;
}
Expand All @@ -51,20 +51,24 @@ exports[`CallDetails Should match 1`] = `
padding: 0;
}
.c3 {
.c4 {
padding: 0.125rem 0.375rem;
background-color: #303338;
border-radius: 10px;
}
.c4 {
.c5 {
margin: 0;
padding: 0;
color: #fff;
background-color: transparent;
}
.c2 {
.c1 {
padding-top: 0.75rem;
}
.c3 {
font-size: 12px;
margin: 0;
padding: 4px 8px;
Expand All @@ -73,16 +77,16 @@ exports[`CallDetails Should match 1`] = `
<div>
<div
class="c0"
class="c0 c1"
>
<button
class="c1 c2"
class="c2 c3"
>
transfer
(
<span>
<span
class="c3 c4"
class="c4 c5"
color="#fff"
>
address
Expand All @@ -93,7 +97,7 @@ exports[`CallDetails Should match 1`] = `
,
</span>
<span
class="c3 c4"
class="c4 c5"
color="#fff"
>
uint256
Expand Down Expand Up @@ -151,13 +155,6 @@ exports[`CallDetails Should match with empty data 1`] = `
}
.c0 {
box-sizing: 'border-box';
min-width: 0;
margin: 0 0 0.5rem;
padding: 0;
}
.c5 {
box-sizing: 'border-box';
min-width: 0;
margin: 0;
Expand All @@ -177,6 +174,10 @@ exports[`CallDetails Should match with empty data 1`] = `
background-color: transparent;
}
.c5 {
padding-top: 0.75rem;
}
.c2 {
font-size: 12px;
margin: 0;
Expand Down Expand Up @@ -211,7 +212,7 @@ exports[`CallDetails Should match with empty data 1`] = `
</button>
</div>
<div
class="c5"
class="c0 c5"
>
<button
class="c1 c2"
Expand Down

0 comments on commit 534bfc6

Please sign in to comment.