Skip to content

Commit

Permalink
Update ch-2: cyberpunk theme and scaffold-stark new features (#89)
Browse files Browse the repository at this point in the history
Co-authored-by: Gabriela del Pilar Rojas <[email protected]>
Co-authored-by: gianmalarcon <[email protected]>
Co-authored-by: Gabriela del Pilar Rojas <[email protected]>
  • Loading branch information
4 people authored Jul 25, 2024
1 parent b9fd22c commit c106de9
Show file tree
Hide file tree
Showing 48 changed files with 801 additions and 454 deletions.
63 changes: 63 additions & 0 deletions .github/workflows/demo.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
name: scaffold-stark-demo workflow

on:
pull_request:
types: [closed]
branches: [main]
paths:
- 'packages/nextjs/**'

jobs:
version-bump-nextjs:
runs-on: ubuntu-22.04
steps:

- name: Checkout Source Repository
uses: actions/checkout@v4
with:
repository: Quantum3-Labs/scaffold-stark-2
token: ${{ secrets.ORG_GITHUB_TOKEN }}
path: source_repo

- name: Modify scaffoldConfig in Source Repository
run: |
cd source_repo
sed -i 's/targetNetworks: \[chains.devnet\]/targetNetworks: \[chains.sepolia\]/' packages/nextjs/scaffold.config.ts
cat packages/nextjs/scaffold.config.ts
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: 20
registry-url: 'https://registry.yarnpkg.com'

- name: Deploy to vercel
if: success()
id: deploy
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
run: |
cd source_repo
yarn install
vercel link --yes --project $VERCEL_PROJECT_ID --token $VERCEL_TOKEN --scope $VERCEL_ORG_ID
vercel --build-env NEXT_PUBLIC_IGNORE_BUILD_ERROR=true --prod --token $VERCEL_TOKEN --scope $VERCEL_ORG_ID
- name: Notify Slack on Success
if: success()
uses: slackapi/[email protected]
with:
channel-id: ${{ secrets.SLACK_CHANNEL_ID }}
slack-message: "GitHub deployed to vercel result: ${{ job.status }}\nRepository Name: ${{ github.repository }}\n${{ github.event.pull_request.html_url || github.event.head_commit.url }}"
env:
SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}

- name: Notify Slack on Failure
if: failure()
uses: slackapi/[email protected]
with:
channel-id: ${{ secrets.SLACK_CHANNEL_ID }}
slack-message: "GitHub deployed to vercel result: ${{ job.status }}\nRepository Name: ${{ github.repository }}\n${{ github.event.pull_request.html_url || github.event.head_commit.url }}"
env:
SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
114 changes: 114 additions & 0 deletions .github/workflows/release-create-stark.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
name: Version Bump and Notify

on:
pull_request:
types: [closed]
branches: [main]

jobs:
version-bump:
runs-on: ubuntu-22.04

steps:
- name: Checkout Source Repository
uses: actions/checkout@v4
with:
repository: Quantum3-Labs/scaffold-stark-2
token: ${{ secrets.ORG_GITHUB_TOKEN }}
path: source_repo

- name: Checkout Destination Repository
uses: actions/checkout@v4
with:
repository: Quantum3-Labs/create-stark
token: ${{ secrets.ORG_GITHUB_TOKEN }}
path: destination_repo

- name: Determine version bump type
id: version
run: |
cd source_repo
commit_message=$(git log -1 --pretty=%B)
if [[ "$commit_message" == *"[major]"* ]]; then
echo "type=major" >> "$GITHUB_ENV"
elif [[ "$commit_message" == *"[minor]"* ]]; then
echo "type=minor" >> "$GITHUB_ENV"
else
echo "type=patch" >> "$GITHUB_ENV"
fi
- name: Bump version in Source Repository
id: bump-version-source
run: |
cd source_repo
git config --global user.name 'github-actions[bot]'
git config --global user.email 'github-actions[bot]@users.noreply.github.com'
new_version=$(npm version ${{ env.type }} -m "chore(release): %s [skip ci]")
echo "NEW_VERSION=${new_version}" >> "$GITHUB_ENV"
git push origin main --follow-tags
- name: Copy Files to Destination Repository
run: |
rsync -av --delete --exclude='.git' source_repo/ destination_repo/templates/base
cd destination_repo
git add .
git commit -m "chore: sync files from scaffold-stark-2 [skip ci]"
- name: Format .gitignore files
run: |
find destination_repo/templates/base -type f -name ".gitignore" | while read -r gitignore_file; do
mjs_file="${gitignore_file%/*}/.gitignore.template.mjs"
gitignore_content=$(cat "$gitignore_file")
cat > "$mjs_file" <<-EOF
const contents = () =>
\`${gitignore_content}\`
export default contents;
EOF
rm "$gitignore_file"
done
cd destination_repo
git add .
git commit -m "Processed $gitignore_file into $mjs_file"
- name: Bump version in Destination Repository
id: bump-version-destination
run: |
cd destination_repo
git config --global user.name 'github-actions[bot]'
git config --global user.email 'github-actions[bot]@users.noreply.github.com'
new_version=$(npm version ${{ env.type }} -m "chore(release): %s [skip ci]")
git push origin main --follow-tags
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: '16'
registry-url: 'https://registry.npmjs.org/'

- name: Publish release
if: success()
id: publish-release
run: |
cd destination_repo
npm install && npm run build && npm publish
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

- name: Notify Slack on Success
if: success()
uses: slackapi/[email protected]
with:
channel-id: ${{ secrets.SLACK_CHANNEL_ID }}
slack-message: "GitHub Action succeeded for version bump to ${{ env.NEW_VERSION }}."
env:
SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}

- name: Notify Slack on Failure
if: failure()
uses: slackapi/[email protected]
with:
channel-id: ${{ secrets.SLACK_CHANNEL_ID }}
slack-message: "GitHub Action failed for version bump."
env:
SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ yarn start

> 👩‍💻 Edit `YourToken.cairo` to reuse the **ERC20** token standard from OpenZeppelin. To accomplish this, you can use [`Cairo Components`](https://book.cairo-lang.org/ch16-02-00-composability-and-components.html) to embed the `ERC20` logic inside your contract.
> Mint **2000** (\* 10 \*\* 18) to your frontend address using the `constructor()`. In devnet, by default we choose the first pre-deployed account: `0x64b48806902a367c8598f4f95c305e8c1a1acba5f082d294a43793113115691`, to deploy the contracts. In order to complete this checkpoint, you need to connect to devnet using the same address. In testnet, you can use your own address to deploy the contracts. Edi the .env file in the `snfoundry` package to set the `ACCOUNT_ADDRESS_SEPOLIA` to your own address.
> Mint **2000** (\* 10 \*\* 18) to your frontend address using the `constructor()`. In devnet, by default we choose the first pre-deployed account: `0x64b48806902a367c8598f4f95c305e8c1a1acba5f082d294a43793113115691`, to deploy the contracts. In order to complete this checkpoint, you need to connect to devnet using the same address. In testnet, you can use your own address to deploy the contracts. Edit the .env file in the `snfoundry` package to set the `ACCOUNT_ADDRESS_SEPOLIA` to your own address.
(Your frontend address is the address in the top right of <http://localhost:3000>)

Expand Down Expand Up @@ -225,7 +225,7 @@ In `Vendor.cairo` you will need to add one more input parameter to setup the `ow
`SellTokens {seller: ContractAddress, tokens_amount: u256, eth_amount: u256}`
and `emit` it in your `Vendor.cairo` and uncomment `SellTokens Events` section in your `packages/nextjs/app/events/page.tsx` to update your frontend.

