- fix inconsistent version update on UI

- add ink compiler scripts

Signed-off-by: Jasti Sri Radhe Shyam <[email protected]>

Makefile

@@ -32,7 +32,7 @@ ANALYTICS_URL ?= https://api-sa.substrate.io
 
 VERSION_LIST_URL ?= http://localhost:4000/version_list
 
-DOCKER_USER_NAME ?= achimcc
+DOCKER_USER_NAME ?= radhezeeve
 
 ################################################################################
 # GENERATE
@@ -270,6 +270,9 @@ docker-shell:
 docker-log:
 	docker logs ink-playground-container
 
+docker-pull-images:
+	./scripts/ink-compiler.sh -c pull --docker_user_name ${DOCKER_USER_NAME}
+
 ################################################################################
 # GLOBAL
 ################################################################################

README.md

@@ -61,15 +61,13 @@ To clone and build the whole project on your local computer, enter:
 
 5. `make build`
 
-Then pull and tag the docker image which is used by the backend to compile, test & format Smart Contracts:
+Then pull and tag the docker images which are used by the backend to compile, test & format Smart Contracts:
 
-6. `docker pull achimcc/ink-compiler`
-
-7. `docker tag achimcc/ink-compiler ink-compiler`
+6. `make docker-pull-images`
 
 Finally, start the backend with:
 
-6. `make backend-run`
+7. `make backend-run`
 
 The last command starts the Rust webserver locally on your computer. You can then access `localhost:4000` from your browser to open the locally compiled ink! Playground open.
 

packages/playground/src/app/Header/index.tsx

@@ -25,7 +25,6 @@ import { testing } from '~/context/side-effects/testing';
 import { format } from '~/context/side-effects/format';
 import * as constants from '~/constants';
 import { Colors } from '@paritytech/components/ButtonWithIcon';
