Merge pull request #597 from alephium/next

Merge latest explorer changes to master
alephium · May 30, 2024 · 8c12b24 · 8c12b24
2 parents 008dff8 + 9257b35
commit 8c12b24
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 99 deletions.
diff --git a/apps/explorer/CHANGELOG.md b/apps/explorer/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @alephium/explorer
 
+## 1.9.3
+
+### Patch Changes
+
+- 5c9f747: Improve explorer's transaction info page
+
 ## 1.9.2
 
 ### Patch Changes

diff --git a/apps/explorer/locales/en-US/translation.json b/apps/explorer/locales/en-US/translation.json
@@ -83,5 +83,6 @@
   "Attributes": "Attributes",
   "Collection desc.": "Collection desc.",
   "Collection name": "Collection name",
-  "Worth of mainnet equivalent": "Worth of mainnet equivalent"
+  "Worth of mainnet equivalent": "Worth of mainnet equivalent",
+  "Inputs & outputs": "Inputs & outputs"
 }
diff --git a/apps/explorer/locales/fr-FR/translation.json b/apps/explorer/locales/fr-FR/translation.json
@@ -83,5 +83,6 @@
   "Attributes": "Attributs",
   "Collection desc.": "Desc. de la collection",
   "Collection name": "Nom de la collection",
-  "Worth of mainnet equivalent": "Valeur de l'équivalent sur mainnet"
+  "Worth of mainnet equivalent": "Valeur de l'équivalent sur mainnet",
+  "Inputs & outputs": "Entrants & sortants"
 }
diff --git a/apps/explorer/locales/id-ID/translation.json b/apps/explorer/locales/id-ID/translation.json
@@ -83,5 +83,6 @@
   "Attributes": "Atribut",
   "Collection desc.": "Rincian koleksi",
   "Collection name": "Nama koleksi",
-  "Worth of mainnet equivalent": "Nilai setara dengan mainnet"
+  "Worth of mainnet equivalent": "Nilai setara dengan mainnet",
+  "Inputs & outputs": "Masukan & keluaran"
 }
