Adds referreral option:

* Adds referrerAddress address prop for referal links * Adds image to README for nicer presentation * Fixes depreciated tslint member ordering config
ProjectOpenSea · Mar 7, 2021 · 3306e23 · 3306e23
1 parent 1700a4f
commit 3306e23
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -1,44 +1,60 @@
+<img style="border-radius: 8px" src="assets/embedable-nfts.png" />
+
+<br /><br />
+
 # Embeddable NFTs
+
 Easily embed OpenSea listings in your website!
 
 ### Component inputs
 
-`horizontal` - If this is present, the card will be rendered horizontally.
+`tokenAddress`\*- The token's contract address.
 
-`orientationMode` - If `auto` the card will switch to vertical 
+`tokenId`\* - The token Id of the asset.
+
+`horizontal` - If this is present, the card will be rendered horizontally.
 mode on mobile (breakpoint is at 600px). In `manual` mode the card will be unaffected.
 
+`orientationMode` - If `auto` the card will switch to vertical
+
 `width` - The width of the embeddable. Ex. values `100%` `250px`. Default: `388px`
 
 `height` - The height of the embeddable. Ex. values `40vh` `300px`. Default: `560px`
 
-`tokenAddress`\*- The token's contract address.
-
-`tokenId`\* - The token Id of the asset.
-
 `network` - The name of the network the asset is on `mainnet` or `rinkeby`. Default: `mainnet`.
 
+`referrerAddress` - The address of the referrer. Check out the [SDK docs](https://github.com/ProjectOpenSea/opensea-js#affiliate-program) to learn more about the Affiliate program.
+
 \*Required inputs
 
 ### Usage
 
 Add this to your `<head>` tag:
+
 ```
 <script src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script>
 ```
 
 Then add this into your code:
+
 ```
 <nft-card
   tokenAddress="0x5caebd3b32e210e85ce3e9d51638b9c445481567"
   tokenId="2242579050293992223"
   network="mainnet"
+  referrerAddress="YOUR_ADDRESS_HERE"
   >
 </nft-card>
 ```
 
+### Referral
+
+Add the referrerAddress property to
+
 ### Development
+
 For developers looking to contribute or modify the code, or view the example use the following commands:
+
 ```bash
   git clone https://github.com/ProjectOpenSea/embeddable_nfts.git
   cd embeddable_nfts
@@ -47,4 +63,5 @@ For developers looking to contribute or modify the code, or view the example use
 ```
 
 #### Development server
+
 This project uses webpack for building and running a development server. Once the server starts, any changes made will trigger a rebuild after which those changes should be reflected in your browser.
diff --git a/assets/embedable-nfts.png b/assets/embedable-nfts.png
diff --git a/dist/nft-card.min.js b/dist/nft-card.min.js
diff --git a/dist/nft-card.min.js.map b/dist/nft-card.min.js.map
diff --git a/src/nft-card.ts b/src/nft-card.ts
@@ -38,7 +38,7 @@ const MOBILE_BREAK_POINT = 600
 
 /**
  * Nft-card element that manages front & back of card.
- * Facilitates aquisition and distribution data between
+ * Facilitates acquisition and distribution data between
  * components.
  * Registers <nft-card> as an HTML tag.
  */
@@ -56,6 +56,7 @@ export class NftCard extends LitElement {
   @property({ type: String }) public minHeight: string = ''
   @property({ type: String }) public maxWidth: string = ''
   @property({ type: String }) public network: Network = Network.Main
+  @property({ type: String }) public referrerAddress: string = ''
 
   @property({ type: Object }) private asset!: OpenSeaAsset
   @property({ type: Object }) private traitData: object = {}
@@ -215,7 +216,12 @@ export class NftCard extends LitElement {
       const order = this.asset.sellOrders[0]
       await this.seaport.fulfillOrder({
         order,
-        accountAddress: this.account
+        accountAddress: this.account,
+
+        // Include the referrer address if one is defined
+        ...(this.referrerAddress
+          ? { referrerAddress: this.referrerAddress }
+          : {})
       })
     }
   }
@@ -309,7 +315,10 @@ export class NftCard extends LitElement {
   }
 
   private goToOpenSea() {
-    window.open(this.asset.openseaLink, '_blank')
+    const url = this.referrerAddress
+      ? `${this.asset.openseaLink}?ref=${this.referrerAddress}`
+      : this.asset.openseaLink
+    window.open(url, '_blank')
   }
 
   /**

diff --git a/tslint.json b/tslint.json
@@ -27,7 +27,7 @@
         "max-classes-per-file": [true, 1],
         "max-line-length": false,
         "member-access": true,
-        "member-ordering": [true, "public-before-private", "static-before-instance", "variables-before-functions"],
+        "member-ordering": [true, {"order": "fields-first"}],
         "newline-before-return": false,
         "new-parens": true,
         "no-angle-bracket-type-assertion": true,