feat(TokenPicker): Implement native token support.

src/Components/ActionsBuilder/Action/Action.styled.tsx

@@ -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;
 `;

src/Components/ActionsBuilder/Action/Action.tsx

@@ -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,
@@ -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;
@@ -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);
@@ -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;
 
@@ -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
@@ -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}

src/Components/ActionsBuilder/CallDetails/CallDetails.styled.tsx

@@ -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;

src/Components/ActionsBuilder/CallDetails/CallDetails.tsx

@@ -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,
@@ -64,7 +66,7 @@ export const CallDetails: React.FC<ActionViewProps> = ({
   return (
     <>
       {!!approveSpendTokens && (
-        <Box margin="0 0 0.5rem">
+        <Box>
           <DetailsButton
             onClick={() => setIsApprovalExpanded(!isApprovalExpanded)}
             isExpanded={isApprovalExpanded}
@@ -129,47 +131,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>
+      )}
     </>
   );
 };

src/Components/ActionsBuilder/CallDetails/__snapshots__/CallDetails.test.tsx.snap

@@ -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;
@@ -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;
 }
 
@@ -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;
@@ -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
@@ -93,7 +97,7 @@ exports[`CallDetails Should match 1`] = `
           , 
         </span>
         <span
-          class="c3 c4"
+          class="c4 c5"
           color="#fff"
         >
           uint256
@@ -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;
@@ -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;
@@ -211,7 +212,7 @@ exports[`CallDetails Should match with empty data 1`] = `
     </button>
   </div>
   <div
-    class="c5"
+    class="c0 c5"
   >
     <button
       class="c1 c2"