![Events](https://raw.githubusercontent.com/Quantum3-Labs/speedrunstark/2812ab21de5d261ef670b0ef5a211fdfbae3b8d8/packages/nextjs/public/events.png)
![Events](https://raw.githubusercontent.com/Quantum3-Labs/speedrunstark/token-vendor/nextjs/public/Events.png)

### ⚠️ Test it

Expand Down
4 changes: 2 additions & 2 deletions packages/nextjs/app/debug/_components/DebugContracts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ export function DebugContracts() {
<button
className={`btn btn-secondary btn-sm font-light hover:border-transparent ${
contractName === selectedContract
? "bg-base-300 hover:bg-base-300 no-animation text-base-100 "
: "bg-base-100 hover:bg-secondary hover:text-neutral-content text-primary"
? "bg-secondary hover:bg-secondary no-animation text-white"
: "bg-transparent text-neutral hover:text-white"
}`}
key={contractName}
onClick={() => setSelectedContract(contractName)}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import { Abi } from "abi-wan-kanabi";
import {
AbiFunction,
Contract,
ContractName,
GenericContract,
InheritedFunctions,
getFunctionsByStateMutability,
} from "~~/utils/scaffold-stark/contract";
import { ReadOnlyFunctionForm } from "./ReadOnlyFunctionForm";
Expand Down
34 changes: 14 additions & 20 deletions packages/nextjs/app/debug/_components/contract/ContractUI.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,7 @@ import { useReducer } from "react";
import { ContractReadMethods } from "./ContractReadMethods";
// import { ContractWriteMethods } from "./ContractWriteMethods";
import { Address, Balance } from "~~/components/scaffold-stark";
import {
useDeployedContractInfo,
useNetworkColor,
} from "~~/hooks/scaffold-stark";
import { useDeployedContractInfo } from "~~/hooks/scaffold-stark";
import { useTargetNetwork } from "~~/hooks/scaffold-stark/useTargetNetwork";
import { ContractName } from "~~/utils/scaffold-stark/contract";
import { ContractVariables } from "./ContractVariables";
Expand All @@ -33,7 +30,6 @@ export const ContractUI = ({
const { targetNetwork } = useTargetNetwork();
const { data: deployedContractData, isLoading: deployedContractLoading } =
useDeployedContractInfo(contractName);
const networkColor = useNetworkColor();

if (deployedContractLoading) {
return (
Expand All @@ -57,30 +53,28 @@ export const ContractUI = ({
>
<div className="col-span-5 grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10 ">
<div className="col-span-1 flex flex-col">
<div className="bg-base-100 border-base-300 rounded-3xl px-6 lg:px-8 mb-6 space-y-1 py-4">
<div className="bg-transparent border-gradient rounded-[5px] px-6 lg:px-8 mb-6 space-y-1 py-4">
<div className="flex">
<div className="flex flex-col gap-1">
<span className="font-bold text-primary">{contractName}</span>
<span className="font-bold text-neutral">{contractName}</span>
<Address address={deployedContractData.address} />
<div className="flex gap-1 items-center">
<span className="font-bold text-sm">Balance:</span>
<Balance
address={deployedContractData.address}
className="px-0 h-1.5 min-h-[0.375rem]"
className="px-0 h-1.5 min-h-[0.375rem] text-network"
/>
</div>
</div>
</div>
{targetNetwork && (
<p className="my-0 text-sm">
<span className="font-bold">Network</span>:{" "}
<span style={{ color: networkColor }}>
{targetNetwork.name}
</span>
<span className="text-network">{targetNetwork.name}</span>
</p>
)}
</div>
<div className="bg-base-300 rounded-3xl px-6 lg:px-8 py-4 text-neutral-content">
<div className="bg-transparent border-gradient rounded-[5px] px-6 lg:px-8 py-4">
<ContractVariables // TODO : there is no contract variables on starknet
refreshDisplayVariables={refreshDisplayVariables}
deployedContractData={deployedContractData}
Expand All @@ -89,27 +83,27 @@ export const ContractUI = ({
</div>
<div className="col-span-1 lg:col-span-2 flex flex-col gap-6">
<div className="z-10">
<div className="bg-base-100 rounded-3xl border border-base-300 flex flex-col mt-10 relative">
<div className="h-[5rem] w-[5.5rem] bg-base-300 absolute self-start rounded-[22px] -top-[38px] -left-[1px] -z-10 py-[0.65rem]">
<div className="rounded-[5px] border border-[#8A45FC] flex flex-col mt-10 relative bg-component">
<div className="bg-function w-[140px] h-[32.5px] absolute self-start -top-[43px] -left-[1px] -z-10 py-[0.55rem] clip-corner">
<div className="flex items-center justify-center space-x-2">
<p className="my-0 text-sm text-neutral-content">Read</p>
<p className="my-0 text-sm text-center">Read</p>
</div>
</div>
<div className="p-5 divide-y divide-base-300">
<div className="p-5 divide-y divide-secondary">
<ContractReadMethods
deployedContractData={deployedContractData}
/>
</div>
</div>
</div>
<div className="z-10">
<div className="bg-base-100 rounded-3xl border border-base-300 flex flex-col mt-10 relative">
<div className="h-[5rem] w-[5.5rem] bg-base-300 absolute self-start rounded-[22px] -top-[38px] -left-[1px] -z-10 py-[0.65rem] ">
<div className="rounded-[5px] border border-[#8A45FC] flex flex-col mt-10 relative bg-component">
<div className="w-[140px] h-[32.5px] absolute self-start -top-[43px] -left-[1px] -z-10 py-[0.55rem] bg-function clip-corner">
<div className="flex items-center justify-center space-x-2">
<p className="my-0 text-sm text-neutral-content">Write</p>
<p className="my-0 text-sm">Write</p>
</div>
</div>
<div className="p-5 divide-y divide-base-300">
<div className="p-5 divide-y divide-secondary">
<ContractWriteMethods
deployedContractData={deployedContractData}
onChange={triggerRefreshDisplayVariables}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import { Abi } from "abi-wan-kanabi";
import {
AbiFunction,
Contract,
ContractName,
GenericContract,
InheritedFunctions,
getFunctionsByStateMutability,
} from "~~/utils/scaffold-stark/contract";
import { DisplayVariable } from "./DisplayVariable";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { Address } from "@starknet-react/chains";
import { useContractRead } from "@starknet-react/core";
import { BlockNumber } from "starknet";
import { displayTxResult } from "./utilsDisplay";
import { useTheme } from "next-themes";

type DisplayVariableProps = {
contractAddress: Address;
Expand Down Expand Up @@ -38,6 +39,8 @@ export const DisplayVariable = ({
});

const { showAnimation } = useAnimationConfig(result);
const { resolvedTheme } = useTheme();
const isDarkMode = resolvedTheme === "dark";

useEffect(() => {
refetch();
Expand All @@ -46,7 +49,9 @@ export const DisplayVariable = ({
return (
<div className="space-y-1 pb-2">
<div className="flex items-center">
<h3 className="font-medium text-[15px] mb-0 break-all text-neutral-content ">
<h3
className={`font-medium text-lg mb-0 break-all ${isDarkMode ? "text-[#4DB4FF]" : "text-[#7800FF]"}`}
>
{abiFunction.name}
</h3>
<button
Expand All @@ -64,7 +69,7 @@ export const DisplayVariable = ({
</button>
{/* <InheritanceTooltip inheritedFrom={inheritedFrom} /> */}
</div>
<div className="text-gray-500 font-medium flex flex-col items-start">
<div className="text-neutral font-medium flex flex-col items-start">
<div>
<div
className={`break-all block transition bg-transparent ${
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,14 @@ export const ReadOnlyFunctionForm = ({

return (
<div className="flex flex-col gap-3 py-5 first:pt-0 last:pb-1">
<p className="font-medium my-0 break-words">{abiFunction.name}</p>
<p className="font-medium my-0 break-words text-function">
{abiFunction.name}
</p>
{inputElements}
<div className="flex justify-between gap-2 flex-wrap">
<div className="flex-grow w-4/5">
{data !== null && data !== undefined && (
<div className="bg-secondary rounded-3xl text-sm text-white px-4 py-1.5 break-words">
<div className="bg-input text-sm px-4 py-1.5 break-words">
<p className="font-bold m-0 mb-1">Result:</p>
<pre className="whitespace-pre-wrap break-words">
{displayTxResult(data, false, abiFunction?.outputs)}
Expand All @@ -81,7 +83,7 @@ export const ReadOnlyFunctionForm = ({
)}
</div>
<button
className="btn btn-secondary btn-sm"
className="btn bg-gradient-dark btn-sm shadow-none border-none text-white"
onClick={handleRead}
disabled={inputValue && isFetching}
>
Expand Down
Loading

0 comments on commit c106de9

Please sign in to comment.