Show pool addresses in a scrollable div with href

frontend/src/app/components/pool/pool.component.html

@@ -47,21 +47,26 @@
 
     <div class="box">
       <div class="row">
-        <div class="col-sm">
+        <div class="col-md-8">
           <table class="table table-borderless table-striped" style="table-layout: fixed;">
             <tbody>
               <tr>
-                <td>Address</td>
-                <td class="text-truncate">{{ poolStats.pool.addresses }}</td>
+                <td class="col-4 col-lg-3">Addresses</td>
+                <td class="text-truncate" *ngIf="poolStats.pool.addresses.length else noaddress">
+                  <div class="scrollable">
+                    <a *ngFor="let address of poolStats.pool.addresses" [routerLink]="['/address' | relativeUrl, address]">{{ address }}<br></a>
+                  </div>
+                </td>
+                <ng-template #noaddress><td>~</td></ng-template>
               </tr>
               <tr>
-                <td>Coinbase Tag</td>
+                <td class="col-4 col-lg-3">Coinbase Tags</td>
                 <td class="text-truncate">{{ poolStats.pool.regexes }}</td>
               </tr>
             </tbody>
           </table>
         </div>
-        <div class="col-sm">
+        <div class="col-md-4">
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>

frontend/src/app/components/pool/pool.component.scss

@@ -30,3 +30,12 @@
     }
   }
 }
+
+div.scrollable {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  max-height: 100px;
+}

frontend/src/app/components/pool/pool.component.ts

@@ -49,6 +49,13 @@ export class PoolComponent implements OnInit {
           return this.apiService.getPoolStats$(this.poolId, params[1] ?? '1w');
         }),
         map((poolStats) => {
+          let regexes = '"';
+          for (const regex of JSON.parse(poolStats.pool.regexes)) {
+            regexes += regex + '", "';
+          }
+          poolStats.pool.regexes = regexes.slice(0, -3);
+          poolStats.pool.addresses = JSON.parse(poolStats.pool.addresses);
+
           return Object.assign({
             logo: `./resources/mining-pools/` + poolStats.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg'
           }, poolStats);