diff --git a/apps/explorer/package.json b/apps/explorer/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@alephium/explorer",
   "description": "The Alephium explorer frontend",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "private": true,
   "scripts": {
     "start": "turbo start:app",
@@ -92,6 +92,7 @@
     "serve": "^14.1.2",
     "typescript": "^5.2.2",
     "vite": "^4.5.2",
+    "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^3.2.0",
     "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^0.31.0"

diff --git a/apps/explorer/src/components/Badge.tsx b/apps/explorer/src/components/Badge.tsx
@@ -96,7 +96,7 @@ export default styled(Badge)`
       min-width: ${minWidth ? minWidth + 'px' : 'auto'};
       border-radius: ${compact ? '3px' : '5px'};
       font-size: ${compact ? '10px' : 'inherit'};
-      padding: ${compact ? '2px 4px' : '4px 6px'};
+      padding: ${compact ? '2px 4px' : '3px 5px'};
     `
   }}
 `

diff --git a/apps/explorer/src/components/Table/Table.tsx b/apps/explorer/src/components/Table/Table.tsx
@@ -128,7 +128,7 @@ const StyledTable = styled.table<TableProps>`
     ${({ bodyOnly }) =>
       bodyOnly &&
       css`
-        width: 65%;
+        width: 75%;
       `}
 
     @media ${deviceBreakPoints.tablet} {

diff --git a/apps/explorer/src/components/Table/TableRow.tsx b/apps/explorer/src/components/Table/TableRow.tsx
@@ -21,8 +21,11 @@ import { Children } from 'react'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 
+import { deviceBreakPoints } from '@/styles/globalStyles'
+
 interface RowProps {
   isActive?: boolean
+  highlight?: boolean
   onClick?: React.MouseEventHandler<HTMLTableRowElement>
   linkTo?: string
   className?: string
@@ -56,7 +59,16 @@ export default styled(TableRow)`
   cursor: ${({ onClick }) => (onClick ? 'pointer' : 'auto')};
 
   td:first-child {
-    color: ${({ theme }) => theme.font.secondary};
+    display: flex;
+    align-items: center;
+    min-height: 55px;
+    font-weight: 600;
+    color: ${({ theme, highlight }) => (highlight ? theme.font.primary : theme.font.secondary)};
+
+    @media ${deviceBreakPoints.tablet} {
+      display: initial;
+      min-height: auto;
+    }
   }
 
   td:first-child .row-link {

diff --git a/apps/explorer/src/components/TransactionIOList.tsx b/apps/explorer/src/components/TransactionIOList.tsx
@@ -34,7 +34,7 @@ const TransactionIOList = ({
   inputs = [],
   outputs = [],
   flex,
-  addressMaxWidth,
+  addressMaxWidth = '300px',
   IOItemWrapper
 }: TransactionIOListProps) => {
   const getAmounts = (io: explorer.Input | explorer.Output) => [

diff --git a/apps/explorer/src/pages/TransactionInfoPage.tsx b/apps/explorer/src/pages/TransactionInfoPage.tsx
@@ -43,7 +43,7 @@ import InlineErrorMessage from '@/components/InlineErrorMessage'
 import { AddressLink, SimpleLink } from '@/components/Links'
 import LoadingSpinner from '@/components/LoadingSpinner'
 import Section from '@/components/Section'
-import SectionTitle from '@/components/SectionTitle'
+import SectionTitle, { SecondaryTitle } from '@/components/SectionTitle'
 import HighlightedCell from '@/components/Table/HighlightedCell'
 import Table from '@/components/Table/Table'
 import TableBody from '@/components/Table/TableBody'
@@ -258,30 +258,46 @@ const TransactionInfoPage = () => {
                     </AssetLogos>
                   </TableRow>
                 )}
-                {confirmedTxInfo && (
-                  <TableRow>
-                    <span>{t('Inputs')}</span>
-                    <div>
-                      {confirmedTxInfo.inputs && confirmedTxInfo.inputs.length > 0 ? (
-                        <TransactionIOList inputs={confirmedTxInfo.inputs} flex IOItemWrapper={IOItemContainer} />
-                      ) : (
-                        t('Block rewards')
-                      )}
-                    </div>
-                  </TableRow>
-                )}
-                {confirmedTxInfo && (
-                  <TableRow>
-                    <span>{t('Outputs')}</span>
-                    <div>
-                      {confirmedTxInfo.outputs ? (
-                        <TransactionIOList outputs={confirmedTxInfo.outputs} flex IOItemWrapper={IOItemContainer} />
-                      ) : (
-                        '-'
-                      )}
-                    </div>
-                  </TableRow>
-                )}
+                <TableRow highlight>
+                  <span>{t('Total Amounts')}</span>
+                  <DetltaAmountsContainer>
+                    {addressesInvolved.map((addressHash) => (
+                      <DeltaAmountsBox key={addressHash}>
+                        <DeltaAmountsTitle>
+                          <AddressLink address={addressHash} maxWidth="200px" />
+                        </DeltaAmountsTitle>
+                        <AmountList>
+                          {alphDeltaAmounts[addressHash] && (
+                            <Badge
+                              type={BigInt(alphDeltaAmounts[addressHash]) > 0 ? 'plus' : 'minus'}
+                              amount={alphDeltaAmounts[addressHash]}
+                              assetId={ALPH.id}
+                              displayAmountSign
+                              floatRight
+                            />
+                          )}
+                          {getSortedTokenAmounts(addressHash).map((v) => (
+                            <Badge
+                              key={v.tokenId}
+                              type={BigInt(v.amount) > 0 ? 'plus' : 'minus'}
+                              amount={BigInt(v.amount)}
+                              assetId={v.tokenId}
+                              displayAmountSign
+                              floatRight
+                            />
+                          ))}
+                        </AmountList>
+                      </DeltaAmountsBox>
+                    ))}
+                  </DetltaAmountsContainer>
+                </TableRow>
+              </TableBody>
+            )}
+          </Table>
+
+          <FeesTable bodyOnly>
+            {transactionData && (
+              <TableBody>
                 <TableRow>
                   <span>{t('Gas Amount')}</span>
                   <span>{transactionData.gasAmount || '-'} GAS</span>
@@ -291,52 +307,53 @@ const TransactionInfoPage = () => {
 
                   <Amount assetId={ALPH.id} value={BigInt(transactionData.gasPrice)} fullPrecision />
                 </TableRow>
-                <TableRow>
+                <TableRow highlight>
                   <span>{t('Transaction Fee')}</span>
-                  <Amount
-                    assetId={ALPH.id}
-                    value={BigInt(transactionData.gasPrice) * BigInt(transactionData.gasAmount)}
-                    fullPrecision
+                  <Badge
+                    type="neutralHighlight"
+                    content={
+                      <Amount
+                        assetId={ALPH.id}
+                        value={BigInt(transactionData.gasPrice) * BigInt(transactionData.gasAmount)}
+                        fullPrecision
+                      />
+                    }
+                    minWidth={40}
                   />
                 </TableRow>
               </TableBody>
             )}
-          </Table>
-          <TotalAmountsTable bodyOnly isLoading={txInfoLoading}>
+          </FeesTable>
+
+          <SecondaryTitle>{t('Inputs & outputs')}</SecondaryTitle>
+          <IOTable bodyOnly isLoading={txInfoLoading}>
             <TableBody>
-              <TableRow>
-                <b>{t('Total Amounts')}</b>
-                <DetltaAmountsContainer>
-                  {addressesInvolved.map((addressHash) => (
-                    <DeltaAmountsBox key={addressHash}>
-                      <DeltaAmountsTitle>
-                        <AddressLink address={addressHash} maxWidth="180px" />
-                      </DeltaAmountsTitle>
-                      <AmountList>
-                        {alphDeltaAmounts[addressHash] && (
-                          <Amount
-                            value={BigInt(alphDeltaAmounts[addressHash])}
-                            displaySign={true}
-                            highlight
-                            assetId={ALPH.id}
-                          />
-                        )}
-                        {getSortedTokenAmounts(addressHash).map((v) => (
-                          <Amount
-                            key={v.tokenId}
-                            value={BigInt(v.amount)}
-                            assetId={v.tokenId}
-                            displaySign={true}
-                            highlight
-                          />
-                        ))}
-                      </AmountList>
-                    </DeltaAmountsBox>
-                  ))}
-                </DetltaAmountsContainer>
-              </TableRow>
+              {confirmedTxInfo && (
+                <TableRow>
+                  <span>{t('Inputs')}</span>
+                  <div>
+                    {confirmedTxInfo.inputs && confirmedTxInfo.inputs.length > 0 ? (
+                      <TransactionIOList inputs={confirmedTxInfo.inputs} flex IOItemWrapper={IOItemContainer} />
+                    ) : (
+                      t('Block rewards')
+                    )}
+                  </div>
+                </TableRow>
+              )}
+              {confirmedTxInfo && (
+                <TableRow>
+                  <span>{t('Outputs')}</span>
+                  <div>
+                    {confirmedTxInfo.outputs ? (
+                      <TransactionIOList outputs={confirmedTxInfo.outputs} flex IOItemWrapper={IOItemContainer} />
+                    ) : (
+                      '-'
+                    )}
+                  </div>
+                </TableRow>
+              )}
             </TableBody>
-          </TotalAmountsTable>
+          </IOTable>
         </>
       ) : (
         <InlineErrorMessage message={txInfoError.current} code={txInfoErrorStatus} />
@@ -365,57 +382,50 @@ const IOItemContainer = styled.div`
   &:not(:last-child) {
     border-bottom: 1px solid ${({ theme }) => theme.border.secondary};
   }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.bg.hover};
+  }
 `
 
 const AssetLogos = styled.div`
   display: flex;
   gap: 10px;
 `
 
-const TotalAmountsTable = styled(Table)`
-  margin-top: 20px;
+const FeesTable = styled(Table)`
+  margin-top: 30px;
 `
 
