Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Wallet Extension] mvp0 implementation #58

Merged
merged 1 commit into from
Feb 6, 2025

Conversation

0xAleksaOpacic
Copy link
Collaborator

PR Description

This PR is quite large—apologies in advance to anyone who has to review it! It covers the implementation of MVP0 for our wallet extension, ultimately providing a working production version to share with our community.

The PR is broken down into four parts:

  1. Implementation of screens & UI components (Done)
  2. Integration of nil.js (Done)
  3. Publishing & Testing
  4. Adding Tests

After merging, we’ll have a functional wallet extension ready for community feedback and usage.


Local Development

If you want to run this extension locally:

  1. Run npm run build.
  2. Import the generated directory into your Chrome Extensions (with Developer Mode enabled).

It’s pretty straightforward! You can also check out this helpful guide on testing a browser extension locally.


---

## How to Use ⚙️
Copy link
Member

@ukorvl ukorvl Jan 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should readme be adopted to monorepo or its like a local readme for wallet only?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I personally feel that some of these integrations like wallet, even if they are in the same monorepo should have their "root" readme, as putting everything in the main root readme will crate too much data

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

from my pov better to include wallet to workspaces and avoid having this lockfile. npm packages will be reused if we include wallet to workspaces.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

"interface": "i18next-resources-for-ts interface -i public/locales/en -o src/@types/resources.d.ts"
},
"dependencies": {
"@nilfoundation/niljs": "^0.22.0",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this will also be reused form the local repo which is quite useful for development purposes. and remove ^ cause currently we support only latest versions of the packages.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ofc, you are completely right. I was waiting for latest release, as the code deployed then was not ocmpatible with latest nil.js. Adapting it now

// Get all activities for a specific wallet
export const getActivities = async (walletAddress: string): Promise<Activity[]> => {
const storageKey = getStorageKey(walletAddress);
const result = await chrome.storage.local.get(storageKey);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what is the purpose of using this chrome wrapper? it is some safe limited browser api access?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

chrome.storage.local is a part of the Chrome Extensions API, designed specifically for extensions to securely store and retrieve data. Unlike localStorage, it is asynchronous and allows larger storage limits (up to 5MB by default, compared to 5-10MB in localStorage). It is isolated from regular web pages, meaning websites cannot access extension data. This makes it safer and more suitable for browser extensions where privacy and controlled data access are important.

if (blockchainFields) {
console.log("Loaded blockchain fields from storage: ", blockchainFields);

const { rpcEndpoint, shardId, privateKey, walletAddress } = blockchainFields;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

strange that you don't need to JSON.parse() cz local storage stores everything as strings.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

chrome.storage.local.get() automatically handles JSON serialization and deserialization


export async function fetchBalance(wallet: WalletV1): Promise<bigint> {
try {
return await wallet.getBalance();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

smart-account

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You caught me 😂 I opened pr before refactor i probably should go over it and see if i need to rename somewhere else

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

): Promise<string> {
try {
console.log(`Topping up wallet with ${amountEth} ETH...`);
const faucet = new Faucet(client);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this Faucet is deprecated and is a subject to be removed in the next versions

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@0xAleksaOpacic 0xAleksaOpacic force-pushed the feature/wallet-extension-mvp0 branch from f9f8fe6 to 1fb8616 Compare February 5, 2025 19:07
@0xAleksaOpacic 0xAleksaOpacic force-pushed the feature/wallet-extension-mvp0 branch from 1fb8616 to e4ad692 Compare February 5, 2025 19:12
@0xAleksaOpacic 0xAleksaOpacic force-pushed the feature/wallet-extension-mvp0 branch from e4ad692 to bd2bf20 Compare February 5, 2025 19:13
@0xAleksaOpacic 0xAleksaOpacic force-pushed the feature/wallet-extension-mvp0 branch from b29e6fa to 4200653 Compare February 5, 2025 20:25
@0xAleksaOpacic 0xAleksaOpacic force-pushed the feature/wallet-extension-mvp0 branch from 4200653 to c77aae3 Compare February 6, 2025 14:06
@0xAleksaOpacic 0xAleksaOpacic added this pull request to the merge queue Feb 6, 2025
Merged via the queue into main with commit f2d3215 Feb 6, 2025
13 checks passed
@0xAleksaOpacic 0xAleksaOpacic deleted the feature/wallet-extension-mvp0 branch February 6, 2025 15:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
wallet extension Anything related to wallet extension
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants