Feature wallet

package.json

@@ -11,12 +11,18 @@
     "format": "prettier --write 'src/**/*.{js,ts,vue}'"
   },
   "dependencies": {
+    "@alch/alchemy-web3": "^1.4.2",
     "@googlemaps/js-api-loader": "^1.14.1",
+    "@metamask/detect-provider": "^1.2.0",
+    "@nouns/contracts": "^0.1.3",
+    "@types/pica": "^9.0.0",
     "@vueuse/head": "^0.7.6",
     "axios": "^0.27.2",
     "core-js": "^3.21.0",
+    "ethers": "^5.6.6",
     "firebase": "^9.6.11",
     "html2canvas": "^1.4.1",
+    "pica": "^9.0.1",
     "uuid": "^8.3.2",
     "vue": "^3.2.33",
     "vue-i18n": "9",

src/components/NounsMap.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="p-6" align="center">
     <twitter-login :user="user.user" />
+    <wallet ref="walletRef" @updated="tokenUpdated" :user="user.user" />
     <photo-select ref="photoRef" @selected="photoSelected" v-if="user.user" />
     <div align="center" v-if="photoLocal">
       <div>
@@ -41,24 +42,24 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, onMounted, watch } from "vue";
+import { defineComponent, reactive, ref, onMounted } from "vue";
 import { useStore } from "vuex";
 import { db } from "@/utils/firebase";
 import { doc, setDoc } from "firebase/firestore";
 import { auth } from "@/utils/firebase";
 import { User } from "firebase/auth";
 import { Loader } from "@googlemaps/js-api-loader";
 
-import heatmaps from "@/data/heatmapPoints";
 import PhotoSelect from "@/components/PhotoSelect.vue";
 import TwitterLogin from "./TwitterLogin.vue";
+import Wallet from "./Wallet.vue";
 
-import { uploadFile } from "@/utils/storage";
+import { uploadFile, uploadSVG } from "@/utils/storage";
 import { nounsMapConfig } from "../config/project";
 import { photoPosted } from "@/utils/functions";
 import { collection } from "firebase/firestore";
 
-import { getNewPhotoData } from "@/models/photo";
+import { generateNewPhotoData } from "@/models/photo";
 
 interface UserData {
   user: User | null;
@@ -68,19 +69,18 @@ export default defineComponent({
   components: {
     PhotoSelect,
     TwitterLogin,
+    Wallet,
   },
   setup() {
     const store = useStore();
     const mapRef = ref();
     const photoRef = ref();
+    const walletRef = ref();
     const pLevel = ref();
 
     const mapInstance = ref();
     const mapObj = ref();
 
-    const heatmapPoints = ref<
-      { location: google.maps.LatLng; weight: number }[]
-    >([]);
     const photoLocal = ref();
     const dataURL = ref<string>();
     const pictureURL = ref<string>();
@@ -93,12 +93,11 @@ export default defineComponent({
 
     onMounted(async () => {
       auth.onAuthStateChanged((fbuser) => {
+        console.log({ fbuser });
         if (fbuser) {
-          console.log("authStateChanged:" + fbuser);
           user.user = fbuser;
           store.commit("setUser", fbuser);
         } else {
-          console.log("authStateChanged:" + fbuser);
           store.commit("setUser", null);
           user.user = null;
         }
@@ -113,77 +112,25 @@ export default defineComponent({
       };
       mapInstance.value = await loader.load();
       mapObj.value = new mapInstance.value.maps.Map(mapRef.value, mapOptions);
-
-      // TODO: get data from Firestore.
-      heatmapPoints.value = heatmaps.map((point) => {
-        return {
-          location: new mapInstance.value.maps.LatLng(
-            point.location.lat,
-            point.location.lng
-          ),
-          weight: point.weight,
-        };
-      });
-
-      const icon = {
-        url: "/images/glasses/red320px.png",
-        scaledSize: new mapInstance.value.maps.Size(80, 30),
-      };
       marker = new mapInstance.value.maps.Marker({
         position: new mapInstance.value.maps.LatLng(47, 34.5),
         map: mapObj.value,
-        icon,
-      });
-      pictureURL.value = require("@/assets/sample/pexels-11518762.jpg");
-
-      const contentString =
-        '<div id="content">' +
-        '<div id="siteNotice">' +
-        '<img width="242" height="120"  src="' +
-        pictureURL.value +
-        '" />';
-      "</div>" + "</div>";
-
-      const infowindow = new google.maps.InfoWindow({
-        content: contentString,
-      });
-      infowindow.open({
-        anchor: marker,
-        map: mapObj.value,
-        shouldFocus: false,
-      });
-
-      marker.addListener("click", () => {
-        infowindow.open({
-          anchor: marker,
-          map: mapObj.value,
-          shouldFocus: false,
-        });
       });
+      showDemoIcons();
       processing.value = false;
       pLevel.value = 50;
     });
 
-    watch([heatmapPoints, mapObj], () => {
-      if (heatmapPoints.value.length > 0 && mapInstance.value && mapObj.value) {
-        const heatmap = new mapInstance.value.maps.visualization.HeatmapLayer({
-          data: heatmapPoints.value,
-          map: mapObj.value,
-        });
-        heatmap.setMap(mapObj.value);
-      }
-    });
-    const photoSelected = async (files: File[]) => {
-      console.log("photoSeleted" + files);
-      photoLocal.value = files[0];
+    const photoSelected = async (file: File) => {
+      photoLocal.value = file;
       marker.setMap(null);
       mapObj.value.addListener("center_changed", () => {
         locationUpdated();
       });
       locationUpdated();
     };
     const locationUpdated = () => {
-      console.log(pLevel.value);
+      console.debug(pLevel.value);
       const privacyLevel = pLevel.value * 1000;
       if (locationCircle) {
         locationCircle.setCenter(mapObj.value.getCenter());
@@ -211,37 +158,54 @@ export default defineComponent({
         );
       }
     };
+    const uploadIcon = async (_uid: string): Promise<[string, string]> => {
+      let _id = "default";
+      const nft = walletRef.value.getNftData();
+      if (nft) {
+        _id =
+          nft.token.tokenID + nft.token.tokenSymbol + nft.token.contractAddress;
+        const storage_path = `images/users/${_uid}/public_icons/${_id}/icon.svg`;
+        const downloadURL = await uploadSVG(nft.image, storage_path);
+        return [_id, downloadURL];
+      }
+      return [_id, ""];
+    };
     const uploadPhoto = async () => {
       const latlng = mapObj.value.getCenter();
-      console.log(latlng.lat(), latlng.lng());
+      console.debug(latlng.lat(), latlng.lng());
       const { lat, lng, zoom } = {
         lat: privacyShift(latlng.lat()),
         lng: privacyShift(latlng.lng()),
         zoom: mapObj.value.getZoom(),
       };
-      console.log(lat, lng);
-      console.log(user.user ? user.user.uid : "user is empty");
+      console.debug(lat, lng);
       if (!photoLocal.value || !user.user) {
-        console.log("empty photo or user");
+        console.error("empty photo or user");
         return;
       }
       processing.value = true;
       const _uid = user.user.uid;
       photoRef.value.fileInput.disabled = true;
-      //const _pid = uuid(); a0X + 10 digits;
+      const [iconId, iconURL] = await uploadIcon(_uid);
+
+      //generate random id  "hoge" is not created actually
       const _pid = doc(collection(db, "hoge")).id;
       const storage_path = `images/users/${_uid}/public_photos/${_pid}/original.jpg`;
-      const file: File = photoLocal.value;
-      await uploadFile(file, storage_path);
-      const pdata = getNewPhotoData(
+      const photoURL = (await uploadFile(
+        photoRef.value.getResizedBlob(),
+        storage_path
+      )) as string;
+      const pdata = generateNewPhotoData(
         _pid,
+        photoURL,
         photoLocal.value.name,
         storage_path,
         lat,
         lng,
-        zoom
+        zoom,
+        iconId,
+        iconURL
       );
-      console.log(pdata);
       await setDoc(doc(db, `users/${_uid}/public_photos/${_pid}`), pdata);
       // eslint-disable-next-line
       const { data }: any = await photoPosted({
@@ -250,10 +214,10 @@ export default defineComponent({
         lng,
         zoom,
       });
-      console.log(data);
+      console.log({ _pid }, { data });
       if (data.success) {
         dataURL.value = `https://twitter.com/intent/tweet?url=https://${nounsMapConfig.hostName}/p/${_pid}`;
-        console.log(dataURL.value);
+        console.debug(dataURL.value);
       } else {
         console.error("failed");
       }
@@ -267,11 +231,54 @@ export default defineComponent({
         locationCircle = null;
       }
     };
+    const tokenUpdated = async () => {
+      if (walletRef.value) {
+        const icon = {
+          url: walletRef.value.getNftData().image,
+          scaledSize: new mapInstance.value.maps.Size(80, 80),
+        };
+        marker.setIcon(icon);
+        marker.setAnimation(google.maps.Animation.BOUNCE);
+      }
+    };
+    const showDemoIcons = () => {
+      //update for demofor Demo
+      const icon = {
+        url: "/images/glasses/red320px.png",
+        scaledSize: new mapInstance.value.maps.Size(80, 30),
+      };
+      pictureURL.value = require("@/assets/sample/pexels-11518762.jpg");
+      marker.setIcon(icon);
+      marker.setAnimation(google.maps.Animation.BOUNCE);
+      const contentString =
+        '<div id="content">' +
+        '<div id="siteNotice">' +
+        '<img width="242" height="120"  src="' +
+        pictureURL.value +
+        '" />';
+      "</div>" + "</div>";
+      const infowindow = new google.maps.InfoWindow({
+        content: contentString,
+      });
+      infowindow.open({
+        anchor: marker,
+        map: mapObj.value,
+        shouldFocus: false,
+      });
+      marker.addListener("click", () => {
+        infowindow.open({
+          anchor: marker,
+          map: mapObj.value,
+          shouldFocus: false,
+        });
+      });
+    };
 
     return {
       user,
       mapRef,
       photoRef,
+      walletRef,
       pLevel,
       dataURL,
       pictureURL,
@@ -280,6 +287,7 @@ export default defineComponent({
       photoSelected,
       uploadPhoto,
       locationUpdated,
+      tokenUpdated,
     };
   },
 });