feat: angular support

packages/ui-angular/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+lib
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+.angular
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/ui-angular/CHANGELOG.md

@@ -0,0 +1 @@
+# Changelog @tonconnect/ui-angular

packages/ui-angular/README.md

@@ -0,0 +1 @@
+# TON Connect UI Angular

packages/ui-angular/angular.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ui-angular": {
+      "projectType": "library",
+      "root": ".",
+      "sourceRoot": "src",
+      "prefix": "tc",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "tsconfig.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        }
+      }
+    }
+  }
+}

packages/ui-angular/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./lib",
+  "lib": {
+    "entryFile": "./src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": ["."]
+}

packages/ui-angular/package.json

@@ -0,0 +1,67 @@
+{
+    "name": "@tonconnect/ui-angular",
+    "version": "0.0.0",
+    "scripts": {
+        "build": "ng build ui-angular && rm lib/package.json"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/ton-connect/sdk.git"
+    },
+    "homepage": "https://github.com/ton-connect/sdk/tree/main/packages/ui-angular",
+    "bugs": {
+        "url": "https://github.com/ton-connect/sdk/issues"
+    },
+    "keywords": [
+        "TON",
+        "Wallet",
+        "ton-connect",
+        "tonconnect",
+        "Connect",
+        "Tonkeeper",
+        "sdk",
+        "UI",
+        "Angular"
+    ],
+    "author": "tonconnect",
+    "license": "Apache-2.0",
+    "files": [
+        "lib"
+    ],
+    "sideEffects": false,
+    "module": "./lib/fesm2022/tonconnect-ui-angular.mjs",
+    "typings": "./lib/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./lib/index.d.ts",
+            "esm2022": "./lib/esm2022/tonconnect-ui-angular.mjs",
+            "esm": "./lib/esm2022/tonconnect-ui-angular.mjs",
+            "default": "./lib/fesm2022/tonconnect-ui-angular.mjs"
+        }
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "^16.2.0",
+        "@angular/cli": "^16.2.0",
+        "@angular/compiler-cli": "^16.2.0",
+        "ng-packagr": "^16.2.0",
+        "typescript": "^4.9.3"
+    },
+    "dependencies": {
+        "@tonconnect/ui": "2.0.2",
+        "tslib": "^2.3.0"
+    },
+    "peerDependencies": {
+        "@angular/common": "^16.2.0",
+        "@angular/compiler": "^16.2.0",
+        "@angular/core": "^16.2.0",
+        "@angular/platform-browser": "^16.2.0",
+        "@angular/platform-browser-dynamic": "^16.2.0",
+        "rxjs": "~7.8.0",
+        "zone.js": "~0.13.0"
+    },
+    "nx": {
+        "tags": [
+            "scope:ui-angular"
+        ]
+    }
+}

packages/ui-angular/project.json

@@ -0,0 +1,12 @@
+{
+    "root": "packages/ui-angular/",
+    "targets": {
+      "version": {
+        "executor": "@jscutlery/semver:version",
+        "options": {
+          "changelogHeader": "# Changelog @tonconnect/ui-angular \n",
+          "push": false
+        }
+      }
+    }
+  }

packages/ui-angular/src/components/index.ts

@@ -0,0 +1 @@
+export * from './ton-connect-button/ton-connect-button.component';

packages/ui-angular/src/components/ton-connect-button/ton-connect-button.component.scss

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  width: fit-content;
+}

packages/ui-angular/src/components/ton-connect-button/ton-connect-button.component.ts

