.

src/app/views/mpc/contributions/phase2/phase2.d.ts

+/* tslint:disable */
+/* eslint-disable */
+/**
+* @param {Uint8Array} params 
+* @param {Uint8Array} entropy 
+* @returns {Uint8Array} 
+*/
+export function contribute(params: Uint8Array, entropy: Uint8Array): Uint8Array;
+
+/**
+* If `module_or_path` is {RequestInfo}, makes a request and
+* for everything else, calls `WebAssembly.instantiate` directly.
+*
+* @param {RequestInfo | BufferSource | WebAssembly.Module} module_or_path
+*
+* @returns {Promise<any>}
+*/
+export default function init (module_or_path?: RequestInfo | BufferSource | WebAssembly.Module): Promise<any>;
+        
\ No newline at end of file

src/app/views/mpc/contributions/phase2/phase2.js

+
+let wasm;
+
+let cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
+
+cachedTextDecoder.decode();
+
+let cachegetUint8Memory0 = null;
+function getUint8Memory0() {
+    if (cachegetUint8Memory0 === null || cachegetUint8Memory0.buffer !== wasm.memory.buffer) {
+        cachegetUint8Memory0 = new Uint8Array(wasm.memory.buffer);
+    }
+    return cachegetUint8Memory0;
+}
+
+function getStringFromWasm0(ptr, len) {
+    return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len));
+}
+
+const heap = new Array(32);
+
+heap.fill(undefined);
+
+heap.push(undefined, null, true, false);
+
+let heap_next = heap.length;
+
+function addHeapObject(obj) {
+    if (heap_next === heap.length) heap.push(heap.length + 1);
+    const idx = heap_next;
+    heap_next = heap[idx];
+
+    heap[idx] = obj;
+    return idx;
+}
+
+function getObject(idx) { return heap[idx]; }
+
+function dropObject(idx) {
+    if (idx < 36) return;
+    heap[idx] = heap_next;
+    heap_next = idx;
+}
+
+function takeObject(idx) {
+    const ret = getObject(idx);
+    dropObject(idx);
+    return ret;
+}
+
+let WASM_VECTOR_LEN = 0;
+
+function passArray8ToWasm0(arg, malloc) {
+    const ptr = malloc(arg.length * 1);
+    getUint8Memory0().set(arg, ptr / 1);
+    WASM_VECTOR_LEN = arg.length;
+    return ptr;
+}
+
+let cachegetInt32Memory0 = null;
+function getInt32Memory0() {
+    if (cachegetInt32Memory0 === null || cachegetInt32Memory0.buffer !== wasm.memory.buffer) {
+        cachegetInt32Memory0 = new Int32Array(wasm.memory.buffer);
+    }
+    return cachegetInt32Memory0;
+}
+
+function getArrayU8FromWasm0(ptr, len) {
+    return getUint8Memory0().subarray(ptr / 1, ptr / 1 + len);
+}
+/**
+* @param {Uint8Array} params
+* @param {Uint8Array} entropy
+* @returns {Uint8Array}
+*/
+export function contribute(params, entropy) {
+    var ptr0 = passArray8ToWasm0(params, wasm.__wbindgen_malloc);
+    var len0 = WASM_VECTOR_LEN;
+    var ptr1 = passArray8ToWasm0(entropy, wasm.__wbindgen_malloc);
+    var len1 = WASM_VECTOR_LEN;
+    wasm.contribute(8, ptr0, len0, ptr1, len1);
+    var r0 = getInt32Memory0()[8 / 4 + 0];
+    var r1 = getInt32Memory0()[8 / 4 + 1];
+    var v2 = getArrayU8FromWasm0(r0, r1).slice();
+    wasm.__wbindgen_free(r0, r1 * 1);
+    return v2;
+}
+
+let cachedTextEncoder = new TextEncoder('utf-8');
+
+const encodeString = (typeof cachedTextEncoder.encodeInto === 'function'
+    ? function (arg, view) {
+    return cachedTextEncoder.encodeInto(arg, view);
+}
+    : function (arg, view) {
+    const buf = cachedTextEncoder.encode(arg);
+    view.set(buf);
+    return {
+        read: arg.length,
+        written: buf.length
+    };
+});
+
+function passStringToWasm0(arg, malloc, realloc) {
+
+    if (realloc === undefined) {
+        const buf = cachedTextEncoder.encode(arg);
+        const ptr = malloc(buf.length);
+        getUint8Memory0().subarray(ptr, ptr + buf.length).set(buf);
+        WASM_VECTOR_LEN = buf.length;
+        return ptr;
+    }
+
+    let len = arg.length;
+    let ptr = malloc(len);
+
+    const mem = getUint8Memory0();
+
+    let offset = 0;
+
+    for (; offset < len; offset++) {
+        const code = arg.charCodeAt(offset);
+        if (code > 0x7F) break;
+        mem[ptr + offset] = code;
+    }
+
+    if (offset !== len) {
+        if (offset !== 0) {
+            arg = arg.slice(offset);
+        }
+        ptr = realloc(ptr, len, len = offset + arg.length * 3);
+        const view = getUint8Memory0().subarray(ptr + offset, ptr + len);
+        const ret = encodeString(arg, view);
+
+        offset += ret.written;
+    }
+
+    WASM_VECTOR_LEN = offset;
+    return ptr;
+}
+
+function init(module) {
+    if (typeof module === 'undefined') {
+        module = import.meta.url.replace(/\.js$/, '_bg.wasm');
+    }
+    let result;
+    const imports = {};
+    imports.wbg = {};
+    imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
+        var ret = getStringFromWasm0(arg0, arg1);
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
+        takeObject(arg0);
+    };
+    imports.wbg.__wbg_new_59cb74e423758ede = function() {
+        var ret = new Error();
+        return addHeapObject(ret);
+    };
+    imports.wbg.__wbg_stack_558ba5917b466edd = function(arg0, arg1) {
+        var ret = getObject(arg1).stack;
+        var ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+        var len0 = WASM_VECTOR_LEN;
+        getInt32Memory0()[arg0 / 4 + 1] = len0;
+        getInt32Memory0()[arg0 / 4 + 0] = ptr0;
+    };
+    imports.wbg.__wbg_error_4bb6c2a97407129a = function(arg0, arg1) {
+        try {
+            console.error(getStringFromWasm0(arg0, arg1));
+        } finally {
+            wasm.__wbindgen_free(arg0, arg1);
+        }
+    };
+    imports.wbg.__widl_f_log_1_ = function(arg0) {
+        console.log(getObject(arg0));
+    };
+    imports.wbg.__wbindgen_throw = function(arg0, arg1) {
+        throw new Error(getStringFromWasm0(arg0, arg1));
+    };
+    imports.wbg.__wbindgen_rethrow = function(arg0) {
+        throw takeObject(arg0);
+    };
+
+    if ((typeof URL === 'function' && module instanceof URL) || typeof module === 'string' || (typeof Request === 'function' && module instanceof Request)) {
+
+        const response = fetch(module);
+        if (typeof WebAssembly.instantiateStreaming === 'function') {
+            result = WebAssembly.instantiateStreaming(response, imports)
+            .catch(e => {
+                return response
+                .then(r => {
+                    if (r.headers.get('Content-Type') != 'application/wasm') {
+                        console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
+                        return r.arrayBuffer();
+                    } else {
+                        throw e;
+                    }
+                })
+                .then(bytes => WebAssembly.instantiate(bytes, imports));
+            });
+        } else {
+            result = response
+            .then(r => r.arrayBuffer())
+            .then(bytes => WebAssembly.instantiate(bytes, imports));
+        }
+    } else {
+
+        result = WebAssembly.instantiate(module, imports)
+        .then(result => {
+            if (result instanceof WebAssembly.Instance) {
+                return { instance: result, module };
+            } else {
+                return result;
+            }
+        });
+    }
+    return result.then(({instance, module}) => {
+        wasm = instance.exports;
+        init.__wbindgen_wasm_module = module;
+
+        return wasm;
+    });
+}
+
+export default init;
+

src/app/views/mpc/contributions/phase2/phase2_bg.d.ts

+/* tslint:disable */
+/* eslint-disable */
+export const memory: WebAssembly.Memory;
+export function contribute(a: number, b: number, c: number, d: number, e: number): void;
+export function __wbindgen_malloc(a: number): number;
+export function __wbindgen_free(a: number, b: number): void;
+export function __wbindgen_realloc(a: number, b: number, c: number): number;

src/app/views/mpc/mpc-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { MpcComponent } from './mpc.component';
+
+const ROUTES: Routes = [
+  { path: '', component: MpcComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(ROUTES)],
+  exports: [RouterModule]
+})
+export class MpcRoutingModule { }

src/app/views/mpc/mpc.component.html

+<div [ngClass]="{'ceremony': !isPhonePortrait}">
+    <div [ngClass]="{'phone-portrait': isPhonePortrait, 'ceremony__box': !isPhonePortrait}">
+        <div class="box" [ngClass]="{'box-mobile': isPhonePortrait}">
+            <div class="box__header" [ngClass]="{'box-mobile__header': isPhonePortrait}">
+                <span>MPC Ceremony</span>
+            </div>
+            <div class="box__empty">
+                <os-contributions placeholder="Enter a random string"
+                (getDatabase)="getDatabase()">
+            </os-contributions>
+            <!-- Create and display a table with all existing contributions [id, hash] -->
+            <!-- Give users a social media link to share after contributing, with a hashtag -->
+            </div>
+        </div>
+    </div>
+    <p-table 
+        [value]="contributions"
+        scrollHeight="19em"
+        id="table">
+        <ng-template pTemplate="header">
+            <tr id="tableHeaders">
+                <th>ID</th>
+                <th>Attestation Keccak256 Hash</th>
+            </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-contribution>
+            <tr>
+                <td>{{ contribution.id }}</td>
+                <td>{{ contribution.attestation }}</td>
+            </tr>
+        </ng-template>
+    </p-table>
+</div>

