src/app/common/components/badges/badges.component.html

@@ -28,4 +28,11 @@
       Founder
     </m-tooltip>
   </li>
+
+  <li *ngIf="showOnchainBadge()" routerLink="/tokens">
+    <m-tooltip icon="link" [iconClass]="{'selected': true }" i18n="Boosted OnChain in the last 7 days">
+      Boosted OnChain in the last 7 days
+    </m-tooltip>
+  </li>
+
 </ul>

src/app/common/components/badges/badges.component.scss

@@ -8,7 +8,7 @@
 
   li{
     display: flex;
-    flex: 1;
+    //flex: 1;
     flex-direction: column;
     align-items: center;
     //padding: 16px;
@@ -16,8 +16,8 @@
   }
 
   i{
-    font-size:28px;
-    padding:8px;
+    font-size: 24px;
+    padding: 0 4px;
 
     &.admin__badge {
       @include m-theme(){

src/app/common/components/badges/badges.component.ts

@@ -22,7 +22,7 @@ export interface SocialProfileMeta {
 export class ChannelBadgesComponent {
 
   @Input() user;
-  @Input() badges: Array<string> = [ 'verified', 'plus', 'founder', 'admin' ];
+  @Input() badges: Array<string> = [ 'verified', 'plus', 'founder', 'admin', 'onchain_booster' ];
 
   constructor(public session: Session, private client: Client, private router: Router) { }
 
@@ -84,4 +84,10 @@ export class ChannelBadgesComponent {
       });
   }
 
+  showOnchainBadge() { 
+    return this.user.onchain_booster
+      && this.user.onchain_booster * 1000 > Date.now() 
+      && this.badges.indexOf('onchain_booster') > -1;
+  }
+
 }

src/app/modules/boost/creator/creator.component.scss

@@ -384,7 +384,7 @@
 
   .m-boost--creator-section-submit--network {
     @media screen and (min-width: 780px) {
-      margin-top: -56px; //-72px once onchain badges ready
+      margin-top: -72px;
     }
   }
 

src/app/modules/boost/creator/payment-methods/payment-methods.component.html

@@ -40,7 +40,7 @@
       <li>Max 10k per boost</li>
       <li>Stored on the blockchain</li>
       <li>Stand out in the feeds</li>
-      <li *ngIf="false">Gain "OnChain" badge</li>
+      <li>Gain "OnChain" badge</li>
     </ul>
 
     <span class="m-boost--creator-selector--selected-label" i18n="@@M__COMMON__SELECTED">Selected</span>
@@ -81,7 +81,7 @@
       <li>Max 5k per boost</li>
       <li>Stored on Minds servers</li>
       <li>No transaction fee</li>
-      <li *ngIf="false" style="list-style:none">&nbsp;</li>
+      <li style="list-style:none">&nbsp;</li>
     </ul>
 
     <span class="m-boost--creator-selector--selected-label" i18n="@@M__COMMON__SELECTED">Selected</span>

src/app/modules/channels/channel.component.scss

@@ -172,6 +172,14 @@ m-channel{
      margin-right: 8px;
    }
 
+   > *:last-child {
+     margin-right: 0;
+   }
+
+   .m-channel--badges {
+     min-width: 124px;
+   }
+
    .m-channel--edit-button-wrapper {
      flex-shrink: 0;
    }