Skip to content

This is a frontend for the civkit-api and civkit-chat application

Notifications You must be signed in to change notification settings

civkit/civkit-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Start Here!

Civkit is Open Source. Forever. The goal is simple. Create the building blocks of unstoppable peer-to-peer marketplaces.

All releases are on Github. As a user, you only need to install the Nos2x plugin. We will add other options for now but this is currently the method. Install this on your browser and navigate to Register. You will purchase a staking credential and be able to login and take orders. Both orderbook and reputation are visible at frontend.civkit.africa/filteredOrders and frontend.civkit.africa/filteredRatings.

Taking these orders requires a small committment of paying a hold invoice, which is relesed back if the trade is successful. The purpose of this is to prevent cheating and time wasters. Your sats will be returned and are only a small % of the trade amount. Your trades will be displayed on the internal orderbook but also sent as nostr event types to the relays accepting nostr trades.

We use these event types

  • 1505: Announcing a civkit node is live (for marketplace runners to tell users they exist)
  • 1506: An order has been placed with link to where to take it. This is relayed across nostr to other relays so even if 1 market goes down, another market can spin up and find a partner for the trade
  • 1507: An order has been taken by a counterparty
  • 1508: A trade has been completed and each user ranks the other. Reputations are tied to your nostr identity. The PGP chatroom is encrypted and anonymous.

If a dispute occurs, the chat is locked and exported to the moderator to resolve. This decentralizes chat back to core PGP principles and keeps you safe from prying eyes. If a trade is successful, the sats are released to the sats buyer when fiat or product is received. You are ranked and this is sent to nostr.

Have fun trading, stay safe and guard your reputation without trading over your privacy. Be a good human.

Civkit Frontend

This is a sample client for a Civkit Node. It provides a UI to create P2P trade orders.

The application is using:

The UI requires

You can use this to create buy/sell orders for peer-to-peer trades, pay the hold invoices, chat with the trading partner, confirm fiat received to release payment, raise disputes (in chat app) and view other trade orders. You have the option to sign orders as a custom nostr event type 1506. This allows orders to be shared amongst nostr relays accepting these types to create a global orderbook.

The escrow system will return bolt11 invoices. You lock 5% of the amount of the trade in a hold invoice which is released when the trade is completed. You will be provided with URL's to access the encrypted chat which has some basic dispute features. The code for that is listed above and seperate. You can register a user at the /register endpoint then login. From there you can create buy/sell orders and make trades.

This has been validated on testnet, regtest, signet and mainnet. We encourage further client development and this is intended as a reference guide for further development. Running the code is pretty simple as described below.

If you run into any issues with the code, feel free to raise an issue so we can improve its useability and make it more mainnet ready.

Getting Started

npm install 
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

If you have set this up correctly, you will see the civkit home page. This will not load invoices or have much functionality until you install API code so if you get as far as the screenshot below, its time to setup the API https://github.com/civkit/civkit-api

If you see this, you've got the frontend going!!!

image

The code assumes the following ports are assigned the following applications

  • 3001: Frontend
  • 3000: API
  • 3456: Chat

You can look through the key components such as the pages folder and dashboard to see where the bulk of user face code is.

Proceed to Register

register

Pay The Registration Invoice. It will redirect automatically.

registerPayment

View and Take Pending Orders

Screenshot from 2024-11-28 12-03-19

View Your Own Orders

myOrderV2

View Ratings (Internal only)

internalRatings

Submit Payout Invoice

submitPayout

Open Chat

openChat

Redirect to Chatroom

makeOfferredirect

Trade Complete - WIth Nostr Prompt

ratingwithNostr

How to Contribute

This code is 100% open source and relies on the contributions of other open source developers. Feel free to look through the issues, open new issues and submit PR's to improve the experience. This project has been tested and validated on mainnet, but the ideas of the crowd will get us closer to a flawless UI/UX experience.

I have created a list of issues but please take these as a starting point. Frontend is not my strong suit and I know that a solidly skilled FE developer could really enhance this product. I encourage and welcome all contributions. Feel welcome to open issues. We also have a telegram community here: https://t.me/civkittv

About

This is a frontend for the civkit-api and civkit-chat application

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages