Skip to content

Commit

Permalink
basic styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexisnsns
alexisnsns committed Nov 17, 2023
1 parent 9f126e2 commit 2775baf
Show file tree
Hide file tree
Showing 7 changed files with 106 additions and 264 deletions.
177 changes: 6 additions & 171 deletions ui/app/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,188 +1,23 @@
import React, { useState, useEffect } from "react";
import { TokenInfo } from "@uniswap/token-lists";
import React from "react";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import { Link } from "react-router-dom";
import config from "./config";
// NOTE: Do this or else it won't render (or create your own CSS)
// import "rc-slider/assets/index.css";
import "./styles.css";
import StreamManager, { Stream } from "@apeworx/apepay";
import {
CreateStream,
CancelStream,
UpdateStream,
StreamStatus,
} from "@apeworx/apepay-react";
import { Address } from "viem";
import {
usePublicClient,
useWalletClient,
WalletClient,
useAccount,
} from "wagmi";
import { Link } from "react-router-dom";

function App() {
// const tokenList: TokenInfo[] = config.tokens;
const [chartType, setChartType] = useState<"bar" | "pie">("bar");

// Let user pick the stream he wants to work on for the status, update, and cancel components
const [selectedStream, setSelectedStream] = useState<Stream | null>(null);

// // Fake cart for the purpose of the demo
// const Cart = () => {
// return (
// <div className="cart">
// <div className="cart-item">
// <div className="cart-info">
// <span className="cart-title">Cart Title</span>
// <span className="cart-quantity">#: 1</span>
// <span className="price">$XX.00/day</span>
// </div>
// <div className="cart-details">
// <strong>Details:</strong>
// <p>Description of the cart that you are about to pay for.</p>
// </div>
// </div>
// </div>
// );
// };

// Manage results from CreateStream component
// const [isProcessing, setIsProcessing] = useState<boolean>(false);
// const [processTxError, setProcessTxError] = useState<Error | null>(null);
// const [isProcessed, setIsProcessed] = useState<boolean>(false);
// const handleTransactionStatus = (
// processing: boolean,
// processed: boolean,
// error: Error | null,
// ) => {
// setIsProcessing(processing);
// setIsProcessed(processed);
// setProcessTxError(error);
// };

// Manage cancel status from CancelStream component
// Use this callback to close the cancel modal
const [cancelStatus, setCancelStatus] = useState<boolean>(false);

// Manage update status from UpdateStream component
// Use this callback to close the update modal
const [updateStatus, setUpdateStatus] = useState<boolean>(false);

// Generate random string (demo app only);
// const renderReasonCode = async () => {
// return Math.random().toString(36).substring(7);
// };

const publicClient = usePublicClient();
const walletClient = useWalletClient()?.data as WalletClient;
const { address } = useAccount();

const [SM, setSM] = useState<StreamManager | null>(null);
const [createdStreams, setCreatedStreams] = useState<Stream[]>([]);

// Append the past streams and the newly created streams to an array
const addStreams = (stream: Stream) => {
setCreatedStreams((prevStreams) => {
// Convert streamId to number to avoid duplicates in array
stream.streamId = Number(stream.streamId);

// Check if the stream is already present
const isExistingStream = prevStreams.some(
(prevStream) => prevStream.streamId === stream.streamId,
);

return isExistingStream ? prevStreams : [...prevStreams, stream];
});
};

// Fetch logs starting from this block
// TODO: find a way to get the SM deployment block
const fromBlock = config.fromBlock ? BigInt(config.fromBlock) : undefined;

// Fetch the StreamManager and all its logs
// Then reconstruct the streams from it
// Then set a watcher for new streams
useEffect(() => {
// 1. Initialize StreamManager
if (SM === null && walletClient !== undefined) {
StreamManager.fromAddress(
config.streamManagerAddress as `0x${string}`,
publicClient,
walletClient,
)
.then((SM) => {
setSM(SM);
// 2. Fetch all past stream logs
SM.onAllStreams(addStreams, fromBlock);
// 4. Initialize watcher for new streams.
SM.onStreamCreated(addStreams, address);
})
.catch(console.error);
}
}, [SM, address, walletClient]);

const [streamInfo, setStreamInfo] = useState({
amountPerSecond: null as bigint | null,
fundedAmount: null as bigint | null,
lastPull: null as bigint | null,
maxStreamLife: null as bigint | null,
reason: null as Uint8Array | null,
startTime: null as bigint | null,
token: null as string | null,
});

// Get info about your selected stream
useEffect(() => {
if (selectedStream) {
selectedStream
.streamInfo()
.then((info) => {
setStreamInfo({
amountPerSecond: info.amount_per_second,
fundedAmount: info.funded_amount,
lastPull: info.last_pull,
maxStreamLife: info.max_stream_life,
reason: info.reason,
startTime: info.start_time,
token: info.token,
});
})
.catch((error) => {
console.error("Error fetching stream info:", error);
});
}
}, [selectedStream]);

// Filter streams via creator
type GroupedStreams = {
[key in Address]?: Stream[];
};
const groupedStreams = createdStreams.reduce<GroupedStreams>(
(groups, stream) => {
const creatorKey = stream.creator;

if (!groups[creatorKey]) {
groups[creatorKey] = [];
}

groups[creatorKey]?.push(stream);
return groups;
},
{},
);

return (
<>
<div className="header header-app">
<ConnectButton />
</div>

<div className="list-stream-managers">
<h2> Stream Manager </h2>
<h2> Stream Managers </h2>
<ul>
<Link to={`/${config.streamManagerAddress}`}>
<li> {config.streamManagerAddress as `0x${string}`} </li>
<li>
<h3>{config.streamManagerAddress as `0x${string}`} </h3>
</li>
</Link>
</ul>
</div>
Expand Down
6 changes: 4 additions & 2 deletions ui/app/src/CreatePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,10 @@ const StreamPage = () => {
<ConnectButton />
</div>

<h1>Create a Stream on {sm}</h1>

<h1>
Create a Stream <br /> on {sm}
</h1>

{/* Create a stream */}
<div className="create-stream-component">
<CreateStream
Expand Down
2 changes: 1 addition & 1 deletion ui/app/src/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const Header = () => {

return (
<div className="header-button">
<button onClick={() => navigate(-1)}>Go Back</button>
<button onClick={() => navigate(-1)}> &#8592; Previous</button>
<button onClick={() => navigate("/")}>Homepage</button>
</div>
);
Expand Down
42 changes: 21 additions & 21 deletions ui/app/src/StreamManagerPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { useState, useEffect } from "react";
import { useParams, Link } from "react-router-dom";
import StreamManager, { Stream } from "@apeworx/apepay";
import { Address } from "viem";
import config from "./config";
import { usePublicClient, useWalletClient, WalletClient } from "wagmi";
import { ConnectButton } from "@rainbow-me/rainbowkit";
import StreamManager, { Stream } from "@apeworx/apepay";
import config from "./config";
import Header from "./Header";

const StreamManagerPage = () => {
Expand All @@ -18,7 +18,6 @@ const StreamManagerPage = () => {
const walletClient = useWalletClient()?.data as WalletClient;

// Fetch logs starting from this block
// TODO: let user input dynamically a block
const fromBlock = config.fromBlock ? BigInt(config.fromBlock) : undefined;

// Fetch the StreamManager and all its logs
Expand Down Expand Up @@ -80,25 +79,28 @@ const StreamManagerPage = () => {
</div>

<div>
<div className="create-stream-sm-text">
<Link to={`/${sm}/create`}>
<button className="create-stream-sm-button">
Create a Stream with this Stream Manager
</button>
</Link>
</div>

<h2>
<div className="stream-manager-title">
{fromBlock != null ? (
<>
{`Created Streams from block ${String(fromBlock)}`}
{"Created Streams from block "}
<strong>{String(fromBlock)}</strong>
<br />
{`on ${sm}`}
{"on "}
<strong>{sm}</strong>
</>
) : (
`Created Streams on ${sm}`
<>
{"Created Streams on "}
<strong>{sm}</strong>
</>
)}
</h2>
</div>

<div className="create-stream-sm-text">
<Link to={`/${sm}/create`}>
<button className="create-stream-sm-button">Create a Stream</button>
</Link>
</div>

{/* Stream list */}
<div className="list-streams">
Expand All @@ -117,11 +119,9 @@ const StreamManagerPage = () => {

return (
<div key={creator}>
<h3 className="list-creator"> Creator:</h3>

<Link to={`/${sm}/${creator}`}>
<h3 className="list-creator"> {creator}</h3>
</Link>
<h3 className="list-creator">
By <Link to={`/${sm}/${creator}`}>{creator}</Link>:
</h3>

<ul className="list-streams">
{groupedStreams[creatorKey]
Expand Down
35 changes: 25 additions & 10 deletions ui/app/src/StreamPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,23 +118,38 @@ const StreamPage = () => {
<ConnectButton />
</div>

<h1>Stream {streamId} Details</h1>
<h1>Stream {streamId}</h1>
{stream ? (
<>
<div className="stream-components">
{/* Stream Data */}
<div className="stream-data-box">
<div>SM: {sm}</div>
<p>Token: {String(streamInfo.token)}</p>
<p>Creator: {creator}</p>
<p>Amount per second: {String(streamInfo.amountPerSecond)}</p>
<p>Funded amount: {String(streamInfo.fundedAmount)}</p>
<p>
<strong>Stream Manager: </strong>
{sm}
</p>
<p>
<strong>Token: </strong>
{String(streamInfo.token)}
</p>
<p>
<strong>Creator: </strong>
{creator}
</p>
<p>
<strong>Amount per second: </strong>
{String(streamInfo.amountPerSecond)}
</p>
<p>
<strong>Funded amount: </strong>
{String(streamInfo.fundedAmount)}
</p>
</div>

{/* Stream Status */}
<div className="stream-status-box">
<h3> Stream Status</h3>
<div className="status-graph">
<div>
<select
className="dropdown-select"
value={chartType}
Expand All @@ -149,8 +164,8 @@ const StreamPage = () => {
<StreamStatus
stream={stream}
chartType={chartType}
background="#110036"
color="#B40C4C"
background="#6200ea"
color="black"
/>
</div>
</div>
Expand Down Expand Up @@ -196,7 +211,7 @@ const StreamPage = () => {
) : (
<>
<div className="loading-stream-text">
Loading the details of stream {streamId}...
Fetching data from stream {streamId}...
</div>
</>
)}
Expand Down
1 change: 0 additions & 1 deletion ui/app/src/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
<RainbowKitProvider chains={chains}>
<Router>
<Routes>
{/* <App /> */}
<Route path="/" element={<App />} />
<Route path=":sm" element={<StreamManagerPage />} />
<Route path=":sm/create" element={<CreatePage />} />
Expand Down
Loading

0 comments on commit 2775baf

Please sign in to comment.