0.0.486 • Published 10 months ago

@cybrid/cybrid-sdk-ui-js v0.0.486

Weekly downloads
-
License
Apache-2.0
Repository
-
Last release
10 months ago

@cybrid/cybrid-sdk-ui-js

This package includes a bundled javascript web component (application) containing a variety of styled components that interface with Cybrid's api.

Install

npm install @cybrid/cybrid-sdk-ui-js@latest --save

Quick Start

Cross-Origin Resource Sharing (CORS)

The following URL's will have to be whitelisted to properly view the components:

Crypto currency icon assets: https://images.cybrid.xyz/

HTML

To use the application via html load it into your index.html as a script.

The script registers cybrid-app as a web-component in your window.

NOTE: If you are embedding this library in an Angular application you will want to omit cybrid-sdk-ui.polyfills.js to avoid duplication of zone.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Host Application</title>

    // Omit if already importing zone.js in an Angular application
    <script type="module" src="cybrid-sdk-ui.polyfills.js"></script>

    // Main, runtime, and css bundle
    <script type="module" src="cybrid-sdk-ui.min.js"></script>
  </head>
  <body>
    <cybrid-app
      [auth]="token"
      [config]="config"
      [component]="component"
    ></cybrid-app>
  </body>
</html>

Javascript

You can generate the application in Javascript instead of using the selector in HTML:

NOTE: You must still reference 'cybrid-app' in document.createElement()

<script>
  const cybrid = document.createElement('cybrid-app');
  cybrid.auth = 'your_JWT';
  cybrid.config = 'config';
  cybrid.component = 'component';
  document.body.append(cybrid);
</script>

If you want to append the application elsewhere than the body try:

document.getElementById('your-element').append(cybrid);

Configuration

You can change configuration during runtime. The application:

  • Accepts an auth, config, and component property
  • Emits events via eventLog and errorLog

auth (required)

Expects a JSON Web Token. The component won't display unless the bound JWT is valid.

Example:

<cybrid-app auth="ey...."></cybrid-app>

hostConfig (required)

A default component configuration is set if no config is bound. The full configuration object must be defined.

NOTE: Config is currently required due to the necessity of a customer GUID. In the future this will be removed and revert to a default config if undefined. The customer GUID will be embedded in the JWT.

interface ComponentConfig {
  refreshInterval: number;
  routing: boolean;
  locale: string;
  theme: string;
  customer: string;
  fiat: string;
  features: Array<string>;
  environment: string;
  redirectUri?: string;
}

Example:

your_config = {
  refreshInterval: 10000,
  routing: true,
  locale: 'fr-CA',
  theme: 'DARK',
  customer: '969c744a02b11ed', //example GUID,
  fiat: 'USD',
  features: ['kyc_identity_verifications'],
  environment: 'sandbox',
  redirectUri: 'https://app.com/bank-account-connect'
};
<cybrid-app [config]="your_config"></cybrid-app>

Parameters

refreshInterval

The number in milliseconds the component waits before refreshing data. Default: 5000

routing

A routing flag to enable or disable internal routing between components. Default: true

NOTE: Disabling routing will also remove routing elements from the ui, like the back button in trade. The app will still fire events where routing would have occurred such as completing a trade, or clicking an asset in the price-list. See 'Events' below for more information.

locale

The current locale. Supports: 'en-US' | 'fr-CA' Default: 'en-US'

theme

Light mode or dark mode styling. Supports: 'LIGHT' | 'DARK' Default: 'LIGHT'

fiat

The current fiat currency (counter asset for all value calculation). Supports: 'USD | CAD' Default: 'USD'

features

The banks features. Supports: 'attestation_identity_records' | 'kyc_identity_verifications' Default: []

environment

The environment that you are authenticated against. Supports: 'sandbox' | 'production'

