Feature/transactions detail improvements (#30)

* fix: component import on docz

* feature: modify addresses width on transactions details

* feature: fix SelectMenuButton padding

* feature: add numbers on amount placeholder

app/components/select.js

@@ -50,6 +50,7 @@ const SelectMenuButtonWrapper = styled.button`
 `;
 /* eslint-disable max-len */
 const SelectMenuButton = styled.button`
+  padding: 3px 7px;
   outline: none;
   background-color: transparent;
   border: 1px solid ${props => props.theme.colors.text};

app/components/transaction-details.js

@@ -76,7 +76,7 @@ const Ellipsis = styled(TextComponent)`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  width: calc(30vw - 60px);
+  width: 100%;
 `;
 
 type Props = {
@@ -152,23 +152,23 @@ export const TransactionDetailsComponent = ({
       </InfoRow>
       <Divider />
       <InfoRow>
-        <ColumnComponent>
+        <ColumnComponent width='100%'>
           <Label value='TRANSACTION ID' />
           <Ellipsis value={transactionId} />
         </ColumnComponent>
       </InfoRow>
       <Divider />
       <InfoRow>
-        <ColumnComponent>
+        <ColumnComponent width='100%'>
           <Label value='FROM' />
-          <TextComponent value={truncateAddress(from)} />
+          <Ellipsis value={truncateAddress(from)} />
         </ColumnComponent>
       </InfoRow>
       <Divider />
       <InfoRow>
-        <ColumnComponent>
+        <ColumnComponent width='100%'>
           <Label value='TO' />
-          <TextComponent value={truncateAddress(to)} />
+          <Ellipsis value={truncateAddress(to)} />
         </ColumnComponent>
       </InfoRow>
     </Wrapper>

app/components/transaction-details.mdx

@@ -4,21 +4,21 @@ name: Transaction Details
 
 import { Playground, PropsTable } from 'docz'
 
-import { TransactionDetails } from './transaction-details.js'
+import { TransactionDetailsComponent } from './transaction-details.js'
 import { DoczWrapper } from '../theme.js'
 
 # Transaction Details
 
 ## Properties
 
-<PropsTable of={TransactionDetails} />
+<PropsTable of={TransactionDetailsComponent} />
 
 ## Basic Usage
 
 <Playground>
   <DoczWrapper>
     {() => (
-      <TransactionDetails
+      <TransactionDetailsComponent
         type="receive"
         amount={2851}
         zecPrice={56}