fix/walletconnect-request-params

src/app/components/components.module.ts

@@ -24,6 +24,7 @@ import { DelegateEditPopoverComponent } from './delegate-edit-popover/delegate-e
 import { EmptyStateComponent } from './empty-state/empty-state'
 import { FeeComponent } from './fee/fee.component'
 import { FromToComponent } from './from-to/from-to.component'
+
 import { InteractionSelectionComponent } from './interaction-selection/interaction-selection.component'
 import { PermissionRequestComponent } from './permission-request/permission-request.component'
 import { PortfolioItemComponent } from './portfolio-item/portfolio-item'
@@ -33,6 +34,7 @@ import { TezosDelegationCard } from './tezos-delegation-card/tezos-delegation-ca
 import { TezosFAForm } from './tezos-fa-form/tezos-fa-form.component'
 import { TransactionItemComponent } from './transaction-item/transaction-item.component'
 import { TransactionListComponent } from './transaction-list/transaction-list.component'
+import { WalletconnectFromToComponent } from './walletconnect-from-to/walletconnect-from-to.component'
 import { WidgetAccountExtendedDetails } from './widget-account-extended-details/widget-account-extended-details'
 import { WidgetAccountSummary } from './widget-account-summary/widget-account-summary'
 import { WidgetAccount } from './widget-account/widget-account'
@@ -65,6 +67,7 @@ import { WidgetSelector } from './widget-selector/widget-selector'
     TransactionItemComponent,
     FeeComponent,
     FromToComponent,
+    WalletconnectFromToComponent,
     InteractionSelectionComponent,
     WidgetSelector,
     WidgetAccount,
@@ -107,12 +110,12 @@ import { WidgetSelector } from './widget-selector/widget-selector'
     PermissionRequestComponent,
     CurrentWalletGroupComponent,
     DappPeerComponent,
+    WalletconnectFromToComponent,
     InteractionSelectionComponent,
     TransactionListComponent,
     TransactionItemComponent,
     FeeComponent,
     FromToComponent,
-
     WidgetSelector,
     WidgetAccount,
     WidgetAccountSummary,

src/app/components/walletconnect-from-to/walletconnect-from-to.component.html

@@ -0,0 +1,34 @@
+<ng-container>
+  <airgap-from-to [transaction]="airGapTransaction"></airgap-from-to>
+</ng-container>
+<ng-container *ngIf="rawTransaction !== undefined">
+  <ion-row class="rawdata--container ion-padding-bottom ion-margin-bottom">
+    <ion-col class="ion-no-padding">
+      <ion-item class="ion-no-padding" lines="none">
+        <ion-label>Change Fees</ion-label>
+        <ion-toggle [(ngModel)]="advanced" slot="end" (ngModelChange)="initForms()"></ion-toggle>
+      </ion-item>
+
+      <ng-container *ngIf="advanced && formGroup !== undefined">
+        <form [formGroup]="formGroup" class="ion-padding-bottom">
+          <ion-row class="padding-top">
+            <ion-col size="6">
+              <ion-item mode="md" color="light">
+                <ion-label class="ion-no-margin" position="stacked">Gas Price</ion-label>
+                <ion-input type="text" formControlName="gasPrice" id="gasPrice"></ion-input>
+              </ion-item>
+            </ion-col>
+            <ion-col size="6">
+              <ion-item mode="md" color="light">
+                <ion-label class="ion-no-margin" position="stacked">Gas Limit</ion-label>
+                <ion-input type="text" formControlName="gasLimit" id="gasLimit"></ion-input>
+              </ion-item>
+            </ion-col>
+          </ion-row>
+        </form>
+
+        <ion-button color="primary" (click)="updateRawTransaction()" [disabled]="formGroup.invalid">Update</ion-button>
+      </ng-container>
+    </ion-col>
+  </ion-row>
+</ng-container>

src/app/components/walletconnect-from-to/walletconnect-from-to.component.ts

