Skip to content

Commit

Permalink
Merge pull request #14 from golemfactory/feature/JST-664/standalone-p…
Browse files Browse the repository at this point in the history
…ayment-module

Manually set app-key. Invoice searching. Remove debit notes hooks.
  • Loading branch information
SewerynKras authored Feb 13, 2024
2 parents 30602ad + 8931e45 commit eb8e1ae
Show file tree
Hide file tree
Showing 34 changed files with 843 additions and 716 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,8 @@ node_modules/
.vscode/
.idea/

# Ignore vercel files
.vercel/

# Ignore build directory
dist/
4 changes: 4 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"tabWidth": 2,
"useTabs": false
}
1 change: 0 additions & 1 deletion examples/react-with-vite/.env.example

This file was deleted.

6 changes: 3 additions & 3 deletions examples/react-with-vite/index.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<!doctype html>
<html lang="en" data-theme="light">
<html lang="en" data-theme="light" class="3xl:text-[24px]">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Golem + React + Vite demo</title>
</head>
<body class="bg-base-200 flex h-screen">
<div id="root" class="flex-grow flex flex-col"></div>
<body class="bg-base-200 flex h-screen overflow-hidden">
<div id="root" class="flex-grow flex flex-col overflow-hidden"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
5 changes: 3 additions & 2 deletions examples/react-with-vite/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@
"preview": "vite preview"
},
"dependencies": {
"@fontsource/kanit": "^5.0.18",
"decimal.js": "^10.4.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-toastify": "^9.1.3"
"react-toastify": "^10.0.4"
},
"devDependencies": {
"@types/react": "^18.2.15",
Expand All @@ -22,7 +23,7 @@
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",
"autoprefixer": "^10.4.15",
"daisyui": "^3.6.4",
"daisyui": "^4.6.0",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
Expand Down
39 changes: 28 additions & 11 deletions examples/react-with-vite/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,48 @@
import Navbar from "./header/Navbar";
import React, { useState } from "react";
import RunTaskCard from "./run-task/RunTaskCard";
import InvoicesTable from "./invoices/InvoicesTable";
import DebitNotesTable from "./debit-notes/DebitNotesTable";
import { useYagna } from "@golem-sdk/react";
import ConnectToYagna from "./connection/ConnectToYagna";
import InvoicesTab from "./invoices/InvoicesTab";

function Tab({
visible,
children,
}: React.PropsWithChildren<{ visible: boolean }>) {
return <div className={`${visible ? "" : "hidden"}`}>{children}</div>;
return (
<div
className={`${
visible
? "flex-1 flex justify-center items-center overflow-hidden"
: "hidden"
}`}
>
{children}
</div>
);
}

function App() {
const [activeTab, setActiveTab] = useState<
"run-task" | "invoices" | "debit-notes"
>("run-task");
if (
!window.location.hash ||
!["run-task", "invoices"].includes(window.location.hash.slice(1))
) {
window.location.hash = "run-task";
}
const [activeTab, _setActiveTab] = useState<"run-task" | "invoices">(
(window.location.hash.slice(1) as "run-task" | "invoices") || "run-task",
);
const setActiveTab = (tab: "run-task" | "invoices") => {
window.location.hash = tab;
_setActiveTab(tab);
};

const { isConnected } = useYagna();

return (
<>
<Navbar activeTab={activeTab} setActiveTab={setActiveTab} />
<main className="flex-grow flex items-center justify-center flex-col">
<main className="flex-1 flex items-center justify-center flex-col overflow-hidden">
{!isConnected ? (
<ConnectToYagna />
) : (
Expand All @@ -31,10 +51,7 @@ function App() {
<RunTaskCard />
</Tab>
<Tab visible={activeTab === "invoices"}>
<InvoicesTable />
</Tab>
<Tab visible={activeTab === "debit-notes"}>
<DebitNotesTable />
<InvoicesTab />
</Tab>
</>
)}
Expand Down
53 changes: 46 additions & 7 deletions examples/react-with-vite/src/connection/ConnectToYagna.tsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,73 @@
import { useYagna } from "@golem-sdk/react";
import { useRef } from "react";

export default function ConnectToYagna() {
const { reconnect } = useYagna();
const { reconnect, appKey, basePath, setYagnaOptions } = useYagna();
const appKeyInputRef = useRef<HTMLInputElement>(null);
const basePathInputRef = useRef<HTMLInputElement>(null);
return (
<div className="card max-w-3xl">
<div className="card-body">
<h2 className="card-title">Not connected to yagna</h2>
<p>
Looks like yagna is not running on your local machine. Please follow
the instructions in the{" "}
<h2 className="card-title text-3xl">Not connected to yagna</h2>
<p className="pb-8">
Make sure yagna is running on your local machine. Please follow the
instructions in this{" "}
<a
className="link"
target="_blank"
href="https://docs.golem.network/docs/creators/javascript/examples/tools/yagna-installation-for-requestors"
>
quickstart
</a>
</a>{" "}
to learn more about how to install and run yagna.
</p>
<h3 className="font-bold text-lg">
1. Start yagna on your local machine
</h3>
<p>
Make sure to include the flag <code>{`--api-allow-origin`}</code> with
the url of this app:
</p>

<div className="mockup-code">
<pre data-prefix="$">
<code>
{`yagna service run --api-allow-origin='${window.location.origin}'`}
</code>
</pre>
</div>
<div className="card-actions justify-end">
<h3 className="font-bold text-lg">2. Set the app-key and yagna url</h3>
<div className="flex flex-row items-center gap-1">
<span className="text-gray-500">App-key:</span>
<input
className="input input-bordered input-xl"
placeholder="Yagna app-here here"
defaultValue={appKey || ""}
ref={appKeyInputRef}
/>
<span className="text-gray-500">Yagna url:</span>
<input
className="input input-bordered input-xl"
placeholder="Yagna url here"
defaultValue={basePath || "http://127.0.0.1:7465"}
ref={basePathInputRef}
/>

<button
className="btn btn-primary btn-xl min-w-0"
onClick={() => {
const newAppKey = appKeyInputRef.current?.value || "";
const newBasePath = basePathInputRef.current?.value || "";
setYagnaOptions({
apiKey: newAppKey,
basePath: newBasePath,
});
}}
>
Save
</button>
</div>
<div className="card-actions justify-end items-center">
<button className="btn" onClick={() => reconnect()}>
Try reconnecting now
</button>
Expand Down
19 changes: 19 additions & 0 deletions examples/react-with-vite/src/connection/SetYagnaOptionsButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { useState } from "react";
import SetYagnaOptionsDropdown from "./SetYagnaOptionsDropdown";

export default function SetYagnaOptionsButton() {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);

return (
<div className="flex">
<button className="btn btn-ghost" onClick={() => setIsDropdownOpen(true)}>
Change yagna options
</button>
<div className="flex self-end">
{isDropdownOpen && (
<SetYagnaOptionsDropdown onClose={() => setIsDropdownOpen(false)} />
)}
</div>
</div>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { useYagna } from "@golem-sdk/react";
import { useRef } from "react";

interface SetYagnaOptionsDropdownProps {
onClose?: () => void;
}

export default function SetYagnaOptionsDropdown({
onClose,
}: SetYagnaOptionsDropdownProps) {
const { appKey, basePath, setYagnaOptions } = useYagna();
const appKeyInputRef = useRef<HTMLInputElement>(null);
const basePathInputRef = useRef<HTMLInputElement>(null);

return (
<>
<div
className="fixed h-screen w-screen top-0 left-0 z-10 bg-[#00000010]"
onClick={() => onClose?.()}
></div>
<div className="dropdown dropdown-end dropdown-open">
<div className="card compact dropdown-content z-20 shadow bg-base-100 rounded-box">
<div className="card-body">
<div className="flex flex-col items-end gap-1">
<input
className="input input-bordered input-sm"
placeholder="App key"
defaultValue={appKey || ""}
ref={appKeyInputRef}
/>
<input
className="input input-bordered input-sm"
placeholder="Yagna url"
defaultValue={basePath || "http://127.0.0.1:7465"}
ref={basePathInputRef}
/>
<button
className="btn btn-primary btn-sm min-w-0"
onClick={() => {
const newAppKey = appKeyInputRef.current?.value || null;
const newBasePath = basePathInputRef.current?.value || "";
setYagnaOptions({
apiKey: newAppKey,
basePath: newBasePath,
});
}}
>
Save
</button>
</div>
</div>
</div>
</div>
</>
);
}
56 changes: 0 additions & 56 deletions examples/react-with-vite/src/debit-notes/DebitNoteTableRow.tsx

This file was deleted.

Loading

0 comments on commit eb8e1ae

Please sign in to comment.