Stellar Apps

stellarapps

How amazing is it to see a random motion animating from a subject? Quite surprisingly, that seems to be beyond anything in our real-life experience. Nothing less than eye candy! Animation and visual graphics have become critical elements in mobile apps, and using them in the right way offer a delightful experience to users. Take Facebook or Instagram, for instance; these software products have changed how we consider customer journey and user-friendliness. That being said, did you ever wonder about the technology that stands behind all these boons? The answer is React Native. Since 2015, It has been offering us the finest set of animation libraries and UI components with a dynamic declarative API. Accordingly, the community is growing with more new components and libraries to help you customize and manage UI resources throughout all the stages of mobile app development. Hence, with so many options, choosing a particular library for your new React Native project can be a tall order. Don’t worry! I can help you shortlist the best ones. This article will share a list of the top React Native UI components libraries so that you can kickstart your UX journey with stellar apps. But before we get into that, let’s talk a little about React Native Libraries in the first place. Quick Overview of React Native and Its UI Libraries Facebook, one of the tech giants, created and manages this app development framework in 2015 to help developers build cross-platform apps with a native look and feel (that’s why the name React Native). And ever since, it has been winning the hearts of developers and enterprises in every corner; thanks to its ease of use, rich feature set, automated upgrades, stunning capabilities, improved UI/UX, mild learning curve, strong community, and so on. Now, React Native has a broad range of UI elements and libraries to make software development less time-consuming and simplify the work of developers. The libraries contain a set of highly useful components that you can integrate into your web or mobile app to build impressive interfaces. So, you can use those ready-made components and even customize them as per your application needs instead of writing lines of code from scratch. On a related note, if you’re confusing React Native with React.js, here’s an interesting read on . React vs React Native 5 Best React Native UI Libraries to Build Front-End You can find a variety of React Native libraries on GitHub to use in your project. However, the star-based rating method can be pretty tricky and misleading as well. Hence, here I have prepared a list of the most popular libraries that developers frequently use on different projects. Check them out! React Native Elements React Native Elements is perhaps the first library that pops up in a developer’s mind when they hear about React Native. Although this UI build kit follows Material Design principles, it’s more than just an opinionated design system; it offers developers fine control over the component structure. Hence, you can model the components according to your need and have full control over the app design. It can also save a huge amount of time for you since you don’t have to rewrite the same code repeatedly. As a result, you’ll be able to quickly build a truly appealing app with easy-to-use and eye-catch features. TL;DR GitHub stars 22.2k Full documentation Open-source and MIT license Support for Expo Lottie for React Native Airbnb developed this one-of-a-kind UI framework for creating impressive animations. You can create native Android and iOS apps with free featured animations that the Lottie community provides. Additionally, this library allows you to create customized animations using Adobe After Effects. With the help of the Bodymovin extension, Lotti can export your customized interfaces to JSON format and then render them in your native app. Because of the small-sized and vector-formatted files, you’ll be able to create a high-performance app while creating a visually-appealing UI. TL;DR GitHub stars 14.9k Full with Expo support documentation Apache License 2.0 Open-source with community support NativeBase This veteran library has been around since React Native existed. NativeBase is one of the that supports a rich and extensive set of production-ready UI components. Apart from the basic support, they also provide pre-configuration for useful functionalities. best cross-platform app development frameworks NativeBase is a perfect starting point to create visually aesthetic and easy-to-use apps. It offers supported themes and paid templates that you can use for a shorter development time. And since it has customizable features which you can also integrate with added functionalities, building a unified interface becomes quite easy and quick. TL;DR GitHub stars 17.4k Apache License 2.0 Live Example Open-source and Expo support React Native Material UI This UI framework provides an easier and faster app development process with 20 different customizable components like avatars, toolbars, drawers, buttons, etc. It uses Google Material Design principles that help you improve user experience by simplifying navigation and other features. You can easily integrate your project style with self-supporting React components and shape them into a dynamic UI. Additionally, those components are independent of any global stylesheet. TL;DR GitHub stars 3.7k MIT License Free and open-source Community support through GitHub issues React Native UI Kitten What an excellent name for a React Native framework! Based on the Eva Design System, this UI component library offers over 480 icons and allows you to create custom themes. You can also use or extend two in-built visual themes. With 20+ vital UI components, UI Kitten is one of the few libraries that’s compatible with the right-to-left coding method for each of its components (note this fact if you’re working on global apps). It also supports web development. In this library, style classes are separated from business logic, and UI components are stored in the same way. This approach is similar to CSS, wherein style definitions are not attached to the code. TL;DR GitHub stars 6.8k Open-source and MIT License Full documentation Dedicated support for the paid version Concluding Thoughts So, what do you think is the best React Native UI component library? The answer is simple – the one that fulfills your software and business requirements. The UI libraries I have mentioned in this article are all actively developed and maintained by the community. These frameworks have been around to help you build robust apps in a shorter span of time so that you don’t have to reinvent the wheel every time you work on a React Native project. As long as you know what to accomplish in your UI design, any of these options would do the trick. The ultimate goal is to hire competent and create an app that caters to your users’ demands. React Native Developers Do you have a React Native library of your choice?

2022’s Top 5 React Native UI Libraries

Las 5 principales bibliotecas de IU nativas de React de 2022

Create your first escrow smart contract on the Stellar network. Before reading this tutorial, you should have a basic understanding of how Stellar works and how to create a simple account on the test network. Take a look at my in this series to get you updated. previous article This article will explain to you how to develop an escrow smart contract using Stellar Lumens. I will as well highlight some extra features like retrieving a balance and a clean history log. Extra note: This article is part of the Blockchaingers series . Together with TheLedger, we have won the ‘Digital Nations Infrastructure’ track at the largest blockchain hackathon. You can find out more about our idea here . Escrow smart contracts on the Stellar testnet are part of this prototype. Use Case Description We have two identities: a house and a contractor. The house can pay a contractor for delivering house related services like a check-up of your central heating. Once the house and contractor agree to deliver a service, the house will deposit the agreed amount (in XLM) into the escrow smart contract. Once the job is done, both the house and contractor have to sign to release the funds. Preparation First, we need a new, empty account on the testnet. Let’s create one. const newKey = Stellar.Keypair.random(); const transaction = new Stellar.TransactionBuilder(ownerAccount).addOperation(Stellar.Operation.createAccount({destination: escrowPubKey,startingBalance: '2.5000000'})).build(); transaction.sign(ownerKeypair); return StellarConfig.server.submitTransaction(transaction); We still have to define an owner account who is responsible for creating the escrow but is not able to perform any actions with it. We use a config file for retrieving our server, this piece of code is the same as: which creates a new connection with the Stellar testnet. new Stellar.Server('https://horizon-testnet.stellar.org'); Probably, you wonder why I’m sending 2.5 XLM to the escrow? Stellar reequires that each account has a starting balance of 1 XLM. In addition, we are adding two more signers besides the random escrow signer. For each signer you add to the contract, you have to top up the starting balance with 0.5 XLM. So, … 3 x 0.5 (signers) + 1 (base balance) = 2.5 Additional info can be found in the Stellar . documentation Building Stellar Escrow Transaction Let’s retrieve the escrow account, const escrowAccount = StellarConfig.server.loadAccount(pubKey); and build the escrow transaction. let transaction = new Stellar.TransactionBuilder(escrowAccount).addOperation(Stellar.Operation.setOptions({signer: {ed25519PublicKey: houseKeypair.publicKey(),weight: 1}})).addOperation(Stellar.Operation.setOptions({masterWeight: 0,lowThreshold: 2,medThreshold: 2,highThreshold: 2,signer: {ed25519PublicKey: contractorKeypair.publicKey(),weight: 1}})).build(); As you can see, we’ve added two signers to the escrow contract. We give both signers equal voting power (1) and set the threshold to two. Because we are not giving the escrow account itself an explicit weight, this is set to zero. This means both the house and contractor have to sign to release the funds, not the escrow owner. You can see an example of an escrow smart contract transaction creation . here Stellar Escrow Contract At last, we need to sign (with the random keypair) and send the transaction to the network. transaction.sign(newKey);await StellarConfig.server.submitTransaction(transaction); Ideally, the house sends the agreed amount to the escrow smart contract. The code for sending the top up transaction looks like this. memo = Stellar.Memo.text('Pay: House to Contractor');return new Stellar.TransactionBuilder(<source-account>, { memo }).addOperation(Stellar.Operation.payment({<destination-pub-key>,asset: Stellar.Asset.native(),<amount> })).build(); Release Funds Releasing the funds is actually very simple. You create a new transfer transaction from the escrow account to the contractor. The only difference here is that both the house and contractor have to sign with their keypair. transaction.sign(houseKeyPair);transaction.sign(contractorKeyPair); Additional Operations Retrieve History For Account This will give you a list of all payments a certain account has executed. We remove the first result (with ) from the array as that’s the account creation transaction (a 0 XLM payment to itself). shift() async retrievePayments(pubKey:string) {let account = await this.loadAccountAsync(pubKey);let payments = await axios.get(`${StellarConfig.baseUrl}/accounts/${account.accountId()}/payments`); let paymentRecords = payments.data._embedded.records;paymentRecords.shift(); return paymentRecords.map(record => {return {id: record.transaction_hash,from: record.from,to: record.to,amount: record.amount};});} You can use the HTTP API endpoint to retrieve this in your web browser as well. You’ll get something like: /accounts/<account-ID>/payments One payment object (history) for an account. Get Account Balance To retrieve the XLM balance of an account, you just have to load (retrieve) the account based on its public key. As an account can have multiple balances (native XLM and other coins deployed on the Stellar network), we will only look for the native balance. async getBalance(pubKey) {const account = await StellarConfig.server.loadAccount(pubKey);let balance; account.balances.forEach((balanceObject) => {if (balanceObject.asset_type === 'native') {balance = balanceObject.balance;}}); return balance; } Source: https://www.in3dc.com What to read next Exploring Stellar Lumens | Introduction Development Tutorial Builders of the Decentralized Web: 10 Of The Most Innovative Technologies The tech-stack to win the worlds biggest blockchain hackathon of 2018!

Stellar Escrow Smart Contract Development

Today, I got the opportunity to explore the of Stellar Lumens and make an . I guess I can finally cross that off my bucket list! The goal of this article is to push a simple transaction to the Stellar network. As I couldn’t find much technical ‘how-to’ information on Stellar, I decided to do it the old way: ! technical side analysis of the pros/cons RTFM Understanding Stellar It would be nuts to immediately dive into the code, therefore I found this high-level architectural overview guide on the Stellar . website API: Horizon All interactions with the Stellar network happen through , a RESTful HTTP API server. It allows developers to submit transactions, check account’s balance, and subscribe to events. You can use Horizon through your web browser, a command line tool like cURL, or the Stellar SDK which is the easiest solution. The Stellar SDK is available for . There are also community-maintained SDKs for . Horizon JavaScript , Java and Go Python, C#, and Ruby Stellar Core The Stellar Core is the backbone of the Stellar network, every Horizon server connects with it. The Stellar Core is responsible for validating transactions and reaching consensus. The core is run by a bunch of individuals creating a decentralized network. Each transaction on the network costs a small fee: 100 stroops (equal to 0.00001 XLM). The should prevent bad entities from spamming the network. _Stellar Consensus Protocol (SCP)_SCP opts for safety over liveness — in the event of partition or misbehaving nodes, it halts the progress of the network until consensus can be reached. You can find more information on the protocol in their . whitepaper It is possible to become part of the network by running a Stellar Core instance. Such an instance can be easily set up with . Run Stellar Core with Docker stellar/quickstart docker image _Testnet_Luckily, Stellar provides a testnet for development purpose. Information can be found . here Let’s code Stellar : Basic knowledge of JavaScript, Express, and Async/Await. Prerequisites : Create two accounts on the testnet, fill the accounts with testnet tokens and transfer some random amount from one account to the other. At last, we want to be able to retrieve the transaction with the transaction explorer. In general, this Stellar coding tutorial teaches you the basics to get started with Stellar development. Goal Can be found , which makes following the tutorial easier. A complete snippet of the code is as well added at the bottom of the blog. Full working code: here Create Accounts The Stellar JavaScript SDK is the most stable SDK among the ones offered. You can easily install this package with npm: . npm i -S stellar-sdk We tell our Stellar SDK to use the testnet server URL: const server = new Stellar.Server('https://horizon-testnet.stellar.org')Stellar.Network.useTestNetwork() We are ready to create two random accounts. The Stellar SDK offers a function to randomly create a keypair without seed. let pairA = Stellar.Keypair.random()let pairB = Stellar.Keypair.random() This keypair contains a function to retrieve the public key and secret . pair.publicKey() pair.secret() Next, I’ve defined a route to initialize both accounts. In this function, we will create our wallet/account based on our public key and request the to send us 10.000 testnet Lumens on both accounts. I’m using the npm package for sending the request to the Horizon testnet API as this works well with async/await. We pass the public key from our first keypair via a query string. stellar friendbot request-promise await rp.get({uri: 'https://horizon-testnet.stellar.org/friendbot',qs: { addr: pairA.publicKey() },json: true}) The account is created now, but we don’t have the account object in our app. So, let’s retrieve this. accountB = await server.loadAccount(pairB.publicKey()) It’s now possible to check whether we got some Stellar Lumens on our account. accountA.balances.forEach((balance) => {console.log('Type:', balance.asset_type, ', Balance:', balance.balance)}) We repeat this code for as well in order to retrieve . pairB accountB Transfer Stellar Lumens A transaction can consist of multiple operations chained to the which creates the (multi-)transaction. To keep things simple, we will just transfer a small amount of testnet Lumens. We define the public key of as the destination. The amount transferred is equal to . The StellarSDK requires the amount parameter should be stated to seven decimal places. TransactionBuider pairB 30.0000001 const transaction = new Stellar.TransactionBuilder(accountA).addOperation(Stellar.Operation.payment({destination: pairB.publicKey(),asset: Stellar.Asset.native(),amount: '30.0000001'})).build() Cool, the transaction is ready to be signed by the initiator of the transfer — . Ok, now send this to the Horizon network: transaction.sign(pairA) const transactionResult = await server.submitTransaction(transaction) Retrieve History Code below will return only one transaction per ‘history page’. You can use the function on the ‘history page’ object to retrieve the next transaction in the history for an account. next() let historyPage = await server.transactions().forAccount(accountA.accountId()).call() We want to print the details of the operations in the transaction (which is XDR encoded). Let’s decode to base64 and loop over the transaction’s operations to print all sent amounts. let txDetails = Stellar.xdr.TransactionEnvelope.fromXDR(historyPage.records[1].envelope_xdr, 'base64') txDetails._attributes.tx._attributes.operations.map(operation => console.log(`Transferred amount:${operation._attributes.body._value._attributes.amount.low} XLM`)) At last, let’s retrieve the next ‘history page’. historyPage = await historyPage.next() That’s it? Yes, surprised? Did you know You can explore the transaction on the network — . The link is returned in the parameter: . example transactionResult transactionResult._links.transaction.href The metadata about the transaction is stored in the which is a standard data serialization format. You can deserialize it . XDR format here You can look up all transactions for a public key like . here The Stellar Analysis Pros Stellar is a payment engine, focused on asset movement where other blockchains may focus on the logic of the program itself. Stellar and Ripple are dealing with how your money is traded and sent, this is a more particular purpose. Stellar is easy to integrate for any web developer without knowing too much about blockchain. Perfect for payments / cross-currency / cross-border payments. Fast, cheap and easy to setup your own federated network: This is due to the consensus algorithm that does not use proof of work, but their custom . Stellar Consensus Protocol Very cheap fees: 0.00001 XLM per operation. A single transaction can contain multiple operations, so the fee doesn’t depend on the amount transferred. Cons Privacy — Every transaction can be found and read with a blockchain explorer. Important standards missing like payments links (still in development) that slow down the adoption. Payment links would handle the click on the link prompting the user for payment which is crucial for e-commerce. For now, you need to manually copy paste address, transaction memo and amount where Bitcoin has a one-click and approve payment option. It’s hard to determine if this is a : Stellar is not really using the concept smart contracts (it’s not Turing complete). It works for few popular use cases like escrow, time bounded and atomic transactions. However, standards can be extended for more use cases, but it will never get to the point of ‘Write your own DApp’. That’s ok as it makes Stellar optimized for this specific purpose of asset transfer, instead of being bloated by people’s fantasies. pro/con Stellar succeeded in removing the blockchain knowledge barrier even though it’s a blockchain payment provider. — Michiel Mulders Resources to become a Stellar expert Full code for this example on . Github Horizon API . docs Testnet . explorer Getting started code examples , and (react). here here here Check the of the Stellar network. status Interested in starting your own blockchain project, but don’t know how? Do you need help starting your token sale or having one audited? Get in touch with TheLedger . Full code : snippet

Stories, News & Mentions about STELLARAPPS

Stellarapps’s Stories on HackerNoon