Git Product home page Git Product logo

kondor's Introduction

Kondor - Koinos Wallet in your browser

Kondor is a browser extension to manage a wallet for the Koinos Blockchain. It based on the koilib library.

Kondor is currently in beta and may include bugs.

Info for users

You can install it as an extension for Chrome. Follow this link: https://chrome.google.com/webstore/detail/kondor/ghipkefkpgkladckmlmdnadmcchefhjl

Web Developers

In the 3rdpage folder there is an example page to interact with kondor. It shows 2 main functionalities:

  • Get accounts: Request the user address.
  • Request signature: Request a signature and send the transaction. The example shows the process to make a transfer.

This html requires 2 scripts:

  • koinos.min.js: Library provided by koilib.
  • kondorIndex.js: Library to interact with Kondor.

To install these dependencies run (in future releases we will create a package in npm for kondor):

yarn install
yarn build:3rdpage

To serve the webpage run:

node ./server.js

The page will be available in http://localhost:8081/3rdpage.html

Extension Developers

Kondor wallet has been created using Vue Framework. It can be tested in 2 ways:

  1. As a single-page application in a web page. As it is developed in Vue you can take advantage of the hot reloads for fast iteration. With this option the local storage is not tested, and instead of that it is bypassed by data written in memory.
  2. As browser extension (recommended). This option doesn't have the hot reloads offered by Vue but you can test it as extension with all features.

Setup the project by installing dependencies:

yarn install

Run as Single-Page Application

When testing in localhost we need a proxy server to avoid the issues with cors. Start the server that adds the corresponding headers:

node ./server.js

The server will start in http://localhost:8081

Open the .env file and set VUE_APP_ENV=test. This variable will skip the access to the local storage in the extension and instead of that will save this data in memory.

Note: When using the test environment, the wallet password is a

Build typescript files:

yarn build:ts

Start the application:

yarn serve

or

npm run serve

The application will be available in http://localhost:8080

Useful links:

Run as browser extension

Open the .env file and set VUE_APP_ENV=extension to enable the access to the local storage for extensions. Build the application

yarn build

or

npm run build

The compiled application will be located in the folder dist. Open chrome and go to chrome://extensions/. Make sure the developer mode is enabled. Click on Load unpacked and select the folder dist with the application. The extension should be ready to be tested.

Acknowledgments

Many thanks to the sponsors of this extension: @levineam, @Amikob, @motoeng, @isaacdozier, @imjwalker, and the private sponsors.

If you would like to contribute to the development of this extension consider becoming a sponsor in https://github.com/sponsors/joticajulian.

kondor's People

Contributors

joticajulian avatar brklyn8900 avatar yonatan19981 avatar dependabot[bot] avatar

Stargazers

lightproject avatar Giresse avatar Neoxian avatar Mike Staub avatar  avatar  avatar pgarcgo avatar Roamin avatar  avatar  avatar

Watchers

James Cloos avatar  avatar  avatar  avatar  avatar

kondor's Issues

import

import function to be complete

Problem with running the app locally

ERROR Failed to compile with 2 errors 12:48:22

These relative modules were not found:

  • ../../../lib/Messenger in ./src/shared/mixins/Message.js
  • ../../../lib/storage in ./src/shared/mixins/Storage.js

[BUG] Can't add token without decimals

Current behavior

I found out that adding tokens without decimals did not work.
An error message appeared token without decimals

Expected behavior

It should be possible to add tokens that have decimal places or not.

Steps to reproduce

A token without decimals is KDBLN it has the contract address 1Noy4JD7F6ByUwMmbKPo1o2JVko9CzB6Eu
The error message will show up if you add this token address

Screenshot

image

Update UI

  • Wallet footer text too small
  • Use enter key to unlock wallet
  • Add style changes

UI style updates

  • Fix font size in balance display
  • Add return key transfer trigger
  • Clear inputs after transfer completes

Accounts can be retrieved although wallet is locked.

Although the wallet is locked. I still can access the account info and read the accounts. A transaction is not possible if not connected. Would it be ok to view a password request (if wallet is not unlocked) before the accounts can be listed?

Screenshot 2023-10-29 at 1 51 25 am

New page to add tokens

Create the /tokens/add page with this design:

image

This task corresponds just to the html and css work. The JS code is a good to have but not required.

Create a PR to merge into the dev branch.

Implement signMessage

As a user I want to be able to use the signMessage functionality of the signer object provided by Koilib.

UI design

Design a basic UI for the extension:

  • Logo
  • Basic flow:
    • Import/create a wallet (div id="view-import")
    • Unlock a wallet (div id="view-unlock")
    • Dashboard with address, balance and option to send (div id="view-transfer")
      Redesign divs if necessary.

Local Storage Error

Local storage does not work in some cases, reports error: Local storage error: cannot save salt and iv

feedback from luke

Just set up a new browser profile and installed Kondor fresh to set up a new wallet for testnet. Some UX feedback on the new seed phrase experience:

  1. The text box that shows the seed phrase can sometimes wrap words across lines. The phrase it generated for me had "vintage" wrapped across a line, so I thought it was a 13 word phrase with "vint" and "age" -- words shouldn't wrap
  2. The confirm seed screen should disable word buttons after you pick them the first time. I can click one multiple times and mess up the input (bad for accidental double clicks)
  3. The confirm seed screen should have a reset/undo/backspace feature in case you misclick
  4. After finishing the confirm seed, when you're on the main screen of the wallet, you can click back to see the seed phrase again. Probably shouldn't be able to do that, but it's a fairly minor issue given as soon as you click away you get locked out. Could probably just remove the back button from the main page.
  5. While logged in, I can create accounts, but the "import account" button doesn't seem to do anything. I'm assuming this will allow you to import other seed phrases in future?
  6. When creating accounts, you can name them, but you can't rename "Account 0"
  7. doesn't work with testnet RPC yet

Transaction Fail

Transactions do not submit randomly, reports error: Request timeout

popup requesting signature

define the logic for "content scripts" and popup html to enable 3rd webs to request signatures in the wallet.

add the option to import the seed

BIP32 derivation paths would look like this m/44'/659'/0'/0
The number 659 is the proposed coin type for koinos. It is the word "koinos" converted to ascii [107 111 105 110 111 115], and then added. The result is 659 xD.

Recover wallet footer text font too small

Browser: chrome Version 100.0.4896.88 (Official Build) (x86_64)
OS: macOS 10.4

On the main form, the footer text on the "recover wallet" form ("creating a wallet and importing
using 12 word phrase coming soon") is too small and can not be read

See screenshot:

telegram-cloud-photo-size-2-5389042268729621584-x

New page dedicated to tokens

Create the /tokens page with this design. Take the current work done in the dashboard as reference

image

This task corresponds just to the html and css work. The JS code is a good to have but not required.

Create a PR to merge into the dev branch.

Kondor Improvements

As a Kondor user I would like to have a good interface so that I can have a pleasurable user experience when using the wallet

  • Improve pop-up and settings page design #40
  • Parse JSON in pop-up #41
  • Add new icon #42
  • Make address click and copy #43
  • Autofocus password field on startup #44
  • Fix button alignment on some screens #45
  • Available accounts scrolling issue #46
  • Available accounts improve design #47
  • 12 word phrase verification #48
  • verify address checksum during a transfer #51

Use "return" key to unlock.

At the login page, the user is force to press "unlock" with the mouse point after entering the password, as I user I would like to be able to press the "return" key to speed up the login procedure

Link to View Account on Kollection Doesn't Work

The link to "View account on Kollection" in the NFTs section of the wallet takes you to kollection.app/profile (which produces a 404:This page could not be found error), whereas it should take you to kollection.app/profile/.

Minor style adjustments

  • Add comma separator for large numbers
  • Remove navbar from welcome screen
  • Better error descriptions
  • Add new button design

UX in popup to sign transactions

In the popup, when displaying the transaction operations remove the JSON and replace it with a list of divs.
I suggest to use 3 different background colors depending on the type of operation:

  1. call_contract operation - the most typical operation we will see
  2. upload_contract, set_system_call, or set_system_contract special operations - big alert/contrast because they are not typical. We should probably add more text in upload_contract to explain some risks.
  3. call_contract operation that doesn't have an ABI to parse it - the user will see the operation already encoded then he will not understand the content. Big RED alert explaining the risks of signing it.

Update frontend of dashboard to support dApps

We want to introduce more dApps in Kondor Wallet. Then the new design consists in a dashboard with a widget at the top and a list of dApps.

This is the current status
image

And this is the new design for the dashboard (see https://github.com/joticajulian/kondor/blob/main/src/index/views/4-Dashboard.vue)
image

The new design must consist in a set of components:

  1. Nav: No need to change this part.
  2. Widget of Tokens: It has the current balance of Koin. And below it has a list of token icons. These icons have a tooltip showing the balance of each one. When the user clicks on the icon the token is displayed in the widget by replacing the Koin balance.
  3. Section of dApp icons that will trigger new pages dedicated to each dApp.

Initially the wallet will start with these tokens: Koin, VHP, and Vapor.

This task corresponds just to the html and css work. The JS code is a good to have but not required.

Create a PR to merge into the dev branch.

check the status of the chain

check if the blockchain is frozen by checking the timestamp of the last block. Warn the user after loading the app

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.