Fb takyoon message onchain

package.json

@@ -96,6 +96,7 @@
     "buffer-compare": "^1.1.1",
     "capacitor-resources": "^2.0.5",
     "chart.js": "^3.5.1",
+    "chronik-client": "^0.8.2",
     "cordova": "^10.0.0",
     "cordova-android": "^10.1.0",
     "cordova-clipboard": "^1.3.0",

src/app/components/message-reply/message-reply.component.html

@@ -0,0 +1,25 @@
+<action-sheet>
+  <div class="reply-to-container">
+    <div class="reply-to-title">
+      <ion-icon [src]="currentTheme == 'dark' ? 'assets/img/ico-reply-dark.svg' : 'assets/img/ico-reply-light.svg'"></ion-icon>
+      {{'Replying to ' | translate }} {{ messageReplyInfo.addressTo }}
+    </div>
+    <div class="reply-to-message">
+      {{messageReplyInfo.messageOnChain}}
+    </div>
+  </div>
+
+  <form [formGroup]="messageReplySend">
+    <mat-form-field appearance="outline">
+      <mat-label translate>{{'Private message' | translate}}</mat-label>
+      <textarea matInput formControlName="messageOnChain" [(ngModel)]="message" (keyup)="changeMessage()" [placeholder]="'Type your private message' | translate" maxlength="206"></textarea>
+    </mat-form-field>
+    <mat-hint class="hint-reply-message">
+      {{Buffer.from(this.message).length}} / 206 bytes
+    </mat-hint>
+  </form>
+
+  <ion-button fill="clear" type="submit" class="button-standard safe-area button-send-onchain" [disabled]="!validMessage" (click)="send()">
+    {{ 'Send' | translate }}
+  </ion-button>
+</action-sheet>

src/app/components/message-reply/message-reply.component.scss

@@ -0,0 +1,93 @@
+message-reply-component {
+  .scanner-icon {
+    z-index: 99;
+    font-size: 28px;
+    color: var(--ion-color-primary);
+  }
+  .check {
+    font-size: 22px;
+    padding-top: 1rem;
+    &.success {
+      color: var(--ion-color-success);
+    }
+    &.fail {
+      color: var(--ion-color-danger);
+    }
+  }
+
+  label-tip {
+    margin-top: 1.8rem;
+  }
+
+  .slide-title {
+    h3 {
+      margin: 0;
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 32px;
+      color: #001e2e;
+      margin-bottom: 2rem;
+    }
+  }
+  form {
+    margin: 0 8px 24px 8px;
+    ion-item {
+      margin: 2rem 0;
+      border: 2px solid rgba(0, 30, 46, 0.38);
+      --inner-padding-start: 1rem;
+      --inner-padding-end: 1rem;
+      --inner-padding-end: 0;
+      --padding-start: 0;
+      --padding-end: 0;
+      --color: #001e2e;
+      --background: #fafafb;
+      border-radius: 4px;
+      ion-input {
+        font-weight: 400;
+        font-size: 16px !important;
+        line-height: 24px;
+        letter-spacing: 0.5px;
+      }
+      ion-icon {
+        padding: 0;
+      }
+    }
+    .form-field {
+      margin-bottom: 3rem !important;
+      padding: 0 !important;
+    }
+    .mat-form-field-subscript-wrapper {
+      margin-top: 2rem !important;
+      padding: 0 !important;
+    }
+
+    .mobile-view {
+      .mat-form-field-infix {
+        max-width: 85%;
+      }
+    }
+  }
+  .reply-to-container {
+    background: linear-gradient(0deg, rgba(0, 101, 141, 0.14), rgba(0, 101, 141, 0.14)), #FAFAFB;
+    border: 1px solid rgba(126, 208, 255, 0.08);
+    border-radius: 8px;
+    padding: 8px;
+    margin: 24px;
+    .reply-to-title {
+      color: #1C3745;
+      font-size: 16px;
+      font-weight: 600;
+      letter-spacing: 0.1px;
+    }
+    .reply-to-message {
+      color: #1C3745;
+      letter-spacing: 0.25px;
+      font-size: 14px;
+    }
+  }
+
+  .button-send-onchain {
+    width: fit-content !important;
+    margin: 5px 24px 25px auto !important;
+  }
+}

