Merge pull request #51 from Golem-Base/develop

Develop -> main

Author: kacperzuk-neti

.github/workflows/docker.yaml

@@ -2,8 +2,11 @@ name: Docker
 
 on:
   push:
-    branches: [ main ]
-    tags: [ 'release-**' ]
+    branches:
+      - main
+      - develop
+    tags: 
+      - 'release-**'
 
 jobs:
   build_and_push:

README.md

@@ -1,37 +1,23 @@
-<h1 align="center">Blockscout frontend</h1>
+# Blockscout frontend for Golem Base L3s
 
-<p align="center">
-    <span>Frontend application for </span>
-    <a href="https://github.com/blockscout/blockscout/blob/master/README.md">Blockscout</a>
-    <span> blockchain explorer</span>
-</p>
+Frontend application for [Golem Base L3 Blockscsout Explorer](https://github.com/Golem-Base/blockscout)
 
 ## Running and configuring the app
 
-App is distributed as a docker image. Here you can find information about the [package](https://github.com/blockscout/frontend/pkgs/container/frontend) and its recent [releases](https://github.com/blockscout/frontend/releases).
+See full list of ENVs and their description [here](./docs/ENVS.md).
 
-You can configure your app by passing necessary environment variables when starting the container. See full list of ENVs and their description [here](./docs/ENVS.md).
-
-```sh
-docker run -p 3000:3000 --env-file <path-to-your-env-file> ghcr.io/blockscout/frontend:latest
-```
+App is distributed as a [docker image](https://hub.docker.com/r/golemnetwork/blockscout-frontend).
 
 Alternatively, you can build your own docker image and run your app from that. Please follow this [guide](./docs/CUSTOM_BUILD.md).
 
-For more information on migrating from the previous frontend, please see the [frontend migration docs](https://docs.blockscout.com/for-developers/frontend-migration).
-
-## Contributing
-
-See our [Contribution guide](./docs/CONTRIBUTING.md) for pull request protocol. We expect contributors to follow our [code of conduct](./CODE_OF_CONDUCT.md) when submitting code or comments.
+See also [compose files](https://github.com/Golem-Base/blockscout-compose-files).
 
 ## Resources
 
 - [App ENVs list](./docs/ENVS.md)
 - [Contribution guide](./docs/CONTRIBUTING.md)
 - [Making a custom build](./docs/CUSTOM_BUILD.md)
 - [Golem Base L3 Development Guide](./docs/GOLEMBASE_L3_DEV.md) - Development guide for Golem Base L3 network
-- [Frontend migration guide](https://docs.blockscout.com/for-developers/frontend-migration)
-- [Manual deployment guide with backend and microservices](https://docs.blockscout.com/for-developers/deployment/manual-deployment-guide)
 
 ## License
 

configs/app/features/index.ts

@@ -24,6 +24,7 @@ export { default as growthBook } from './growthBook';
 export { default as marketplace } from './marketplace';
 export { default as metasuites } from './metasuites';
 export { default as mixpanel } from './mixpanel';
+export { default as umami } from './umami';
 export { default as mudFramework } from './mudFramework';
 export { default as multichainButton } from './multichainButton';
 export { default as nameService } from './nameService';
@@ -47,3 +48,4 @@ export { default as validators } from './validators';
 export { default as verifiedTokens } from './verifiedTokens';
 export { default as web3Wallet } from './web3Wallet';
 export { default as xStarScore } from './xStarScore';
+export { default as topNotice } from './topNotice';

configs/app/features/topNotice.ts

@@ -0,0 +1,24 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const notice = getEnvValue('NEXT_PUBLIC_TOP_NOTICE_HTML');
+
+const title = 'Top Notice';
+
+const config: Feature<{ notice: string }> = (() => {
+  if (notice) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      notice,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;

configs/app/features/umami.ts

@@ -0,0 +1,26 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const src = getEnvValue('NEXT_PUBLIC_UMAMI_SCRIPT_SRC');
+const id = getEnvValue('NEXT_PUBLIC_UMAMI_WEBSITE_ID');
+
+const title = 'Umami analytics';
+
+const config: Feature<{ src: string; id: string }> = (() => {
+  if (id && src) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      id,
+      src,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;

configs/envs/.env.golembase_l3_local

@@ -71,3 +71,9 @@ NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS=true
 NEXT_PUBLIC_ROLLUP_L1_BASE_URL='http://explorer.golem-base.io'
 NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL='http://example.com' # FIXME should be an URL to UI for making withdrawals, but there's none for now (or maybe no withdrawals at all ever?)
 NEXT_PUBLIC_ROLLUP_OUTPUT_ROOTS_ENABLED=true              # FIXME why? what's that?
+
+# UMAMI
+NEXT_PUBLIC_UMAMI_SCRIPT_SRC=https://cloud.umami.is/script.js
+NEXT_PUBLIC_UMAMI_WEBSITE_ID=25e4aea8-49a0-4b6f-8983-249b9a3160b3
+
+NEXT_PUBLIC_TOP_NOTICE_HTML="Get test ETH for this chain on <a style='font-weight: bold; color: var(--chakra-colors-link-primary)' href='https://kaolin.holesky.golem-base.io/faucet/'>our faucet</a>!"

deploy/tools/envs-validator/schema.ts

@@ -305,6 +305,7 @@ const golemSchema = yup
     NEXT_PUBLIC_COLOR_THEME_LIGHT_SAMPLE_BG: yup.string(),
     NEXT_PUBLIC_COLOR_THEME_DARK_HEX: yup.string(),
     NEXT_PUBLIC_COLOR_THEME_DARK_SAMPLE_BG: yup.string(),
+    NEXT_PUBLIC_TOP_NOTICE_HTML: yup.string(),
   });
 
 const parentChainCurrencySchema = yup
@@ -1153,6 +1154,8 @@ const schema = yup
     NEXT_PUBLIC_RE_CAPTCHA_V3_APP_SITE_KEY: yup.string(), // DEPRECATED
     NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID: yup.string(),
     NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN: yup.string(),
+    NEXT_PUBLIC_UMAMI_SCRIPT_SRC: yup.string(),
+    NEXT_PUBLIC_UMAMI_WEBSITE_ID: yup.string(),
     NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY: yup.string(),
     NEXT_PUBLIC_ROLLBAR_CLIENT_TOKEN: yup.string(),
 

docs/ENVS.md

@@ -520,6 +520,15 @@ This feature is **enabled by default** with the `coinzilla` ads provider. To swi
 
  
 
+### Umami analytics
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_UMAMI_SCRIPT_SRC | `string` | Script src for [Umami](https://umami.is/) analytics service | true | - | `https://cloud.umami.is/script.js` | v1.1.0+ |
+| NEXT_PUBLIC_UMAMI_WEBSITE_ID | `string` | Website ID for [Umami](https://umami.is/) analytics service | true | - | `<your-secret>` | v1.1.0+ |
+
+&nbsp;
+
 ### GrowthBook feature flagging and A/B testing
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
@@ -968,6 +977,7 @@ This feature allows to display widgets on the address page with data from 3rd pa
 | NEXT_PUBLIC_COLOR_THEME_LIGHT_SAMPLE_BG | `string` | CSS background value for light theme sample | - | `linear-gradient(154deg, #EFEFEF 50%, rgba(255, 255, 255, 0.00) 330.86%)` | `linear-gradient(154deg, #EFEFEF 50%, rgba(255, 255, 255, 0.00) 330.86%)` | v2.2.0+ |
 | NEXT_PUBLIC_COLOR_THEME_DARK_HEX | `string` | Hex color code for dark theme background | - | `#101112` | `#101112` | v2.2.0+ |
 | NEXT_PUBLIC_COLOR_THEME_DARK_SAMPLE_BG | `string` | CSS background value for dark theme sample | - | `linear-gradient(161deg, #000 9.37%, #383838 92.52%)` | `linear-gradient(161deg, #000 9.37%, #383838 92.52%)` | v2.2.0+ |
+| NEXT_PUBLIC_TOP_NOTICE_HTML                  | `string` | HTML element that will be displayed at the top of landing page | -              | ``                                                                        | `Check out our faucet at <a href="faucet.example.org">faucet.example.org</a>` | v2.2.0+ |
 
 &nbsp;
 

lib/api/services/golem-base-indexer.ts

@@ -6,7 +6,7 @@ import type { PaginatedResponse } from './paginationConverter';
 
 export const GOLEM_BASE_INDEXER_API_RESOURCES = {
   entity: {
-    path: '/api/v1/entities/:key',
+    path: '/api/v1/entity/:key',
     pathParams: [ 'key' as const ],
   },
   entities: {

lib/golemBase/useGolemBaseClient.ts

@@ -0,0 +1,40 @@
+import type { GolemBaseClient } from 'golem-base-sdk';
+import { createClient as createGolemBaseClient, Tagged } from 'golem-base-sdk';
+import { useCallback } from 'react';
+import { useAccount, useWalletClient } from 'wagmi';
+
+import config from 'configs/app';
+import { httpToWs } from 'lib/httpToWs';
+
+export interface GolemBaseClientReturn {
+  isConnected: boolean;
+  isLoading: boolean;
+  createClient: () => Promise<GolemBaseClient>;
+}
+
+export function useGolemBaseClient(): GolemBaseClientReturn {
+  const { address } = useAccount();
+  const { data: walletClient, isPending } = useWalletClient();
+
+  const createClient = useCallback(async() => {
+    if (!address || !walletClient) {
+      throw new Error('Wallet not connected');
+    }
+
+    const httpRpcUrl = config.chain.rpcUrls[0];
+    const wsRpcUrl = httpToWs(httpRpcUrl);
+
+    return createGolemBaseClient(
+      Number(config.chain.id),
+      new Tagged('ethereumprovider', walletClient),
+      httpRpcUrl,
+      wsRpcUrl,
+    );
+  }, [ address, walletClient ]);
+
+  return {
+    isConnected: Boolean(address && walletClient),
+    isLoading: isPending,
+    createClient,
+  };
+}