src/app/views/mpc/mpc.component.scss

+@use "sass:math";
+
+@import "~src/styles/variables";
+
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+#table {
+  height: 50%;
+  display: block;
+  overflow-y: scroll;
+  border-radius: 0.5rem;
+}
+
+#tableHeaders{
+  position: sticky;
+  top: 0;
+}
+
+::-webkit-scrollbar {
+    width: 0em !important;
+
+}
+
+.phone-portrait{
+  margin: 5rem 0 -5rem 0;
+  padding-bottom: 5rem;
+}
+
+.ceremony {
+  display: flex;
+  flex-direction: column;
+  margin: 5.25rem auto 0;
+  padding: 2rem 1.5rem;
+  width: 50rem;
+  bottom: 10.8125rem;
+  background: #1B0D3D;
+  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.32);
+  border-radius: 0.5rem;
+  gap: math.div($offshift-gap * 3, 2);;
+
+  & &__box {
+    margin: auto;
+    width: 100%;
+  }
+}
+
+.box-mobile{
+  padding: 10vw;
+  // width: 80vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & &__header{
+    padding: auto;
+    border-radius: 0.5rem;
+  }
+}
+
+.box {
+  background: #fff;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+
+  & &__empty {
+    min-height: 10rem;
+    font-weight: 600;
+    font-size: 1.25rem;
+    line-height: 2rem;
+    color: #1B0D3D;
+    display: flex;
+    align-items: center;
+    align-self: center;
+    text-align: center;
+  }
+
+  & &__wrapper {
+    display: flex;
+    flex-direction: column;
+    padding: 0 1.5rem 1.5rem;
+  }
+
+  & &__simplebar {
+    max-height: calc(100vh - 21.25rem);
+    margin: 0 -1.5rem;
+  }
+
+  & &__header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+    padding: 0.75rem 1.5rem;
+    background: rgba(88, 0, 176, 0.1);
+    font-weight: 600;
+    font-size: 1.25rem;
+    line-height: 2rem;
+    color: #1B0D3D;
+
+    > img {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+
+  & &__zero-balances {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: $offshift-primary-color;
+    cursor: pointer;
+
+    > span.pi-check-circle {
+      font-size: 0.75rem;
+    }
+
+    > span:not(.pi-check-circle) {
+      font-weight: 600;
+      font-size: 0.75rem;
+      line-height: 1.1875rem;
+    }
+  }
+
+  & &__table {
+    tr > th > div > span {
+      opacity: 0.7;
+      color: #1B0D3D;
+    }
+
+    tr > th > div > .commitments__zero-balances {
+      color: $offshift-primary-color;
+      cursor: pointer;
+    }
+
+    tr > th > div > span,
+    tr > th > div > div {
+      font-weight: 600;
+      font-size: 0.75rem;
+      line-height: 1.1875rem;
+    }
+
+    tr > th,
+    tr > td {
+      background-color: #FFFFFF;
+      border: 0;
+    }
+
+    tr > th:first-of-type,
+    tr > td:first-of-type {
+      width: 1.25rem;
+      padding-right: 0;
+      padding-left: 1.5rem;
+    }
+
+    tr > th:last-of-type,
+    tr > td:last-of-type {
+      padding-right: 1.5rem;
+      padding-top: 0.375rem;
+      padding-bottom: 0.375rem;
+    }
+
+    tr > th:last-of-type > div,
+    tr > td:last-of-type > div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 3.5em;
+    }
+
+    tr > td:last-of-type > div {
+      background: rgba(27, 13, 61, 0.05);
+      border-radius: 0.25rem;
+      padding: 1rem;
+    }
+  }
+
+  & &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 0;
+  }
+
+  & &__text {
+    font-weight: 600;
+    font-size: 1rem;
+    line-height: 1.625rem;
+    text-decoration: underline;  
+    color: #1B0D3D;
+  }
+
+  & &__text a {
+    color: black;
+  }
+  & &__spent-text {
+    @extend .box__text;
+    text-decoration: none;
+    color:grey
+  }
+
+  & &__balance {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  & &__balance-usd {
+    font-weight: 600;
+    font-size: 0.75rem;
+    line-height: 1.1875rem;
+    color: #1B0D3D;
+    opacity: 0.7;
+  }
+
+  & &__button {
+    display: block;
+    width: 100%;
+  }
+}
\ No newline at end of file

src/app/views/mpc/mpc.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MpcComponent } from './mpc.component';
+
+describe('MpcComponent', () => {
+  let component: MpcComponent;
+  let fixture: ComponentFixture<MpcComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MpcComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MpcComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/views/mpc/mpc.component.ts

+import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { isAddress } from '@ethersproject/address';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { AbiItem } from 'web3-utils';
+import { environment } from '../../../environments/environment';
+import { Dictionary } from '@ngrx/entity';
+import { Buffer } from 'buffer';
+import { local } from 'web3modal';
+
+const host = environment.ceremonyHost
+const port = environment.ceremonyPort
+
+@Component({
+  selector: 'os-mpc',
+  templateUrl: './mpc.component.html',
+  styleUrls: ['./mpc.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+
+export class MpcComponent implements OnInit {
+
+  public isPhonePortrait = false;
+
+  public contributions : Array<any>
+
+  constructor(private readonly _cdr: ChangeDetectorRef, private responsive: BreakpointObserver) { 
+  }
+
+  
+  async ngOnInit(): Promise<void> {
+
+    this.responsive.observe([
+      Breakpoints.HandsetPortrait,
+      Breakpoints.TabletPortrait
+    ])
+      .subscribe(result => {
+
+        this.isPhonePortrait = false;
+        if (result.matches) {
+          this.isPhonePortrait = true;
+        }
+      })
+
+    await this.getDatabase();
+  }
+
+  //  Fetch and populate array with contributions
+  public async getDatabase() : Promise<void> {
+    const response = await fetch(`${host}:${port}/api/contributions`);
+
+    this.contributions = [...(await response.json())]
+
+    this._cdr.markForCheck();
+  }
+}

src/app/views/mpc/mpc.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { TableModule } from 'primeng/table';
+import { TooltipModule } from 'primeng/tooltip';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { MpcRoutingModule } from './mpc-routing.module';
+import { MpcComponent } from './mpc.component';
+import { ContributionsComponent } from './contributions/contributions.component';
+
+
+
+@NgModule({
+  declarations: [
+    MpcComponent,
+    ContributionsComponent
+  ],
+  imports: [
+    ButtonModule,
+    CommonModule,
+    FormsModule,
+    InputTextModule,
+    MpcRoutingModule,
+    ReactiveFormsModule,
+    TableModule,
+    TooltipModule
+  ]
+})
+export class MpcModule { }

src/app/views/stake/components/assets/assets.component.html

+<div class="assets">
+  <div class="assets__search p-input-icon-left">
+    <i class="pi pi-search"></i>
+    <input type="text"
+           pInputText
+           placeholder="Symbol, name or address"/>
+  </div>
+
+  <div *ngFor="let asset of assets"
+       (click)="onSelectAsset(asset)"
+       class="assets__item">
+    <div class="assets__icon">
+      <img [src]="asset.icon" [alt]="asset.name">
+    </div>
+
+    <div class="assets__content">
+      <div class="assets__name">{{ asset.name }}</div>
+      <div class="assets__symbol">{{ asset.symbol }}</div>
+    </div>
+  </div>
+</div>

src/app/views/stake/components/assets/assets.component.scss

+@import "~src/styles/variables";
+
+:host {
+  display: block;
+}
+
+.assets {
+  display: flex;
+  flex-direction: column;
+
+  & &__search {
+    width: 100%;
+    margin-bottom: 12px;
+
+    > .p-inputtext {
+      width: 100%;
+    }
+  }
+
+  & &__item {
+    display: flex;
+    background: rgba(88, 0, 176, 0.05);
+    padding: 12px;
+    gap: 16px;
+    border-radius: 4px;
+
+    &:not(:last-of-type) {
+      margin-bottom: 12px;
+    }
+
+    &:hover {
+      cursor: pointer;
+      background: rgba(88, 0, 176, 0.15);
+    }
+
+    &:active {
+      background: rgba(88, 0, 176, 0.25);
+    }
+  }
+
+  & &__icon {
+    width: 44px;
+    height: 44px;
+
+    > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  & &__content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  & &__name,
+  & &__symbol {
+    color: #1B0D3D;
+  }
+
+  & &__name {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    opacity: 0.7;
+  }
+
+  & &__symbol {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 26px;
+  }
+}

src/app/views/stake/components/assets/assets.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AssetsComponent } from './assets.component';
+
+describe('AssetsComponent', () => {
+  let component: AssetsComponent;
+  let fixture: ComponentFixture<AssetsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AssetsComponent ]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AssetsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/views/stake/components/assets/assets.component.ts

+import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { Tokens, TokensName } from '../../../../core/enums';
+import { TOKENS_MAP } from '../../../../core/helpers';
+import { TokenType } from '../../../../core/types';
+
+@Component({
+  selector: 'os-assets',
+  templateUrl: './assets.component.html',
+  styleUrls: ['./assets.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default,
+})
+export class AssetsComponent implements OnInit {
+  public assets!: TokenType[];
+
+  constructor(
+    private readonly _dynamicDialogRef: DynamicDialogRef,
+    private readonly _dynamicDialogConfig: DynamicDialogConfig,
+  ) {
+  }
+
+  public ngOnInit(): void {
+    this.assets = Object.keys(TOKENS_MAP)
+       .filter((key) => (key !== Tokens.XFT) && (key !== "WETH")) // Filter out XFT and WETH
+      .map((key) => TOKENS_MAP[key]);
+  }
+
+  public onSelectAsset(selectedAsset: TokenType): void {
+    this._dynamicDialogRef.close(selectedAsset);
+  }
+
+}

src/app/views/stake/components/commitments/commitments.component.html

+<div class="commitments">
+  <div class="commitments__header">
+    <div class="commitments__text">My Commitments</div>
+    <div class="commitments__zero-balances">
+      <span class="material-icons">check_circle</span>
+<!--      <span class="material-icons">check_circle_outline</span>-->
+      <span>Show zero balances</span>
+    </div>
+  </div>
+
+  <ngx-simplebar [options]="{ autoHide: false }"
+                 class="commitments__container">
+    <p-table [value]="token?.commitments"
+             [(selection)]="selectedCommitments"
+             dataKey="id"
+             class="commitments__content">
+      <ng-template pTemplate="header">
+        <tr>
+          <th>
+            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+          </th>
+          <th>
+            <div>
+              <span>Commitment #</span>
+              <div class="commitments__zero-balances">
+                <span>Token amount</span>
+                <span class="pi pi-sort-down"></span>
+                <!--<span class="pi pi-sort-up"></span>-->
+              </div>
+            </div>
+          </th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-commitment>
+        <tr>
+          <td>
+            <p-tableCheckbox [value]="commitment"></p-tableCheckbox>
+          </td>
+          <td>
+            <div>
+              <div class="commitments__text">{{ commitment.id }}</div>
+
+              <div class="commitments__balance">
+                <ng-container [ngTemplateOutlet]="tokenRef"
+                              [ngTemplateOutletContext]="{ item: commitment }">
+                </ng-container>
+
+                <span class="commitments__balance-usd">${{ commitment.USD | normalizeBN }}</span>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </ng-template>
+    </p-table>
+  </ngx-simplebar>
+
+  <div class="commitments__footer">
+    <div class="commitments__text">Selected commitments balance:</div>
+    <div class="commitments__balance">
+      <ng-container [ngTemplateOutlet]="tokenRef"
+                    [ngTemplateOutletContext]="{item: { amount: sumToken }}">
+      </ng-container>
+
+      <span class="commitments__balance-usd">${{ sumUSD | normalizeBN }}</span>
+    </div>
+  </div>
+
+  <button (click)="onDoneClick()"
+          [disabled]="!selectedCommitments?.length"
+          pButton
+          type="button"
+          label="Done"
+          class="commitments__button">
+  </button>
+</div>
+
+<ng-template #tokenRef let-item="item">
+  <div class="token">
+    <div class="token__icon">
+      <img [src]="token?.icon" alt="">
+    </div>
+    <span class="token__amount">{{ item.amount | normalizeBN }}</span>
+  </div>
+</ng-template>

src/app/views/stake/components/commitments/commitments.component.scss

+@import "~src/styles/variables";
+
+:host {
+  display: block;
+}
+
+.commitments {
+  display: flex;
+  flex-direction: column;
+
+  & &__container {
+    max-height: 400px;
+    margin: 0 -24px;
+  }
+
+
+  & &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+  }
+
+  & &__zero-balances {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: $offshift-primary-color;
+    cursor: pointer;
+
+    > span.material-icons {
+      font-size: 16px;
+    }
+
+    > span:not(.material-icons) {
+      font-weight: 600;
+      font-size: 12px;
+      line-height: 19px;
+    }
+  }
+
+  & &__content {
+    tr > th > div > span {
+      opacity: 0.7;
+      color: #1B0D3D;
+    }
+
+    tr > th > div > .commitments__zero-balances {
+      color: $offshift-primary-color;
+      cursor: pointer;
+    }
+
+    tr > th > div > span,
+    tr > th > div > div {
+      font-weight: 600;
+      font-size: 12px;
+      line-height: 19px;
+    }
+
+    tr > th,
+    tr > td {
+      background-color: #FFFFFF;
+      border: 0;
+    }
+
+    tr > th:first-of-type,
+    tr > td:first-of-type {
+      width: 20px;
+      padding-right: 0;
+      padding-left: 24px;
+    }
+
+    tr > th:last-of-type,
+    tr > td:last-of-type {
+      padding-right: 24px;
+      padding-top: 6px;
+      padding-bottom: 6px;
+    }
+
+    tr > th:last-of-type > div,
+    tr > td:last-of-type > div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    tr > td:last-of-type > div {
+      background: rgba(27, 13, 61, 0.05);
+      border-radius: 4px;
+      padding: 16px;
+    }
+  }
+
+  & &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 0;
+  }
+
+  & &__text {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 26px;
+    color: #1B0D3D;
+  }
+
+  & &__balance {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  & &__balance-usd {
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 19px;
+    color: #1B0D3D;
+    opacity: 0.7;
+  }
+
+  & &__button {
+    width: 100%;
+  }
+}
+
+.token {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+
+  & &__icon {
+    width: 16px;
+    height: 16px;
+
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  & &__amount {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 26px;
+    color: #1B0D3D;
+  }
+}

src/app/views/stake/components/commitments/commitments.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommitmentsComponent } from './commitments.component';
+
+describe('CommitmentsComponent', () => {
+  let component: CommitmentsComponent;
+  let fixture: ComponentFixture<CommitmentsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CommitmentsComponent ]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommitmentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/views/stake/components/commitments/commitments.component.ts

+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { BalanceCommitment, OutputParamsBalance } from '../../../../core/interfaces/contract-service-methods';
+import { ContractService } from '../../../../core/services/contract.service';
+import { selectAccountAddress } from '../../../../core/selectors';
+import { Store } from '@ngrx/store';
+import { BaseComponent } from '../../../../base.component';
+import { firstValueFrom } from 'rxjs';
+import { valueToBigNumber } from '../../../../core/helpers';
+
+@Component({
+  selector: 'os-commitments',
+  templateUrl: './commitments.component.html',
+  styleUrls: ['./commitments.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CommitmentsComponent extends BaseComponent implements OnInit {
+  public token: OutputParamsBalance;
+  public selectedCommitments: BalanceCommitment[];
+
+  constructor(
+    store: Store,
+    private readonly _dynamicDialogRef: DynamicDialogRef,
+    private readonly _dynamicDialogConfig: DynamicDialogConfig,
+    private readonly _contractService: ContractService,
+  ) {
+    super(store);
+
+    this.token = this._dynamicDialogConfig.data.token;
+    this.selectedCommitments = [this._dynamicDialogConfig.data.selectedCommitment];
+  }
+
+  public get sumToken(): string {
+    return this._calculateSelectedSum('amount');
+  }
+
+  public get sumUSD(): string {
+    return this._calculateSelectedSum('USD');
+  }
+
+  public ngOnInit(): void {
+  }
+
+  public async onDoneClick(): Promise<void> {
+    if (!this.selectedCommitments?.length) {
+      return;
+    }
+
+    if (this.selectedCommitments.length > 1) {
+      const accountAddress = await firstValueFrom(this.store.select(selectAccountAddress));
+
+      const commitmentIds = this.selectedCommitments.map((c) => Number(c.id));
+
+      const callback = async (error: any, hash: string) => {
+        console.log(error);
+        console.log(hash);
+      };
+
+      const { transactionHash } = await this._contractService
+        .groupCommitment(accountAddress, commitmentIds, callback);
+
+      const commitment = await this._contractService
+        .groupCommitmentsSpent(accountAddress, transactionHash, commitmentIds);
+
+      this._dynamicDialogRef.close(commitment);
+    } else {
+      this._dynamicDialogRef.close(this.selectedCommitments[0]);
+    }
+  }
+
+  private _calculateSelectedSum(prop: 'amount' | 'USD'): string {
+    if (!this.selectedCommitments?.length) {
+      return '0';
+    }
+
+    return this.selectedCommitments
+      .map((c) => (c as any)[prop])
+      .reduce((p, c) => {
+        p = p.plus(c);
+
+        return p;
+      }, valueToBigNumber(0))
+      .toString();
+  }
+}

src/app/views/stake/components/inputAssets/inputAssets.component.html

+<div class="assets">
+  <div class="assets__search p-input-icon-left">
+    <i class="pi pi-search"></i>
+    <input type="text"
+           pInputText
+           placeholder="Symbol, name or address"/>
+  </div>
+
+  <div *ngFor="let asset of assets"
+       (click)="onSelectAsset(asset)"
+       class="assets__item">
+    <div class="assets__icon">
+      <img [src]="asset.icon" [alt]="asset.name">
+    </div>
+
+    <div class="assets__content">
+      <div class="assets__name">{{ asset.name }}</div>
+      <div class="assets__symbol">{{ asset.symbol }}</div>
+    </div>
+  </div>
+</div>

src/app/views/stake/components/inputAssets/inputAssets.component.scss

+@import "~src/styles/variables";
+
+:host {
+  display: block;
+}
+
+.assets {
+  display: flex;
+  flex-direction: column;
+
+  & &__search {
+    width: 100%;
+    margin-bottom: 12px;
+
+    > .p-inputtext {
+      width: 100%;
+    }
+  }
+
+  & &__item {
+    display: flex;
+    background: rgba(88, 0, 176, 0.05);
+    padding: 12px;
+    gap: 16px;
+    border-radius: 4px;
+
+    &:not(:last-of-type) {
+      margin-bottom: 12px;
+    }
+
+    &:hover {
+      cursor: pointer;
+      background: rgba(88, 0, 176, 0.15);
+    }
+
+    &:active {
+      background: rgba(88, 0, 176, 0.25);
+    }
+  }
+
+  & &__icon {
+    width: 44px;
+    height: 44px;
+
+    > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  & &__content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  & &__name,
+  & &__symbol {
+    color: #1B0D3D;
+  }
+
+  & &__name {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    opacity: 0.7;
+  }
+
+  & &__symbol {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 26px;
+  }
+}