Skip to content

Commit f877f05

Browse files
robdmoorerobdmoore
authored
Merge pull request #22 from algorandfoundation/fix/cd-docs-improvement
fix: refining docs; tweaking usage of useWallet hook
2 parents 0613b9e + 6b16800 commit f877f05

File tree

31 files changed

+414
-301
lines changed

31 files changed

+414
-301
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"files.associations": {
33
"**/*.jinja": "jinja"
44
},
5-
"python.testing.pytestArgs": ["tests"],
5+
"python.testing.pytestArgs": ["."],
66
"python.testing.unittestEnabled": false,
77
"python.testing.pytestEnabled": true,
88
"files.eol": "\n"

‎template_content/README.md.jinja‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,26 @@ For pull requests and pushes to `main` branch against this repository the follow
4747

4848
The project template provides base Github Actions workflows for continuous deployment to [Netlify](https://www.netlify.com/) or [Vercel](https://vercel.com/). These workflows are located in the [`.github/workflows`](./.github/workflows) folder.
4949

50-
> Please note: when configuring the github repository for the first time. Depending on selected provider you will need to set the provider secrets in the repository settings. For netlify you can pass the project specific environment variables as part of Github actions secrets, while for vercel you will need to set the secrets on your site instance (refer to the [Vercel documentation](https://vercel.com/docs/cli#commands/secrets) for more details).
50+
**Please note**: when configuring the github repository for the first time. Depending on selected provider you will need to set the provider secrets in the repository settings. Default setup provided by the template allows you to manage the secrets via environment variables and secrets on your github repository.
51+
52+
{% if cloud_provider != none %}
53+
#### Setting up environment variables and secrets for webapp deployment
54+
55+
1. [Create a new environment variable on your repository](https://docs.github.com/en/actions/learn-github-actions/variables#creating-configuration-variables-for-a-repository) called `NETLIFY_AUTH_TOKEN` and `NETLIFY_SITE_ID` if you are using Netlify as your cloud provider. Set it to the value of your Netlify auth token respectively. You can find your Netlify auth token by going to [app.netlify.com](https://app.netlify.com/).
56+
2. If you are using Vercel as your cloud provider, create a new environment variable on your repository called `VERCEL_TOKEN`. Set it to the value of your Vercel auth token. You can find your Vercel auth token by going to [vercel.com/account/tokens](https://vercel.com/account/tokens).
57+
3. Set environment variables similarly to step one for the following variables (see .env.template for default values):
58+
- VITE_ALGOD_SERVER
59+
- VITE_ALGOD_PORT
60+
- VITE_ALGOD_NETWORK
61+
- VITE_INDEXER_SERVER
62+
- VITE_INDEXER_PORT
63+
- VITE_ENVIRONMENT
64+
4. (Optional) [Set environment secrets](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions#creating-secrets-for-a-repository) for the following variables (see .env.template for default values):
65+
- VITE_ALGOD_TOKEN
66+
- VITE_INDEXER_TOKEN
67+
68+
> If you prefer alternative deployment methods, you can remove the relevant workflow files from the [`.github/workflows`](./.github/workflows) folder and configure your own.
69+
{% endif %}
5170

5271
{% endif -%}
5372

@@ -96,4 +115,3 @@ It has also been configured to have a productive dev experience out of the box i
96115
# Integrating with smart contracts and application clients
97116

98117
Refer to the detailed guidance on [integrating with smart contracts and application clients](./src/contracts/README.md). In essence, for any smart contract codebase generated with AlgoKit or other tools that produce compile contracts into ARC34 compliant app specifications, you can use the `algokit generate` command to generate TypeScript or Python typed client. Once generated simply drag and drop the generated client into `./src/contracts` and import it into your React components as you see fit.
99-

‎template_content/package.json.jinja‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,15 @@
3636
"@playwright/test": "^1.35.0",
3737
"playwright": "^1.35.0",
3838
{% endif -%}
39-
"vite": "4.4.9"
39+
"vite": "^4.4.9"
4040
},
4141
"dependencies": {
4242
"@walletconnect/modal-sign-html": "^2.6.1",
4343
"@algorandfoundation/algokit-utils": "^4.1.0",
4444
"@blockshake/defly-connect": "^1.1.6",
4545
"@daffiwallet/connect": "^1.0.3",
4646
"@perawallet/connect": "^1.3.1",
47-
"@txnlab/use-wallet": "^2.1.1",
47+
"@txnlab/use-wallet": "^2.4.0",
4848
"algosdk": "^2.5.0",
4949
{% if use_daisy_ui -%}
5050
"daisyui": "^3.1.0",

‎template_content/src/App.tsx‎

Lines changed: 3 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import { DeflyWalletConnect } from '@blockshake/defly-connect'
22
import { DaffiWalletConnect } from '@daffiwallet/connect'
33
import { PeraWalletConnect } from '@perawallet/connect'
4-
import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders, useWallet } from '@txnlab/use-wallet'
4+
import { PROVIDER_ID, ProvidersArray, WalletProvider, useInitializeProviders } from '@txnlab/use-wallet'
55
import algosdk from 'algosdk'
66
import { SnackbarProvider } from 'notistack'
7-
import { useState } from 'react'
8-
import ConnectWallet from './components/ConnectWallet'
9-
import Transact from './components/Transact'
7+
import Home from './Home'
108
import { getAlgodConfigFromViteEnvironment, getKmdConfigFromViteEnvironment } from './utils/network/getAlgoClientConfigs'
119

1210
let providersArray: ProvidersArray
@@ -36,18 +34,6 @@ if (import.meta.env.VITE_ALGOD_NETWORK === '') {
3634
}
3735

3836
export default function App() {
39-
const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
40-
const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
41-
const { activeAddress } = useWallet()
42-
43-
const toggleWalletModal = () => {
44-
setOpenWalletModal(!openWalletModal)
45-
}
46-
47-
const toggleDemoModal = () => {
48-
setOpenDemoModal(!openDemoModal)
49-
}
50-
5137
const algodConfig = getAlgodConfigFromViteEnvironment()
5238

5339
const walletProviders = useInitializeProviders({
@@ -64,43 +50,7 @@ export default function App() {
6450
return (
6551
<SnackbarProvider maxSnack={3}>
6652
<WalletProvider value={walletProviders}>
67-
<div className="hero min-h-screen bg-teal-400">
68-
<div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
69-
<div className="max-w-md">
70-
<h1 className="text-4xl">
71-
Welcome to <div className="font-bold">AlgoKit 🙂</div>
72-
</h1>
73-
<p className="py-6">
74-
This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
75-
</p>
76-
77-
<div className="grid">
78-
<a
79-
data-test-id="getting-started"
80-
className="btn btn-primary m-2"
81-
target="_blank"
82-
href="https://github.com/algorandfoundation/algokit-cli"
83-
>
84-
Getting started
85-
</a>
86-
87-
<div className="divider" />
88-
<button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
89-
Wallet Connection
90-
</button>
91-
92-
{activeAddress && (
93-
<button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
94-
Transactions Demo
95-
</button>
96-
)}
97-
</div>
98-
99-
<ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
100-
<Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
101-
</div>
102-
</div>
103-
</div>
53+
<Home />
10454
</WalletProvider>
10555
</SnackbarProvider>
10656
)

‎template_content/src/Home.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
// src/components/Home.tsx
2+
import { useWallet } from '@txnlab/use-wallet'
3+
import React, { useState } from 'react'
4+
import ConnectWallet from './components/ConnectWallet'
5+
import Transact from './components/Transact'
6+
7+
interface HomeProps {}
8+
9+
const Home: React.FC<HomeProps> = () => {
10+
const [openWalletModal, setOpenWalletModal] = useState<boolean>(false)
11+
const [openDemoModal, setOpenDemoModal] = useState<boolean>(false)
12+
const { activeAddress } = useWallet()
13+
14+
const toggleWalletModal = () => {
15+
setOpenWalletModal(!openWalletModal)
16+
}
17+
18+
const toggleDemoModal = () => {
19+
setOpenDemoModal(!openDemoModal)
20+
}
21+
22+
return (
23+
<div className="hero min-h-screen bg-teal-400">
24+
<div className="hero-content text-center rounded-lg p-6 max-w-md bg-white mx-auto">
25+
<div className="max-w-md">
26+
<h1 className="text-4xl">
27+
Welcome to <div className="font-bold">AlgoKit 🙂</div>
28+
</h1>
29+
<p className="py-6">
30+
This starter has been generated using official AlgoKit React template. Refer to the resource below for next steps.
31+
</p>
32+
33+
<div className="grid">
34+
<a
35+
data-test-id="getting-started"
36+
className="btn btn-primary m-2"
37+
target="_blank"
38+
href="https://github.com/algorandfoundation/algokit-cli"
39+
>
40+
Getting started
41+
</a>
42+
43+
<div className="divider" />
44+
<button data-test-id="connect-wallet" className="btn m-2" onClick={toggleWalletModal}>
45+
Wallet Connection
46+
</button>
47+
48+
{activeAddress && (
49+
<button data-test-id="transactions-demo" className="btn m-2" onClick={toggleDemoModal}>
50+
Transactions Demo
51+
</button>
52+
)}
53+
</div>
54+
55+
<ConnectWallet openModal={openWalletModal} closeModal={toggleWalletModal} />
56+
<Transact openModal={openDemoModal} setModalState={setOpenDemoModal} />
57+
</div>
58+
</div>
59+
</div>
60+
)
61+
}
62+
63+
export default Home

template_content/{% if use_github_actions %}.github{% endif %}/workflows/checks.yaml renamed to template_content/{% if use_github_actions %}.github{% endif %}/workflows/checks.yaml.jinja

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,24 +30,24 @@ jobs:
3030

3131
- name: Run linters
3232
run: npm run lint
33-
33+
{% if use_jest %}
3434
- name: Run unit tests
3535
run: npm run test
36-
36+
{% endif %}
3737
- name: Create placeholder .env file
38-
if: ${{ inputs.run-build }}
38+
if: ${{ '{{' }} inputs.run-build {{ '}}' }}
3939
uses: makerxstudio/shared-config/.github/actions/env-to-placeholders@main
4040
with:
4141
env-output-path: './.env'
4242
env-template-path: './.env.template'
4343
env-variable-prefix: VITE_
4444

4545
- name: Build
46-
if: ${{ inputs.run-build }}
46+
if: ${{ '{{' }} inputs.run-build {{ '}}' }}
4747
run: npm run build
4848

4949
- name: Archive
50-
if: ${{ inputs.run-build }}
50+
if: ${{ '{{' }} inputs.run-build {{ '}}' }}
5151
uses: actions/upload-artifact@v3
5252
with:
5353
name: dist

‎template_content/{% if use_github_actions %}.github{% endif %}/workflows/{% if cloud_provider != none %}release.yaml{% endif %}.jinja‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ jobs:
6868

6969
- name: Deploy Project Artifacts to Vercel
7070
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
71-
# Set your vercel project env variables on your site instance on https://vercel.com/dashboard
71+
# Set your vercel project env variables on your github repository (see README for more info)
7272
{% endraw %}
7373
{%- else %}
7474
{% raw %}
@@ -100,5 +100,6 @@ jobs:
100100
env:
101101
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
102102
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
103+
# Set your netlify project env variables on your github repository (see README for more info)
103104
{% endraw %}
104105
{%- endif %}

‎tests_generated/test_all_default_parameters_jetbrains/.copier-answers.yml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,12 @@ algod_server: http://localhost
66
algod_token: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
77
author_email: None
88
author_name: None
9-
cloud_provider: none
109
ide_jetbrains: true
1110
ide_vscode: false
1211
indexer_port: 8980
1312
indexer_server: http://localhost
1413
indexer_token: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
1514
project_name: test_all_default_parameters_jetbrains
16-
use_daisy_ui: false
1715
use_eslint_prettier: false
1816
use_github_actions: false
1917
use_jest: false

‎tests_generated/test_all_default_parameters_jetbrains/README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,4 +55,3 @@ This project makes use of React and Tailwind to provider a base project configur
5555
# Integrating with smart contracts and application clients
5656

5757
Refer to the detailed guidance on [integrating with smart contracts and application clients](./src/contracts/README.md). In essence, for any smart contract codebase generated with AlgoKit or other tools that produce compile contracts into ARC34 compliant app specifications, you can use the `algokit generate` command to generate TypeScript or Python typed client. Once generated simply drag and drop the generated client into `./src/contracts` and import it into your React components as you see fit.
58-

‎tests_generated/test_all_default_parameters_jetbrains/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,15 @@
1717
"autoprefixer": "10.4.14",
1818
"ts-node": "10.9.1",
1919
"typescript": "5.1.6",
20-
"vite": "4.4.9"
20+
"vite": "^4.4.9"
2121
},
2222
"dependencies": {
2323
"@walletconnect/modal-sign-html": "^2.6.1",
2424
"@algorandfoundation/algokit-utils": "^4.1.0",
2525
"@blockshake/defly-connect": "^1.1.6",
2626
"@daffiwallet/connect": "^1.0.3",
2727
"@perawallet/connect": "^1.3.1",
28-
"@txnlab/use-wallet": "^2.1.1",
28+
"@txnlab/use-wallet": "^2.4.0",
2929
"algosdk": "^2.5.0",
3030
"notistack": "^3.0.1",
3131
"react": "^18.2.0",

0 commit comments

Comments
 (0)