src/app/components/message-reply/message-reply.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { MessageReplyComponent } from './message-reply.component';
+
+describe('MessageReplyComponent', () => {
+  let component: MessageReplyComponent;
+  let fixture: ComponentFixture<MessageReplyComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessageReplyComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MessageReplyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/message-reply/message-reply.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Location } from '@angular/common';
+import { Router } from '@angular/router';
+import { Logger } from 'src/app/providers/logger/logger';
+import { ActionSheetParent } from '../action-sheet/action-sheet-parent';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { AppProvider } from 'src/app/providers/app/app';
+
+@Component({
+  selector: 'message-reply-component',
+  templateUrl: './message-reply.component.html',
+  styleUrls: ['./message-reply.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class MessageReplyComponent extends ActionSheetParent{
+  message = '';
+  Buffer = Buffer;
+  messageReplyInfo: any;
+  public currentTheme: string;
+  public messageReplySend: FormGroup;
+  messageOnChainValue;
+  validMessage: boolean = false;
+  constructor(
+    private formBuilder: FormBuilder,
+    private appProvider: AppProvider,
+  ) { 
+    super();
+    this.currentTheme = this.appProvider.themeProvider.currentAppTheme;
+    this.messageReplySend = this.formBuilder.group({
+        messageOnChain: [
+          '',
+          []
+        ]
+    });
+  }
+
+  ngOnInit() {
+    this.messageReplyInfo = this.params;
+  }
+
+  public changeMessage() {
+    if (this.message.trim().length > 0) {
+      this.validMessage = true;
+    } else {
+      this.validMessage = false;
+    }
+  }
+
+  send(){
+    const message = this.messageReplySend.value.messageOnChain;
+    this.dismiss(message);
+  }
+}

src/app/components/recipient/recipient.component.html

@@ -35,7 +35,16 @@
       <span *ngIf="!token" (click)="changeUnit()" [ngClass]="{'disabled': isSelectedTotalAmout, 'bold-text': !isSelectedTotalAmout}">{{unit}} </span>
       <span *ngIf="token" (click)="changeUnit()" class="bold-text">{{unit}}</span>
     </ion-item>
-    <p class="unit-alt-text">{{recipient.altAmountStr}} {{alternativeUnit}}</p>
+    <ng-conatiner *ngIf="isShowMessage">
+      <div class="amount-header">
+        <p class="title">{{'Private message' | translate}}</p>
+      </div>
+      <ion-item lines="none" class="amount-wrapper">
+        <ion-textarea maxlength="206" [placeholder]="'Type your private message' | translate" [(ngModel)]="message" (ionChange)="changeMessage()"></ion-textarea>
+      </ion-item>
+      <p class="unit-alt-text">{{Buffer.from(this.message).length}} / 206 bytes</p>
+    </ng-conatiner>
+
     <div class="selected-amount" lines="none" *ngIf="isShowSelectInput">
       <ion-label class="item-title">{{'Send total selected amount' | translate}}</ion-label>
       <ion-toggle [(ngModel)]="isSelectedTotalAmout" (ionChange)="changeSelectedAmount($event)" ></ion-toggle>

src/app/components/recipient/recipient.component.scss

@@ -90,6 +90,12 @@ recipient-component {
                     font-size: 16px;
                 }
 
+                ion-textarea{
+                    --placeholder-color: rgba(0, 30, 46, 0.38);
+                    --color: #001E2E;
+                    font-size: 16px;
+                }
+
                 .scan-icon {
                     width: 20px;
                     height: 20px;

src/app/components/recipient/recipient.component.ts

@@ -52,6 +52,7 @@ import { Keyboard } from '@capacitor/keyboard';
 export class RecipientComponent implements OnInit {
   public search: string = '';
   public amount: string = '';
+  public amountResult: number = 0;
   navParamsData: any;
   public isCordova: boolean;
   public expression;
@@ -78,6 +79,7 @@ export class RecipientComponent implements OnInit {
   public searchValue: string;
   validAddress = false;
   validAmount = false;
+  validMessage = false;
   isSelectedTotalAmout: boolean = false;
   remaining: number;
   isShowReceiveLotus: boolean;
@@ -86,6 +88,8 @@ export class RecipientComponent implements OnInit {
   formatRemaining: string;
   messagesReceiveLotus: boolean = false;
 
+  message='';
+  Buffer = Buffer;
   @Input()
   recipient: RecipientModel;
 
@@ -113,8 +117,12 @@ export class RecipientComponent implements OnInit {
   @Input()
   isDonation?: boolean;
 
-  @Output() deleteEvent? = new EventEmitter<number>();
-  @Output() sendMaxEvent? = new EventEmitter<boolean>();
+  @Input()
+  isShowMessage?: boolean;
+
+  @Output() deleteEvent?= new EventEmitter<number>();
+  @Output() sendMaxEvent?= new EventEmitter<boolean>();
+
   @Output() sendOfficialInfo? = new EventEmitter<PageModel>();
   private validDataTypeMap: string[] = [
     'BitcoinAddress',
@@ -234,6 +242,17 @@ export class RecipientComponent implements OnInit {
     this.updateUnitUI(!!isToken);
   }
 
+  public changeMessage() {
+    if (this.message.trim().length > 0) {
+      this.validMessage = true;
+      this.recipient.message = this.message;
+      this.checkRecipientValid();
+    } else {
+      this.validMessage = false;
+      this.checkRecipientValid();
+    }
+  }
+
   private updateAddressHandler: any = data => {
     if (data.recipientId === this.recipient.id) {
       this.searchValue = data.value;
@@ -506,6 +525,7 @@ export class RecipientComponent implements OnInit {
       this.recipient.amount = parseInt(amount, 10);
     }
     this.validAmount = result > 0;
+    this.amountResult = result;
     this.checkRecipientValid();
     if (isSendMax) {
       this.sendMaxEvent.emit(true);
@@ -749,8 +769,9 @@ export class RecipientComponent implements OnInit {
 
   checkRecipientValid() {
     if (!this.isDonation) {
-      this.recipient.isValid = this.validAddress && this.validAmount;
+      this.recipient.isValid = this.validAddress && (this.validAmount || this.validMessage);
     } else {
+
       if (this.isShowReceiveLotus) {
         this.recipient.isValid = this.validAddress && this.validAmount;
       } else {

src/app/components/recipient/recipient.model.ts

@@ -3,6 +3,7 @@ export class RecipientModel {
     public amount: number;
     public amountToShow: string;
     public altAmountStr: string;
+    public message?: string;
     public isOfficialInfo: boolean;
     public isValid?: boolean;
     public id?: number = Date.now();

src/app/constants.ts

@@ -1,3 +1,36 @@
 export const CARD_IAB_CONFIG =
   'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,hidden=yes,clearcache=yes,hidespinner=yes,disallowoverscroll=yes,zoom=no,transitionstyle=crossdissolve';
 export const DUST_AMOUNT = 546;
+export const currency = {
+  name: 'Lotus',
+  ticker: 'XPI',
+  legacyPrefix: 'bitcoincash',
+  prefixes: ['lotus'],
+  coingeckoId: 'bitcoin-cash-abc-2',
+  defaultFee: 1.01,
+  dustSats: 550,
+  etokenSats: 546,
+  cashDecimals: 6,
+  blockExplorerUrl: 'https://explorer.givelotus.org',
+  tokenExplorerUrl: 'https://explorer.be.cash',
+  blockExplorerUrlTestnet: 'https://texplorer.bitcoinabc.org',
+  tokenName: 'eToken',
+  tokenTicker: 'eToken',
+  tokenPrefixes: ['etoken'],
+  tokenIconsUrl: '', // https://tokens.bitcoin.com/32 for BCH SLP
+  txHistoryCount: 10,
+  hydrateUtxoBatchSize: 20,
+  defaultSettings: { fiatCurrency: 'usd' },
+  opReturn: {
+    opReturnPrefixHex: '6a',
+    opReturnAppPrefixLengthHex: '04',
+    opPushDataOne: '4c',
+    appPrefixesHex: {
+      eToken: '534c5000',
+      lotusChat: '02020202',
+      lotusChatEncrypted: '03030303'
+    },
+    encryptedMsgByteLimit: 206,
+    unencryptedMsgByteLimit: 215
+  }
+};