feat(3416039642): Add "Connect Wallet" functionality (#32)

.env.development

@@ -1 +1,2 @@
 REACT_APP_PG_SERVICE_URL=http://localhost:8081/data.json
+REACT_APP_AUTO_CONNECT=true

.env.production

@@ -1,3 +1,4 @@
 REACT_APP_PG_SERVICE_URL=https://2uuf49xjkk.execute-api.us-east-2.amazonaws.com/prod/cairo
 REACT_APP_STARKNET_ALPHA_SERVICE_URL=https://alpha4.starknet.io
 REACT_APP_SHARP_SERVICE_URL=https://testnet.provingservice.io
+REACT_APP_AUTO_CONNECT=false

.env.test

@@ -1,3 +1,4 @@
 REACT_APP_PG_SERVICE_URL=https://vu00h9m96c.execute-api.us-east-2.amazonaws.com/staging/cairo-staging
 REACT_APP_STARKNET_ALPHA_SERVICE_URL=https://alpha4.starknet.io
 REACT_APP_SHARP_SERVICE_URL=https://testnet.provingservice.io
+REACT_APP_AUTO_CONNECT=false

.github/workflows/pull_request.yml

@@ -12,7 +12,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
 
       - name: Install node_modules
         run: yarn
@@ -29,7 +29,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
 
       - name: Install node_modules
         run: yarn

.github/workflows/push.yml

@@ -19,7 +19,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
 
       - name: Install node_modules
         run: yarn

.github/workflows/tag.yml

@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
 
       - name: Install node_modules
         run: yarn

package.json

@@ -42,13 +42,22 @@
     ]
   },
   "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.10.12",
+    "@starkware-industries/commons-js-components": "^2.0.0-dev.1",
+    "@starkware-industries/commons-js-enums": "^1.2.0",
+    "@starkware-industries/commons-js-utils": "^1.2.1-dev.1",
     "codemirror": "^5.62.3",
+    "get-starknet": "2.0.0",
+    "get-starknet-core": "2.0.0",
     "js-logger": "^1.6.1",
     "react": "^17.0.2",
     "react-codemirror2": "^7.2.1",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "react-split-pane": "^2.0.3"
+    "react-split-pane": "^2.0.3",
+    "starknet": "^4.12.0"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.0",

public/lessons/starknet_contract.cairo

@@ -11,7 +11,7 @@
 //    For more information on how to write Cairo contracts see the
 //    ["Hello StarkNet" tutorial](https://cairo-lang.org/docs/hello_starknet).
 // 2. Click on the contract address in the output pane to open
-//    [Voyager](https://goerli.voyager.online/) - the StarkNet block explorer.
+//    [Starkscan](https://testnet.starkscan.co/) - the StarkNet block explorer.
 // 3. Wait for the page to load the information
 //    (it may take a few minutes until a block is created).
 // 4. In the "STATE" tab, you can call the "add()" transaction.

public/lessons/storage_vars.cairo

@@ -25,7 +25,7 @@ end
 # given amount (note that we don't check that amount is positive).
 #
 # Complete the missing line and deploy the contract.
