feat: get user to sign a message to generate a composite sign

.env.development

@@ -8,6 +8,8 @@ NEXT_PUBLIC_FUNGIBLE_TOKEN_ADDRESS="0x9a0766d93b6608b7"
 NEXT_PUBLIC_FUSD_ADDRESS="0xe223d8a629e49c68"
 NEXT_PUBLIC_BASIC_BEAST_ADDRESS="0x4742010dbfe107da"
 
+NEXT_PUBLIC_SIGN_MESSAGE="Sign this message so our backend can verify you."
+
 # ---- Packstore ----
 # 1 random Normal skin 1-Star Beast
 NEXT_PUBLIC_ADDRESS_RESERVABLE_NORMAL_SKIN="0x4742010dbfe107da"

.env.production

@@ -8,6 +8,8 @@ NEXT_PUBLIC_FUNGIBLE_TOKEN_ADDRESS="0xf233dcee88fe0abe"
 NEXT_PUBLIC_FUSD_ADDRESS="0x3c5959b568896393"
 NEXT_PUBLIC_BASIC_BEAST_ADDRESS="0xTODO"
 
+NEXT_PUBLIC_SIGN_MESSAGE="Sign this message so our backend can verify you."
+
 # ---- Packstore ----
 # 1 random Normal skin 1-Star Beast
 NEXT_PUBLIC_ADDRESS_RESERVABLE_NORMAL_SKIN="0x6ec745e460cc646c"

components/user/UserProvider.tsx

@@ -1,7 +1,9 @@
-import { FC, createContext, useContext, useState, useEffect } from "react"
+import { FC, createContext, useContext, useEffect } from "react"
+import * as fcl from "@onflow/fcl"
 import useFUSD from "@framework/hooks/use-fusd.hook"
-import useCurrentUser from "@framework/hooks/use-current-user.hook"
 import useUserBeasts from "@framework/hooks/use-user-beasts.hook"
+import useCurrentUser from "framework/hooks/use-current-user.hook"
+import useCookie from "framework/hooks/use-cookie.hook"
 
 export interface State {}
 
@@ -10,21 +12,42 @@ const initialState = {}
 const Context = createContext<State | any>(initialState)
 
 const UserProvider: FC = ({ children }) => {
-  const [user]: any = useCurrentUser()
+  const [user, address]: any = useCurrentUser()
+  const [compositeSignature, setCompositeSignature] = useCookie(
+    "user-composite-signature",
+  )
+
   const { data: balance, getFUSDBalance, purchase, loading } = useFUSD(user)
   const {
     data: userBeasts,
     fetchUserBeasts,
     loadingBeast,
   } = useUserBeasts(user)
 
+  useEffect(() => {
+    if (compositeSignature) return
+    if (address) {
+      const signMessage = async () => {
+        const MSG = Buffer.from(process.env.NEXT_PUBLIC_SIGN_MESSAGE!).toString(
+          "hex",
+        )
+        const signedMessage = await fcl.currentUser().signUserMessage(MSG)
+        if (signedMessage && signedMessage.length > 0) {
+          setCompositeSignature(signedMessage[0])
+        }
+      }
+      signMessage()
+    }
+  }, [address, compositeSignature])
+
   return (
     <Context.Provider
       value={{
         balance,
         getFUSDBalance,
         purchase,
         loading,
+        compositeSignature,
         userBeasts,
         fetchUserBeasts,
         loadingBeast,

framework/hooks/use-cookie.hook.ts

@@ -0,0 +1,23 @@
+import { useState } from "react"
+import Cookies from "universal-cookie"
+
+const useCookie = (key: string) => {
+  const cookies = new Cookies()
+  const [item, setItemValue] = useState(() => {
+    if (cookies.get(key)) {
+      return cookies.get(key)
+    }
+    return null
+  })
+
+  const setValue = (value: String, options: Record<string, any>) => {
+    setItemValue(value)
+    cookies.set(key, value, options)
+  }
+
+  const removeItem = () => cookies.remove(key)
+
+  return [item, setValue, removeItem]
+}
+
+export default useCookie

framework/hooks/use-current-user.hook.tsx

@@ -1,14 +1,17 @@
 import { useEffect, useState } from "react"
 import * as fcl from "@onflow/fcl"
+import useCookie from "./use-cookie.hook"
 
 export default function useCurrentUser() {
   const [user, setUser] = useState({ addr: null })
+  const [, , removeCompositeSignature] = useCookie("user-composite-signature")
 
   const logIn = () => {
     fcl.authenticate()
   }
 
   const logOut = () => {
+    removeCompositeSignature()
     fcl.unauthenticate()
   }
 

package.json

@@ -26,7 +26,8 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-toastify": "^8.0.3",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.1",
+    "universal-cookie": "^4.0.4"
   },
   "devDependencies": {
     "@gqty/cli": "^2.3.0",

yarn.lock

@@ -1063,6 +1063,11 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.0.7.tgz#82f83dcc2eb9b1e1d559b3aca96783e285eb8592"
   integrity sha512-3Zi2LGbCLDz4IIL7ir6wD0u/ggHotLkK5SlVzFzTcYaNgPR4MAt/9JYZqXWKcofPWEoptfpnCJU8Bq9sxw8QUg==
 
+"@types/cookie@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
+  integrity sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==
+
 "@types/hoist-non-react-statics@*":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -1805,6 +1810,10 @@ convert-source-map@1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+cookie@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
+  integrity sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
 convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
@@ -4715,6 +4724,13 @@ unbox-primitive@^1.0.1:
     has-symbols "^1.0.2"
     which-boxed-primitive "^1.0.2"
 
+universal-cookie@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-4.0.4.tgz#06e8b3625bf9af049569ef97109b4bb226ad798d"
+  integrity sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==
+  dependencies:
+    "@types/cookie" "^0.3.3"
+    cookie "^0.4.0"
 unc-path-regex@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"