Pf/dapp auth scaffold

dApp/user/bsconfig.json

@@ -3,10 +3,7 @@
   "reason": {
     "react-jsx": 3
   },
-  "bsc-flags": [
-    "-open Belt",
-    "-bs-super-errors"
-  ],
+  "bsc-flags": ["-open Belt", "-bs-super-errors"],
   "sources": [
     {
       "dir": "src",
@@ -36,10 +33,9 @@
     "bs-moment",
     "bs-css",
     "bs-css-emotion",
+    "re-formality",
     "rescript-apollo-client"
   ],
-  "ppx-flags": [
-    "@reasonml-community/graphql-ppx/ppx"
-  ],
+  "ppx-flags": ["re-formality/ppx", "@reasonml-community/graphql-ppx/ppx"],
   "refmt": 3
 }

dApp/user/package.json

@@ -28,6 +28,7 @@
     "moment": "^2.29.1",
     "pouchdb-adapter-memory": "^7.2.2",
     "raiden-ts": "^0.15.0",
+    "re-formality": "4.0.0-beta.7",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "subscriptions-transport-ws": "^0.9.18"
@@ -39,7 +40,7 @@
     "@babel/preset-typescript": "^7.12.7",
     "@reasonml-community/graphql-ppx": "^1.0.2",
     "@truffle/hdwallet-provider": "^1.2.1",
-    "bs-platform": "^8.4.2",
+    "bs-platform": "^9.0.1",
     "customize-cra": "^1.0.0",
     "get-graphql-schema": "^2.1.2",
     "react-app-rewired": "^2.1.8",

dApp/user/src/Apollo.res

@@ -2,12 +2,43 @@ let graphqlEndpoint = "localhost:8080/v1/graphql"
 
 let headers = {"x-hasura-admin-secret": "testing"}
 
+
+type clientHeaders = {
+    @as("eth-address")
+    ethAddress: string,
+    @as("eth-signature")
+    ethSignature: string,
+}
+
+let getAuthHeaders = (~user) => {
+  open Ethers.Utils
+    switch(user){
+      | None => None
+      | Some(u) => {
+          let getUserSignature = Dom.Storage2.getItem(_, u->ethAdrToLowerStr)
+          switch(getUserSignature(Dom.Storage2.localStorage)){
+            | None => None
+            | Some(uS) => Some({ethAddress: u->ethAdrToStr, ethSignature: uS})
+          }
+      }
+    }
+}
+
 let httpLink = ApolloClient.Link.HttpLink.make(
   ~uri=_ => "http://" ++ graphqlEndpoint,
   ~headers=Obj.magic(headers),
   (),
 )
 
+let makeHttpLink = (~user) => ApolloClient.Link.HttpLink.make(
+    ~uri= _ => "http://" ++ graphqlEndpoint, 
+    ~headers={
+    switch(getAuthHeaders(~user)){
+      | Some(headers) => headers->Obj.magic
+      | None => Js.Obj.empty->Obj.magic
+    }
+}, ())
+
 let wsLink = {
   open ApolloClient.Link.WebSocketLink
   make(
@@ -21,15 +52,15 @@ let wsLink = {
   )
 }
 
-let terminatingLink = ApolloClient.Link.split(~test=({query}) => {
+let terminatingLink = (~user) => ApolloClient.Link.split(~test=({query}) => {
   let definition = ApolloClient.Utilities.getOperationDefinition(query)
   switch definition {
   | Some({kind, operation}) => kind === "OperationDefinition" && operation === "subscription"
   | None => false
   }
-}, ~whenTrue=wsLink, ~whenFalse=httpLink)
+}, ~whenTrue=wsLink, ~whenFalse=makeHttpLink(~user))
 
-let client = {
+let makeClient = (~user) => {
   open ApolloClient
   make(
     ~cache=Cache.InMemoryCache.make(),
@@ -40,7 +71,7 @@ let client = {
       ~watchQuery=DefaultWatchQueryOptions.make(~fetchPolicy=NetworkOnly, ~errorPolicy=All, ()),
       (),
     ),
-    ~link=terminatingLink,
+    ~link=terminatingLink(~user),
     (),
   )
 }

dApp/user/src/App.res

@@ -34,8 +34,26 @@ module Router = {
     }
   }
 }
+
+module GraphQl = {
+  @react.component
+  let make = (~children) => {
+    let user = RootProvider.useCurrentUser()
+    let client = React.useMemo1(() =>
+      Apollo.makeClient(
+        ~user
+      )
+    , [user])
+
+    <ApolloClient.React.ApolloProvider client> children </ApolloClient.React.ApolloProvider>
+  }
+}
 @react.component
 let make = () =>
-  <ApolloClient.React.ApolloProvider client=Apollo.client>
-    <RootProvider> <Router /> </RootProvider>
-  </ApolloClient.React.ApolloProvider>
+  <RootProvider>
+    <GraphQl>
+    <AuthProvider>
+      <Router /> 
+    </AuthProvider>
+    </GraphQl>
+  </RootProvider>

dApp/user/src/Dapp.res

@@ -3,6 +3,8 @@ let make = () => {
   let optWeb3Provider = RootProvider.useWeb3()
   let optSigner = RootProvider.useSigner()
 
+  let { isAuthorized } = AuthProvider.useAuthStatus()
+
   React.useEffect2(() => {
     switch (optWeb3Provider, optSigner) {
     | (Some(web3Provider), Some(_signer)) => {
@@ -12,5 +14,16 @@ let make = () => {
     }
     None
   }, (optWeb3Provider, optSigner))
-  <div> <p> {"something"->React.string} </p> </div>
+  <div> 
+    {
+      if(!isAuthorized){
+        <AuthenticateButton/>
+      }else{
+        <SignUp/>
+      }
+    }
+    <p>
+      {"something"->React.string}
+    </p>
+  </div>
 }

dApp/user/src/components/Auth/AuthenticateButton.res

@@ -0,0 +1,23 @@
+open Ethers.Utils
+
+let setSignInData = (~ethAddress: string, ~ethSignature: string) => Dom.Storage2.localStorage->Dom.Storage2.setItem(ethAddress, ethSignature)
+
+@react.component
+let make = () => {
+    let signer = RootProvider.useSignerExn()
+    let userAddress = RootProvider.useCurrentUserExn()
+    let { setIsAuthorized } = AuthProvider.useAuthStatus()
+    <button
+        onClick={(_) => {
+            let _ = Ethers.Wallet.signMessage(
+            signer,
+            `flows.finance-signin-string:${userAddress->ethAdrToStr}`,
+            )->JsPromise.map(result => {
+                setSignInData(~ethAddress=userAddress->ethAdrToLowerStr, ~ethSignature=result->Js.String2.make)
+                setIsAuthorized(_ => true)
+            })
+        }}
+    >
+    {"Authenticate"->React.string}
+    </button>
+}