feat(sandbox): add "public" building mode

.github/workflows/build.yml

@@ -103,11 +103,11 @@ jobs:
       tag: ${{ steps.setup_tags.outputs.tag }}
     steps:
       - uses: actions/checkout@ac593985615ec2ede58e132d2e21d2b1cbd6127c
-      
+
       - name: Setup tags for docker image
         id: setup_tags
         run: echo "tag=sha-$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
-        
+
       - name: Use Node.js
         uses: actions/setup-node@7c29869aec4da703a571b27bcd84d4f15af0b56e
         with:
@@ -128,9 +128,36 @@ jobs:
       - name: Dump context
         uses: crazy-max/ghaction-dump-context@v2
 
+  setup-build-args:
+    runs-on: ubuntu-latest
+    name: Setup build argument values for docker
+    outputs:
+      network: ${{ steps.network_name_step.outputs.network_name }}
+      is_public: ${{ steps.network_name_step.outputs.is_public }}
+    steps:
+      - name: Dump context
+        uses: crazy-max/ghaction-dump-context@v2
+      - name: Info
+        run: |
+          echo "This is triggered by: ${{ github.event_name }}" >> $GITHUB_STEP_SUMMARY
+      - name: Define network name
+        id: network_name_step
+        run: |
+          if [ "${{ github.event_name}}" = 'release' -a ${{!github.event.release.prerelease}} ]; then
+            echo "is_public=true" >> $GITHUB_OUTPUT
+            echo "network_name=Mainnet" >> $GITHUB_OUTPUT
+          elif [ ${{github.event_name }} = 'workflow_dispatch' -a "${{github.event.inputs.ENVIRONMENT_NAME}}" = 'Stokenet' ]; then
+            echo "is_public=true" >> $GITHUB_OUTPUT
+            echo "network_name=Stokenet" >> $GITHUB_OUTPUT
+          else
+            echo "is_public=false" >> $GITHUB_OUTPUT
+            echo "network_name=" >> $GITHUB_OUTPUT
+          fi
+
   push-docker-image:
     name: (PRIVATE) Docker AMD
     needs:
+      - setup-build-args
       - build
     uses: radixdlt/public-iac-resuable-artifacts/.github/workflows/docker-build.yml@main
     with:
@@ -146,6 +173,9 @@ jobs:
       platforms: "linux/amd64"
       scan_image: true
       snyk_target_ref: ${{ github.ref_name }}
+      build-args: |
+        NETWORK_NAME=${{needs.setup-build-args.outputs.network}}
+        IS_PUBLIC=${{needs.setup-build-args.outputs.is_public}}
 
   snyk-monitor:
     runs-on: ubuntu-latest

Dockerfile

@@ -11,6 +11,15 @@ COPY package.json ./
 COPY package-lock.json ./
 RUN npm install
 
+ARG NETWORK_NAME
+ENV VITE_NETWORK_NAME=$NETWORK_NAME
+
+ARG IS_PUBLIC
+ENV VITE_IS_PUBLIC=$IS_PUBLIC
+
+RUN echo "The VITE_IS_PUBLIC variable value is $VITE_IS_PUBLIC"
+RUN echo "The VITE_NETWORK_NAME variable value is $VITE_NETWORK_NAME"
+
 # Copy rest of the files
 COPY . .
 

build.sh

@@ -3,4 +3,4 @@
 set -e
 
 # Build the docker image
-docker build -t sandbox:latest .
+docker build -t sandbox:latest . --build-arg NETWORK_NAME=Stokenet --build-arg IS_PUBLIC=false 

examples/.env.public

@@ -0,0 +1,2 @@
+VITE_NETWORK_NAME=Stokenet
+VITE_IS_PUBLIC=true

examples/config.ts

@@ -0,0 +1,4 @@
+/// <reference types="vite/client" />
+
+export const IS_PUBLIC = import.meta.env.VITE_IS_PUBLIC === 'true'
+export const ENV_NETWORK_NAME = import.meta.env.VITE_NETWORK_NAME

examples/helpers/get-network-id.ts

@@ -1,6 +1,13 @@
-import { RadixNetwork } from '@radixdlt/babylon-gateway-api-sdk'
+import {
+  RadixNetwork,
+  RadixNetworkConfig,
+} from '@radixdlt/babylon-gateway-api-sdk'
+import { ENV_NETWORK_NAME } from '../config'
 
