Floating logo

web-ui/package.json

@@ -37,7 +37,7 @@
     "ng-http-loader": "^5.0.0",
     "ng-lottie": "^0.3.2",
     "ng2-tooltip-directive": "^2.9.17",
-    "ngx-bootstrap": "^3.3.0",
+    "ngx-bootstrap": "^4.2.0",
     "ngx-bootstrap-slider": "^1.9.0",
     "ngx-infinite-scroll": "^7.0.1",
     "ngx-moment": "^3.0.1",

web-ui/src/app/components/shared/footer/footer.component.css

@@ -0,0 +1,22 @@
+.wiringbitsLogoLink {
+    text-decoration: none;
+    font-size: 18px;
+    color: #fff;
+}
+
+.wiringbitsFloatLogo {
+    background-color: #fff;
+    border-radius: 30px;
+    border: 2px solid #ffffff;
+    background-image: linear-gradient(to bottom right, #101011, #2a51e7);
+    bottom: 0px;
+    right: 0px;
+    position: fixed;
+    z-index: 100;
+}
+
+.wiringbitsFloatLogo img {
+    width: 50px;
+    height: 50px;
+    object-fit: contain;
+}

web-ui/src/app/components/shared/footer/footer.component.html

@@ -1,2 +1,5 @@
-<p>
-</p>
+<ng-template #popTemplate>Powered by wiringbits</ng-template>
+<div class="wiringbitsLogoImg" class="wiringbitsFloatLogo wiringbitsHighlight" [popover]="popTemplate" placement="left"
+  containerClass="wiringbitsPopOver wiringbitsHighlight" triggers="mouseenter:mouseleave">
+  <a href="https://wiringbits.net/?utm_medium=referrer&utm_source=xsnexplorer.io" target="_Blank" class="wiringbitsLogoLink"> <img src="assets/wiringbits.png"> </a>
+</div>

web-ui/src/app/components/shared/footer/footer.component.spec.ts

@@ -2,13 +2,18 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FooterComponent } from './footer.component';
 
+import { PopoverModule } from 'ngx-bootstrap/popover';
+
 describe('FooterComponent', () => {
   let component: FooterComponent;
   let fixture: ComponentFixture<FooterComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ FooterComponent ]
+      declarations: [ FooterComponent ],
+      imports: [
+        PopoverModule.forRoot(),
+      ],
     })
     .compileComponents();
   }));

web-ui/src/app/components/shared/footer/footer.component.ts

@@ -6,10 +6,8 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./footer.component.css']
 })
 export class FooterComponent implements OnInit {
-
   constructor() { }
 
   ngOnInit() {
   }
-
 }

web-ui/src/app/components/shared/shared.module.ts

@@ -14,6 +14,7 @@ import { TransactionTablev2Component } from './transaction-tablev2/transaction-t
 import { PipesModule } from '../../pipes/pipes.module';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { TooltipModule } from 'ng2-tooltip-directive';
+import { PopoverModule } from 'ngx-bootstrap/popover';
 
 import { LottieAnimationViewModule } from 'ng-lottie';
 
@@ -30,7 +31,8 @@ import { LottieAnimationViewModule } from 'ng-lottie';
         InfiniteScrollModule,
         BsDropdownModule.forRoot(),
         LottieAnimationViewModule.forRoot(),
-        TooltipModule
+        TooltipModule,
+        PopoverModule.forRoot()
     ],
     declarations: [
         NavbarComponent,

web-ui/src/styles.css

@@ -459,4 +459,18 @@ table.isLoading tr:nth-child(odd) td div::after {
 
 .small, small {
   font-size: 75%;
-}
+}
+
+.wiringbitsPopOver {
+  background-color: #00135b;
+  color: #ffffff;
+  border: 2px solid #fff;
+}
+
+.wiringbitsHighlight {
+  box-shadow: 0px 0px 13px 5px #0ab8ca;
+}
+
+.wiringbitsPopOver.popover>.arrow, .popover>.arrow:after {
+  border-color: transparent !important;
+}