-import { useNavigate } from 'react-router-dom';
 
 const openContractsUiUrl = (): void => {
   window.open(constants.CONTRACTS_UI_URL, '_blank');

packages/playground/src/app/index.tsx

@@ -22,25 +22,48 @@ import {
 const App = (): ReactElement => {
   const [state, dispatch]: [State, Dispatch] = useContext(AppContext);
   const [, messageDispatch]: [MessageState, MessageDispatch] = useContext(MessageContext);
-  const [searchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const { versionParam } = useParams();
   const navigate = useNavigate();
-  
+
   const { monacoUri: uri, formatting } = state;
 
+  const navigateVersion = (version: string) => {
+    navigate(`/v${version}`);
+  };
+
+  useEffect(() => {
+    if (state.version && versionParam != `v${state.version}`) {
+      navigateVersion(state.version);
+    }
+  }, [state.version])
+
+  useEffect(() => {
+    if (versionParam?.startsWith('v') && state.versionList.includes(versionParam?.replace('v', ''))) {
+      setVersion(versionParam?.replace('v', ''), state, { app: dispatch })
+    } else if (state.versionList.length > 0 && state.versionList[0]) {
+      setVersion(state.versionList[0], state, { app: dispatch });
+      navigateVersion(state.versionList[0]);
+    }
+  }, [state.versionList])
+
   useEffect(() => {
     const searchParamCode = searchParams.get('code');
     if (!uri) return;
     loadCode(state, { app: dispatch, message: messageDispatch }).then(code => {
       const model = monaco.editor.getModel(uri as monaco.Uri);
       if (!model) return;
       model.setValue(searchParamCode ?? code);
+      if (searchParamCode) setSearchParams((oldSearchParams) => {
+        oldSearchParams.delete('code')
+        return oldSearchParams;
+      });
     });
-    loadVersionList(state, { app: dispatch }).then(()=> {
+    loadVersionList(state, { app: dispatch }).then(() => {
       const version = versionParam ? versionParam?.replace('v', '') : '';
       setVersion(version, state, { app: dispatch });
     })
-  }, [uri, versionParam]);
+  }, [uri]);
 
   useEffect(() => {
     if (!(formatting.type === 'RESULT')) return;

scripts/ink-compiler.sh

@@ -0,0 +1,126 @@
+#!/bin/bash
+
+
+set -eu
+set -o pipefail
+set -o nounset
+
+command=""
+docker_user_name=""
+specific_version=""
+
+relative_dirname="$(dirname -- "${BASH_SOURCE[0]}")"
+bash_dir_path="$(cd -- "${relative_dirname}" && pwd)"
+
+pull() {
+  versions=($(cat ${bash_dir_path}/../config/versions.json | jq -r '.[]'))
+  for version in "${versions[@]}"; do
+    docker pull ${docker_user_name}/ink-compiler:${version}
+    docker tag ${docker_user_name}/ink-compiler:${version} ink-compiler:${version}
+  done
+}
+
+
+build() {
+  versions=($(cat ${bash_dir_path}/../config/versions.json | jq -r '.[]'))
+  cd ${bash_dir_path}/../docker
+  for version in "${versions[@]}"; do
+    docker build --tag ink-compiler:${version} -f Dockerfile.compiler-${version} .
+  done
+}
+
+push() {
+  versions=($(cat ${bash_dir_path}/../config/versions.json | jq -r '.[]'))
+  for version in "${versions[@]}"; do
+    docker tag ink-compiler:${version} ${docker_user_name}/ink-compiler:${version}
+    docker push ${docker_user_name}/ink-compiler:${version}
+  done
+}
+
+build_specific() {
+  cd ${bash_dir_path}/../docker
+  docker build --tag ink-compiler:${specific_version} -f Dockerfile.compiler-${specific_version} .
+}
+
+pull_specific() {
+  docker pull ${docker_user_name}/ink-compiler:${specific_version}
+  docker tag ${docker_user_name}/ink-compiler:${specific_version} ink-compiler:${specific_version}
+}
+
+push_specific() {
+  docker tag ink-compiler:${specific_version} ${docker_user_name}/ink-compiler:${specific_version}
+  docker push ${docker_user_name}/ink-compiler:${specific_version}
+}
+
+usage() {
+  echo "USAGE" 
+  echo "Execute docker related commands"
+  echo "options:"
+  echo "-c --command       : command to execute (pull, build, push, build_specific, push_specific)"
+  echo "--docker_user_name : docker image to pull and push from)"
+  echo "--specific_version : ink specific version, used to build, pull and push specific ink compiler image)"
+}
+
+check_blank_args() {
+  if [ -z "${1:-}" ]; then
+    echo "Arguments are not passed correctly, refer the following:"
+    usage;
+    exit 1;
+  fi
+}
+
+while [ "$#" -ge 1 ]; do
+  case "$1" in
+    -c|--command)
+      shift;
+      check_blank_args "${1:-}"
+      command=$1
+    ;;
+    --docker_user_name)
+      shift;
+      check_blank_args "${1:-}"
+      docker_user_name=$1
+    ;;
+    --specific_version)
+      shift;
+      check_blank_args "${1:-}"
+      specific_version=$1
+    ;;
+    *)
+      usage;
+      exit 1
+    ;;
+  esac;
+  shift;
+done;
+
+case ${command} in
+  "pull")
+    pull
+  ;;
+
+  "build")
+    build
+  ;;
+
+  "push")
+    push
+  ;;
+
+  "pull_specific")
+    pull_specific
+  ;;
+
+  "build_specific")
+    build_specific
+  ;;
+
+  "push_specific")
+    push_specific
+  ;;  
+
+  *)
+    echo "wrong command"
+    exit 1;
+  ;;
+esac

sysbox/on-start.sh

@@ -1,15 +1,14 @@
 #!/bin/bash
 
+relative_dirname="$(dirname -- "${BASH_SOURCE[0]}")"
+bash_dir_path="$(cd -- "${relative_dirname}" && pwd)"
+
 # dockerd start
 dockerd > /var/log/dockerd.log 2>&1 &
 sleep 2
 
 # pull inner images
-versions=($(cat ../config/versions.json | jq -r '.[]'))
-for version in "${versions[@]}"; do
-  docker pull radhezeeve/ink-compiler:${version}
-  docker tag radhezeeve/ink-compiler:${version} ink-compiler:${version}
-done
+${bash_dir_path}/../scripts/ink-compiler.sh -c pull --docker_user_name radhezeeve
 
 # start backend server
 /app/target/release/backend --port 4000 --host 0.0.0.0 --frontend_folder /app/packages/playground/dist