@@ -0,0 +1,58 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core'
+import { IAirGapTransaction, RawEthereumTransaction } from '@airgap/coinlib-core'
+import { FormBuilder, FormGroup, Validators } from '@angular/forms'
+import BigNumber from 'bignumber.js'
+
+@Component({
+  selector: 'walletconnect-from-to',
+  templateUrl: './walletconnect-from-to.component.html',
+  styleUrls: ['./walletconnect-from-to.component.scss']
+})
+export class WalletconnectFromToComponent {
+  public formGroup: FormGroup | undefined
+
+  @Input()
+  public airGapTransaction: IAirGapTransaction | undefined
+
+  @Input()
+  public rawTransaction: RawEthereumTransaction | undefined
+
+  @Output()
+  public readonly onRawTransactionUpdate: EventEmitter<RawEthereumTransaction> = new EventEmitter<RawEthereumTransaction>()
+
+  constructor(private readonly formBuilder: FormBuilder) {}
+
+  public advanced: boolean = false
+
+  public async initForms() {
+    const gasLimitValue = this.hexToDecimal(this.rawTransaction.gasLimit)
+    const gasPriceValue = new BigNumber(this.hexToDecimal(this.rawTransaction.gasPrice)).shiftedBy(-9).toNumber()
+
+    const gasPriceControl = this.formBuilder.control(gasPriceValue, [Validators.required, Validators.min(0)])
+    const gasLimitControl = this.formBuilder.control(gasLimitValue, [Validators.required, Validators.min(0)])
+
+    this.formGroup = this.formBuilder.group({
+      gasPrice: gasPriceControl,
+      gasLimit: gasLimitControl
+    })
+  }
+
+  private hexToDecimal(hex: string): number {
+    return parseInt(hex, 16)
+  }
+  private decimalToHex(decimal: number): string {
+    return `0x${decimal.toString(16)}`
+  }
+
+  public async updateRawTransaction() {
+    const gasPriceValue = this.decimalToHex(new BigNumber(this.formGroup.controls.gasPrice.value).shiftedBy(9).toNumber())
+
+    this.rawTransaction = {
+      ...this.rawTransaction,
+      gasPrice: gasPriceValue,
+      gasLimit: this.decimalToHex(this.formGroup.controls.gasLimit.value)
+    }
+    this.onRawTransactionUpdate.emit(this.rawTransaction)
+    this.advanced = false
+  }
+}

src/app/pages/walletconnect/walletconnect.page.html

@@ -19,9 +19,13 @@
     </ng-container>
 
     <div *ngIf="request.method === requestMethod.ETH_SENDTRANSACTION" class="ion-padding-bottom ion-margin-bottom">
-      <ng-container *ngFor="let transaction of transactions">
-        <airgap-from-to [transaction]="transaction"></airgap-from-to>
-      </ng-container>
+      <div *ngFor="let airGapTransaction of airGapTransactions">
+        <walletconnect-from-to
+          [rawTransaction]="rawTransaction"
+          [airGapTransaction]="airGapTransaction"
+          (onRawTransactionUpdate)="updateRawTransaction($event)"
+        ></walletconnect-from-to>
+      </div>
     </div>
 
     <div *ngIf="request.method === requestMethod.PERSONAL_SIGN_REQUEST || request.method === requestMethod.ETH_SIGN_TYPED_DATA">

src/app/pages/walletconnect/walletconnect.page.ts

@@ -11,7 +11,7 @@ import {
 } from '@airgap/coinlib-core'
 import { RawEthereumTransaction } from '@airgap/coinlib-core/serializer/types'
 import { Component, OnInit } from '@angular/core'
-import { AlertController, ModalController } from '@ionic/angular'
+import { AlertController, ModalController, ToastController } from '@ionic/angular'
 import { TranslateService } from '@ngx-translate/core'
 import WalletConnect from '@walletconnect/client'
 import BigNumber from 'bignumber.js'
