Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
0c3a0ca
update cleanup
juliancwirko Oct 19, 2024
323f7ab
experiments
juliancwirko Oct 19, 2024
50695a9
without mvx dependences, broken (wip)
juliancwirko Oct 19, 2024
6fb05b7
add multiversx banner in bundle
juliancwirko Oct 19, 2024
7eb4006
move web wallet signing provider (doesnt work yet)
juliancwirko Oct 20, 2024
a9ce807
fix web wallet provider
juliancwirko Oct 20, 2024
bdd7578
remove unused terser
juliancwirko Oct 20, 2024
7c6d87b
migrate webview provider
juliancwirko Oct 27, 2024
53a9277
refactor utils
juliancwirko Nov 2, 2024
75adf18
update deps
juliancwirko Nov 2, 2024
f381bde
working wallet connect but still bundled
juliancwirko Nov 2, 2024
4b0e27e
add not working version
juliancwirko Nov 3, 2024
22b7a78
with working lint, prettier, clean, type check
juliancwirko Nov 3, 2024
0b06321
with working build
juliancwirko Nov 3, 2024
0265777
with working dev server
juliancwirko Nov 3, 2024
401eaaf
fix building typescript and publishing
juliancwirko Nov 3, 2024
4171434
remove script
juliancwirko Nov 3, 2024
0dde15a
working version
juliancwirko Nov 3, 2024
12af6db
move mobile callbacks to the externalSigningProviders
juliancwirko Nov 3, 2024
f97ba26
experiments with bundle size
juliancwirko Nov 3, 2024
e6988b7
remove bundle size experiments and cleanup
juliancwirko Nov 5, 2024
032f14f
some refactor
juliancwirko Nov 5, 2024
238ea56
improve native auth integration
juliancwirko Nov 9, 2024
466f5a9
remove the namespace
juliancwirko Nov 17, 2024
e4efcf2
updates
juliancwirko Feb 15, 2025
ed77f19
add missing TODO methods
juliancwirko Feb 15, 2025
4b9f409
Merge pull request #14 from elven-js/experimental-monorepo
juliancwirko Feb 15, 2025
b143e68
fix scripts
juliancwirko Feb 15, 2025
7b9031a
add licenses
juliancwirko Feb 16, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 33 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,35 @@
# Dependencies
node_modules
meta.txt
meta.json
.pnp
.pnp.js

# Testing
coverage

# Turbo
.turbo

# Build outputs
build
dist
out

# Misc
.DS_Store
*.pem
stats.html

# Debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Local env files
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# Development SSL certificates
certs/
5 changes: 4 additions & 1 deletion .npmignore
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
example
demo-app
node_modules
src
configs
.prettierrc
.eslintrc
.editorconfig
.turbo
dev-server.mjs
esbuild.config.cjs
tsconfig.json
meta.txt
meta.json
eslint.config.mjs
esbuild.config.js
3 changes: 3 additions & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
engine-strict=true
resolution-mode=highest
save-exact=true
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2022 Julian Ćwirko
Copyright (c) 2024 Julian Ćwirko

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
170 changes: 10 additions & 160 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,167 +1,17 @@
## ElvenJS
## Elven monorepo

### One static file to rule it all on the MultiversX blockchain!
TODO link other readmes

