feat: dapp wallet

apps/commudle-admin/src/app/feature-modules/events/components/event-registrations/form-groups/form-groups.component.html

@@ -338,6 +338,8 @@
         </button>
       </div>
     </form>
+
+    <commudle-dapp-wallet [parent_id]="event.id" parent_type="Event"></commudle-dapp-wallet>
   </div>
 </div>
 

apps/commudle-admin/src/app/feature-modules/events/events.module.ts

@@ -2,7 +2,9 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { YouTubePlayerModule } from '@angular/youtube-player';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { EditorModule as NewEditorModule } from '@commudle/editor';
+import { NgxDatatableModule } from '@commudle/ngx-datatable';
+import { SharedComponentsModule } from '@commudle/shared-components';
 import {
   NbAccordionModule,
   NbActionsModule,
@@ -28,58 +30,57 @@ import {
   NbTooltipModule,
   NbWindowModule,
 } from '@commudle/theme';
-import { NgxDatatableModule } from '@commudle/ngx-datatable';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
 import { ZXingScannerModule } from '@zxing/ngx-scanner';
-import { LinkyModule } from 'ngx-linky';
-import { SharedComponentsModule } from 'apps/shared-components/shared-components.module';
+import { BackButtonComponent } from 'apps/shared-components/back-button/back-button.component';
+import { SharedComponentsModule as OldSharedComponentsModule } from 'apps/shared-components/shared-components.module';
+import { SidebarComponent } from 'apps/shared-components/sidebar/sidebar.component';
 import { SharedDirectivesModule } from 'apps/shared-directives/shared-directives.module';
 import { MiniUserProfileModule } from 'apps/shared-modules/mini-user-profile/mini-user-profile.module';
+import { SharedPipesModule } from 'apps/shared-pipes/pipes.module';
+import { LinkyModule } from 'ngx-linky';
 import { AppSharedComponentsModule } from '../../app-shared-components/app-shared-components.module';
 import { ReusableComponentsModule } from '../reusable-components/reusable-components.module';
 import { CollaboratingCommunitiesComponent } from './components/collaborating-communities/collaborating-communities.component';
 import { CreateEventComponent } from './components/create-event/create-event.component';
 import { EditEventComponent } from './components/edit-event/edit-event.component';
+import { EventAgendaComponent } from './components/event-agenda/event-agenda.component';
+import { EventCheckedInListComponent } from './components/event-checked-in-list/event-checked-in-list.component';
 import { EventCommentsComponent } from './components/event-comments/event-comments.component';
 import { EventDashboardComponent } from './components/event-dashboard/event-dashboard.component';
-import { FormGroupsComponent } from './components/event-registrations/form-groups/form-groups.component';
 import { EventDetailsComponent } from './components/event-details/event-details.component';
 import { EventEmbeddedVideoStreamComponent } from './components/event-embedded-video-stream/event-embedded-video-stream.component';
+import { EventFormResponsesGraphComponent } from './components/event-form-responses/event-form-responses-graph/event-form-responses-graph.component';
 import { EventFormResponsesComponent } from './components/event-form-responses/event-form-responses.component';
 import { UserDetailsCellComponent } from './components/event-form-responses/user-details-cell/user-details-cell.component';
+import { UserEngagementDataComponent } from './components/event-form-responses/user-engagement-data/user-engagement-data.component';
+import { UserPaymentDetailsComponent } from './components/event-form-responses/user-payment-details/user-payment-details.component';
+import { UserTrackSlotsComponent } from './components/event-form-responses/user-track-slots/user-track-slots.component';
 import { EventLocationTracksComponent } from './components/event-locations/event-location-tracks/event-location-tracks.component';
+import { TimeBlocksComponent } from './components/event-locations/event-location-tracks/time-blocks/time-blocks.component';
+import { TrackSlotFormComponent } from './components/event-locations/event-location-tracks/track-slot-form/track-slot-form.component';
+import { TrackSlotsComponent } from './components/event-locations/event-location-tracks/track-slots/track-slots.component';
 import { EventLocationsComponent } from './components/event-locations/event-locations.component';
 import { EventRecordingsComponent } from './components/event-recordings/event-recordings.component';
+import { DiscountCouponFormComponent } from './components/event-registrations/discount-coupons/discount-coupon-form/discount-coupon-form.component';
+import { DiscountCouponsComponent } from './components/event-registrations/discount-coupons/discount-coupons.component';
+import { EventRegistrationsComponent } from './components/event-registrations/event-registrations.component';
 import { EventSimpleRegistrationComponent } from './components/event-registrations/event-simple-registration/event-simple-registration.component';
+import { FormGroupsComponent } from './components/event-registrations/form-groups/form-groups.component';
+import { PaymentSettingsComponent } from './components/event-registrations/form-groups/payment-settings/payment-settings.component';
 import { EventSpeakersComponent } from './components/event-speakers/event-speakers.component';
 import { EventStatsComponent } from './components/event-stats/event-stats.component';
 import { EventStatusComponent } from './components/event-status/event-status.component';
 import { EventUpdatesComponent } from './components/event-updates/event-updates.component';
+import { NextStepCardComponent } from './components/next-step-card/next-step-card.component';
 import { SponsorsComponent } from './components/sponsors/sponsors.component';
 import { EntryPassScanComponent } from './components/user-event-registrations/entry-pass-scan/entry-pass-scan.component';
+import { ExitPassScanComponent } from './components/user-event-registrations/exit-pass-scan/exit-pass-scan.component';
 import { UserDetailsComponent } from './components/user-event-registrations/user-details/user-details.component';
 import { UserEventRegistrationsComponent } from './components/user-event-registrations/user-event-registrations.component';
 import { VolunteersComponent } from './components/volunteers/volunteers.component';
 import { EventsRoutingModule } from './events-routing.module';
-import { UserEngagementDataComponent } from './components/event-form-responses/user-engagement-data/user-engagement-data.component';
-import { SharedPipesModule } from 'apps/shared-pipes/pipes.module';
-import { TimeBlocksComponent } from './components/event-locations/event-location-tracks/time-blocks/time-blocks.component';
-import { TrackSlotsComponent } from './components/event-locations/event-location-tracks/track-slots/track-slots.component';
-import { ExitPassScanComponent } from './components/user-event-registrations/exit-pass-scan/exit-pass-scan.component';
-import { SidebarComponent } from 'apps/shared-components/sidebar/sidebar.component';
-import { BackButtonComponent } from 'apps/shared-components/back-button/back-button.component';
-import { EventAgendaComponent } from './components/event-agenda/event-agenda.component';
-import { EventRegistrationsComponent } from './components/event-registrations/event-registrations.component';
-import { DiscountCouponsComponent } from './components/event-registrations/discount-coupons/discount-coupons.component';
-import { PaymentSettingsComponent } from './components/event-registrations/form-groups/payment-settings/payment-settings.component';
-import { DiscountCouponFormComponent } from './components/event-registrations/discount-coupons/discount-coupon-form/discount-coupon-form.component';
-import { UserPaymentDetailsComponent } from './components/event-form-responses/user-payment-details/user-payment-details.component';
-import { UserTrackSlotsComponent } from './components/event-form-responses/user-track-slots/user-track-slots.component';
-import { TrackSlotFormComponent } from './components/event-locations/event-location-tracks/track-slot-form/track-slot-form.component';
-import { EventFormResponsesGraphComponent } from './components/event-form-responses/event-form-responses-graph/event-form-responses-graph.component';
-import { EditorModule as NewEditorModule } from '@commudle/editor';
-import { NextStepCardComponent } from './components/next-step-card/next-step-card.component';
-import { EventCheckedInListComponent } from './components/event-checked-in-list/event-checked-in-list.component';
 
 @NgModule({
   declarations: [
@@ -134,6 +135,7 @@ import { EventCheckedInListComponent } from './components/event-checked-in-list/
     ReusableComponentsModule,
     SharedDirectivesModule,
     MiniUserProfileModule,
+    OldSharedComponentsModule,
     SharedComponentsModule,
     SharedPipesModule,
     // External

libs/shared/components/src/index.ts

@@ -1,11 +1,8 @@
 export * from './lib/shared-components.module';
 
-export * from './lib/components/discussion/discussion.component';
-
-export * from './lib/components/vote/vote.component';
-
 export * from './lib/components/channel-discussion/channel-discussion.component';
-
-export * from './lib/components/loading-spinner/loading-spinner.component';
-
+export * from './lib/components/dapp-wallet/dapp-wallet.component';
+export * from './lib/components/discussion/discussion.component';
 export * from './lib/components/faq/faq.component';
+export * from './lib/components/loading-spinner/loading-spinner.component';
+export * from './lib/components/vote/vote.component';

libs/shared/components/src/lib/components/dapp-wallet/dapp-wallet.component.html

@@ -0,0 +1,19 @@
+<div class="dapp-wallet">
+  <div *ngIf="wallet; else connectTemplate" class="dapp-wallet__connected">
+    <div class="wallet-info">
+      <div class="wallet-info__address">
+        <span>{{ wallet.address }}</span>
+        <button nbButton size="tiny" (click)="copyAddress()" ghost>
+          <nb-icon icon="copy"></nb-icon>
+        </button>
+      </div>
+    </div>
+    <div class="wallet-actions">
+      <button nbButton size="tiny" (click)="disconnectWallet()">Disconnect</button>
+    </div>
+  </div>
+
+  <ng-template #connectTemplate>
+    <button nbButton (click)="connectWallet()">Connect Wallet</button>
+  </ng-template>
+</div>

libs/shared/components/src/lib/components/dapp-wallet/dapp-wallet.component.scss

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+}
+
+.dapp-wallet {
+  @apply com-mt-4;
+
+  .dapp-wallet__connected {
+    .wallet-actions {
+      @apply com-mt-2;
+    }
+  }
+}

libs/shared/components/src/lib/components/dapp-wallet/dapp-wallet.component.spec.ts

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

libs/shared/components/src/lib/components/dapp-wallet/dapp-wallet.component.ts

@@ -0,0 +1,80 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AuthService, ToastrService } from '@commudle/shared-services';
+import { DappWalletService } from '../../services/dapp-wallet.service';
+import { MetamaskService } from '../../services/metamask.service';
+import { IDappWallet } from '@commudle/shared-models';
+
+@Component({
+  selector: 'commudle-dapp-wallet',
+  templateUrl: './dapp-wallet.component.html',
+  styleUrls: ['./dapp-wallet.component.scss'],
+})
+export class DappWalletComponent implements OnInit {
+  @Input() parent_id: number;
+  @Input() parent_type: 'Event';
+
+  createForm: FormGroup;
+
+  wallet: IDappWallet;
+
+  constructor(
+    public authService: AuthService,
+    private fb: FormBuilder,
+    private dappWalletService: DappWalletService,
+    private metamaskService: MetamaskService,
+    private toastrService: ToastrService,
+  ) {}
+
+  ngOnInit(): void {
+    this.createForm = this.fb.group({
+      address: ['', Validators.required],
+      wallet_type: ['metamask'],
+      parent_id: [this.parent_id],
+      parent_type: [this.parent_type],
+    });
+
+    this.getWallets();
+  }
+
+  getWallets() {
+    this.dappWalletService.getWallets(this.parent_id, this.parent_type).subscribe((res) => {
+      if (res.length === 0) {
+        return;
+      }
+      this.wallet = res[0];
+    });
+  }
+
+  connectWallet() {
+    this.metamaskService
+      .connectWallet()
+      .then((res) => {
+        this.createForm.patchValue({ address: res[0] });
+        if (this.createForm.invalid) {
+          return;
+        }
+        this.dappWalletService.createWallet(this.createForm.value).subscribe((res) => {
+          this.wallet = res;
+          this.toastrService.successDialog('Wallet connected successfully');
+        });
+      })
+      .catch((err) => {
+        this.toastrService.warningDialog(err);
+      });
+  }
+
+  copyAddress() {
+    navigator.clipboard.writeText(this.wallet.address);
+  }
+
+  disconnectWallet() {
+    this.dappWalletService.destroyWallet(this.wallet.id).subscribe(() => {
+      this.metamaskService.disconnectWallet();
+      this.wallet = null;
+      this.createForm.reset();
+      this.createForm.patchValue({ parent_id: this.parent_id, parent_type: this.parent_type });
+      this.toastrService.successDialog('Wallet disconnected successfully');
+    });
+  }
+}

libs/shared/components/src/lib/services/dapp-wallet.service.ts

@@ -0,0 +1,28 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { IDappWallet } from '@commudle/shared-models';
+import { API_ROUTES, BaseApiService } from '@commudle/shared-services';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DappWalletService {
+  constructor(private http: HttpClient, private baseApiService: BaseApiService) {}
+
+  getWallets(parent_id: number, parent_type: 'Event'): Observable<IDappWallet[]> {
+    const params = new HttpParams().set('parent_id', parent_id.toString()).set('parent_type', parent_type);
+    return this.http.get<IDappWallet[]>(this.baseApiService.getRoute(API_ROUTES.DAPP_WALLETS.INDEX), { params });
+  }
+
+  createWallet(formData): Observable<IDappWallet> {
+    return this.http.post<IDappWallet>(this.baseApiService.getRoute(API_ROUTES.DAPP_WALLETS.CREATE), {
+      dapp_wallet: formData,
+    });
+  }
+
+  destroyWallet(walletId: number): Observable<boolean> {
+    const params = new HttpParams().set('dapp_wallet_id', walletId.toString());
+    return this.http.delete<boolean>(this.baseApiService.getRoute(API_ROUTES.DAPP_WALLETS.DELETE), { params });
+  }
+}

libs/shared/components/src/lib/services/metamask.service.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MetamaskService {
+  private ethereum: any;
+
+  constructor() {
+    const { ethereum } = <never>window;
+    this.ethereum = ethereum;
+  }
+
+  public async connectWallet(): Promise<any> {
+    if (!this.ethereum) {
+      return Promise.reject('Please install MetaMask!');
+    }
+
+    try {
+      return await this.ethereum.request({ method: 'eth_requestAccounts' });
+    } catch (err) {
+      if (err.code === 4001) {
+        // EIP-1193 userRejectedRequest error.
+        // If this happens, the user rejected the connection request.
+        return Promise.reject('User rejected connection request. Please try again.');
+      } else {
+        return Promise.reject(err);
+      }
+    }
+  }
+
+  // revoke access to the dapp
+  public async disconnectWallet(): Promise<void> {
+    if (!this.ethereum) {
+      return Promise.reject('Please install MetaMask!');
+    }
+
+    return await this.ethereum.request({ method: 'wallet_revokePermissions', params: [{ eth_accounts: {} }] });
+  }
+}

libs/shared/components/src/lib/shared-components.module.ts

@@ -5,15 +5,16 @@ import { EditorModule } from '@commudle/editor';
 import { InViewportDirective } from '@commudle/in-viewport';
 import { InfiniteScrollModule } from '@commudle/infinite-scroll';
 import { NbButtonModule, NbContextMenuModule, NbIconModule, NbTooltipModule } from '@commudle/theme';
-import { DiscussionComponent } from './components/discussion/discussion.component';
-import { MessageComponent } from './components/discussion/message/message.component';
-import { VoteComponent } from './components/vote/vote.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ChannelDiscussionComponent } from './components/channel-discussion/channel-discussion.component';
 import { CommunityChannelMessageComponent } from './components/channel-discussion/community-channel-message/community-channel-message.component';
 import { CommunityForumMessageComponent } from './components/channel-discussion/community-forum-message/community-forum-message.component';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { LoadingSpinnerComponent } from './components/loading-spinner/loading-spinner.component';
+import { DappWalletComponent } from './components/dapp-wallet/dapp-wallet.component';
+import { DiscussionComponent } from './components/discussion/discussion.component';
+import { MessageComponent } from './components/discussion/message/message.component';
 import { FaqComponent } from './components/faq/faq.component';
+import { LoadingSpinnerComponent } from './components/loading-spinner/loading-spinner.component';
+import { VoteComponent } from './components/vote/vote.component';
 @NgModule({
   declarations: [
     DiscussionComponent,
@@ -24,6 +25,7 @@ import { FaqComponent } from './components/faq/faq.component';
     CommunityForumMessageComponent,
     LoadingSpinnerComponent,
     FaqComponent,
+    DappWalletComponent,
   ],
   imports: [
     CommonModule,
@@ -37,7 +39,14 @@ import { FaqComponent } from './components/faq/faq.component';
     NbContextMenuModule,
     FontAwesomeModule,
   ],
-  exports: [DiscussionComponent, VoteComponent, ChannelDiscussionComponent, LoadingSpinnerComponent, FaqComponent],
+  exports: [
+    DiscussionComponent,
+    VoteComponent,
+    ChannelDiscussionComponent,
+    LoadingSpinnerComponent,
+    FaqComponent,
+    DappWalletComponent,
+  ],
   providers: [InViewportDirective],
 })
 export class SharedComponentsModule {}