-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update .gitignore and package.json, and refactor React code
- Loading branch information
Showing
20 changed files
with
430 additions
and
78 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| name: Build and Release | ||
|
|
||
| on: | ||
| workflow_dispatch: # Allows manual triggering from the GitHub UI | ||
| push: | ||
| tags: | ||
| - "v*" # Triggers on tag push matching v1.0, v1.1, etc. | ||
|
|
||
| jobs: | ||
| build-and-release: | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - uses: actions/checkout@v2 | ||
| - name: Setup Node.js | ||
| uses: actions/setup-node@v2 | ||
| with: | ||
| node-version: "20" | ||
| cache: "yarn" | ||
|
|
||
| - name: Install Yarn | ||
| run: npm install -g yarn | ||
|
|
||
| - name: Install dependencies | ||
| run: yarn install | ||
|
|
||
| - name: Build | ||
| run: yarn bundle | ||
|
|
||
| - name: Create Release | ||
| id: create_release | ||
| uses: actions/create-release@v1 | ||
| env: | ||
| GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} | ||
| with: | ||
| tag_name: ${{ github.ref }} | ||
| release_name: Release ${{ github.ref_name }} | ||
| draft: false | ||
| prerelease: false | ||
|
|
||
| - name: Upload Production Bundle | ||
| uses: actions/upload-release-asset@v1 | ||
| env: | ||
| GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} | ||
| with: | ||
| upload_url: ${{ steps.create_release.outputs.upload_url }} | ||
| asset_path: ./packages/core/umd/production/index.min.js | ||
| asset_name: core.min.js | ||
| asset_content_type: application/javascript | ||
|
|
||
| - name: Upload Development Bundle | ||
| uses: actions/upload-release-asset@v1 | ||
| env: | ||
| GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} | ||
| with: | ||
| upload_url: ${{ steps.create_release.outputs.upload_url }} | ||
| asset_path: ./packages/core/umd/development/index.js | ||
| asset_name: core.js | ||
| asset_content_type: application/javascript | ||
|
|
||
| - name: Upload Development Source Map | ||
| uses: actions/upload-release-asset@v1 | ||
| env: | ||
| GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} | ||
| with: | ||
| upload_url: ${{ steps.create_release.outputs.upload_url }} | ||
| asset_path: ./packages/core/umd/development/index.js.map | ||
| asset_name: core.js.map | ||
| asset_content_type: application/json |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,4 +18,4 @@ examples/candid-ui | |
| examples/*/deps/candid | ||
| docs | ||
| .nx | ||
| bundle | ||
| umd | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,219 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>IC Reactor Example</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1>IC Reactor Example</h1> | ||
| <div id="app"></div> | ||
| </body> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.10/babel.min.js" | ||
| integrity="sha512-aKni+N2bgewoe8CGZlB9c0IDLU5LQaMEZFNjP6FbDK8gZhdTdNKhYKgZaY/EYL9GKJeJigN/wA7WDAOJShgMAQ==" | ||
| crossorigin="anonymous" referrerpolicy="no-referrer"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" | ||
| integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" | ||
| crossorigin="anonymous" referrerpolicy="no-referrer"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" | ||
| integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" | ||
| crossorigin="anonymous" referrerpolicy="no-referrer"></script> | ||
| <script src="../../packages/react/bundle/bundle.js"></script> | ||
| <script type="text/babel"> | ||
| const { ActorProvider, useAgentManager, useUpdateCall, useQueryCall, useUserPrincipal, useAuth, AgentProvider, utils } = Reactor | ||
|
|
||
| const Login = () => { | ||
| const { | ||
| login, | ||
| logout, | ||
| loginLoading, | ||
| loginError, | ||
| identity, | ||
| authenticating, | ||
| authenticated | ||
| } = useAuth() | ||
|
|
||
| return ( | ||
| <div> | ||
| {loginLoading && <div>Loading...</div>} | ||
| {loginError ? <div>{JSON.stringify(loginError)}</div> : null} | ||
| {identity && <div>{identity.getPrincipal().toText()}</div>} | ||
| { | ||
| authenticated ? ( | ||
| <div> | ||
| <button onClick={() => logout()}>Logout</button> | ||
| </div> | ||
| ) : ( | ||
| <div> | ||
| <button onClick={() => login()} disabled={authenticating}> | ||
| Login | ||
| </button> | ||
| </div> | ||
| ) | ||
| } | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const ICRC1Call = ({ functionName }) => { | ||
| const { call, data, loading } = useQueryCall({ | ||
| functionName, | ||
| }) | ||
|
|
||
| return ( | ||
| <div> | ||
| <span> | ||
| <strong>{functionName}</strong>:{" "} | ||
| <button onClick={call} disabled={loading}> | ||
| ↻ | ||
| </button>{" "} | ||
| {loading ? "Loading..." : utils.jsonToString(data)} | ||
| </span> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
|
|
||
| const UserWallet = ({ principal }) => { | ||
| const toRef = React.useRef(null) | ||
| const amountRef = React.useRef(null) | ||
|
|
||
| const { | ||
| call: refetchBalance, | ||
| data: balance, | ||
| loading: balanceLoading, | ||
| } = useQueryCall({ | ||
| functionName: "icrc1_balance_of", | ||
| args: [{ owner: principal, subaccount: [] }], | ||
| }) | ||
|
|
||
| const { | ||
| call: transfer, | ||
| loading: transferLoading, | ||
| data: transferResult, | ||
| } = useUpdateCall({ | ||
| functionName: "icrc1_transfer", | ||
| }) | ||
|
|
||
| const onSubmit = (event) => { | ||
| event.preventDefault() | ||
| transfer([ | ||
| { | ||
| to: { | ||
| owner: Principal.fromText(toRef.current?.value || ""), | ||
| subaccount: [], | ||
| }, | ||
| amount: BigInt(amountRef.current?.value || "0"), | ||
| fee: [], | ||
| memo: [], | ||
| created_at_time: [], | ||
| from_subaccount: [], | ||
| }, | ||
| ]) | ||
| } | ||
|
|
||
| return ( | ||
| <div> | ||
| <h2>User Wallet</h2> | ||
| <span>Principal: {principal?.toString()}</span> | ||
| <div> | ||
| <span> | ||
| <strong>Balance</strong>:{" "} | ||
| <button onClick={refetchBalance} disabled={balanceLoading}> | ||
| ↻ | ||
| </button>{" "} | ||
| {balanceLoading ? "Loading..." : utils.jsonToString(balance)} | ||
| </span> | ||
| </div> | ||
| <form onSubmit={onSubmit}> | ||
| <input ref={toRef} type="text" placeholder="To" /> | ||
| <input ref={amountRef} type="text" placeholder="Amount" /> | ||
| <button>Transfer</button> | ||
| </form> | ||
| <div> | ||
| <span> | ||
| <strong>Transfer Result</strong>:{" "} | ||
| {transferLoading ? "Loading..." : utils.jsonToString(transferResult)} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
|
|
||
| const functionNames = [ | ||
| "icrc1_name", | ||
| "icrc1_symbol", | ||
| "icrc1_fee", | ||
| "icrc1_decimals", | ||
| "icrc1_metadata", | ||
| "icrc1_total_supply", | ||
| "icrc1_minting_account", | ||
| ] | ||
|
|
||
| const App = () => { | ||
| const inputRef = React.useRef(null) | ||
| const networkRef = React.useRef(null) | ||
| const [canisterId, setCanisterId] = React.useState( | ||
| "ryjl3-tyaaa-aaaaa-aaaba-cai" | ||
| ) | ||
|
|
||
| const { updateAgent } = useAgentManager() | ||
|
|
||
| const onSubmit = (event) => { | ||
| event.preventDefault() | ||
| try { | ||
| const principal = Principal.fromText(inputRef.current?.value || "") | ||
| console.log(networkRef.current?.value) | ||
|
|
||
| updateAgent({ | ||
| host: | ||
| networkRef.current?.value === "local" | ||
| ? utils.LOCAL_HOST_NETWORK_URI | ||
| : utils.IC_HOST_NETWORK_URI, | ||
| }) | ||
| setCanisterId(principal.toText()) | ||
| } catch (e) { | ||
| console.error(e) | ||
| } | ||
| } | ||
|
|
||
| const principal = useUserPrincipal() | ||
|
|
||
| return ( | ||
| <ActorProvider canisterId={canisterId}> | ||
| <h1>ICRC Token</h1> | ||
| <Login /> | ||
| <form onSubmit={onSubmit}> | ||
| <select ref={networkRef}> | ||
| <option value="ic">IC</option> | ||
| <option value="local">Local</option> | ||
| </select> | ||
| <input | ||
| id="canisterId" | ||
| required | ||
| ref={inputRef} | ||
| defaultValue={canisterId} | ||
| /> | ||
| <button type="submit">Fetch</button> | ||
| </form> | ||
| {functionNames.map((functionName) => ( | ||
| <ICRC1Call key={functionName} functionName={functionName} /> | ||
| ))} | ||
| {principal && <UserWallet principal={principal} />} | ||
| </ActorProvider> | ||
| ) | ||
| } | ||
|
|
||
|
|
||
| ReactDOM.render( | ||
| <AgentProvider> | ||
| <App /> | ||
| </AgentProvider>, | ||
| document.getElementById("app") | ||
| ); | ||
| </script> | ||
|
|
||
| </html> |
Oops, something went wrong.