✨ Feature Request

Load minimal lightweight iframe if showUI is set to false. Loading React + external CSS is unnecessary for custom loading UI's

🧩 Context

Trying to build a login page -- the external UI dependencies for magic link largely outweigh my custom front-end. Performance is a priority, especially for other projects I'd like to incorporate magic link with!

Is there any way that an alternative mostly-empty iframe can be loaded if showUI is false? Happy to help, and thanks for providing an awesome developer-experience with this platform!

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this feature already requested elsewhere?
• Are you reporting to the correct repository (magic-sdk)?

✨ Feature Request

When using loginWithMagicLink({showUI: false}) have a method of monitoring the state of the client so a custom UI could be implemented with the same logic as the MagicLinks Clients

🧩 Context

My thoughts for this is that in some use cases users may get confused as that it may be easier for a developer to build a custom interface instead of the one provided by magic-sdk.

Currently i believe there is no way to watch the client to give return the states so that could be implemented into a custom UI.

• Email DNS Warning
• Email Sent to email Address
• Waiting for the client to accept the link

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this feature already requested elsewhere?
• Are you reporting to the correct repository (magic-sdk)?

✨ Feature Request

Clash of Coins would like to use a custom websocket(observables) endpoint to achieve higher performance when sending transactions and listening to chain events.

Before we release React Native features, we should update the current unit tests to reflect changes in core business logic. We also need to get coverage back to 100% by testing all the new code related to our React Native implementation.

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this bug already reported elsewhere?
• Are you running the latest SDK version?
• Are you reporting to the correct repository (magic-sdk)?

🐛 Description

atob, btoa, and process is not defined in React Native.

🧩 Steps to Reproduce

1. Set up React Native Project
2. Import/instantiate Magic
3. Broken 😢

🤔 Expected behavior

React Native should work!

😮 Actual behavior

Undefined globals if the environment is not correctly polyfilled.

💻 Code Sample

None.

🌎 Environment

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this question already asked elsewhere?
• Are you reporting to the correct repository (magic-sdk)?

❓ Question

Best Method to pull types for Magic Client (New ...

I have been working on the auth implementation of magic links for Redwood.js!

We have most of the implementation done but i could not find an easy way to pull the client type into the auth wrapper.

is there a simpler type than

SDKBase<MagicSDKAdditionalConfiguration<string, any>> & {
    [x: string]: Pick<Extension<string>, never>;
}

if you wanted to quickly look through the pull request and check that i have implemented it all properly please do! I would love some insight. Pull request - here

Thanks

@Ethella commented on Fri Feb 28 2020

✅ Prerequisites

• [✅] Did you perform a cursory search of open issues? Is this feature already requested elsewhere?
• [✅] Are you reporting to the correct repository (magic-sdk)?

✨ Feature Request

This is a neat product. I went ahead and tried it out, and then I got to the step of installing it via NPM.

On a new project, this was the result of npm install magic-sdk:

515 packages added. Warnings (useless and irrelevant, but still there). 4 vulnerabilities (most likely nothing, but still). Deprecation notice.

The lovely image you built up with simplicity, security, and professionalism, faded more and more the longer installation log got.

I'm not sure what causes it. You only have 3 direct dependencies. Seems like snyk is the one causing the ruckus? Perhaps it should be a devDependency, if at all?

I like the markdown but open to any suggestion (https://keepachangelog.com/en/1.0.0/)

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this bug already reported elsewhere?
• Are you running the latest SDK version?
• Are you reporting to the correct repository (magic-sdk)?

🐛 Description

Buffer found undefined when starting React Native app with Magic

🧩 Steps to Reproduce

🤔 Expected behavior

It shall have no error

😮 Actual behavior

[What actually happened? Please include any error stack traces you encounter.]

💻 Code Sample

const magic = Magic('api_key')

🌎 Environment

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this bug already reported elsewhere?
• Are you running the latest SDK version?
• Are you reporting to the correct repository (magic-sdk)?

🐛 Description

[Description of the bug.]

🧩 Steps to Reproduce

1. [First Step]
2. [Second Step]
3. [and so on...]

🤔 Expected behavior

[What you expected to happen?]

😮 Actual behavior

[What actually happened? Please include any error stack traces you encounter.]

💻 Code Sample

[If possible, please provide a code repository, gist, code snippet or sample files to reproduce the issue.]

💻 Environment

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this feature already requested elsewhere?
• Are you reporting to the correct repository (magic-sdk)?

✨ Feature Request

Soon we will be offering open-source Magic SDK extensions. To support these upcoming new libraries more easily, we should refactor to a monorepo using Lerna.

EDIT:

Another great reason for this feature is the blockers encountered during the Redwood JS integration. See the open PR for a more detailed explanation.

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this bug already reported elsewhere?
• Are you running the latest SDK version?
• Are you reporting to the correct repository (magic-sdk)?

🐛 Description

[Description of the bug.]

🧩 Steps to Reproduce

1. [First Step]
2. [Second Step]
3. [and so on...]

🤔 Expected behavior

[What you expected to happen?]

😮 Actual behavior

[What actually happened? Please include any error stack traces you encounter.]

💻 Code Sample

[If possible, please provide a code repository, gist, code snippet or sample files to reproduce the issue.]

💻 Environment

✅ Prerequisites

• [*] Did you perform a cursory search of open issues? Is this feature already requested elsewhere?
• [*] Are you reporting to the correct repository (magic-sdk)?

✨ Feature Request

[Description of the feature.]
magic-sdk/react-native can't be loaded in Expo snack, due to submodule importation is not supported in Expo.

🧩 Context

This ticket is used to backtrack the progress of expo snack support.

💻 Examples

https://snack.expo.io/@jerry-liu/magic-link-test

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this feature already requested elsewhere?
• Are you reporting to the correct repository (magic-sdk)?

✨ Feature Request

Feature request from Clash of Coins
Currently only Matic testnet V2 is supported.

We've had several partners request this feature and it turns out that having it will also unblock React Native integration for mgbox.io

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this feature already requested elsewhere?
• Are you reporting to the correct repository (magic-sdk)?

✨ Feature Request

Integrate with Intuit's auto project (it supports Lerna out of the box). By using auto, we can have continuous delivery of our packages via CircleCI.

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this bug already reported elsewhere?
• Are you running the latest SDK version?
• Are you reporting to the correct repository (magic-sdk)?

🐛 Description

The return type for RPCProviderModule.enable is Promise<string>, but the actual value returned is Promise<string[]>.

🧩 Steps to Reproduce

1. [First Step]
2. [Second Step]
3. [and so on...]

🤔 Expected behavior

The type signature should reflect the actual return type.

😮 Actual behavior

The type signature reflects string instead of the correct string[].

💻 Code Sample

None.

🌎 Environment

ethers.js v5 is currently in beta, but I've used it with other providers such as MetaMask and haven't had any issues with it. However, it seems Magic does not support ethers v5, as the following steps produced the error shown when using ethers 5.0.0-beta.186 but not when using ether v4.

This error showed up when loading the page. If you ignored it and proceeded to use the provider and signer, you would find they are invalid and unable to send transactions or read contract data. The resulting error in this case is similar the one below, but with a method of eth_accounts instead of eth_chainId

The Error

Steps to Reproduce

Relevant portions shown below

// ConnectWallet.vue ===========================================
// Initialize Magic
const magic = new Magic(process.env.MAGIC_API_KEY, { network: 'kovan' });
magic.preload();

// Check if user is logged in
const isLoggedIn = await magic.user.isLoggedIn();
if (isLoggedIn) {
  await this.$store.dispatch('main/setEthereumData', magic);
  return
}

// If not logged in, log them in
await magic.auth.loginWithMagicLink({ email: this.email });
await this.$store.dispatch('main/setEthereumData', magic);

// Contents of the `setEthereumData` action ======================
export async function setEthereumData({ commit }, magic) {
  const provider = magic.rpcProvider;
  const ethersProvider = new ethers.providers.Web3Provider(provider);
  const signer = ethersProvider.getSigner();
  const metadata = await magic.user.getMetadata();
  const { email, publicAddress } = metadata;
})

🌎 Environment

Reported by Decrypt

So the issue I'm having with implementing @magic-sdk/react-native is that the SDK and our app both have react-native-webview as a dependency. Even when I match the version numbers (8.1.2 for RNWebView) I run into the following issue...

Invariant Violation: Tried to register two views with the same name RNCWebView

If I manually go into node_modules/@magic-sdk/react-native/node_modules/ and delete the react-native-webview dependency folder I am able to resolve the issue. Magic works and seems to use the top level RNWebView dependency.

The error is caused by having two identical classes with identical names imported to the app and it’s thrown by the IOS builder.

Will fix it by putting React-native-webview as a peer dependency with a restricted range of versions

🧩 Context

PromiEvent was added in v1.4.0, but we have no documentation on how best to use it. We should document the specific APIs, as well as events for each relevant SDK method. Finally, we should also add an example of 100% "whitelabeled" authentication using Magic SDK.

@Ethella commented on Thu Feb 27 2020

• A temporary solution for now
  https://github.com/fortmatic/fortmatic-js/issues/121

• reduce duplicate code

• Setup building environment

@Ethella commented on Fri Apr 10 2020

The new idea is to install the needed packages in the RN SDK package, for a reason that all these packages will be downloaded to the app that doesn't need to be downloaded per loading. So size is not a concern in this case.

    "whatwg-url": "^8.0.0"
    "react-native-webview": "^8.1.2", 

In this way, the developer doesn't need to add theses dependencies.

It might be a good choice to manage two package.json, but install and build into one fortmatic package.
Or manage in one package.json, as long web SDK doesn't import these dependencies, which would keep the small size as it used to be.

These need to be installed in the developer's app

    "process": "^0.11.10", // required by web3
    "web3": "^1.2.6",

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this bug already reported elsewhere?
• Are you running the latest SDK version?
• Are you reporting to the correct repository (magic-sdk)?

🐛 Description

On Safari, the URL constructor throws a TypeError if the second parameter is explicitly undefined. This does not occur if the second parameter is omitted entirely. This is breaking Safari implementations via the CDN bundle.

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this feature already requested elsewhere?
• Are you reporting to the correct repository (magic-sdk)?

✨ Feature Request

To support Harmony network, we'll need a new configuration option—chainType—to be added to the EthNetworkConfiguration interface. It would be helpful to also add an enum—EthChainType—to support this interface.

@Ethella commented on Sat Feb 15 2020

https://github.com/facebook/react-native/blob/0.59-stable/Libraries/Blob/URL.js#L157

RN does not support URL, need to rewrite it in a different format

@Ethella commented on Wed Feb 19 2020

Two options,

1. Adding hacks on global.js
   import { URL, URLSearchParams } from "whatwg-url";
   global.URL = URL;
   global.URLSearchParams = URLSearchParams;

This is will create overhead to developers

2. Or rewrite new URL in SDK
   Losing tidiness on SDK, and reinvent the wheel of an existing package

Will come back to find best solution

@smithki commented on Fri Feb 21 2020

This can be worked around using NodeJS url module: facebook/react-native#16434

There is also a polyfill specifically for this: https://github.com/charpeni/react-native-url-polyfill

@Ethella commented on Mon Feb 24 2020

@smithki I agree, there is quite a lot of workaround.

But the decision is if we proceed with the solution of 2 in 1 bundle in fortmatic-js,

• Is it small enough that we can just refactor to code that's platform-agnostic.
• Or do we delegate this to the RN developer to add configuration their app?
  • For example, in the doc we write to use fortmatic-js please download react-native-url-polyfill and require ('react-native-url-polyfill')
  • There have been quite a lot of environment setup for RN to run formatic-js

Here's a copy of what I add to RN to make fortmatic-js work so far, some of them are not necessary. I'll prune them later.

if (typeof __dirname === 'undefined') global.__dirname = '/'
if (typeof __filename === 'undefined') global.__filename = ''
if (typeof process === 'undefined') {
    global.process = require('process')
} else {
    const bProcess = require('process')
    for (var p in bProcess) {
        if (!(p in process)) {
            process[p] = bProcess[p]
        }
    }
}
global.Buffer = require('buffer').Buffer
global.process = require('process')
global.process.env.NODE_ENV = __DEV__ ? 'development' : 'production'
if (typeof btoa === 'undefined') {
    global.btoa = function (str) {
        return new Buffer(str, 'binary').toString('base64')
    }
}
if (typeof atob === 'undefined') {
    global.atob = function (b64Encoded) {
        return new Buffer(b64Encoded, 'base64').toString('binary')
    }
}
process.browser = false
if (typeof Buffer === 'undefined') global.Buffer = require('buffer').Buffer
global.location = { protocol: 'file:' }
const isDev = typeof __DEV__ === 'boolean' && __DEV__
process.env['NODE_ENV'] = isDev ? 'development' : 'production'
if (typeof localStorage !== 'undefined') {
    localStorage.debug = isDev ? '*' : ''
}

import { URL, URLSearchParams } from "whatwg-url";
global.URL = URL;
global.URLSearchParams = URLSearchParams;

/* To inject window object for window.addEventListener */
if (global.window === undefined) {
    global.window = global;
}

A few ideas:

• Security badge from https://snyk.io/
• Build passing badge
• Test cover badge
• NPM version badge

We want to avoid adding react and react-native to peerDependencies so that developers working with the browser bundle (which is likely to be the vast majority) do not receive superfluous warnings when they run npm install. Another way to tackle the issue of peer dependencies in this case would be to raise an error from the SDK constructor.

Personally, I think it may be unnecessary since React and React Native dependencies are implied if the developer is importing our React Native-compatible bundle. I’m curious to hear more perspectives on this idea, though.

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this feature already requested elsewhere?
• Are you reporting to the correct repository (magic-sdk)?

✨ Feature Request

Add documentation to https://docs.magic.link/ about support for React Native.

🧩 Context

None.

💻 Examples

None.

A README.md that includes but not limited to the following sections:

• Introduction
• Table of Content
• Installation
• Quick Start
• How to Contribute
• Changelog
• License

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this feature already requested elsewhere?
• Are you reporting to the correct repository (magic-sdk)?

✨ Feature Request

Currently, to use Web3 features in TypeScript, the magic.rpcProvider member must be cast to any, like this:

new Web3(magic.rpcProvider as any);

But, now that web3/web3.js#3380 is resolved, we can implement the Web3 AbstractProvider interface to gain strong typing. Once this is implemented, consumers of rpcProvider can simply do this:

new Web3(magic.rpcProvider); // No compiler error! Yay! 🚀

Context

https://circleci.com/gh/MagicHQ/magic-js

Circle CI is broken

Update the author field when it is ready.

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this feature already requested elsewhere?
• Are you reporting to the correct repository (magic-sdk)?

✨ Feature Request

The EIP1193 spec is finally stable. We already, through total accident, implement request to the specification via BaseModule.request. We should offer an implementation of Web3 events. This could be a great addition for any extension APIs to have as well, so I think we should implement it at the BaseModule layer.

Jerry has built a foundation of work that we can follow here to implement React Native support: https://github.com/fortmatic/fortmatic-js/tree/react-native-2.1

I will be prioritizing this after Web3 support ships in #28