@@ -0,0 +1,35 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  OnDestroy,
+} from '@angular/core';
+import { TonConnectUIService } from '../../services';
+
+const BUTTON_ID = 'ton-connect-button';
+
+@Component({
+  selector: 'tc-connect-button',
+  templateUrl: './ton-connect-button.component.html',
+  styleUrls: ['./ton-connect-button.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TonConnectButtonComponent implements AfterViewInit, OnDestroy {
+  @HostBinding('attr.id')
+  buttonId = BUTTON_ID;
+
+  constructor(private readonly _tonConnectUIService: TonConnectUIService) {}
+
+  ngAfterViewInit(): void {
+    this._tonConnectUIService.updateOptions({
+      buttonRootId: BUTTON_ID,
+    });
+  }
+
+  ngOnDestroy(): void {
+    this._tonConnectUIService.updateOptions({
+      buttonRootId: null,
+    });
+  }
+}

packages/ui-angular/src/public-api.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './services';
+export * from './ton-connect-ui.module';
+export * from '@tonconnect/ui';

packages/ui-angular/src/services/index.ts

@@ -0,0 +1 @@
+export * from './ton-connect-ui.service';

packages/ui-angular/src/services/ton-connect-ui.service.ts

@@ -0,0 +1,101 @@
+import { Inject, Injectable, InjectionToken } from '@angular/core';
+import {
+  ActionConfiguration,
+  ConnectedWallet,
+  Locales,
+  TonConnectUI,
+  TonConnectUiOptions,
+  UIPreferences,
+  WalletsListConfiguration,
+} from '@tonconnect/ui';
+import {
+  BehaviorSubject,
+  Observable,
+  filter,
+  from,
+  map,
+  shareReplay,
+  switchMap,
+  take,
+  tap,
+} from 'rxjs';
+
+export type TonConnectUIOptions = Partial<ITonConnectUIOptionsBase> &
+  Partial<ITonConnectUIOptionsWinManifest>;
+
+export interface ITonConnectUIOptionsBase {
+  manifestUrl: string;
+  restoreConnection: boolean;
+  language: Locales;
+  uiPreferences?: UIPreferences;
+  walletsListConfiguration?: WalletsListConfiguration;
+  actionsConfiguration?: ActionConfiguration;
+}
+
+export interface ITonConnectUIOptionsWinManifest {
+  manifestUrl: string;
+}
+
+export const TON_CONNECT_UI_OPTIONS = new InjectionToken<
+  Observable<TonConnectUIOptions>
+>('TON_CONNECT_UI_OPTIONS');
+
+@Injectable()
+export class TonConnectUIService {
+  private readonly _tonConnectUI$ = this._options$.pipe(
+    map((options) => new TonConnectUI(options)),
+    shareReplay(1)
+  );
+
+  private readonly _connectedWallet$ =
+    new BehaviorSubject<ConnectedWallet | null>(null);
+
+  constructor(
+    @Inject(TON_CONNECT_UI_OPTIONS)
+    private readonly _options$: Observable<TonConnectUIOptions>
+  ) {
+    this._init();
+  }
+
+  get(): Observable<TonConnectUI> {
+    return this._tonConnectUI$.pipe(filter(value => !!value), take(1));
+  }
+
+  getConnectedWallet(): Observable<ConnectedWallet | null> {
+    return this._connectedWallet$.asObservable();
+  }
+
+  updateOptions(options: TonConnectUiOptions): void {
+    this.get()
+      .pipe(
+        tap((connection) => (connection.uiOptions = options)),
+        take(1)
+      )
+      .subscribe();
+  }
+
+  disconnectWallet(): Observable<void> {
+    return this.get().pipe(
+      switchMap((connection) => from(connection.disconnect())),
+      map(() => undefined)
+    );
+  }
+
+  restoreConnection(): Observable<boolean> {
+    return this.get().pipe(
+      switchMap((connection) => from(connection.connectionRestored))
+    );
+  }
+
+  private _init(): void {
+    this.get()
+      .pipe(
+        tap((connection) =>
+          connection.onStatusChange((status) =>
+            this._connectedWallet$.next(status)
+          )
+        )
+      )
+      .subscribe();
+  }
+}

packages/ui-angular/src/ton-connect-ui.module.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { ModuleWithProviders, NgModule, Provider } from '@angular/core';
+import { TonConnectButtonComponent } from './components';
+import { TonConnectUIService } from './services';
+
+@NgModule({
+  declarations: [TonConnectButtonComponent],
+  imports: [CommonModule],
+  exports: [TonConnectButtonComponent],
+  providers: [TonConnectUIService],
+})
+export class TonConnectUIModule {
+  static forRoot(config: {
+    options: Provider;
+  }): ModuleWithProviders<TonConnectUIModule> {
+    return {
+      ngModule: TonConnectUIModule,
+      providers: [config.options],
+    };
+  }
+}

packages/ui-angular/tsconfig.json

@@ -0,0 +1,36 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declarationMap": false,
+    "inlineSources": true,
+    "types": [],
+    "baseUrl": "./",
+    "outDir": "./lib/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "lib": ["ES2022", "dom"]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true,
+    "compilationMode": "partial"
+  }
+}