Use base aepp with remote connection in custom aepp

Hi,

I already talked to @bruteforce.chain in the private chat but since for me personally there isn’t a clear description / tutorial how to achieve our requirement and I think multiple parties could be interested in this topic I want this to be discussed publicly.

We are currently developing aenalytics and we plan to release a beta in the near future. This is a spare time project and it was already started some time ago. We were in contact with @stoyan.chain and he told us that we could connect to the base aepp using a hidden iFrame. This worked like a charm in the past and we were able to allow users to connect to aenalytics using the remote-connection of the base aepp. As far as I know this approach was also used in the BRI vote. Unfortunately @stoyan.chain doesn’t seem to be responsible for the base aepp any longer. So I need to ask for help here :smiley:

At a certain time in the past (~4-5 weeks ago) this functionality was broken and cannot be used any longer. The popup that normally appeared to confirm the connection to the aepp is still appearing but it doesn’t contain any content and prints the following output in the logs:

My questions:

  • is there any source available that clearly how a 3rd party aepp can connect to the base aepp?
    • I would be really happy to see a working example =)
  • is such a connection still desired and maintained?
    • it seems like there is more focus on the waellet extension
    • I personally prefer the base aepp remote connection
  • what needs to be done to make a 3rd party aepp appearing in the aepps browser of the base aepp?

I found following boilerplate which seems to be up to date:

Unfortunately I can’t get the base aepp connection working and get following error when starting it:
image

Can you help me out? @keno.chain @philipp.chain

Edit:

When modifying the code in App.vue and enable AEX-2 the right llogic seems to be executed. Unfortunately I still get errors in the console.

Changed Code

      /*
      Enable for AEX-2
      */
      return await wallet.init(() => {
        this.foundWallet = true;
      });


/*
      try {
        // Bypass check if there is already an active wallet
        if (aeternity.hasActiveWallet())
          return this.foundWallet = true;
        // Otherwise init the aeternity sdk
        if (!(await aeternity.initClient()))
          return console.error('Wallet init failed');

        this.foundWallet = true;
        // Constantly check if wallet is changed
        setInterval(this.checkAndReloadProvider, 1000)
      } catch (e) {
        console.error('Initializing Wallet Error', e);
      }
*/

New errors in console:
image

I think I found the guide to achieve what I need:

will test it tomorrow :slight_smile:

I can check it on monday. Lets have a chat then. To reproduce I have a few questions already

  • Which base-aepp version are you using?
  • Which browser are you testing in?
  • Are you using the aepp in the base-aepp iframe?

the online version is v0.22.0 (https://base.aepps.com) where I have an active remote connection to my mobile base aepp.

my mobile base aepp version is v0.23.0 (iOS) which is using SDK version 6.1.3.

my example aepp is using SDK version 7.0.0 (but it didn’t work with an earlier version either)

I just tested again using this example aepp but connecting to https://base.aepps.com instead of the “identity-aepp” running on http://localhost:9000 (which I also tested and didn’t work):

I am testing in Brave Version 1.2.43 Chromium: 79.0.3945.130 (Official Build) (64-bit)

  • short update here → it is definitely needed to deactivate the brave shield in order to prevent the errors in the console! but it seems like this is not the solution
  • I was also testing it now with Firefox and the connection to the base aepp doesn’t seem to work

I added log-outputs to all functions that are involved. and it seems like scanForWallets is being executed without any errors on both, Brave (deactivated shields) and Firefox. but somehow the application doesn’t handle the connection and wallet-detection for the base aepp:

There are known issues with the reverse iframe implementation (eg. having a mobile account linked to base.aepps.com). This is why we currently recommend using the website on your phone (or simulating a phone on a desktop) to load the aepp in an iframe. We are working on this. Maybe @nduchak.chain can give a quick update :slight_smile:

1 Like

is there an issue on github we can follow? because I am exactly testing the base aepp in combination with the mobile app. IMO this is the most common usecase except for waellet users.

@keno.chain can we follow a github issue here or should we create one?

I haven’t tested it yet with simulating the mobile phone on desktop. but if so it should work, right?

There was some obvious bug: Fix reverse iframe by davidyuk · Pull Request #1372 · aeternity/aepp-base · GitHub

Reverse-iframe looks working on https://example-aepp.origin.aepps.com/ with https://feature-fix-reverse-iframe.origin.aepps.com/. So, I have merged it to develop branch. Probably we will release it soon. Also, it shouldn’t work with SDK@7 until we update it in the Base app.

I have asked to redeploy Base app to avoid confusion because of version mismatch (actually, there were no any significant changes).

3 Likes

@davidyuk it seems like I still cannot get it working. in the best case I can test it locally and connect directly to https://base.aepps.com

  • with the setup you mentioned above I got it working somehow when simulating a mobile phone in the browser (with a lot error messages in the logs … maybe due to the certificate problem?)

please let me know as soon as I can get it working with https://base.aepps.com from my local machine and what SDK version I need to use in my local application :slight_smile:

sidenote here @dincho.chain:

Any updates here? @keno.chain @nduchak.chain @dincho.chain

@davidyuk you let me know when it should work so that we can test again? :slight_smile:

any update/info here? should it work again now?

@bruteforce.chain Can you provide some information here?

Hey @davidyuk can you update us here, please?

1 Like

Sorry, I’m too busy with other tasks and wasn’t able to find time to update the SDK in the Base app yet.

no problem. please don’t forget it and tell me when its done =) thanks!

Currently, @dkostin is assigned to this task, this should make it happen earlier

3 Likes

it seems like it is working now again with our implementation, thanks!

anyway it would be cool to have some working example here that makes use of the AEX-2 standard (if this is being used right now) connecting to base aepp and waellet.

@icarus will also write an article about our base aepp integration within aenalytics.org in the near future

@marco.chain AFAIK there is currently no AEX-2 support in the base-aepp but for the waellet you can find an example implementation either here: https://github.com/kenodressel/aepp-boilerplate/blob/master/src/utils/walletSearch.js or https://github.com/aeternity/superhero-ui/blob/develop/src/utils/walletSearch.js :slight_smile:

2 Likes