## Docs
- [www.elvenjs.com](https://www.elvenjs.com)
## Development

## Videos
- [JavaScript browser SDK for MultiversX Blockchain](https://youtu.be/tcTukpkjcQw)
### HTTPS Local Development

## Demos
- [elvenjs.netlify.app](https://elvenjs.netlify.app/) - EGLD, ESDT transactions, smart contract queries and transactions
- [elrond-donate-widget-demo.netlify.app](https://multiversx-donate-widget-demo.netlify.app/) - donation-like widget demo
- [StackBlitz vanilla html demo](https://stackblitz.com/edit/web-platform-d4rx5v?file=index.html)
- [StackBlitz Solid.js demo](https://stackblitz.com/edit/vitejs-vite-rbo6du?file=src/App.tsx)
- [StackBlitz React demo](https://stackblitz.com/edit/vitejs-vite-qr2u7l?file=src/App.tsx)
- [StackBlitz Vue demo](https://stackblitz.com/edit/vue-zrb8y5?file=src/App.vue)
The development server runs on HTTPS for secure local development. When you run `npm run dev:server`, the setup script will automatically:

Authenticate, sign and send transactions on the MultiversX blockchain in the browser. No need for bundlers, frameworks, etc. Just attach the script source, and you are ready to go. You can incorporate it into your preferred CMS framework like WordPress or an e-commerce system. Plus, it will also work on a standard static HTML website.
1. Check if development SSL certificates exist
2. Generate new self-signed certificates if needed
3. Start the HTTPS development server

The primary purpose of this tool is to have a lite script for browser usage where you can authenticate and sign/send transactions on the MultiversX blockchain and do this without any additional build steps.
The first time you access the development server in your browser, you'll see a security warning because we're using self-signed certificates. This is normal for local development, and you can safely proceed by accepting the certificate warning.

The purpose is to simplify the usage for primary use cases and open the doors for many frontend tools and approaches.

It is a script for browsers incorporates ES6 modules. If you need fully functional JavaScript/Typescript SDK (also in Nodejs), please use [sdk-js](https://docs.multiversx.com/sdk-and-tools/sdk-js/), an official Typescript MultiversX SDK. And if you are React developer, please check the [Nextjs dapp](https://github.com/xdevguild/nextjs-dapp-template).

**You can use it already, but it is under active development, and the API might change, there could be breaking changes without changing major versions.**

### How to use it

Copy and include the `elven.js` script from the `build` directory or the best would be to use CDN (https://unpkg.com/elven.js/build/elven.js). Please don't link the script using the [demo](https://elvenjs.netlify.app/) domain.

Use module type, like:

```html
<script type="module">
import {
ElvenJS,
Transaction,
Address,
TransactionPayload,
TokenTransfer,
ContractFunction,
U32Value,
} from './elven.js';

// Your code here
</script>
```
or from CDN:

```html
<script type="module">
import {
ElvenJS,
Transaction,
Address,
TransactionPayload,
TokenTransfer,
ContractFunction,
U32Value,
} from 'https://unpkg.com/elven.js@<actual_version_here>/build/elven.js';

// Your code here
</script>
```

### SDK reference

Please check the docs here: [www.elvenjs.com/docs/sdk-reference.html](https://www.elvenjs.com/docs/sdk-reference.html)

### Recipes

Please check how to use it with a couple of recipes here: [www.elvenjs.com/docs/recipes.html](https://www.elvenjs.com/docs/recipes.html)

Check for more complete examples in the [example/index.html](/example/index.html)

### Usage example with static website (base demo):

Check out the example file: [example/index.html](/example/index.html)

You will find the whole demo there. The same is deployed here: [elvenjs.netlify.app](https://elvenjs.netlify.app)

### Usage in frontend frameworks

Elven.js can also be used in many different frameworks by importing it from node_modules (of course, it is a client-side library). When it comes to React/Nextjs, it is advised to use one of the ready templates, for example, the one mentioned above. But Elven.js can be helpful in other frameworks where there are no templates yet. Example:

```bash
npm install elven.js
```
and then in your client side framework:
```typescript
import { ElvenJS } from 'elven.js';
```

The types should also be exported.

### What can it do?

The API is limited for now, this will change, but even now, it can do most of the core operations:

- authenticate using the xPortal mobile, MultiversX browser extension, MultiversX Web Wallet and xAlias
- integrate with xPortal Hub
- handle expiration of the auth state
- handle login with tokens to be able to get the signature
- sign transactions
- send transactions (also custom smart contracts)
- sign custom messages
- basic global states handling (local storage)
- basic structures for transaction payload
- sync the network on page load
- querying the smart contracts (without tools for result parsing yet)
- support for guarded transactions using MultiversX 2FA solutions

### What will it do soon? (TODO):

- authenticate with Ledger Nano
- result parsing (separate library)
- more advanced global state handling and (real-time updates (if needed)?)
- more structures and simplification for payload builders
- split it into more files/libraries
- make it as small as possible

### What it won't probably do:

- crypto tasks
- results parsing (but it will land in a separate package)

Why? Because it is supposed to be a browser script, it should be as small as possible. All that functionality can be replaced if needed by a custom implementation or other libraries. There will be docs with examples for that. And in the future, there may be more similar libraries, but optional and separated.

### Development

1. clone the repo
2. `npm install` dependencies
3. `npm run build`
4. test on example -> `npm run dev:server`
5. rebuild with every change in the script

To test the MultiversX browser extension you would need to run localhost with SSL.
For quick dev testing tools like [localhost.run](https://localhost.run/) should be enough.
After you run `npm run dev:server`, in separate teriminal window run `ssh -R 80:localhost:3000 localhost.run`. You can also relay on your own SSL setup.

### Articles

- [How to Interact With the MultiversX Blockchain in a Simple Static Website](https://hackernoon.com/how-to-interact-with-the-elrond-blockchain-in-a-simple-static-website)
- [How to enable donations on any website using the MultiversX blockchain and EGLD tokens](https://dev.to/juliancwirko/how-to-enable-donations-on-any-website-using-the-elrond-blockchain-and-egld-tokens-3fkf)

### TODO
- [Kanban board](https://github.com/elven-js/projects/1)

### Other tools

If you need to use MultiversX SDK with React-based projects, you can try these tools:

- [sdk-dapp](https://github.com/multiversx/mx-sdk-dapp) - for standard React-based SPA
- [nextjs-dapp-template](https://github.com/xdevguild/nextjs-dapp-template) - or Nextjs apps
- [useElven](https://www.useelven.com) - React Hooks for interacting with MultiversX blockchain

If you are interested in creating and managing your own PFP NFT collection, you might be interested in:

- [Elven Tools](https://www.elven.tools) - What is included: NFT minter smart contract (decentralized way of minting), minter Nextjs dapp (interaction on the frontend side), CLI tool (deploy, configuration, interaction)
- [nft-art-maker](https://github.com/juliancwirko/nft-art-maker) - tool for creating png assets from provided layers. It can also pack files and upload them to IPFS using nft.storage. All CIDs will be auto-updated

Other tools:

- [Buildo Begins](https://github.com/xdevguild/buildo-begins) - all MultiversX blockchain CLI interactions with sdk-js, still in progress, but usable
- [Buildo.dev](https://www.buildo.dev) - Buildo.dev is a MultiversX app that helps with blockchain interactions, like issuing tokens and querying smart contracts.
The development server will be available at `https://localhost:3000` (or your specified PORT).
15 changes: 15 additions & 0 deletions TODO.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
- remove callbacks from the API - base everything on promises
- prepare a new API for token operations
- prepare a new API for smart contracts interactions - the the best would be to pass the arguments as is (always requiring ABI without typed helpers ???)
- pass ABI as link to a file or as content or both?
- check and handle all the errors for the mobile provider when the provider is not initialized etc.
- add tests for at least most used utilities, maybe some core tools, check tests in MVX SDKs (more tests can be added later)
- test guardians
- update README and docs and demos
- how it is built now
- what it can't do
- why the mobile provider is so big and what can be done to make it smaller, plus why it isn't so bad because it is a separate file
- check TODOs in code
- use Knip to detect unused stuff (in both packages) and do the cleanup
- test on the testnet
- add jsdoc comments for main functions
100 changes: 0 additions & 100 deletions build/elven.js

This file was deleted.

1 change: 0 additions & 1 deletion build/types/auth/account-sync.d.ts

This file was deleted.

2 changes: 0 additions & 2 deletions build/types/auth/expires-at.d.ts

This file was deleted.

2 changes: 0 additions & 2 deletions build/types/auth/init-extension-provider.d.ts

This file was deleted.

2 changes: 0 additions & 2 deletions build/types/auth/init-mobile-provider.d.ts

This file was deleted.

2 changes: 0 additions & 2 deletions build/types/auth/init-web-wallet-provider.d.ts

This file was deleted.

2 changes: 0 additions & 2 deletions build/types/auth/login-with-extension.d.ts

This file was deleted.

3 changes: 0 additions & 3 deletions build/types/auth/login-with-mobile.d.ts

This file was deleted.

4 changes: 0 additions & 4 deletions build/types/auth/login-with-native-auth-token.d.ts

This file was deleted.

2 changes: 0 additions & 2 deletions build/types/auth/login-with-web-wallet.d.ts

This file was deleted.

1 change: 0 additions & 1 deletion build/types/auth/logout.d.ts

This file was deleted.

2 changes: 0 additions & 2 deletions build/types/auth/qr-code-and-pairings-builder.d.ts

This file was deleted.

19 changes: 0 additions & 19 deletions build/types/elven.d.ts

This file was deleted.

8 changes: 0 additions & 8 deletions build/types/events-store.d.ts

This file was deleted.

2 changes: 0 additions & 2 deletions build/types/initialize-events-store.d.ts

This file was deleted.

4 changes: 0 additions & 4 deletions build/types/interaction/guardian-operations.d.ts

This file was deleted.

3 changes: 0 additions & 3 deletions build/types/interaction/post-send-tx.d.ts

This file was deleted.

2 changes: 0 additions & 2 deletions build/types/interaction/pre-send-tx.d.ts

This file was deleted.

This file was deleted.

3 changes: 0 additions & 3 deletions build/types/interaction/web-wallet-tx-finalize.d.ts

This file was deleted.

49 changes: 0 additions & 49 deletions build/types/main.d.ts

This file was deleted.

Loading