A-1211026936719355: Address page

.env

@@ -2,7 +2,7 @@ REACT_APP_CONFIG_NAME=default
 REACT_APP_WEBSITE_NAME=Mojito - A Mintlayer Wallet (default)
 INLINE_RUNTIME_CHUNK=false
 GENERATE_SOURCEMAP=false
-MAINNET_ELECTRUM_SERVERS='https://blockstream.info/api, https://mempool.space/api'
-TESTNET_ELECTRUM_SERVERS='http://51.158.172.176:3001, https://blockstream.info/testnet/api, https://mempool.space/testnet/api'
+MAINNET_ELECTRUM_SERVERS='http://51.158.172.176:3000/api/blockstream'
+TESTNET_ELECTRUM_SERVERS='http://51.158.172.176:3001/api/blockstream'
 TESTNET_MINTLAYER_SERVERS='https://api-server-lovelace.mintlayer.org/api/v2'
 MAINNET_MINTLAYER_SERVERS='https://api-server.mintlayer.org/api/v2'

.env.production

@@ -2,7 +2,7 @@ REACT_APP_CONFIG_NAME=production
 REACT_APP_WEBSITE_NAME=Mojito - A Mintlayer Wallet
 INLINE_RUNTIME_CHUNK=false 
 GENERATE_SOURCEMAP=false
-MAINNET_ELECTRUM_SERVERS='https://blockstream.info/api, https://mempool.space/api'
-TESTNET_ELECTRUM_SERVERS='http://51.158.172.176:3001,https://blockstream.info/testnet/api, https://mempool.space/testnet/api'
+MAINNET_ELECTRUM_SERVERS='http://51.158.172.176:3000/api/blockstream'
+TESTNET_ELECTRUM_SERVERS='http://51.158.172.176:3001/api/blockstream'
 TESTNET_MINTLAYER_SERVERS='https://api-server-lovelace.mintlayer.org/api/v2'
 MAINNET_MINTLAYER_SERVERS='https://api-server.mintlayer.org/api/v2'

.env.staging

@@ -2,7 +2,7 @@ REACT_APP_CONFIG_NAME=staging
 REACT_APP_WEBSITE_NAME=Mojito - A Mintlayer Wallet (staging)
 INLINE_RUNTIME_CHUNK=false 
 GENERATE_SOURCEMAP=true
-MAINNET_ELECTRUM_SERVERS='https://blockstream.info/api, https://mempool.space/api'
-TESTNET_ELECTRUM_SERVERS='http://51.158.172.176:3001, https://blockstream.info/testnet/api, https://mempool.space/testnet/api'
+MAINNET_ELECTRUM_SERVERS='http://51.158.172.176:3000/api/blockstream'
+TESTNET_ELECTRUM_SERVERS='http://51.158.172.176:3001/api/blockstream'
 TESTNET_MINTLAYER_SERVERS='https://api-server-lovelace.mintlayer.org/api/v2'
 MAINNET_MINTLAYER_SERVERS='https://api-server.mintlayer.org/api/v2'

package.json

@@ -14,6 +14,7 @@
     "buffer": "^6.0.3",
     "canvas": "^3.1.0",
     "crypto-browserify": "^3.12.1",
+    "coinselect": "^3.1.13",
     "d3": "^7.9.0",
     "date-fns": "^4.1.0",
     "ecpair": "2.1.0",

src/components/basic/Arc/Arc.js

@@ -1,13 +1,15 @@
 import * as d3 from 'd3'
 
-const createArcGenerator = () => d3.arc().innerRadius(94).outerRadius(100)
+const createArcGenerator = () =>
+  d3.arc().innerRadius(86).outerRadius(100).cornerRadius(10)
 
 const createPieGenerator = () =>
   d3
     .pie()
     .startAngle(-0.5 * Math.PI)
     .endAngle(0.5 * Math.PI)
     .value((item) => item.value)
+    .padAngle(0.02)
 
 const createTooltip = () =>
   d3

src/components/basic/SkeletonLoader/SkeletonLoader.css

@@ -1,10 +1,10 @@
 .card {
   display: flex;
-  padding: 0.75rem 1.875rem;
+  padding: 12px 30px 12px 18px;
   margin-bottom: 0.75rem;
   background-color: rgb(var(--color-gray));
   border: 1px solid rgba(var(--color-light-green), 0.2);
-  border-radius: 20px;
+  border-radius: 45px;
   color: rgb(var(--color-white));
 }
 

src/components/basic/SkeletonLoader/SkeletonLoader.js

@@ -55,4 +55,5 @@ const SkeletonLoader = () => {
   )
 }
 
+export { SkeletonText }
 export default SkeletonLoader

src/components/composed/AddressList/AddressList.css

@@ -0,0 +1,146 @@
+.address-table {
+  width: 100%;
+  height: 96%;
+  display: block;
+}
+
+.address-table-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  height: 465px;
+  overflow: hidden;
+  height: 100%;
+
+  @media screen and (min-width: 801px) {
+    flex-grow: 1;
+  }
+}
+
+.address-table thead {
+  display: block;
+  width: 100%;
+}
+
+.address-table tbody {
+  display: block;
+  height: 400px;
+  overflow-y: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.address-table thead tr,
+.address-table tbody tr {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+}
+
+.address-title {
+  text-align: left;
+  padding: 14px 24px;
+  background: rgba(var(--color-green), 0.8);
+  width: 33.33%;
+  color: rgb(var(--color-black));
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.address-title:nth-child(1) {
+  border-top-left-radius: var(--round-size);
+  width: 40%;
+}
+
+.address-title:nth-child(2) {
+  width: 15%;
+}
+
+.address-title:nth-child(3) {
+  border-top-right-radius: var(--round-size);
+  width: 45%;
+}
+
+.address-loading-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 465px;
+}
+
+.address-row {
+  border-bottom: 1px solid rgba(var(--color-green), 0.2);
+}
+
+.address-row:hover {
+  background-color: rgba(var(--color-green), 0.1);
+}
+
+.address-cell,
+.used-cell,
+.balance-cell {
+  padding: 14px 24px;
+  vertical-align: baseline;
+  color: rgb(var(--color-black));
+}
+
+.address-cell {
+  width: 40%;
+}
+
+.used-cell {
+  width: 15%;
+}
+
+.balance-cell {
+  width: 45%;
+}
+
+.address-value {
+  font-family: monospace;
+  font-size: 0.9em;
+  max-width: 200px;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.address-value:hover {
+  color: rgba(var(--color-green), 1);
+}
+
+.used-status.used {
+  color: rgba(var(--color-black), 1);
+  font-weight: 500;
+}
+
+.used-status.unused {
+  color: rgba(var(--color-green), 1);
+}
+
+.no-addresses {
+  text-align: center;
+  padding: 2rem;
+  color: rgba(var(--color-black), 0.6);
+  font-style: italic;
+}
+
+/* Custom scrollbar for webkit browsers */
+.address-table tbody::-webkit-scrollbar {
+  width: 6px;
+}
+
+.address-table tbody::-webkit-scrollbar-track {
+  background: rgba(var(--color-green), 0.1);
+}
+
+.address-table tbody::-webkit-scrollbar-thumb {
+  background: rgba(var(--color-green), 0.3);
+  border-radius: 3px;
+}
+
+.address-table tbody::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--color-green), 0.5);
+}

src/components/composed/AddressList/AddressList.js

@@ -0,0 +1,106 @@
+import React, { useContext } from 'react'
+import { MintlayerContext, BitcoinContext } from '@Contexts'
+import { useParams } from 'react-router-dom'
+
+import { Loading } from '@ComposedComponents'
+import AddressListItem from './AddressListItem'
+import './AddressList.css'
+
+const getFormatedMlAddresses = (addressData) => {
+  return addressData.map((address) => ({
+    id: address.id,
+    coin_balance: {
+      available: address.coin_balance.decimal || 0,
+      locked: address.locked_coin_balance.decimal || 0,
+    },
+    tokens: address.tokens,
+    used: address.transaction_history?.length > 0,
+  }))
+}
+
+const sortAddresses = (addresses) => {
+  return addresses.sort((a, b) => {
+    if (a.used !== b.used) {
+      return b.used - a.used
+    }
+
+    const availableDiff =
+      (b.coin_balance?.available || 0) - (a.coin_balance?.available || 0)
+    if (availableDiff !== 0) return availableDiff
+
+    const lockedDiff =
+      (b.coin_balance?.locked || 0) - (a.coin_balance?.locked || 0)
+    if (lockedDiff !== 0) return lockedDiff
+
+    const tokensCountA = a.tokens?.length || 0
+    const tokensCountB = b.tokens?.length || 0
+    return tokensCountB - tokensCountA
+  })
+}
+
+const AddressList = ({ search }) => {
+  const { fetchingBalances, addressData: mlAddressData } =
+    useContext(MintlayerContext)
+  const { formatedAddresses: btcFormatedAddresses } = useContext(BitcoinContext)
+  const { coinType } = useParams()
+
+  const requiredAddresses =
+    coinType === 'Bitcoin' ? btcFormatedAddresses : mlAddressData
+
+  const addressList =
+    coinType === 'Bitcoin'
+      ? sortAddresses(btcFormatedAddresses)
+      : sortAddresses(getFormatedMlAddresses(requiredAddresses))
+
+  const filteredAddresses = addressList.filter((address) => {
+    const addressString = address.id || ''
+    const tokenString =
+      address.tokens?.map((token) => token.token_id).join(' ') || ''
+    return addressString.includes(search) || tokenString.includes(search)
+  })
+
+  return (
+    <div className="address-table-wrapper">
+      {fetchingBalances ? (
+        <div className="address-loading-wrapper">
+          <Loading />
+        </div>
+      ) : (
+        <table
+          className="address-table"
+          data-testid="address-table"
+        >
+          <thead>
+            <tr>
+              <th className="address-title">Address</th>
+              <th className="address-title">Status</th>
+              <th className="address-title">Balances</th>
+            </tr>
+          </thead>
+          <tbody>
+            {requiredAddresses && requiredAddresses.length > 0 ? (
+              filteredAddresses.map((address, index) => (
+                <AddressListItem
+                  key={address.id || index}
+                  index={index}
+                  address={address}
+                />
+              ))
+            ) : (
+              <tr>
+                <td
+                  colSpan="3"
+                  className="no-addresses"
+                >
+                  No addresses found
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      )}
+    </div>
+  )
+}
+
+export default AddressList