nicwands · nicwands · Aug 23, 2021 · Aug 23, 2021 · Aug 23, 2021 · Aug 24, 2021
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Rumfoords
+# Code Study Boilerplate
 
 **Local Development**
 

diff --git a/app.html b/app.html
@@ -1,10 +1,3 @@
-<!--
-    /* WEBSITE CREDITS */
-
-    Website Design / Development: CTHDRL
-    Contact: build@cthdrl.co
-    Site: https://cthdrl.co
--->
 <!DOCTYPE html>
 <html {{ HTML_ATTRS }}>
     <head {{ HEAD_ATTRS }}>

diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
@@ -1,5 +1,5 @@
 @import 'vars';
-@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
 
 html {
     font-size: 16px;
@@ -12,7 +12,7 @@ body {
     --black: #000000;
     --white: #ffffff;
 
-    --font-sans: 'Poppins', sans-serif;
+    --font-sans: 'IBM Plex Sans', sans-serif;
     --font-serif: 'EB Garamond', serif;
 
     @include fontSize(16px);
@@ -107,20 +107,15 @@ a {
     path {
         transition: fill 0.3s;
     }
-
-    @include hover {
-        color: var(--white);
-
-        path {
-            fill: var(--white);
-        }
+    &:hover {
+        text-decoration: underline;
     }
 }
 
 .contained {
     padding-right: var(--margin);
     padding-left: var(--margin);
-    // max-width: 1380px;
+    max-width: 1200px;
     margin-right: auto;
     margin-left: auto;
 }

diff --git a/components/StudyBody.vue b/components/StudyBody.vue
@@ -0,0 +1,19 @@
+<template>
+    <section class="study-body">
+        <zora-info />
+    </section>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss">
+.study-body {
+    border: 1px solid var(--black);
+    padding: 20px;
+    box-sizing: border-box;
+    margin-top: 20px;
+    position: relative;
+}
+</style>
diff --git a/components/ZoraInfo.vue b/components/ZoraInfo.vue
@@ -0,0 +1,117 @@
+<template>
+    <div class="zora-info">zora</div>
+</template>
+
+<script>
+// import { auctionQuery } from '../libs/zora'
+import { ethers, Wallet } from 'ethers'
+import {
+    Zora,
+    AuctionHouse,
+    Decimal,
+    constructBid,
+    approveERC20,
+    getZoraProfiles,
+} from '@zoralabs/zdk'
+
+export default {
+    async mounted() {
+        if (!this.userWallet) {
+            await this.$store.dispatch('web3/CONNECT_WALLET')
+        }
+        // create Zora instance, 1 for mainnet - 4 for rinkeby
+        this.zora = new Zora(this.userWallet, 4)
+        console.log(this.zora)
+
+        // create AuctionHouse instance
+        this.auctionHouse = new AuctionHouse(this.userWallet, 4)
+        console.log(this.auctionHouse)
+
+        return
+
+        const mediaToken = '0x88b48f654c30e99bc2e4a1559b4dcf1ad93fa656'
+        await this.createAuction(mediaToken)
+
+        const amount = Decimal.new(10).value // amount of bid (10*10^18)
+        // if auction is on zora
+        this.bidOnAuction(1234, amount)
+        // to bid on anything using the Zora protocol
+        await this.createBid(amount)
+    },
+    computed: {
+        userWallet() {
+            return this.$store.state.web3.userWallet
+        },
+    },
+    methods: {
+        async createAuction(tokenId) {
+            // https://docs.zora.co/zoraos/dev/zdk/auction-house#create-an-auction
+
+            // approve media to be placed on auction
+            const approvalTx = await this.zora.approve(
+                this.auctionHouse.address,
+                tokenId
+            )
+
+            console.log(approvalTx)
+
+            // await confirmation of the approval
+            await approvalTx.wait()
+
+            // create the Auction
+            const createAuctionTx = await this.auctionHouse.createAuction(
+                tokenId,
+                duration, // auction runtime in seconds
+                reservePrice, // minimum price for first bid
+                curator, // address of the auction curator || zero address for uncurated auction
+                curatorFeePercentage, // % of final bid to give to curator
+                auctionCurrency // address of ERC-20 currency
+            )
+
+            // await confirmation from the Ethereum Network and receive a receipt
+            const receipt = await createAuctionTx.wait()
+
+            // get auction info
+            const auction =
+                await this.auctionHouse.fetchAuctionFromTransactionReceipt(
+                    receipt
+                )
+        },
+        async endAuction(auctionId) {
+            return await this.auctionHouse.endAuction(auctionId)
+        },
+        async bidOnAuction(auctionId, amount) {
+            return await this.auctionHouse.createBid(auctionId, amount)
+        },
+        async createBid(mediaId, amount) {
+            // https://github.com/ourzora/zdk/blob/HEAD/docs/bidding.md
+
+            const currency = '0x6B175474E89094C44Da98b954EedeAC495271d0F' // address of the ERC-20 currency used to bid (DAI)
+
+            // get approval for transfer of funds
+            await approveERC20(
+                this.userWallet,
+                currency,
+                this.zora.marketAddress,
+                ethers.constants.MaxUint256
+            )
+
+            const bid = constructBid(
+                currency,
+                amount,
+                this.userWallet.address, // bidder address
+                this.userWallet.address, // recipient address (address to receive Media if bid is accepted)
+                10 // sellOnShare
+            )
+
+            const tx = await this.zora.setBid(mediaId, bid)
+            await tx.wait(8) // 8 confirmations to finalize
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.zora-info {
+}
+</style>
diff --git a/components/svg/facebook-clipped.vue b/components/svg/facebook-clipped.vue
@@ -0,0 +1,47 @@
+<template>
+    <svg
+        ref="svgEl"
+        width="28"
+        height="29"
+        viewBox="0 0 28 29"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <defs>
+            <clipPath
+                id="facebookClip"
+                clipPathUnits="objectBoundingBox"
+                :transform="clipTransform"
+            >
+                <path
+                    d="M27.7134 14.5664C27.7134 6.91357 21.5096 0.709717 13.8567 0.709717C6.20386 0.709717 0 6.91357 0 14.5664C0 21.4826 5.06717 27.2153 11.6916 28.2548V18.5719H8.17329V14.5664H11.6916V11.5136C11.6916 8.04078 13.7604 6.12249 16.9255 6.12249C18.4411 6.12249 20.0273 6.39313 20.0273 6.39313V9.80318H18.28C16.5588 9.80318 16.0218 10.8714 16.0218 11.9683V14.5664H19.8649L19.2505 18.5719H16.0218V28.2548C22.6462 27.2153 27.7134 21.4826 27.7134 14.5664Z"
+                />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            svg: {},
+        }
+    },
+    mounted() {
+        this.svg = this.$refs.svgEl
+    },
+    computed: {
+        xScale() {
+            return 1 / parseInt(this.svg.getAttribute('width'))
+        },
+        yScale() {
+            return 1 / parseInt(this.svg.getAttribute('height'))
+        },
+        clipTransform() {
+            if (!this.svg.getAttribute) return ''
+            return `scale(${this.xScale}, ${this.yScale})`
+        },
+    },
+}
+</script>
diff --git a/components/svg/social/social-facebook.vue b/components/svg/social/social-facebook.vue
@@ -1,5 +1,6 @@
 <template>
     <svg
+        id="facebook"
         width="28"
         height="29"
         viewBox="0 0 28 29"
@@ -11,4 +12,4 @@
             fill="white"
         />
     </svg>
-</template>
+</template>
diff --git a/components/svg/social/social-instagram.vue b/components/svg/social/social-instagram.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="instagram"
         width="29"
         height="29"
         viewBox="0 0 29 29"

diff --git a/components/svg/social/social-linkedin.vue b/components/svg/social/social-linkedin.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="linkedIn"
         class="svg-social-linkedin"
         xmlns="http://www.w3.org/2000/svg"
         width="21.639"

diff --git a/components/svg/social/social-mail.vue b/components/svg/social/social-mail.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="mail"
         class="svg-social-mail"
         xmlns="http://www.w3.org/2000/svg"
         width="22.475"

diff --git a/components/svg/social/social-spotify.vue b/components/svg/social/social-spotify.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="spotify"
         class="svg-social-spotify"
         xmlns="http://www.w3.org/2000/svg"
         width="21.622"

diff --git a/components/svg/social/social-twitter.vue b/components/svg/social/social-twitter.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="twitter"
         width="29"
         height="23"
         viewBox="0 0 29 23"

diff --git a/libs/zora.js b/libs/zora.js
@@ -0,0 +1,57 @@
+import { gql } from 'nuxt-graphql-request'
+
+export const auctionQuery = (id) => {
+    return gql`
+        {
+            reserveAuction(id: ${id}) {
+                id
+                status
+                token
+                duration
+                firstBidTime
+                tokenId
+                tokenContract
+                auctionCurrency {
+                    id
+                }
+                reservePrice
+                currentBid {
+                    id
+                    amount
+                  	createdAtTimestamp
+                    bidder {
+                        id
+                    }
+                }
+                media {
+                    contentURI
+                }
+                previousBids {
+                    id
+                    amount
+                  	createdAtTimestamp
+                  	bidder {
+                        id
+                    }
+                }
+                expectedEndTimestamp
+            }
+        }
+    `
+}
+
+export const serializeBid = (bid, $store) => {
+    const userAddress = _get(bid, 'bidder.id')
+    const user = $store.state.addresses[userAddress] || {}
+    const clippedAddress = userAddress.substring(0, 12) + '...'
+
+    return {
+        profilePicture: user.profileImageURL,
+        username: user.zoraUsername ? `@${user.zoraUsername}` : clippedAddress,
+        bidder: userAddress,
+        ethBidValue: bid.amount,
+        time: new Date(parseInt(bid.createdAtTimestamp) * 1000),
+        isFWB: user.isFWB || false,
+        // isFWB: true,
+    }
+}
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -78,6 +78,16 @@ const universal = {
     //     id: 'GTM-P9TGQDN',
     // },
 
+    buildModules: ['nuxt-graphql-request'],
+
+    graphql: {
+        clients: {
+            default: {
+                endpoint: process.env.ZORA_API_URL,
+            },
+        },
+    },
+
     /*
      * Plugins
      */