initial typescript support

.github/workflows/deploy-dev-testnet.yml

@@ -15,24 +15,19 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      - name: Set replacements
-        id: set_replacements
-        run: |
-          echo "replacements=$(jq -r '[to_entries[] | .["find"] = "${" + .key + "}" | .["replace"] = .value | del(.key, .value)]' replacements.dev.json | tr -d "\n\r")" >> $GITHUB_OUTPUT
-
-      - name: Replace placeholders
-        uses: flcdrg/replace-multiple-action@v1
+      - name: Set up node
+        uses: actions/setup-node@v3
         with:
-          files: '**/*.jsx'
-          find: '${{ steps.set_replacements.outputs.replacements }}'
-          prefix: '(^|.*)'
-          suffix: '($|.*)'
+          node-version: 20
+          cache: "npm"
+      - run: npm run build
 
       - name: Install bos CLI
         run: |
           curl --proto '=https' --tlsv1.2 -LsSf https://github.com/FroVolod/bos-cli-rs/releases/download/v0.3.2/bos-cli-installer.sh | sh
-      
+
       - name: Deploy widgets
+        working-directory: ./build
         run: |
           which bos
           echo $PATH

.github/workflows/deploy-prod-mainnet.yml

@@ -16,23 +16,18 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
 
-      - name: Set replacements
-        id: set_replacements
-        run: |
-          echo "replacements=$(jq -r '[to_entries[] | .["find"] = "${" + .key + "}" | .["replace"] = .value | del(.key, .value)]' replacements.mainnet.json | tr -d "\n\r")" >> $GITHUB_OUTPUT
-
-      - name: Replace placeholders
-        uses: flcdrg/replace-multiple-action@v1
+      - name: Set up node
+        uses: actions/setup-node@v3
         with:
-          files: "**/*.jsx"
-          find: "${{ steps.set_replacements.outputs.replacements }}"
-          prefix: "(^|.*)"
-          suffix: "($|.*)"
+          node-version: 20
+          cache: "npm"
+      - run: npm run build
 
       - name: Install bos CLI
         run: |
           curl --proto '=https' --tlsv1.2 -LsSf https://github.com/FroVolod/bos-cli-rs/releases/download/v0.3.6/bos-cli-installer.sh | sh
 
       - name: Deploy widgets
+        working-directory: ./build
         run: |
           bos components deploy "$NEAR_SOCIAL_DEPLOY_ID" sign-as "$NEAR_SOCIAL_ACCOUNT_ID" network-config mainnet sign-with-plaintext-private-key --signer-public-key "$NEAR_SOCIAL_ACCOUNT_PUBLIC_KEY" --signer-private-key "$NEAR_SOCIAL_ACCOUNT_PRIVATE_KEY" send

CONTRIBUTING.md

@@ -1,6 +1,7 @@
 # Contribution Guidelines for DevHub Repos
 
 ## Introduction
+
 At DevHub, we value the contributions of each individual. This document provides an overview of the developer setup and deployment process to help you contribute to our project. We also recommend familiarizing yourself with [how we work](https://github.com/near/devgigsboard-widgets/blob/main/docs/how-we-work.md) to learn about our development process and enhance your contribution experience.
 
 ## Developer Setup
@@ -28,12 +29,26 @@ npm install
 
 #### Run the dev script
 
-To initiate the development environment, you can use the following script. This script will first check if bos-loader is installed and, if not, install it. Then, it will serve the default development environment.
+To initiate the development environment, you can use the following script. This script will first check if bos-loader is installed and, if not, install it. Then, it will serve the default development environment and watch for changes inside `./src`.
 
-```sh
+```zsh
 npm run dev
 ```
 
+This runs the bos-loader and the watcher together. You can also run testnet by running:
+
+```zsh
+npm run dev:testnet
+```
+
+While testing the testnet, it's necessary to manually execute the watch script yourself to ensure that changes to files trigger the rebuilding process.
+
+Open another terminal and run:
+
+```zsh
+npm run watch
+```
+
 #### Customizing Creator ID, Contract ID, or Network
 
 If you need to customize the account ID, override the contract ID, or specify a different network for your development environment, you can use the following flags:
@@ -44,24 +59,26 @@ If you need to customize the account ID, override the contract ID, or specify a
 
 Here's how you can use these flags:
 
+> [!IMPORTANT]
+> You will have to change the replace script flags in package.json in order for the watch script to keep using the right flags.
+
 ```sh
-npm run dev -a your_account_id -c your_contract_id -n your_network
+npm run replace -a your_account_id -c your_contract_id -n your_network
 ```
 
 For example:
 
 ```sh
-npm run dev -a bob.near -c contract.bobs.near -n mainnet
+npm run replace -a bob.near -c contract.bobs.near -n mainnet
 ```
 
 By using these flags, you have the flexibility to customize the development environment according to your specific needs.
 
-
 #### Developing across multiple environments
 
-When referencing a component or any parameter that depends on the network, please use the placeholders defined in replacements.*.json. There are three such files that correspond to different environments:
+When referencing a component or any parameter that depends on the network, please use the placeholders defined in replacements.\*.json. There are three such files that correspond to different environments:
 
-`replacements.dev.json` - deploys the develop branch, to testnet @ test.beta.near.org 
+`replacements.dev.json` - deploys the develop branch, to testnet @ test.beta.near.org
 
 `replacements.testnet.json` - deploys main branch, to testnet @ test.near.org
 
@@ -123,6 +140,7 @@ There is GitHub Actions automation that deploys all the widgets to [`devgovgigs.
 Thus, once a PR is merged, you should see the new version of the widgets on [DevHub](https://neardevhub.org) in less than 15 seconds.
 
 ### Before Publishing
+
 Before publishing, make sure that you’ve go through this section.
 
 #### Code Style and Formatting
@@ -139,7 +157,6 @@ We use [Playwright](https://playwright.dev) for tests, which are located in the
 
 See the [test-pipeline](./.github/workflows/continuous-integration-workflow.yml) for what dependencies that needs to be installed on your workstation for tests to run.
 
-
 #### Making Changes to common.jsx
 
 The `common.jsx` file contains a set of shared utilities that are often reused in DevHub widgets. When you need to change it, just edit the file in the root of the project, and update the widgets with this one command:
@@ -156,4 +173,4 @@ Sometimes there is a need to deposit extra tokens to cover the widgets’ storag
 bos social-db prepaid-storage deposit
 ```
 
-NOTE: `bos` CLI will interactively ask all the rest of the details to prepare the transaction. 
+NOTE: `bos` CLI will interactively ask all the rest of the details to prepare the transaction.

global.d.ts

@@ -0,0 +1,21 @@
+declare interface BosContext {
+  accountId?: string;
+  networkId: NetworkId;
+  props: object;
+}
+
+declare const Widget: (params: {
+  src: string;
+  props: object;
+}) => React.ReactNode;
+
+declare interface DevHubBaseProps {
+  page: any;
+}
+
+declare var styled = {
+  div,
+  a,
+  ul,
+  span,
+};