-export const DEFAULT_NETWORK_ID = RadixNetwork.RCnetV3.toString()
+const networkId = RadixNetworkConfig?.[ENV_NETWORK_NAME]?.networkId
+
+export const DEFAULT_NETWORK_ID =
+  String(networkId) || RadixNetwork.Stokenet.toString()
 
 export const getNetworkId = () => {
   const urlParams = new URLSearchParams(window.location.search)

examples/layouts/Header.tsx

@@ -10,6 +10,7 @@ import Select from '@mui/joy/Select'
 import Option from '@mui/joy/Option'
 import { setNetworkId, useNetworkId } from '../network/state'
 import { RadixNetworkConfig } from '@radixdlt/babylon-gateway-api-sdk'
+import { IS_PUBLIC } from '../config'
 
 declare global {
   namespace JSX {
@@ -50,12 +51,14 @@ export const Header = ({
         >
           <MenuIcon />
         </IconButton>
-        <img
-          src={radixLogo}
-          className="logo"
-          style={{ maxHeight: '50px' }}
-          alt="Radix logo"
-        />
+        <a href="/">
+          <img
+            src={radixLogo}
+            className="logo"
+            style={{ maxHeight: '50px' }}
+            alt="Radix logo"
+          />
+        </a>
       </Box>
 
       <Box
@@ -73,11 +76,22 @@ export const Header = ({
             setNetworkId(value as number)
           }}
         >
-          {Object.values(RadixNetworkConfig).map(
-            ({ networkId, networkName }) => (
-              <Option key={networkName} value={networkId}>
-                {networkName} ({networkId})
+          {IS_PUBLIC ? (
+            <>
+              <Option key="Mainnet" value={1}>
+                Mainnet ({1})
               </Option>
+              <Option key="Stokenet" value={2}>
+                Stokenet ({2})
+              </Option>
+            </>
+          ) : (
+            Object.values(RadixNetworkConfig).map(
+              ({ networkId, networkName }) => (
+                <Option key={networkName} value={networkId}>
+                  {networkName} ({networkId})
+                </Option>
+              )
             )
           )}
         </Select>

examples/layouts/Sidebar.tsx

@@ -7,6 +7,7 @@ import ListItemButton from '@mui/joy/ListItemButton'
 import ListItemContent from '@mui/joy/ListItemContent'
 import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded'
 import { NavLink } from 'react-router-dom'
+import { IS_PUBLIC } from '../config'
 
 export const Sidebar = () => (
   <List size="sm" sx={{ '--ListItem-radius': '8px', '--List-gap': '4px' }}>
@@ -29,39 +30,52 @@ export const Sidebar = () => (
         }}
       >
         {[
-          { path: 'data-request', label: 'Data Requests' },
-          { path: 'one-time-data-request', label: 'One Time Data Requests' },
-          { path: 'create-token', label: 'Create Token' },
-          { path: 'pools', label: 'Pools' },
-          { path: 'standard-metadata', label: 'Standard Metadata' },
+          { path: 'data-request', label: 'Data Requests', hidePublic: false },
+          {
+            path: 'one-time-data-request',
+            label: 'One Time Data Requests',
+            hidePublic: false,
+          },
+          { path: 'create-token', label: 'Create Token', hidePublic: true },
+          { path: 'pools', label: 'Pools', hidePublic: true },
+          {
+            path: 'standard-metadata',
+            label: 'Standard Metadata',
+            hidePublic: true,
+          },
           {
             path: 'send-transaction',
             label: 'Send Transaction',
+            hidePublic: true,
           },
           {
             path: 'rola',
             label: 'ROLA',
+            hidePublic: true,
           },
           {
             path: 'integration-tests',
             label: 'Integration Tests',
+            hidePublic: true,
           },
 
-          { path: 'settings', label: 'Settings' },
-        ].map((item) => (
-          <NavLink key={item.path} to={item.path}>
-            {({ isActive }) => (
-              <ListItem>
-                <ListItemButton
-                  variant={isActive ? 'soft' : 'plain'}
-                  color="primary"
-                >
-                  <ListItemContent>{item.label}</ListItemContent>
-                </ListItemButton>
-              </ListItem>
-            )}
-          </NavLink>
-        ))}
+          { path: 'settings', label: 'Settings', hidePublic: false },
+        ]
+          .filter((item) => !item.hidePublic || !IS_PUBLIC)
+          .map((item) => (
+            <NavLink key={item.path} to={item.path}>
+              {({ isActive }) => (
+                <ListItem>
+                  <ListItemButton
+                    variant={isActive ? 'soft' : 'plain'}
+                    color="primary"
+                  >
+                    <ListItemContent>{item.label}</ListItemContent>
+                  </ListItemButton>
+                </ListItem>
+              )}
+            </NavLink>
+          ))}
       </List>
     </ListItem>
   </List>

examples/network/state.ts

@@ -6,6 +6,7 @@ import {
   RadixNetwork,
   RadixNetworkConfigById,
 } from '@radixdlt/babylon-gateway-api-sdk'
+import { DEFAULT_NETWORK_ID } from '../helpers/get-network-id'
 
 export const bootstrapNetwork = (networkId: number) => {
   const gatewayApi = GatewayApiClient.initialize({
@@ -39,7 +40,7 @@ const getNetworkIdDefault = () => {
   const networkId = parseInt(
     urlParams.get('networkId') ||
       localStorage.getItem('networkId') ||
-      RadixNetwork.Stokenet.toString(),
+      DEFAULT_NETWORK_ID,
     10
   )
   return networkId

examples/router.tsx

@@ -10,49 +10,67 @@ import { RolaPage } from './rola/RolaPage'
 import { OneTimeDataRequestsPage } from './one-time-data-request/OneTimeDataRequestsPage'
 import { PoolsPage } from './pools/PoolsPage'
 import { StandardMetadataPage } from './standard-metadata/StandardMetadataPage'
+import { IS_PUBLIC } from './config'
 
 export const router = createBrowserRouter([
   {
     path: '/',
     element: <Page />,
     children: [
-      { index: true, element: <Navigate to="/data-request" replace /> },
+      {
+        index: true,
+        element: <Navigate to="/data-request" replace />,
+        hidePublic: false,
+      },
       {
         path: 'data-request',
         element: <DataRequestsPage />,
+        hidePublic: false,
       },
       {
         path: 'one-time-data-request',
         element: <OneTimeDataRequestsPage />,
+        hidePublic: false,
       },
       {
         path: 'create-token',
         element: <CreateTokenPage />,
+        hidePublic: true,
       },
       {
         path: 'integration-tests',
         element: <IntegrationTestsPage />,
+        hidePublic: true,
       },
       {
         path: 'standard-metadata',
         element: <StandardMetadataPage />,
+        hidePublic: true,
       },
       {
         path: 'send-transaction',
         element: <SendTransactionPage />,
+        hidePublic: true,
       },
       {
         path: 'pools',
         element: <PoolsPage />,
+        hidePublic: true,
       },
       {
         path: 'settings',
         element: <SettingsPage />,
+        hidePublic: false,
       },
       {
         path: 'rola',
         element: <RolaPage />,
+        hidePublic: true,
       },
-    ],
+    ]
+      .filter((route) => {
+        return !IS_PUBLIC || !route.hidePublic
+      })
+      .map(({ path, element }) => ({ path, element })),
   },
 ])

examples/settings/SettingsPage.tsx

@@ -8,6 +8,7 @@ import Select from '@mui/joy/Select'
 import Option from '@mui/joy/Option'
 import { FormControl, FormLabel } from '@mui/joy'
 import { patchConnectButtonConfig, useConnectButtonConfig } from '../rdt/state'
+import { IS_PUBLIC } from '../config'
 export const SettingsPage = () => {
   const connectButtonConfig = useConnectButtonConfig()
   const dAppDefinitionAddress = useDAppDefinitionAddress()
@@ -26,28 +27,31 @@ export const SettingsPage = () => {
         gap: 2,
       }}
     >
-      <Card title="Set dApp Definition Address">
-        <form
-          onSubmit={(event) => {
-            event.preventDefault()
-            setDAppDefinitionAddress(state.dAppDefinitionAddress)
-          }}
-        >
-          <Input
-            placeholder="Enter dApp Definition Address"
-            required
-            defaultValue={dAppDefinitionAddress}
-            sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
-            onChange={(event) => {
-              setState((prev) => ({
-                ...prev,
-                dAppDefinitionAddress: event.target.value,
-              }))
+      {IS_PUBLIC ? null : (
+        <Card title="Set dApp Definition Address">
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              setDAppDefinitionAddress(state.dAppDefinitionAddress)
             }}
-          />
-          <Button type="submit">Update</Button>
-        </form>
-      </Card>
+          >
+            <Input
+              placeholder="Enter dApp Definition Address"
+              required
+              defaultValue={dAppDefinitionAddress}
+              sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
+              onChange={(event) => {
+                setState((prev) => ({
+                  ...prev,
+                  dAppDefinitionAddress: event.target.value,
+                }))
+              }}
+            />
+            <Button type="submit">Update</Button>
+          </form>
+        </Card>
+      )}
+
       <Card title="Connect Button">
         <FormControl>
           <FormLabel>Theme</FormLabel>