Arweave-Wallet-Kit-Ng

Arweave-Wallet-Kit-Ng is a remake of another project Arweave Wallet Kit designed to work with Angular Apps.

Supported wallets

• ArConnect
• Arweave.app
• Othent

Installation

yarn add arweave-wallet-kit-ng

or

npm i arweave-wallet-kit-ng

Peer Dependencies

# arconnect | arweave | arweave-wallet-connector | othent
yarn add arconnect@^0.4.2 arweave@^1.14.4 arweave-wallet-connector@^1.0.2 othent@^1.0.641

# @apollo/client | apollo-angular | graphql
yarn add @apollo/client@^3.0.0 apollo-angular@^5.0.0 graphql@^16.6.0

Setup

Add the following into your tsconfig.json under compilerOptions. This allows arweave-js to function.

"allowSyntheticDefaultImports": true,
"paths": {
  "crypto": [
    "./node_modules/crypto-js"
  ],
  "@angular/*": [
    "./node_modules/@angular/*"
  ]
},

Import the global style sheet in your styles.scss.

@import "/node_modules/arweave-wallet-kit-ng/styles.scss";

Import ArweaveWalletKitNgModule.forRoot() In AppModule ( Creates A Singleton Service )

import { ArweaveWalletKitNgModule } from "arweave-wallet-kit-ng";
@NgModule({
  // Import ArweaveWalletKitNgModule with forRoot() Into Your AppModule
  imports: [ArweaveWalletKitNgModule.forRoot()],
})
export class AppModule {}

Connect Button

// Import AWKConnectButtonModule where ever its needed.
import { AWKConnectButtonModule } from "arweave-wallet-kit-ng";
@NgModule({
  imports: [AWKConnectButtonModule],
})

<!-- Default -->
<awk-connect-button></awk-connect-button>

<!-- Custom Label -->
<awk-connect-button [label]="'Connect'"></awk-connect-button>

<!-- Size ('xs', 'sm', 'md, 'lg, 'xl') -->
<awk-connect-button [size]="'xs'"></awk-connect-button>

<!-- Customize With Your Own HTML/CSS -->
<awk-connect-button custom>
  <div class="custom-button" style="color: blue; background: yellow;">My Custom Button</div>
</awk-connect-button>

Connection Modal

// Import AWKConnectionModalModule where ever its needed.
import { AWKConnectionModalModule } from "arweave-wallet-kit-ng";
@NgModule({
  imports: [AWKConnectionModalModule],
})

<!-- THIS IS THE CONNECTION MODAL -->
<awk-connection-modal
  [appInfo]="{ name: '<APP NAME>', logo: '<LOGO URL>' }"
  [permissions]="[
    'ACCESS_ADDRESS',
    'ACCESS_PUBLIC_KEY',
    'ACCESS_ALL_ADDRESSES',
    'SIGN_TRANSACTION',
    'ENCRYPT',
    'DECRYPT',
    'SIGNATURE',
    'ACCESS_ARWEAVE_CONFIG',
    'DISPATCH'
  ]"
></awk-connection-modal>

Profile Modal

// Import AWKProfileModalModule where ever its needed.
import { AWKProfileModalModule } from "arweave-wallet-kit-ng";
@NgModule({
  imports: [AWKProfileModalModule],
})

<!-- Default -->
<awk-profile-modal></awk-profile-modal>

<!-- Size ('xs', 'sm', 'md, 'lg, 'xl') -->
<awk-profile-modal [size]="'xs'"></awk-profile-modal>

Listening For Events

// Import ArweaveWalletKitNgService.
import { ArweaveWalletKitNgService, EVENT_CODES, formatAddress } from 'arweave-wallet-kit-ng';

// Inject It Into Your Component.
constructor(private arweaveWalletKitNgService: ArweaveWalletKitNgService){}

// Listening For Events
this.arweaveWalletKitNgService.eventEmitterObservable.subscribe(async (event) => {
  switch (event.code) {

    case EVENT_CODES.READY:
      // Do Something After Ready ( PAGE RELOAD AND CONNECTED )
      break;

    case EVENT_CODES.CONNECT:
      // Do Something After Connect
      break;

    case EVENT_CODES.DISCONNECT:
      // Do Something After Disconnect
      break;
  }
});

Event Codes

  READY = 1000,
  MODAL = 1001,
  CAN_RESUME = 1002,

  TRY_CONNECT = 1010,
  TRY_DISCONNECT = 1011,
  TRY_ACTIVE_ADDRESS = 1012,
  TRY_ALL_ACTIVE_ADDRESSES = 1013,
  TRY_SIGN = 1014,
  TRY_PERMISSIONS = 1015,
  TRY_WALLET_NAMES = 1016,
  TRY_ENCRYPT = 1017,
  TRY_DECRYPT = 1018,
  TRY_ARWEAVE_CONFIG = 1019,
  TRY_SIGNATURE = 1020,
  TRY_ACTIVE_PUBLIC_KEY = 1021,
  TRY_ADD_TOKEN = 1022,
  TRY_DISPATCH = 1023,
  TRY_RESUME = 1024,
  TRY_BALANCE = 1025,

  CONNECT = 3000,
  DISCONNECT = 3001,
  ACTIVE_ADDRESS = 3002,
  ALL_ACTIVE_ADDRESSES = 3003,
  SIGN = 3004,
  PERMISSIONS = 3005,
  WALLET_NAMES = 3006,
  ENCRYPT = 3007,
  DECRYPT = 3008,
  ARWEAVE_CONFIG = 3009,
  SIGNATURE = 3010,
  ACTIVE_PUBLIC_KEY = 3011,
  ADD_TOKEN = 3012,
  DISPATCH = 3013,
  RESUME = 3014,
  BALANCE = 3015,

  ERROR = 5000,
  CONNECT_ERROR = 5001,
  DISCONNECT_ERROR = 5002,
  ACTIVE_ADDRESS_ERROR = 5003,
  ALL_ACTIVE_ADDRESSES_ERROR = 5004,
  SIGN_ERROR = 5005,
  PERMISSIONS_ERROR = 5006,
  WALLET_NAMES_ERROR = 5007,
  ENCRYPT_ERROR = 5008,
  DECRYPT_ERROR = 5009,
  ARWEAVE_CONFIG_ERROR = 5010,
  SIGNATURE_ERROR = 5011,
  ACTIVE_PUBLIC_KEY_ERROR = 5012,
  ADD_TOKEN_ERROR = 5013,
  DISPATCH_ERROR = 5014,
  RESUME_ERROR = 5015,
  BALANCE_ERROR = 5016,

Custom Styling

If you don't want to use the default styling you can copy the styles.scss from /projects/arweave-wallet-kit-ng/styles.scss and bring it to your main applications assets directory and skip the step above telling your to import the style sheet.

Change Log

2023-08-24

• Updated Service To Emit Try Events.
• Added Try Event Types Codes.
• Refactored SCSS To Include A Global Reset Wrapper.
• Refactored HTML based on CSS changes
• Listening For Try Events to Render UI.

2023-08-21

• Updated connection-button component.
• Updated connection-modal component.
• Added Profile Modal and Profile Button.
• Refactored ArweaveWebWallet.ts and Added specify disconnect functionality.
• Add balance function to retrieve balance using arweavejs.
• Removed component relative scss files.
• Refactored styles into /styles directory that build into styles.scss.

2023-08-17

• Created github workflow to publish package to npm.
• Modified directory structure for new components.
• Add Empty Templates for each of the components ( Connect-Button | Connection-Modal | Profile-Modal ).
• Created Connect Button Component with separate Module Load.
• Separated the component from the ar-kit-ng module so you can import on its owns.
• Modified the README.md with up to date information.

2023-08-16

• Added Connection Strategies from Arweave Wallet Kit! - Thanks @ropats16!
• New Event System ( LISTEN FOR INCOMING EVENTS AND REACT ACCORDINGLY )
• Refactored CSS with BEM naming convention.
• Refactored HTML to maintain better document structure.
• Modified the README.md with up to date information.

TODO

• [x] Add Reconnect Popup for Arweave Web Wallet Page Refresh.
• [x] Add "Out of the Box" Connect Button.
• [x] Add "Out of the Box" Profile Modal.
• [x] Get Handle and Avatar from ArProfile.

References

Arweave Kit

Arweave Kit (Github)

Arweave Wallet Kit (Github)