-# You can interact with it using [Voyager](https://goerli.voyager.online/).
+# You can interact with it using [Starkscan](https://testnet.starkscan.co/).
 @external
 func increase_balance{syscall_ptr : felt*, pedersen_ptr : HashBuiltin*, range_check_ptr}(
     user_id : felt, amount : felt

src/App.js

@@ -1,8 +1,10 @@
+import {StarknetWalletProvider} from '@starkware-industries/commons-js-components';
 import React, {useContext, useEffect} from 'react';
 import styles from './App.module.scss';
 import {Footer} from './components/Containers/Footer/Footer';
 import {Header} from './components/Containers/Header/Header';
 import {Main} from './components/Containers/Main/Main';
+import {AUTO_CONNECT} from './config/envs';
 import {AppContext} from './context/app/app-context';
 import {TabsProvider} from './context/tabs/TabsProvider';
 
@@ -20,10 +22,12 @@ const App = () => {
 
   return (
     <div className={styles.app}>
-      <TabsProvider>
-        <Header />
-        <Main />
-      </TabsProvider>
+      <StarknetWalletProvider autoConnect={AUTO_CONNECT}>
+        <TabsProvider>
+          <Header />
+          <Main />
+        </TabsProvider>
+      </StarknetWalletProvider>
       <Footer />
     </div>
   );

src/api/playground.js

@@ -1,7 +1,8 @@
+import {PG_SERVICE_URL} from '../config/envs';
 import {ActionTypes} from '../constants/action-types';
 import {apiRequest} from './api-request';
 
-const path = process.env.REACT_APP_PG_SERVICE_URL;
+const path = PG_SERVICE_URL;
 
 const format = async code => {
   const data = {code, action: ActionTypes.FORMAT};

src/api/sharp.js

@@ -1,7 +1,8 @@
+import {SHARP_SERVICE_URL} from '../config/envs';
 import {ActionTypes} from '../constants/action-types';
 import {apiRequest} from './api-request';
 
-const path = process.env.REACT_APP_SHARP_SERVICE_URL;
+const path = SHARP_SERVICE_URL;
 
 const addJob = async encodedCairoPie => {
   const data = {

src/api/starknet.js

@@ -1,8 +1,9 @@
+import {STARKNET_ALPHA_SERVICE_URL} from '../config/envs';
 import {ActionTypes} from '../constants/action-types';
 import {generateRandomHex} from '../utils/generate-random-hex';
 import {apiRequest} from './api-request';
 
-const path = process.env.REACT_APP_STARKNET_ALPHA_SERVICE_URL;
+const path = STARKNET_ALPHA_SERVICE_URL;
 
 const deploy = async contractDefinition => {
   let data = {

src/components/Containers/Header/Header.js

@@ -13,6 +13,7 @@ import {TabsContext} from '../../../context/tabs/tabs-context';
 import {useLessons} from '../../../hooks/use-lessons';
 import {usePuzzles} from '../../../hooks/use-puzzles';
 import colors from '../../../styles/colors.module.scss';
+import {StarknetWalletButton} from '../../Features/StarknetWalletButton/StarknetWalletButton';
 import {Button} from '../../UI/Button/Button';
 import {DropdownMenuItem} from '../../UI/DropdownMenuItem/DropdownMenuItem';
 import styles from './Header.module.scss';
@@ -47,6 +48,7 @@ const Header = () => {
       <div className={styles.right}>
         <DocsButton />
         <DropdownButtons />
+        <StarknetWalletButton />
       </div>
     </header>
   );

src/components/Containers/Header/Header.module.scss

@@ -42,5 +42,9 @@
 
   .right {
     float: right;
+
+    & button {
+      margin-left: 6px;
+    }
   }
 }

src/components/Features/Editor/EditorButtons/EditorButtons.module.scss

@@ -21,6 +21,10 @@
     display: flex;
     justify-content: flex-start;
     flex-wrap: wrap;
+
+    > button {
+      margin-right: 6px;
+    }
   }
 
   .right {

src/components/Features/Output/DeployOutput.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import {CONTRACT_URL, TX_URL} from '../../../constants/links';
 
-const CONTRACT_URL = 'https://goerli.voyager.online/contract/';
-const TX_URL = 'https://goerli.voyager.online/tx/';
 const DEPLOY_MSG_PARTS = [
   'The deployment transaction was sent.',
   'Contract address:',

src/components/Features/StarknetWalletButton/StarknetWalletButton.js

@@ -0,0 +1,40 @@
+import {
+  WalletButton,
+  useStarknetWallet
+} from '@starkware-industries/commons-js-components';
+import {
+  ChainInfo,
+  ChainTypeL2,
+  NetworkType
+} from '@starkware-industries/commons-js-enums';
+import {evaluate} from '@starkware-industries/commons-js-utils';
+import React from 'react';
+import {addAddressPadding} from 'starknet';
+import {CONTRACT_URL} from '../../../constants/links';
+import styles from './StarknetWalletButton.module.scss';
+
+export const StarknetWalletButton = () => {
+  const {account, config, error, status, connect, disconnect} =
+    useStarknetWallet();
+
+  return (
+    <div className={styles.starknetWalletButton}>
+      <WalletButton
+        account={addAddressPadding(account)}
+        chain={ChainInfo.L2[ChainTypeL2.GOERLI].NAME}
+        error={error}
+        logoPath={config?.logoPath || ''}
+        menuOptions={{
+          enable: true,
+          explorerUrl: evaluate(`${CONTRACT_URL}{{account}}`, {
+            account
+          }),
+          onDisconnect: disconnect
+        }}
+        network={NetworkType.L2}
+        status={status}
+        onClick={connect}
+      />
+    </div>
+  );
+};

src/components/Features/StarknetWalletButton/StarknetWalletButton.module.scss

@@ -0,0 +1,11 @@
+@import '../../../index';
+
+.starknetWalletButton {
+  display: inline-flex;
+  flex-direction: row;
+
+  button,
+  div {
+    font: $--button1-font;
+  }
+}

src/components/UI/Button/Button.module.scss

@@ -12,7 +12,6 @@
   border: 1px solid transparent;
   text-align: center;
   padding: 0 20px;
-  margin: 3px;
   transition: 0.3s;
   text-transform: capitalize;
 

src/config/envs.js

@@ -0,0 +1,7 @@
+export const PG_SERVICE_URL = process.env.REACT_APP_PG_SERVICE_URL;
+export const STARKNET_ALPHA_SERVICE_URL =
+  process.env.REACT_APP_STARKNET_ALPHA_SERVICE_URL;
+export const SHARP_SERVICE_URL =
+  process.env.REACT_APP_SHARP_SERVICE_URL;
+export const AUTO_CONNECT =
+  process.env.REACT_APP_AUTO_CONNECT === 'true';

src/constants/links.js

@@ -0,0 +1,2 @@
+export const CONTRACT_URL = 'https://testnet.starkscan.co/contract/';
+export const TX_URL = 'https://testnet.starkscan.co/tx/';