+const IOTable = styled(Table)``
+
 const DetltaAmountsContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 15px;
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 `
 
 const DeltaAmountsBox = styled.div`
-  flex: 1;
   display: flex;
-  max-width: 200px;
-  flex-direction: column;
+  padding: 4px 0;
+  gap: 20px;
   background-color: ${({ theme }) => theme.bg.secondary};
-  border-radius: 4px;
+  border-radius: 6px;
   border: 1px solid ${({ theme }) => theme.border.secondary};
+  padding: 8px;
 `
 
 const AmountList = styled.div`
+  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  justify-content: center;
-
-  ${Amount} {
-    padding: 10px;
-    width: 100%;
-    text-align: right;
-  }
-
-  ${Amount}:not(:last-child) {
-    border-bottom: 1px solid ${({ theme }) => theme.border.secondary};
-  }
+  gap: 8px;
 `
 
 const DeltaAmountsTitle = styled.div`
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  border-bottom: 1px solid ${({ theme }) => theme.border.secondary};
-  background-color: ${({ theme }) => theme.bg.primary};
-  padding: 5px;
+  flex: 1;
+  overflow: hidden;
 `
 
 export default TransactionInfoPage
diff --git a/apps/explorer/vite.config.ts b/apps/explorer/vite.config.ts
@@ -20,6 +20,7 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import svgrPlugin from 'vite-plugin-svgr'
 import viteTsconfigPaths from 'vite-tsconfig-paths'
 
@@ -32,7 +33,7 @@ export default defineConfig({
   optimizeDeps: {
     include: ['@alephium/shared-crypto'] // To allow for using npm link https://vitejs.dev/guide/dep-pre-bundling.html#monorepos-and-linked-dependencies
   },
-  plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
+  plugins: [react(), viteTsconfigPaths(), svgrPlugin(), nodePolyfills()],
   test: {
     globals: true,
     environment: 'happy-dom',

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml