@eluvio/elv-client-js 3.2.4 → 3.2.7

package/src/walletClient/Configuration.js

@@ -0,0 +1,40 @@
+let WalletConfiguration = {
+  demo: {
+    configUrl: "https://demov3.net955210.contentfabric.io/config",
+    staging: {
+      siteId: "iq__2gkNh8CCZqFFnoRpEUmz7P3PaBQG",
+      purchaseMode: "develop",
+      appUrl: "https://core.test.contentfabric.io/wallet-demo"
+    }
+  },
+  main: {
+    configUrl: "https://main.net955305.contentfabric.io/config",
+    staging: {
+      siteId: "iq__inauxD1KLyKWPHargCWjdCh2ayr",
+      purchaseMode: "production",
+      appUrl: "https://core.test.contentfabric.io/wallet"
+    },
+    production: {
+      siteId: "iq__suqRJUt2vmXsyiWS5ZaSGwtFU9R",
+      purchaseMode: "production",
+      appUrl: "https://wallet.contentfabric.io"
+    }
+  },
+  __MARKETPLACE_ORDER: [
+    "dolly-marketplace",
+    "oc-marketplace",
+    "maskverse-marketplace",
+    "emp-marketplace",
+    "microsoft",
+    "indieflix-marketplace",
+    "angels-airwaves-marketplace"
+  ]
+};
+
+// No production environment on demo
+WalletConfiguration.demo.production = WalletConfiguration.demo.staging;
+
+// Allow demo to be referred to as demov3
+WalletConfiguration.demov3 = WalletConfiguration.demo;
+
+module.exports = WalletConfiguration;

package/src/walletClient/README.md

@@ -0,0 +1,191 @@
+# Eluvio Wallet Client
+
+This is a standalone client for using Eluvio Media Wallet functionality
+
+For information about the embedded wallet app frame client, see [here](https://eluv-io.github.io/elv-media-wallet/ElvWalletFrameClient.html)
+
+## Initializing the Client
+
+Import the client using the following path:
+
+```javascript
+import {ElvWalletClient} from "@eluvio/elv-client-js/src/walletClient/index";
+```
+
+Initializing the client is as simple as calling the static Initialize method with the network (main or demo) and the mode (production or staging) the client should operate upon, as well as (optionally) the marketplace to associate the client with.
+
+```javascript
+await ElvWalletClient.Initialize({
+  network: "main | demo",
+  mode: "production | staging",
+  marketplaceParams: {
+    tenantSlug,
+    marketplaceSlug
+  }
+})
+```
+
+## Referencing Marketplaces
+
+Many methods, including the Initialize method, take a parameter called `marketplaceParams`. This parameter should be specified in one of the following formats:
+
+Specify the tenant slug and marketplace slug corresponding to your marketplace.
+```javascript
+{
+  tenantSlug: "<tenant-slug>", 
+  marketplaceSlug: "<marketplace-slug>"
+}
+```
+
+Specify the object ID of the marketplace
+```javascript
+{ marketplaceId: "iq__abc123" }
+```
+
+Specify a version hash of the marketplace
+```javascript
+{ marketplaceHash: "hq__abc123" }
+```
+
+## Handling Login
+
+The wallet client make it simple to log in with the Eluvio Media Wallet. However, if you are also using the frame client to embed the wallet application, extra care must be taken to ensure the login flow is handled correctly and the wallet client and frame have parity in their authorization states.
+
+<div id="wallet-client" />
+
+### Wallet Client
+
+##### Redirect Flow
+```javascript
+walletClient.LogIn({
+  method: "redirect",
+  callbackUrl: <https://your-domain.com/callback>
+});
+```
+
+Upon login, the browser will return to the callbackUrl with the authorization token as a url parameter (`elvToken`). **Initializing the client will automatically pull the token out of the URL parameters and log in.** 
+
+If you don't want to initialize the client in the callback URL, you can save this token and later set it in the client using the `Authenticate` method.
+
+```javascript
+const searchParams = new URLSearchParams(window.location.search);
+const clientAuthToken = searchParams.get("elvToken");
+
+...
+
+walletClient.Authorize({token: clientAuthToken});
+
+```
+
+##### Popup Flow
+```javascript
+try {
+  await walletClient.LogIn({
+    method: "popup"
+  })
+} catch(error) {
+  // User closed popup
+}
+```
+
+##### Additional Options
+
+The `clear` parameter in the LogIn method will ensure that the user does the full log in flow, even if they are already logged in to the Eluvio Media Wallet application. This is important to specify if the user has logged out from your application, as they will otherwise still be logged in to the Media Wallet and the login flow will simply authorize them as the same user.
+
+The `provider` parameter will automatically proceed to log in with the specified provider instead of presenting the usual login screen and waiting for the user to choose. For example, you can specify that the login flow should automatically prompt for Metamask login or proceed to the OAuth login flow. For the OAuth flow, the `mode` parameter can be used to proceed to the `login` flow or the `create` account flow.
+
+##### Saving Authorization
+
+By default, the client will save the authorization token in localstorage, if available. If you prefer to handle storing the authorization token differently, you can specify that the client should not save the token when initializing the client:
+
+```javascript
+const walletClient = ElvWalletClient.Initialize({
+  ...,
+  storeAuthToken: false
+})
+```
+
+The authorization token can be retrieved using `walletClient.ClientAuthToken()`, which can then be used later in the `Authenticate` method.
+
+
+### Frame Client
+
+If you only want to embed the Eluvio Media Wallet application without using the Wallet Client and you don't want to implement a custom login screen, no special effort is needed. The wallet app UI will handle login natively.
+
+You can use event listeners with the frame client to detect when the user logs in or out:
+
+```javascript
+frameClient.AddEventListener(frameClient.EVENTS.LOG_IN, ({address}) => { ... });
+
+frameClient.AddEventListener(frameClient.EVENTS.LOG_OUT, () => { ... });
+```
+
+
+### Custom Login UI For Embedded Wallet App / Using Both Wallet Client and Frame Client
+
+If you want to implement a custom login screen for the embedded wallet application, or if you want to use both the wallet and frame clients in the same application, some care must be taken to ensure the login flow is handled correctly and the wallet client and frame have parity in their authorization states.
+
+First, **login should be handled by the Wallet Client only**. The wallet client does not have to deal with the limitations of iframes, and the wallet client is allowed access to the user's authorization token, which can be passed to the frame client to authorize the embedded application. 
+
+Authorization can be passed to the embedded frame, but **cannot be retrieved** from it. Because of this, logging in via the embedded application would mean the user is logged in in the frame, but the wallet client in the containing application has no access to that user's authorization.
+
+Here's how to handle this case:
+
+##### Perform Login Using the Wallet Client
+
+See the [Wallet Client](#wallet-client) login section for details about how to handle the login flow with the wallet client.
+
+##### Capture Login from the Frame
+
+When initializing the frame client, specify the `captureLogin` option. This will cause login prompts (e.g. user clicks log in, user tries to perform/access something that requires login, etc.) to emit an event instead of presenting the login form in the frame. 
+
+```javascript
+const frameClient = await ElvWalletFrameClient.InitializeFrame({
+  ...,
+  captureLogin: true
+})
+```
+
+You can then listen for that event to present your own login screen, or simply trigger the login flow with the Wallet Client.
+
+```javascript
+frameClient.AddEventListener(
+  frameClient.EVENTS.LOG_IN_REQUESTED,
+  () => {
+    // Show your login screen or log in with wallet client
+    // ShowLogin()
+    // walletClient.LogIn({...});
+  }
+)
+```
+
+##### Pass Authorization Token to Frame Client
+
+When the login flow has completed with the wallet client, pass the authorization token to the embedded application:
+
+```javascript
+if(walletClient.ClientAuthToken()) {
+  await frameClient.LogIn({clientAuthToken: walletClient.ClientAuthToken()})
+}
+```
+
+##### Handle Log Out in Both Clients
+
+After the user is logged in with the frame client, you can present an option to log out. Be sure this logs out both the wallet client and the frame client:
+
+```javascript
+function LogOutFromMyApp() {
+  walletClient.LogOut();
+  frameClient.LogOut();
+}
+```
+
+Additionally, the user may log out from the embedded application. Use an event listener in the frame client to handle this and log out from the wallet client:
+
+```javascript
+frameClient.AddEventListener(
+  frameClient.EVENTS.LOG_OUT,
+  () => LogOutFromMyApp()
+);
+```
+

package/src/walletClient/Utils.js

@@ -0,0 +1,234 @@
+const Utils = require("../Utils");
+
+const RarityToPercentage = (rarity) => {
+  if(!rarity) {
+    return "";
+  }
+
+  rarity = rarity.toString();
+
+  if(!rarity.includes("/")) {
+    return rarity;
+  }
+
+  const [ numerator, denominator ] = rarity.split("/");
+  let percentage = 100 * parseInt(numerator) / parseInt(denominator);
+
+  if(percentage < 1) {
+    percentage = percentage.toFixed(2);
+  } else {
+    percentage = percentage.toFixed(1).toString().replace(".0", "");
+  }
+
+  return percentage;
+};
+
+// Format NFT or listing result into consistent format
+const FormatNFTDetails = function(entry) {
+  const isListing = !!entry.id;
+
+  const metadata = (isListing ? entry.nft : entry.meta) || {};
+  const info = (isListing ? entry.info : entry);
+
+  let details = {
+    USDCAccepted: !!(entry.accepts || []).find(entry => entry.type === "sol"),
+    USDCOnly: ((entry.accepts || []).find(entry => entry.type === "sol") || {}).preferred,
+    TenantId: entry.tenant || entry.tenant_id,
+    ContractAddr: info.contract_addr,
+    ContractId: `ictr${Utils.AddressToHash(info.contract_addr)}`,
+    ContractName: info.contract_name,
+    Cap: info.cap,
+    TokenIdStr: info.token_id_str,
+    TokenUri: info.token_uri,
+    TokenOrdinal: info.ordinal,
+    TokenHold: info.hold,
+    TokenHoldDate: info.hold ? new Date(parseInt(info.hold) * 1000) : undefined,
+    TokenOwner: info.token_owner ? Utils.FormatAddress(info.token_owner) : "",
+    VersionHash: (info.token_uri || "").split("/").find(s => (s || "").startsWith("hq__")),
+  };
+
+  if(isListing) {
+    details = {
+      ...details,
+      // Listing specific fields
+      ListingId: entry.id,
+      CreatedAt: entry.created * 1000,
+      UpdatedAt: entry.updated * 1000,
+      CheckoutLockedUntil: entry.checkout ? entry.checkout * 1000 : undefined,
+      SellerAddress: Utils.FormatAddress(entry.seller),
+      Price: entry.price,
+      Fee: entry.fee
+    };
+  }
+
+  return {
+    metadata,
+    details
+  };
+};
+
+exports.FormatNFTDetails = FormatNFTDetails;
+
+
+const FormatNFTMetadata = function(nft) {
+  nft.formatted = true;
+
+  // Surface relevant details to top level
+  nft.contractAddress = nft.details.ContractAddr;
+  nft.contractId = nft.details.ContractId;
+  nft.tokenId = nft.details.TokenIdStr;
+  nft.name = nft.metadata.display_name;
+
+  if(nft.details.ListingId) {
+    nft.listingId = nft.details.ListingId;
+  }
+
+  // Format traits
+  const FILTERED_ATTRIBUTES = ["Content Fabric Hash", "Creator", "Total Minted Supply"];
+  nft.metadata.attributes = (nft.metadata.attributes || [])
+    .filter(attribute => attribute && !FILTERED_ATTRIBUTES.includes(attribute.trait_type))
+    .map(trait => ({...trait, name: trait.trait_type, rarity_percent: RarityToPercentage(trait.rarity)}));
+
+  // Generate embed URLs for additional media
+  if(nft.metadata.additional_media) {
+    nft.metadata.additional_media = nft.metadata.additional_media.map(media => {
+      try {
+        // Generate embed URLs for additional media
+        const mediaType = (media.media_type || "").toLowerCase();
+
+        if(mediaType === "image") {
+          return {
+            ...media,
+            embed_url: media.media_file.url
+          };
+        }
+
+        let embedUrl = new URL("https://embed.v3.contentfabric.io");
+        embedUrl.searchParams.set("p", "");
+        embedUrl.searchParams.set("net", rootStore.network === "demo" ? "demo" : "main");
+        embedUrl.searchParams.set("ath", rootStore.authToken);
+
+        if(mediaType === "video") {
+          embedUrl.searchParams.set("vid", LinkTargetHash(media.media_link));
+          embedUrl.searchParams.set("ct", "h");
+          embedUrl.searchParams.set("ap", "");
+        } else if(mediaType === "ebook") {
+          embedUrl.searchParams.set("type", "ebook");
+          embedUrl.searchParams.set("vid", media.media_file["."].container);
+          embedUrl.searchParams.set("murl", btoa(media.media_file.url));
+        }
+
+        return {
+          ...media,
+          embed_url: embedUrl.toString()
+        };
+      } catch(error) {
+        return media;
+      }
+    });
+  }
+
+  // Generate embed URLs for pack opening animations
+  ["open_animation", "open_animation__mobile", "reveal_animation", "reveal_animation_mobile"].forEach(key => {
+    try {
+      if(nft.metadata.pack_options && nft.metadata.pack_options[key]) {
+        let embedUrl = new URL("https://embed.v3.contentfabric.io");
+        embedUrl.searchParams.set("p", "");
+        embedUrl.searchParams.set("net", rootStore.network === "demo" ? "demo" : "main");
+        embedUrl.searchParams.set("ath", rootStore.authToken || rootStore.staticToken);
+        embedUrl.searchParams.set("vid", LinkTargetHash(nft.metadata.pack_options[key]));
+        embedUrl.searchParams.set("ap", "");
+
+        if(!key.startsWith("reveal")) {
+          embedUrl.searchParams.set("m", "");
+          embedUrl.searchParams.set("lp", "");
+        }
+
+        nft.metadata.pack_options[`${key}_embed_url`] = embedUrl.toString();
+      }
+    // eslint-disable-next-line no-empty
+    } catch(error) {}
+  });
+
+  return nft;
+};
+
+exports.FormatNFTMetadata = FormatNFTMetadata;
+
+exports.FormatNFT = function (item) {
+  return FormatNFTMetadata(FormatNFTDetails(item));
+};
+
+
+exports.LinkTargetHash = function(link) {
+  if(!link) { return; }
+
+  if(link["."] && link["."].source) {
+    return link["."].source;
+  }
+
+  if(link["/"] && link["/"].startsWith("/qfab/")) {
+    return link["/"].split("/").find(segment => segment.startsWith("hq__"));
+  }
+
+  if(link["."] && link["."].container) {
+    return link["."].container;
+  }
+};
+
+// https://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen
+const Popup = ({url, title, w, h}) => {
+  // Fixes dual-screen position
+  const dualScreenLeft = window.screenLeft || window.screenX;
+  const dualScreenTop = window.screenTop || window.screenY;
+
+  const width = window.innerWidth || document.documentElement.clientWidth || screen.width;
+  const height = window.innerHeight || document.documentElement.clientHeight || screen.height;
+
+  const systemZoom = width / window.screen.availWidth;
+  const left = (width - w) / 2 / systemZoom + dualScreenLeft;
+  const top = (height - h) / 2 / systemZoom + dualScreenTop;
+  const newWindow = window.open(url, title,
+    `
+      width=${w / systemZoom},
+      height=${h / systemZoom},
+      top=${top},
+      left=${left}
+    `
+  );
+
+  if(window.focus) newWindow.focus();
+
+  return newWindow;
+};
+
+exports.ActionPopup = async ({mode="tab", url, onMessage, onCancel}) => {
+  await new Promise(resolve => {
+    const newWindow = mode === "popup" ?
+      Popup({url, title: "Eluvio Media Wallet", w: 500, h: 850}) :
+      window.open(url);
+
+    const closeCheck = setInterval(async () => {
+      if(newWindow.closed) {
+        clearInterval(closeCheck);
+
+        if(onCancel) {
+          await onCancel();
+        }
+
+        resolve();
+      }
+    }, 1000);
+
+    window.addEventListener("message", async event => {
+      await onMessage(
+        event,
+        () => {
+          clearInterval(closeCheck);
+          newWindow.close();
+          resolve();
+        }
+      );
+    });
+  });
+};