I am building a wallet app with React Native using ethers.js.
I would like to let my app function as a wallet provider to any web3 website as soon as the in-app expo-webbrowser (or any web view or browser) is opened, and the user clicks on a “connect to wallet” button.
import * as WebBrowser from 'expo-web-browser';
await WebBrowser.openBrowserAsync('https://sparklesnft.com/',{
dismissButtonStyle: "close",
toolbarColor: vars.themes[theme].themeColor,
readerMode: true,
enableBarCollapsing: false,
showTitle: true,
secondaryToolbarColor: 'black',
controlsColor: '#ffffff'
});
I am not sure how I inject my wallet provider into the browser. Does anyone have an idea how to do this?
Well since no one else has given you an answer, I'll just give you everything I've found. I think you might be looking for #walletconnect/ethereum-provider.
I also found some info on creating an app that connects to these wallets. Maybe that will get you in the right direction.
W3-react
Integrating with Web3-React
Related
Description:
Built an app, need to implement Swedish BankID. This means, when user presses a button, the Swedish BankID App opens, and when the user has signed in, the Swedish BankID App sends the user back to my app (which it does automatically), in which I need to retrieve data (if sign in was successful or not).
What needs to be accomplished:
Open Swedish BankID on the device from my app. Need to be able to receive a payload from Swedish BankID App in my app (Swedish BankID sends user automatically back to my app).
Current Code:
const url = `https://app.bankid.com/?${autoStartToken}`;
const supported = await Linking.canOpenURL(url);
if (supported) {
const answer = await Linking.openURL(url);
} else {
Alert.alert(`Don't know how to open this URL: ${url}`);
}
Currently, the Swedish BankID App opens correctly, my question is, is there any way to receive data from the other app? I know this is possible with Native Modules (running Objective-C etc), however I am using Expo Client and do not wish to eject.
I have yet to find anything that suggests that React-Native can listen to the other app.
You can use expo WebBrowser to open url.
For authentication you will want to use WebBrowser.openAuthSessionAsync, and if you just want to open a webpage WebBrowser.openBrowserAsync
Exemple:
...
import * as WebBrowser from 'expo-web-browser';
....
const handleLinkAsync = async () => {
let result = await WebBrowser.openBrowserAsync('https://google.com');
console.log(result)
};
Since the BankID app can even be on another device (if you present the url as a QR code) it's kind of hard to communicate with the app. Also, from a privacy perspective the app isn't supposed to give a lot of information away.
What you can do is to "bounce" information via the app using the "redirect" parameter. That's especially useful when you want to tie back to the existing session. There are however a few caveats, especially when using multiple browsers, so make sure to read the Relying Party Gudelines.
I am generating a branch.io deeplink in my react native app using the below code
let branchUniversalObject = await branch.createBranchUniversalObject(
canonicalIdentifier,
{
locallyIndex: true,
title,
contentImageUrl,
contentDescription: contentDescription || '',
contentMetadata: {
customMetadata,
},
}
)
It gives me a link something like https://xyz.abc.com/OrzOISGRP0
I have kept my localhost for desktop url in branch.io settings.
Now my question is, is there a way i can get the customMetadata associated with this deeplink in the website?
I tried using branch.init() web sdk, but its not returning the required data if i open the link directly, it redirects me though and also appends branch_match_id.
It sends the data in listener registered on site if someone have clicked the link and opened it on phone, i dont know whats the use of that.
Thanks
I have a use case in which the user should be able to click on a slider that has its data served from server.
The data contains some information that would be used to:
Open another view and initialize it with some parameters.
Open external app(s) and send data to it.
Can I use the Linking api in react to make it navigate internally within the app or is that reserved only for react navigation? My intuition is to use something like this:
Linking.canOpenURL(retrievedDate).then(supported => {
if (!supported) {
// use react navigation
} else {
Linking.openURL(retrievedData);
}
}).catch(err => console.error('An error occurred', err));
But I'm not sure if that's going to be the best practice/most generic one?
Your suggestions are highly appreciated.
Linking means you are online and running a web application.
React-Native is for developing (with React type coding) MOBILE apps. A mobile app is not running in a browser and its pages are not linked to URLs. So you should be using the navigation, which creates a certain UI for Android devices and a different UI for IOS (Apple) devices, and allows the user (and/or the programmer) to "navigate" between the "screens".
If for some obscure reason you are developing a web app with React-Native, you can of course use the linking api. https://facebook.github.io/react-native/docs/linking
Working on a facebook messenger chatbot, I try to use Webview and Extensions to display enhanced content (in my case, a datepicker).
As describe in documentation, I send a URL Button with Messenger Extensions message, with a fallback_url to handle browser users.
{
'type': 'web_url',
'url':'https://abcdef.localtunnel.me/html/chatbotDatepicker.html',
'title': 'Pick a date',
'webview_height_ratio': 'tall',
'messenger_extensions': true,
'fallback_url': 'https://abcdef.localtunnel.me/html/chatbotError.html'
}
On my Android phone, everytime I click on that button, it properly open my webview but always and only using the fallback_url. If I remove the fallback_url it will use url as expected but then Facebook Javascript SDK only trigger errors 2071011 (like this one Messenger Extensions Javascript SDK Error 2071011).
I feel like messenger_extensions might be disable, but I couldn't find any reference in documentation about enabling or disabling it.
May be this is related to the fact my application is public (has been reviewed by facebook), but I don't think so.
Does anyone ever had a similar problem, and know how to fix this ?! Thx a lot.
its a valid bug and facebook team is working on it.Here is link to that https://developers.facebook.com/bugs/1676913532599603/
I am creating a Windows Phone app using HTML And JavaScript. I am able to add connected services and have selected "Users and Groups" and given it Read permissions.
I am then making the following calls on button click:
var authContext = new O365Auth.Context();
authContext.getIdToken("https://TestDomain.onmicrosoft.com/TestWebApi").then(
function (token){
}
);
Services/Office365/Settings.js has been edited to the following:
Settings.clientId = "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
Settings.authUri = "https://login.windows.net/common/";
Settings.redirectUri = "ms-app://s-1-15-2-xxxxxxxxxx-xxxxxxxxxx-xxxxxxxxxx-xxxxxxxxxx-xxxxxxxxx-xxxxxxxxxx-xxxxxxxxxx/";
I got the redirectUri value by calling the following function:
Windows.Security.Authentication.Web.WebAuthenticationBroker.getCurrentApplicationCallbackUri();
I do get the login screen for my organization and I am able to provide credentials and it tries to redirect it back to my application, but then I get asked the following question:
"You need to install an app for this task. Would you like to search for one in the Store?"
If I click on yes, it takes me to the store and says "No apps found". If I click on no, it doesn't do anything.
How could I possibly get it redirected back to my app?
The connected services experience only works in Multi-device hybrid apps (a.k.a. Cordova), not in Windows Phone apps.