@@ -66,24 +66,25 @@ export class WalletconnectPage implements OnInit {
   public description: string = ''
   public url: string = ''
   public icon: string = ''
-  public transactions: IAirGapTransaction[] | undefined
   public beaconRequest: any
-  public readonly request: JSONRPC
-  public readonly requestMethod: typeof Methods = Methods
-  private readonly connector: WalletConnect | undefined
-  private selectedWallet: AirGapMarketWallet | undefined
+  public request: JSONRPC
   public selectableWallets: AirGapMarketWallet[] = []
+  public airGapTransactions: IAirGapTransaction[] | undefined
+  public rawTransaction: RawEthereumTransaction
+  public readonly requestMethod: typeof Methods = Methods
 
   private subscription: Subscription
-
+  private selectedWallet: AirGapMarketWallet | undefined
   private responseHandler: (() => Promise<void>) | undefined
+  private readonly connector: WalletConnect | undefined
 
   constructor(
     private readonly modalController: ModalController,
     private readonly accountService: AccountProvider,
     private readonly alertCtrl: AlertController,
     private readonly beaconService: BeaconService,
-    private readonly translateService: TranslateService
+    private readonly translateService: TranslateService,
+    private readonly toastController: ToastController
   ) {}
 
   public get address(): string {
@@ -124,6 +125,32 @@ export class WalletconnectPage implements OnInit {
     }
   }
 
+  public async updateRawTransaction(rawTransaction: RawEthereumTransaction) {
+    this.rawTransaction = { ...this.rawTransaction, gasPrice: rawTransaction.gasPrice, gasLimit: rawTransaction.gasLimit }
+
+    const ethereumProtocol = new EthereumProtocol()
+    this.airGapTransactions = await ethereumProtocol.getTransactionDetails({
+      publicKey: this.selectedWallet.publicKey,
+      transaction: this.rawTransaction
+    })
+
+    this.responseHandler = async () => {
+      this.accountService.startInteraction(
+        this.selectedWallet,
+        this.rawTransaction,
+        IACMessageType.TransactionSignRequest,
+        this.airGapTransactions
+      )
+    }
+    const toast = await this.toastController.create({
+      message: `Updated Transaction Details`,
+      duration: 2000,
+      position: 'bottom'
+    })
+
+    toast.present()
+  }
+
   public async done(): Promise<void> {
     if (this.responseHandler) {
       await this.responseHandler()
@@ -202,7 +229,7 @@ export class WalletconnectPage implements OnInit {
     const protocol = new EthereumProtocol()
     const eth = request.params[0]
 
-    const transaction: RawEthereumTransaction = {
+    this.rawTransaction = {
       nonce: eth.nonce ? eth.nonce : `0x${new BigNumber(txCount).toString(16)}`,
       gasPrice: eth.gasPrice ? eth.gasPrice : `0x${new BigNumber(gasPrice).toString(16)}`,
       gasLimit: `0x${(300000).toString(16)}`,
@@ -213,19 +240,24 @@ export class WalletconnectPage implements OnInit {
     }
 
     const walletConnectRequest = {
-      transaction: transaction,
+      transaction: this.rawTransaction,
       id: request.id
     }
 
     this.beaconService.addVaultRequest(walletConnectRequest, protocol)
-    this.transactions = await ethereumProtocol.getTransactionDetails({
+
+    this.airGapTransactions = await ethereumProtocol.getTransactionDetails({
       publicKey: this.selectedWallet.publicKey,
-      transaction
+      transaction: this.rawTransaction
     })
 
     this.responseHandler = async () => {
-      const airGapTxs = await ethereumProtocol.getTransactionDetails({ publicKey: this.selectedWallet.publicKey, transaction })
-      this.accountService.startInteraction(this.selectedWallet, transaction, IACMessageType.TransactionSignRequest, airGapTxs)
+      this.accountService.startInteraction(
+        this.selectedWallet,
+        this.rawTransaction,
+        IACMessageType.TransactionSignRequest,
+        this.airGapTransactions
+      )
     }
   }
 

src/app/services/walletconnect/walletconnect.service.ts

@@ -61,7 +61,6 @@ export class WalletconnectService {
     })
     await this.loading.present()
   }
-
   public async subscribeToEvents(connector: WalletConnect): Promise<void> {
     if (!connector) {
       return