How to connect useDApp to Rootstock networks? - javascript

I am creating a React.js DApp which will interact with Rootstock (RSK) deployed smart contracts.
Recently I came across a React library called useDApp. This library automates the blockchain connection, smart contract interaction and sending transactions by using React hooks and context providers.
​
For example:
const { activateBrowserWallet, account } = useEthers();
const etherBalance = useEtherBalance(account);
​
However, I don't see Rootstock among the supported networks.
​
I have tried to create a Rootstock configuration as described in the docs:
​
const config = {
readOnlyChainId: 30,
readOnlyUrls: {
31: 'https://public-node.testnet.rsk.co',
30: 'https://public-node.rsk.co',
},
};
​
Unfortunately, adding the above appears to be insufficient,
and I was unable to connect to either RSK Mainnet nor RSK Testnet.
Is it possible to configure useDApp to connect to Rootstock?

Yes connecting useDApp to Rootstock is possible.
(1)
Create config objects for both networks
(Rootstock Testnet, Rootstock Mainnet).
(2)
Specify Multicall smart contract addresses, within these config objects.
They should look like this:
const rootstockTestnetExplorerUrl = 'https://explorer.testnet.rsk.co/';
export const RootstockTestnet = {
chainId: 31,
chainName: 'Rootstock Testnet',
isTestChain: true,
isLocalChain: false,
rpcUrl: 'https://public-node.testnet.rsk.co',
// deployed at https://explorer.testnet.rsk.co/address/0xca11bde05977b3631167028862be2a173976ca11
multicallAddress: '0xcA11bde05977b3631167028862bE2a173976CA11',
nativeCurrency: {
name: 'Test Rootstock Bitcoin',
symbol: 'tRBTC',
decimals: 18,
},
getExplorerAddressLink: getAddressLink(rootstockTestnetExplorerUrl),
getExplorerTransactionLink: getTransactionLink(rootstockTestnetExplorerUrl),
};
const rootstockMainnetExplorerUrl = 'https://explorer.rsk.co/';
export const RootstockMainnet = {
chainId: 30,
chainName: 'Rootstock Mainnet',
isTestChain: false,
isLocalChain: false,
rpcUrl: 'https://public-node.rsk.co',
// deployed at https://explorer.rsk.co/address/0xca11bde05977b3631167028862be2a173976ca11
multicallAddress: '0xcA11bde05977b3631167028862bE2a173976CA11',
nativeCurrency: {
name: 'Rootstock Bitcoin',
symbol: 'RBTC',
decimals: 18,
},
getExplorerAddressLink: getAddressLink(rootstockMainnetExplorerUrl),
getExplorerTransactionLink: getTransactionLink(rootstockMainnetExplorerUrl),
};
(3)
Create useDApp configuration using these network configs:
const useDAppConfig = {
networks: [RootstockTestnet, RootstockMainnet],
readOnlyChainId: RootstockMainnet.chainId,
readOnlyUrls: {
[RootstockTestnet.chainId]: RootstockTestnet.rpcUrl,
[RootstockMainnet.chainId]: RootstockMainnet.rpcUrl,
},
};
(4)
Connect the useDApp configuration to DAppProvider (e.g. in index.js)
import { DAppProvider } from '#usedapp/core';
...
root.render(
<DAppProvider config={useDAppConfig}>
<App />
</DAppProvider>,
);
(5)
Now you are ready to go with the blockchain data in your React components:
import {
useEthers,
useEtherBalance,
useTokenBalance,
useSendTransaction,
} from '#usedapp/core';
function App() {
const { activateBrowserWallet, account } = useEthers();
const etherBalance = useEtherBalance(account);
const tokenBalance = useTokenBalance(
tokenAddress,
account,
);
const { sendTransaction } = useSendTransaction();
...
}

bguiz's answer is perfect for the question that you asked but if you are not locked into using useDApp, can I suggest an alternative that maybe a bit easier to implement?
We built rLogin for the use case of connecting the user's wallet to a developer's dapp. There are a bunch of additional integrations like walletConnect, hardware wallets, etc.
For RSK Testnet and RSK Mainnet we have the RPC URLs already in it so you don't have to configure them. rLogin also supports any EVM network so you can use it on Ethereum, Binance, etc.
Here is how you would set it up:
yarn add #rsksmart/rlogin
then in a basic React app, it might look like this:
import RLogin from '#rsksmart/rlogin'
const rLogin = new RLogin({
supportedChains: [30, 31]
})
function App() {
const [provider, setProvider] = useState(null)
const connect = () => {
console.log('connecting...')
rLogin.connect().then(response => {
setProvider(response.provider)
})
}
return (
<div className="App">
<h1>rLogin demo...</h1>
<button onClick={connect}>Connect!</button>
</div>
);
}
The initial rLogin variable needs to be outside the component so it only gets rendered/created once. There are a bunch of additional parameters you can send to the rLogin constructor as well mentioned in the readme. There are also sample applications to see the implementation.

Related

Adding manual approval stage in CDK CodePipelines

I have been working with AWS CDK and I think its a great way to work with AWS. Recently I have got a problem which I am unable to resolve. Went over documentations and resources but none had explained how to do it in CDK. So I have two code pipelines and each pipeline either deploys to staging or production. Now I want a manual approval stage before the code gets deployed to production. I'll show my simple code below for reference:
import * as cdk from '#aws-cdk/core';
import { AppsPluginsCdkStack } from './apps-plugins-services/stack';
import {
CodePipeline,
ShellStep,
CodePipelineSource
} from '#aws-cdk/pipelines';
class ApplicationStage extends cdk.Stage {
constructor(scope: cdk.Construct, id: string) {
super(scope, id);
new CdkStack(this, 'cdkStack');
}
}
class ProductionPipelineStack extends cdk.Stack {
constructor(scope: cdk.Construct, id: string, props: cdk.StackProps) {
super(scope, id, props);
//Create the CDK Production Pipeline
const prodPipeline = new CodePipeline(this, 'ProductionPipeline', {
pipelineName: 'ProdPipeline',
synth: new ShellStep('ProdSynth', {
// Use a connection created using the AWS console to authenticate to GitHub
input: CodePipelineSource.connection(
'fahigm/cdk-repo',
'develop',
{
connectionArn:
'AWS-CONNECTION-ARN' // Created using the AWS console
}
),
commands: ['npm ci', 'npm run build', 'npx cdk synth']
})
});
prodPipeline.addStage(new ApplicationStage(this, 'Production'));
}
}
class StagingPipelineStack extends cdk.Stack {
constructor(scope: cdk.Construct, id: string, props: cdk.StackProps) {
super(scope, id, props);
//Create the CDK Staging Pipeline
const stagePipeline = new CodePipeline(this, 'StagingPipeline', {
pipelineName: 'StagePipeline',
synth: new ShellStep('StageSynth', {
// Use a connection created using the AWS console to authenticate to GitHub
input: CodePipelineSource.connection(
'fahigm/cdk-repo',
'master',
{
connectionArn:
'AWS-CONNECTION-ARN' // Created using the AWS console
}
),
commands: ['npm ci', 'npm run build', 'npx cdk synth']
})
});
stagePipeline.addStage(new ApplicationStage(this, 'Staging'));
}
}
//
const app = new cdk.App();
new ProductionPipelineStack(app, 'ProductionCDKPipeline', {
env: { account: 'ACCOUNT', region: 'REGION' }
});
new StagingPipelineStack(app, 'StagingCDKPipeline', {
env: { account: 'ACCOUNT', region: 'REGION' }
});
app.synth();
Now I don't know where to go from here. The documentation only talks about how to do it from console but I want to add it in the code. Would really appreciate any help!
The CDK documentation doesn't actually talk about how to do it from console, it talks about how to do it with CDK, and provides examples. Here's an example straight from the docs:
The following example shows both an automated approval in the form of a ShellStep, and a manual approval in the form of a ManualApprovalStep added to the pipeline. Both must pass in order to promote from the PreProd to the Prod environment:
declare const pipeline: pipelines.CodePipeline;
const preprod = new MyApplicationStage(this, 'PreProd');
const prod = new MyApplicationStage(this, 'Prod');
pipeline.addStage(preprod, {
post: [
new pipelines.ShellStep('Validate Endpoint', {
commands: ['curl -Ssf https://my.webservice.com/'],
}),
],
});
pipeline.addStage(prod, {
pre: [
new pipelines.ManualApprovalStep('PromoteToProd'),
],
});
Here's the documentation about the manual approval step specifically: https://docs.aws.amazon.com/cdk/api/latest/docs/#aws-cdk_pipelines.ManualApprovalStep.html

How to use AWS CDK to look up existing ApiGateway

I am using AWS CDK to build my lambda, and I would like to register endpoints from the lambda's CDK stack.
I found I can get an existing ApiGateway construct using fromRestApiId(scope, id, restApiId)
(documentation here)
So currently this works well:
//TODO how to look up by ARN instead of restApiId and rootResourceId??
const lambdaApi = apiGateway.LambdaRestApi
.fromRestApiAttributes(this, generateConstructName("api-gateway"), {
restApiId: <API_GATEWAY_ID>,
rootResourceId: <API_GATEWAY_ROOT_RESOURCE_ID>,
});
const lambdaApiIntegration = new apiGateway.LambdaIntegration(lambdaFunction,{
proxy: true,
allowTestInvoke: true,
})
const root = lambdaApi.root;
root.resourceForPath("/v1/meeting/health")
.addMethod("GET", lambdaApiIntegration);
But I would like to deploy to many AWS accounts, and many regions. I don't want to have to hardcode the API_GATEWAY_ID or API_GATEWAY_ROOT_RESOURCE_ID for each account-region pair.
Is there a more generic way to get the existing ApiGateway construct, (e.g. by name or ARN)?
Thank you in advance.
Lets take a simple Api with one resource
const restApi = new apigw.RestApi(this, "my-api", {
restApiName: `my-api`,
});
const mockIntegration = new apigw.MockIntegration();
const someResource = new apigw.Resource(this, "new-resource", {
parent: restApi.root,
pathPart: "somePath",
defaultIntegration: mockIntegration,
});
someResource.addMethod("GET", mockIntegration);
Lets assume we want use this api and resource in another stack, we first need to export
new cdk.CfnOutput(this, `my-api-export`, {
exportName: `my-api-id`,
value: restApi.restApiId,
});
new cdk.CfnOutput(this, `my-api-somepath-export`, {
exportName: `my-api-somepath-resource-id`,
value: someResource.resourceId,
});
Now we need to import in new stack
const restApi = apigw.RestApi.fromRestApiAttributes(this, "my-api", {
restApiId: cdk.Fn.importValue(`my-api-id`),
rootResourceId: cdk.Fn.importValue(`my-api-somepath-resource-id`),
});
and simply add additional resources and methods.
const mockIntegration = new apigw.MockIntegration();
new apigw.Resource(this, "new-resource", {
parent: restApi.root,
pathPart: "new",
defaultIntegration: mockIntegration,
});

Can you track background geolocation with React Native?

Problem
I'd like to be able to track a users location even when the app is no longer in the foreground (e.g. The user has switch to another app or switched to the home screen and locked their phone).
The use case would be a user tracking a run. They could open the app and press 'start' at the beginning of their run, then switch or minimise the app (press the home button) and lock the screen. At the end of the run they could bring the app into the foreground and press 'stop' and the app would tell them distance travelled on the run.
Question
Is tracking background geolocation possible on both iOS and Android using pure react native?
The react native docs on geolocation (https://facebook.github.io/react-native/docs/geolocation) are not very clear or detailed. The documented linked above eludes to background geolocation on iOS (without being fully clear) but does not mention Android.
Would it be best that I use Expo?
UPDATE 2019 EXPO 33.0.0:
Expo first deprecated it for their SDK 32.0.0 to meet app store guidelines but then reopened it in SDK 33.0.0.
Since, they have made it super easy to be able to implement background location. Use this code snippet that I used to make background geolocation work.
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import * as TaskManager from 'expo-task-manager';
import * as Location from 'expo-location';
const LOCATION_TASK_NAME = 'background-location-task';
export default class Component extends React.Component {
onPress = async () => {
await Location.startLocationUpdatesAsync(LOCATION_TASK_NAME, {
accuracy: Location.Accuracy.Balanced,
timeInterval: 5000,
});
};
render() {
return (
<TouchableOpacity onPress={this.onPress} style={{marginTop: 100}}>
<Text>Enable background location</Text>
</TouchableOpacity>
);
}
}
TaskManager.defineTask(LOCATION_TASK_NAME, ({ data, error }) => {
if (error) {
alert(error)
// Error occurred - check `error.message` for more details.
return;
}
if (data) {
const { locations } = data;
alert(JSON.stringify(locations); //will show you the location object
//lat is locations[0].coords.latitude & long is locations[0].coords.longitude
// do something with the locations captured in the background, possibly post to your server with axios or fetch API
}
});
The code works like a charm. One thing to note is that you cannot use geolocation in the Expo App. However, you can use it in your standalone build. Consequently, if you want to use background geolocation you have to use this code and then do expo build:ios and upload to the appstore in order to be able to get a users background location.
Additionally, note that you must include
"UIBackgroundModes":[
"location",
"fetch"
]
In the info.plist section of your app.json file.
The Expo Team release a new feature in SDK 32 that allow you tracking in background the location.
https://expo.canny.io/feature-requests/p/background-location-tracking
Yes is possible, but not using Expo, there are two modules that I've seen:
This is a comercial one, you have to buy a license https://github.com/transistorsoft/react-native-background-geolocation
And this https://github.com/mauron85/react-native-background-geolocation
Webkit is currently evaluating a Javascript-only solution. You can add your voice here
For a fully documented proof-of-concept example please see Brotkrumen.
The most popular RN geolocation library is https://github.com/react-native-geolocation/react-native-geolocation, and it supports this quite easily. I prefer this library over others because it automatically handles asking for permissions and such, and seems to have the simplest API.
Just do this:
Geolocation.watchPosition((position)=>{
const {latitude, longitude} = position.coords;
// Do something.
})
This requires no additional setup other than including the background modes fetch and location, and also the appropriate usage descriptions.
I find this more usable than Expo's API because it doesn't require any weird top level code and also doesn't require me to do anything other than create a watch position handler, which is really nice.
EDIT 2023!:
These days I would highly recommend using Expo's library instead of any of the other community libraries (mainly because our app started crashing when android got an OS update b/c of the lib I was using).
In fact, if you have to choose between expo and non expo library, always choose the expo library if only for the stability. Setting up expo's background location watching isn't super well documented but here's what I did to get it working in our app:
import { useEffect, useRef } from "react";
import * as Location from "expo-location";
import { LatLng } from "react-native-maps";
import * as TaskManager from "expo-task-manager";
import { LocationObject } from "expo-location";
import { v4 } from "uuid";
type Callback = (coords: LatLng) => void;
const BACKGROUND_TASK_NAME = "background";
const executor: (body: TaskManager.TaskManagerTaskBody<object>) => void = (
body
) => {
const data = body.data as unknown as { locations: LocationObject[] };
const l = data?.locations[0];
if (!l) return;
for (const callback of Object.values(locationCallbacks)) {
callback({
latitude: l.coords.latitude,
longitude: l.coords.longitude,
});
}
};
TaskManager.defineTask(BACKGROUND_TASK_NAME, executor);
const locationCallbacks: { [key: string]: Callback } = {};
const hasStartedBackgroundTaskRef = {
hasStarted: false,
};
function startBackgroundTaskIfNecessary() {
if (hasStartedBackgroundTaskRef.hasStarted) return;
Location.startLocationUpdatesAsync(BACKGROUND_TASK_NAME, {
accuracy: Location.Accuracy.Balanced,
}).catch((e) => {
hasStartedBackgroundTaskRef.hasStarted = false;
});
hasStartedBackgroundTaskRef.hasStarted = true;
}
function addLocationCallback(callback: Callback) {
const id = v4() as string;
locationCallbacks[id] = callback;
return {
remove: () => {
delete locationCallbacks[id];
},
};
}
export default function useLocationChangeListener(
callback: Callback | null,
active: boolean = true
) {
const callbackRef = useRef<null | Callback>(callback);
callbackRef.current = callback;
useEffect(() => {
if (!active) return;
if (!callback) return;
Location.getLastKnownPositionAsync().then((l) => {
if (l)
callback({
latitude: l.coords.latitude,
longitude: l.coords.longitude,
});
});
startBackgroundTaskIfNecessary();
const watch = Location.watchPositionAsync({}, (location) => {
callback({
latitude: location.coords.latitude,
longitude: location.coords.longitude,
});
});
const subscription = addLocationCallback(callback);
return () => {
subscription.remove();
watch.then((e) => {
e.remove();
});
};
}, [callback, active]);
useEffect(() => {
if (__DEV__) {
addLocationCallback((coords) => {
console.log("Location changed to ");
console.log(coords);
});
}
}, []);
}
You need to ask for background location permissions before this, BTW. Follow expos guide.
It's pretty risky trusting community libraries for stuff like this because of the fact that breaking android OS updates can happen at any moment and with open source maintainers they may or may not stay on top of it (you can more or less trust expo too, though)

#sentry/node integration to wrap bunyan log calls as breadcrumbs

Sentry by defaults has integration for console.log to make it part of breadcrumbs:
Link: Import name: Sentry.Integrations.Console
How can we make it to work for bunyan logger as well, like:
const koa = require('koa');
const app = new koa();
const bunyan = require('bunyan');
const log = bunyan.createLogger({
name: 'app',
..... other settings go here ....
});
const Sentry = require('#sentry/node');
Sentry.init({
dsn: MY_DSN_HERE,
integrations: integrations => {
// should anything be handled here & how?
return [...integrations];
},
release: 'xxxx-xx-xx'
});
app.on('error', (err) => {
Sentry.captureException(err);
});
// I am trying all to be part of sentry breadcrumbs
// but only console.log('foo'); is working
console.log('foo');
log.info('bar');
log.warn('baz');
log.debug('any');
log.error('many');
throw new Error('help!');
P.S. I have already tried bunyan-sentry-stream but no success with #sentry/node, it just pushes entries instead of treating them as breadcrumbs.
Bunyan supports custom streams, and those streams are just function calls. See https://github.com/trentm/node-bunyan#streams
Below is an example custom stream that simply writes to the console. It would be straight forward to use this example to instead write to the Sentry module, likely calling Sentry.addBreadcrumb({}) or similar function.
Please note though that the variable record in my example below is a JSON string, so you would likely want to parse it to get the log level, message, and other data out of it for submission to Sentry.
{
level: 'debug',
stream:
(function () {
return {
write: function(record) {
console.log('Hello: ' + record);
}
}
})()
}

How to get Electron + rxdb to work?

I want to learn and develop a desktop app by using electron + rxdb.
My file structure:
main.js (the main process of electron)
/js-server/db.js (all about rxdb database, include creation)
/js-client/ui.js (renderer process of electron)
index.html (html home page)
main.js code:
const electron = require('electron')
const dbjs = require('./js-server/db.js')
const {ipcMain} = require('electron')
ipcMain.on('search-person', (event, userInput) => {
event.returnValue = dbjs.searchPerson(userInput);
})
db.js code:
var rxdb = require('rxdb');
var rxjs = require('rxjs');
rxdb.plugin(require('pouchdb-adapter-idb'));
const personSchema = {
title: 'person schema',
description: 'describes a single person',
version: 0,
type: 'object',
properties: {
Name: {type: 'string',primary: true},
Age: {type: 'string'},
},
required: ['Age']
};
var pdb;
rxdb.create({
name: 'persondb',
password: '123456789',
adapter: 'idb',
multiInstance: false
}).then(function(db) {
pdb = db;
return pdb.collection({name: 'persons', schema: personSchema})
});
function searchPerson(userInput) {
pdb.persons.findOne().where('Name').eq(userInput)
.exec().then(function(doc){return doc.Age});
}
module.exports = {
searchPerson: searchPerson
}
ui.js code:
const {ipcRenderer} = require('electron');
function getFormValue() {
let userInput = document.getElementById('searchbox').value;
displayResults(ipcRenderer.sendSync("search-person",userInput));
document.getElementById('searchbox').value = "";
}
Whenever I run this app, I got these errors:
(node:6084) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): Error: RxError:
RxDatabase.create(): Adapter not added. (I am sure I've installed the pouched-adapter-idb module successfully)
Type error, cannot read property "persons" of undefined. (this error pops out when I search and hit enter to the form in index.html)
I am new to programming, especially js, I've been stuck on these errors for a week, just can't get it to work. Any help? Thanks.
The problem is that this line is in main.js:
const dbjs = require('./js-server/db.js')
Why? Because you're requiring RxDB inside the main process and using the IndexedDB adapter. IndexedDB is a browser API and thus can only be used in a rendering process. In Electron, the main process is a pure Node/Electron environment with no access to the Chromium API's.
Option #1
If you want to keep your database in a separate thread then consider spawning a new hidden browser window:
import {BrowserWindow} from 'electron'
const dbWindow = new BrowserWindow({..., show: false})
And then use IPC to communicate between the two windows similarly to how you have already done.
Option #2
Use a levelDB adapter that only requires NodeJS API's so you can keep your database in the main process.

Categories