redirectUri`

The redirect Uri that the Plaid SDK uses to return from a mobile OAuth flow. It must be registered with Cybrid so that we may add it to an internal Plaid allow-list. If this is undefined and on web-mobile the bank-account-connect component will return an Error, and serve a message to the user that explains mobile access is unavailable. The query parameter 'oauth_state_id' returned from Plaid must be present in the url when you re-render the bank-account-connect component after authentication.

NOTE: We cannot register a URI that uses a hash location strategy, ex: https://app.com/#/bank-account-connect

component (optional)

The currently displayed component. By default, the price-list component is rendered.

Components:

  • price-list
  • trade
  • account-list
  • identity-verification (Kyc configured banks only)
  • bank-account-connect (Plaid configured banks only)
  • bank-account-list (Plaid configured banks only)
  • transfer (Plaid configured banks only)

Example:

<cybrid-app component="trade"></cybrid-app>

bank-account-connect

Query params: 1. oauth_state_id. Returned by Plaid during a mobile OAuth flow. Completes the OAuth flow. 2. external_bank_account. An external bank account guid. Pass to reconnect a bank account in the refresh_required state.

Events

An event logging service that can be subscribed to. Emits application events and errors as an eventLog Object:

interface EventLog {
  level: LEVEL;
  code: CODE;
  message: string;
  data?: any;
}

Example:

<cybrid-app (eventLog)="handleEvent($event)"></cybrid-app>

Javascript:

cybridApp.addEventListener('eventLog', (event) => {
  console.log(event.detail);
});

Errors

An error logging service that can be subscribed to. Emits application errors, as well as pass through api errors as an errorLog Object:

interface ErrorLog {
  // 'Error' for an application error or the status code from an http error
  code: number | string;
  message: string;
  data?: any;
}

Example:

<cybrid-app (errorLog)="handleError($event)"></cybrid-app>

Javascript:

cybridApp.addEventListener('errorLog', (event) => {
  console.log(event.detail);
});

License

This project is licensed under Apache 2.0, found in LICENSE

0.0.486

10 months ago

0.0.483

11 months ago

0.0.484

11 months ago

0.0.479

1 year ago

0.0.478

1 year ago

0.0.477

1 year ago

0.0.476

1 year ago

0.0.475

1 year ago

0.0.474

1 year ago

0.0.482

1 year ago

0.0.481

1 year ago

0.0.480

1 year ago

0.0.471

1 year ago

0.0.468

1 year ago

0.0.467

1 year ago

0.0.466

1 year ago

0.0.465

2 years ago

0.0.464

2 years ago

0.0.463

2 years ago

0.0.461

2 years ago

0.0.462

2 years ago

0.0.460

2 years ago

0.0.458

2 years ago

0.0.459

2 years ago

0.0.457

2 years ago

0.0.456

2 years ago

0.0.455

2 years ago

0.0.454

2 years ago

0.0.453

2 years ago

0.0.452

2 years ago

0.0.450

2 years ago

0.0.451

2 years ago

0.0.436

2 years ago

0.0.435

2 years ago

0.0.434

2 years ago

0.0.439

2 years ago

0.0.438

2 years ago

0.0.437

2 years ago

0.0.431

2 years ago

0.0.447

2 years ago

0.0.446

2 years ago

0.0.445

2 years ago

0.0.444

2 years ago

0.0.449

2 years ago

0.0.448

2 years ago

0.0.442

2 years ago

0.0.441

2 years ago

0.0.440

2 years ago

0.0.403

2 years ago

0.0.402

2 years ago

0.0.401

2 years ago

0.0.400

2 years ago

0.0.407

2 years ago

0.0.406

2 years ago

0.0.405

2 years ago

0.0.404

2 years ago

0.0.414

2 years ago

0.0.413

2 years ago

0.0.412

2 years ago

0.0.411

2 years ago

0.0.418

2 years ago

0.0.417

2 years ago

0.0.416

2 years ago

0.0.415

2 years ago

0.0.410

2 years ago

0.0.409

2 years ago

0.0.408

2 years ago

0.0.425

2 years ago

0.0.423

2 years ago

0.0.428

2 years ago

0.0.427

2 years ago

0.0.426

2 years ago

0.0.421

2 years ago

0.0.420

2 years ago

0.0.419

2 years ago

0.0.399

2 years ago

0.0.398

2 years ago

0.0.395

2 years ago

0.0.394

2 years ago

0.0.393

2 years ago

0.0.392

2 years ago

0.0.396

2 years ago

0.0.391

2 years ago

0.0.390

2 years ago

0.0.369

2 years ago

0.0.368

2 years ago

0.0.367

2 years ago

0.0.362

2 years ago

0.0.361

2 years ago

0.0.360

2 years ago

0.0.366

2 years ago

0.0.365

2 years ago

0.0.364

2 years ago

0.0.363

2 years ago

0.0.379

2 years ago

0.0.378

2 years ago

0.0.373

2 years ago

0.0.372

2 years ago

0.0.371

2 years ago

0.0.370

2 years ago

0.0.377

2 years ago

0.0.376

2 years ago

0.0.375

2 years ago

0.0.374

2 years ago

0.0.389

2 years ago

0.0.384

2 years ago

0.0.383

2 years ago

0.0.382

2 years ago

0.0.388

2 years ago

0.0.387

2 years ago

0.0.386

2 years ago

0.0.385

2 years ago

0.0.326

2 years ago

0.0.325

2 years ago

0.0.324

2 years ago

0.0.323

2 years ago

0.0.329

2 years ago

0.0.328

2 years ago

0.0.327

2 years ago

0.0.322

2 years ago

0.0.337

2 years ago

0.0.336

2 years ago

0.0.335

2 years ago

0.0.334

2 years ago

0.0.339

2 years ago

0.0.338

2 years ago

0.0.333

2 years ago

0.0.332

2 years ago

0.0.331

2 years ago

0.0.330

2 years ago

0.0.348

2 years ago

0.0.347

2 years ago

0.0.346

2 years ago

0.0.345

2 years ago

0.0.349

2 years ago

0.0.340

2 years ago

0.0.344

2 years ago

0.0.343

2 years ago

0.0.342

2 years ago

0.0.341

2 years ago

0.0.359

2 years ago

0.0.358

2 years ago

0.0.357

2 years ago

0.0.356

2 years ago

0.0.351

2 years ago

0.0.350

2 years ago

0.0.355

2 years ago

0.0.354

2 years ago

0.0.353

2 years ago

0.0.352

2 years ago

0.0.321

2 years ago

0.0.315

2 years ago

0.0.314

2 years ago

0.0.312

2 years ago

0.0.319

2 years ago

0.0.318

2 years ago

0.0.317

2 years ago

0.0.316

2 years ago

0.0.311

2 years ago

0.0.320

2 years ago

0.0.304

2 years ago

0.0.303

2 years ago

0.0.302

2 years ago

0.0.301

2 years ago

0.0.308

2 years ago

0.0.307

2 years ago

0.0.306

2 years ago

0.0.305

2 years ago

0.0.300

2 years ago

0.0.279

3 years ago

0.0.274

3 years ago

0.0.273

3 years ago

0.0.272

3 years ago

0.0.271

3 years ago

0.0.278

3 years ago

0.0.277

3 years ago

0.0.276

3 years ago

0.0.275

3 years ago

0.0.270

3 years ago

0.0.285

3 years ago

0.0.282

3 years ago

0.0.281

3 years ago

0.0.280

3 years ago

0.0.294

3 years ago

0.0.299

2 years ago

0.0.298

2 years ago

0.0.292

3 years ago

0.0.269

3 years ago

0.0.267

3 years ago

0.0.266

3 years ago

0.0.238

3 years ago

0.0.237

3 years ago

0.0.236

3 years ago

0.0.235

3 years ago

0.0.234

3 years ago

0.0.249

3 years ago

0.0.248

3 years ago

0.0.247

3 years ago

0.0.246

3 years ago

0.0.241

3 years ago

0.0.240

3 years ago

0.0.245

3 years ago

0.0.243

3 years ago

0.0.242

3 years ago

0.0.259

3 years ago

0.0.258

3 years ago

0.0.257

3 years ago

0.0.252

3 years ago

0.0.250

3 years ago

0.0.256

3 years ago

0.0.255

3 years ago

0.0.254

3 years ago

0.0.253

3 years ago

0.0.263

3 years ago

0.0.262

3 years ago

0.0.261

3 years ago

0.0.260

3 years ago

0.0.264

3 years ago

0.0.216

3 years ago

0.0.215

3 years ago

0.0.218

3 years ago

0.0.217

3 years ago

0.0.227

3 years ago

0.0.226

3 years ago

0.0.225

3 years ago

0.0.224

3 years ago

0.0.229

3 years ago

0.0.228

3 years ago

0.0.223

3 years ago

0.0.222

3 years ago

0.0.220

3 years ago

0.0.230

3 years ago

0.0.233

3 years ago

0.0.232

3 years ago

0.0.231

3 years ago

0.0.214

3 years ago

0.0.213

3 years ago

0.0.212

3 years ago

0.0.205

3 years ago

0.0.204

3 years ago

0.0.169

3 years ago

0.0.209

3 years ago

0.0.208

3 years ago

0.0.207

3 years ago

0.0.206

3 years ago

0.0.164

3 years ago

0.0.163

3 years ago

0.0.201

3 years ago

0.0.168

3 years ago

0.0.200

3 years ago

0.0.167

3 years ago

0.0.166

3 years ago

0.0.165

3 years ago

0.0.175

3 years ago

0.0.174

3 years ago

0.0.173

3 years ago

0.0.172

3 years ago

0.0.179

3 years ago

0.0.211

3 years ago

0.0.178

3 years ago

0.0.210

3 years ago

0.0.177

3 years ago

0.0.176

3 years ago

0.0.171

3 years ago

0.0.170

3 years ago

0.0.186

3 years ago

0.0.185

3 years ago

0.0.184

3 years ago

0.0.183

3 years ago

0.0.189

3 years ago

0.0.188

3 years ago

0.0.187

3 years ago

0.0.182

3 years ago

0.0.181

3 years ago

0.0.180

3 years ago

0.0.197

3 years ago

0.0.196

3 years ago

0.0.195

3 years ago

0.0.194

3 years ago

0.0.198

3 years ago

0.0.193

3 years ago

0.0.192

3 years ago

0.0.191

3 years ago

0.0.190

3 years ago

0.0.158

3 years ago

0.0.153

3 years ago

0.0.151

3 years ago

0.0.150

3 years ago

0.0.157

3 years ago

0.0.156

3 years ago

0.0.155

3 years ago

0.0.162

3 years ago

0.0.161

3 years ago

0.0.160

3 years ago

0.0.149

3 years ago

0.0.148

3 years ago

0.0.147

3 years ago

0.0.146

3 years ago

0.0.117

3 years ago

0.0.84

3 years ago

0.0.116

3 years ago

0.0.85

3 years ago

0.0.115

3 years ago

0.0.86

3 years ago

0.0.114

3 years ago

0.0.87

3 years ago

0.0.88

3 years ago

0.0.89

3 years ago

0.0.119

3 years ago

0.0.118

3 years ago

0.0.113

3 years ago

0.0.80

3 years ago

0.0.112

3 years ago

0.0.81

3 years ago

0.0.111

3 years ago

0.0.82

3 years ago

0.0.83

3 years ago

0.0.128

3 years ago

0.0.73

3 years ago

0.0.127

3 years ago

0.0.74

3 years ago

0.0.126

3 years ago

0.0.75

3 years ago

0.0.125

3 years ago

0.0.76

3 years ago

0.0.77

3 years ago

0.0.79

3 years ago

0.0.129

3 years ago

0.0.120

3 years ago

0.0.124

3 years ago

0.0.123

3 years ago

0.0.122

3 years ago

0.0.71

3 years ago

0.0.121

3 years ago

0.0.72

3 years ago

0.0.139

3 years ago

0.0.138

3 years ago

0.0.137

3 years ago

0.0.136

3 years ago

0.0.131

3 years ago

0.0.130

3 years ago

0.0.134

3 years ago

0.0.133

3 years ago

0.0.132

3 years ago

0.0.106

3 years ago

0.0.95

3 years ago

0.0.105

3 years ago

0.0.96

3 years ago

0.0.104

3 years ago

0.0.97

3 years ago

0.0.98

3 years ago

0.0.109

3 years ago

0.0.108

3 years ago

0.0.107

3 years ago

0.0.141

3 years ago

0.0.140

3 years ago

0.0.90

3 years ago

0.0.102

3 years ago

0.0.91

3 years ago

0.0.145

3 years ago

0.0.101

3 years ago

0.0.92

3 years ago

0.0.100

3 years ago

0.0.93

3 years ago

0.0.143

3 years ago

0.0.94

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago