@fortawesome/free-solid-svg-icons#faSyncAlt TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faSyncAlt.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: home.component.ts From msfs-community-downloader with GNU Affero General Public License v3.0 | 5 votes |
|
faSyncAlt = faSyncAlt;
Example #2
| Source File: icon.service.ts From WowUp with GNU General Public License v3.0 | 5 votes |
|
public constructor(private _matIconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {
this.addSvg(faAngleDoubleDown);
this.addSvg(faArrowUp);
this.addSvg(faArrowDown);
this.addSvg(faSyncAlt);
this.addSvg(faTimes);
this.addSvg(faExternalLinkAlt);
this.addSvg(faQuestionCircle);
this.addSvg(faPlay);
this.addSvg(faClock);
this.addSvg(faBug);
this.addSvg(faLink);
this.addSvg(faDiscord);
this.addSvg(faGithub);
this.addSvg(faInfoCircle);
this.addSvg(faCodeBranch);
this.addSvg(faCaretDown);
this.addSvg(faExclamationTriangle);
this.addSvg(faCode);
this.addSvg(faPatreon);
this.addSvg(faCoins);
this.addSvg(faCompressArrowsAlt);
this.addSvg(faPencilAlt);
this.addSvg(faCheckCircle);
this.addSvg(faDiceD6);
this.addSvg(faSearch);
this.addSvg(faInfoCircle);
this.addSvg(faNewspaper);
this.addSvg(faCog);
this.addSvg(faAngleUp);
this.addSvg(faAngleDown);
this.addSvg(faChevronRight);
this.addSvg(faUserCircle);
this.addSvg(faEllipsisV);
this.addSvg(faCopy);
this.addSvg(farCheckCircle);
this.addSvg(faExclamation);
this.addSvg(faTrash);
this.addSvg(faHistory);
this.addSvg(faCaretSquareRight);
this.addSvg(faCaretSquareLeft);
this.addSvg(faMinimize);
this.addSvg(faUpRightFromSquare);
}
Example #3
| Source File: common.tsx From remote-office-hours-queue with Apache License 2.0 | 5 votes |
|
LoadingDisplay: React.FC<LoadingDisplayProps> = (props) => {
if (!props.loading) return null;
return (
<p className="bottom-right alert alert-info">
<FontAwesomeIcon icon={faSyncAlt} spin />
</p>
);
}
Example #4
| Source File: DeploySiteConfig.tsx From argo-react with MIT License | 4 votes |
|
function DeploySiteConfig() {
const history = useHistory();
const {
user,
selectedOrg,
selectedRepoForTriggerDeployment,
orgLoading,
userLoading,
} = useContext<IStateModel>(StateContext);
const { setLatestDeploymentConfig, setSelectedOrganization } =
useContext<IActionModel>(ActionContext);
const [createDeployProgress, setCreateDeployProgress] = useState(1);
const [showRepoOrgDropdown, setShowRepoOrgDropdown] = useState<boolean>(false);
const [reposOwnerDetails, setReposOwnerDetails] = useState<any[]>([]);
const [reposSelectedOwnerRepoDetails, setReposSelectedOwnerRepoDetails] = useState<
any[]
>([]);
const [selectedRepoOwner, setSelectedRepoOwner] = useState<any>();
const [currentRepoOwner, setCurrentRepoOwner] = useState<string>("");
const [ownerLoading, setOwnerLoading] = useState<boolean>(true);
const [repoLoading, setRepoLoading] = useState<boolean>(true);
const [repoBranches, setRepoBranches] = useState<any[]>([]);
const [buildEnv, setBuildEnv] = useState<any[]>([]);
const [repoBranchesLoading, setRepoBranchesLoading] = useState<boolean>(true);
const [autoPublish, setAutoPublish] = useState<boolean>(true);
const [selectedRepo, setSelectedRepo] = useState<any>();
const [owner, setOwner] = useState<any>();
const [branch, setBranch] = useState<string>("master");
const [workspace, setWorkspace] = useState<string>();
const [framework, setFramework] = useState<string>("react");
const [packageManager, setPackageManager] = useState<string>("npm");
const [buildCommand, setBuildCommand] = useState<string>("");
const [publishDirectory, setPublishDirectory] = useState<string>("");
const [protocol, setProtocol] = useState<string>("");
const [startDeploymentLoading, setStartDeploymentLoading] =
useState<boolean>(false);
const [deployDisabled, setDeployDisabled] = useState<boolean>(false);
const [showGithubRepos, setShowGithubRepos] = useState<boolean>(false);
const [errorWarning, setErrorWarning] = useState<boolean>(false);
const [errorMessage, setErrorMessage] = useState<string>("");
const componentIsMounted = useRef(true);
useEffect(() => {
return () => {
componentIsMounted.current = false;
};
}, []);
useEffect(() => {
if (
selectedRepo &&
owner &&
branch &&
framework !== "static" &&
packageManager &&
buildCommand &&
publishDirectory &&
protocol &&
selectedOrg?.wallet &&
!orgLoading
) {
setDeployDisabled(false);
} else {
if (
selectedRepo &&
owner &&
branch &&
framework === "static" &&
protocol &&
selectedOrg?.wallet &&
!orgLoading
) {
setDeployDisabled(false);
} else {
setDeployDisabled(true);
}
}
}, [
selectedRepo,
owner,
branch,
framework,
packageManager,
buildCommand,
publishDirectory,
user,
selectedOrg,
orgLoading,
protocol,
]);
useEffect(() => {
if (framework === "static") {
setPackageManager("");
setBuildCommand("");
setPublishDirectory("");
} else if (framework === "react") {
setPackageManager("npm");
setBuildCommand("build");
setPublishDirectory("build");
} else if (framework === "vue") {
setPackageManager("npm");
setBuildCommand("build");
setPublishDirectory("dist");
} else if (framework === "angular") {
setPackageManager("npm");
setBuildCommand("build");
setPublishDirectory("dist/your-app-name");
} else if (framework === "next") {
setPackageManager("yarn");
setBuildCommand("next build && next export");
setPublishDirectory("out");
}
}, [framework]);
useEffect(() => {
if (selectedOrg) {
setOwner(selectedOrg);
} else if (user?.organizations && user.organizations[0]) {
setOwner(user.organizations[0]);
}
}, [user, selectedOrg]);
useEffect(() => {
if (selectedRepoForTriggerDeployment) {
const repoName = selectedRepoForTriggerDeployment.github_url
.substring(19, selectedRepoForTriggerDeployment.github_url.length - 4)
.split("/")[1];
const ownerName = selectedRepoForTriggerDeployment.github_url
.substring(19, selectedRepoForTriggerDeployment.github_url.length - 4)
.split("/")[0];
setSelectedRepo({
name: repoName,
clone_url: selectedRepoForTriggerDeployment.github_url,
});
setCurrentRepoOwner(ownerName);
setFramework(selectedRepoForTriggerDeployment.framework);
setWorkspace(selectedRepoForTriggerDeployment.workspace);
setPackageManager(selectedRepoForTriggerDeployment.package_manager);
setBuildCommand(selectedRepoForTriggerDeployment.build_command);
setPublishDirectory(selectedRepoForTriggerDeployment.publish_dir);
setProtocol(selectedRepoForTriggerDeployment.protocol);
setCreateDeployProgress(3);
const branchUrl = `https://api.github.com/repos/${ownerName}/${repoName}/branches`;
ApiService.getGithubRepoBranches(branchUrl).subscribe((res) => {
if (componentIsMounted.current) {
setRepoBranches(res.branches);
setBranch(selectedRepoForTriggerDeployment.branch);
setRepoBranchesLoading(false);
}
});
}
}, [selectedRepoForTriggerDeployment]);
useEffect(() => {
if (currentRepoOwner && selectedRepoForTriggerDeployment) {
ApiService.getAllGithubAppInstallation().subscribe((res) => {
if (componentIsMounted.current) {
const repoOwners: any[] = res.installations.map((installation: any) => ({
name: installation.account.login,
avatar: installation.account.avatar_url,
installationId: installation.id,
}));
if (repoOwners.length) {
const newRepoOwner = repoOwners.filter(
(repoOwner) => repoOwner.name === currentRepoOwner,
)[0];
setSelectedRepoOwner(newRepoOwner);
}
}
});
}
}, [currentRepoOwner, selectedRepoForTriggerDeployment]);
useEffect(() => {
const bc = new BroadcastChannel("github_app_auth");
bc.onmessage = (msg: string) => {
if (msg === "authorized") {
setShowGithubRepos(true);
getAllGithubInstallations();
}
};
return () => {
bc.close();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const getAllGithubInstallations = () => {
setOwnerLoading(true);
setRepoLoading(true);
ApiService.getAllGithubAppInstallation().subscribe((res) => {
if (componentIsMounted.current) {
const repoOwners: any[] = res.installations.map((installation: any) => ({
name: installation.account.login,
avatar: installation.account.avatar_url,
installationId: installation.id,
}));
setReposOwnerDetails(repoOwners);
if (repoOwners.length) {
let newRepoOwner = null;
if (selectedRepoOwner) {
newRepoOwner = repoOwners.filter(
(repoOwner) => repoOwner.name === selectedRepoOwner.name,
)[0];
} else {
newRepoOwner = repoOwners[0];
}
setSelectedRepoOwner(newRepoOwner);
setOwnerLoading(false);
getOwnerRepos(newRepoOwner.installationId);
} else {
setOwnerLoading(false);
}
}
});
};
const getOwnerRepos = (installationId: string) => {
setRepoLoading(true);
ApiService.getAllOwnerRepos(installationId).subscribe((res) => {
if (componentIsMounted.current) {
const repositories: any[] = res.repositories.map((repo: any) => ({
clone_url: repo.clone_url,
branches_url: repo.branches_url.split("{")[0],
name: repo.name,
fullName: repo.full_name,
private: repo.private,
repositoryId: repo.id,
}));
setReposSelectedOwnerRepoDetails(repositories);
setRepoLoading(false);
}
});
};
const selectRepoOwner = (repoOwner: any) => {
getOwnerRepos(repoOwner.installationId);
setSelectedRepoOwner(repoOwner);
setShowRepoOrgDropdown(false);
};
const selectRepositories = (repo: any) => {
setSelectedRepo(repo);
setCreateDeployProgress(2);
setRepoBranchesLoading(true);
ApiService.getGithubRepoBranches(repo.branches_url).subscribe((res) => {
if (componentIsMounted.current) {
setRepoBranches(res.branches);
setBranch(res.branches[0].name);
setRepoBranchesLoading(false);
}
});
};
const startDeployment = async () => {
setErrorWarning(false);
setErrorMessage("");
setStartDeploymentLoading(true);
const configuration = {
framework,
workspace,
packageManager,
buildCommand,
publishDir: publishDirectory,
branch,
protocol,
};
ApiService.createConfiguration(configuration).subscribe(
(result) => {
if (componentIsMounted.current) {
const uniqueTopicId = uuidv4();
const deployment = {
orgId: selectedOrg?._id,
githubUrl: selectedRepo.clone_url,
folderName: selectedRepo.name,
owner: selectedRepoOwner.name,
installationId: selectedRepoOwner.installationId,
repositoryId: selectedRepo.repositoryId,
organizationId: owner._id,
uniqueTopicId,
configurationId: result._id,
env: mapBuildEnv(buildEnv),
createDefaultWebhook: autoPublish,
};
ApiService.startDeployment(deployment).subscribe(
(result) => {
if (result.success) {
if (componentIsMounted.current) {
setLatestDeploymentConfig(deployment);
setStartDeploymentLoading(false);
history.push(
`/org/${selectedOrg?._id}/sites/${result.projectId}/deployments/${result.deploymentId}`,
);
}
} else {
setErrorMessage(result.message);
setErrorWarning(true);
setTimeout(() => {
setErrorWarning(false);
setErrorMessage("");
}, 5000);
setStartDeploymentLoading(false);
}
},
(error) => {
setErrorMessage(error.message);
setErrorWarning(true);
setTimeout(() => {
setErrorWarning(false);
setErrorMessage("");
}, 5000);
setStartDeploymentLoading(false);
},
);
}
},
(error) => {
setErrorMessage(error.message);
setErrorWarning(true);
setTimeout(() => {
setErrorWarning(false);
setErrorMessage("");
}, 5000);
setStartDeploymentLoading(false);
},
);
};
const mapBuildEnv = (buildEnv: any[]): any => {
const buildEnvObj = {};
buildEnv.forEach((env) => {
Object.assign(buildEnvObj, { [env.key]: env.value });
});
return buildEnvObj;
};
const openGithubAppAuth = async () => {
const githubSignInUrl = `${window.location.origin}/#/github/app/${user?._id}`;
window.open(githubSignInUrl, "_blank");
};
const goBackAction = () => {
if (createDeployProgress === 1) {
history.goBack();
} else if (createDeployProgress === 2) {
setCreateDeployProgress(1);
} else {
setCreateDeployProgress(2);
}
};
let buildCommandPrefix: string = "";
if (packageManager === "npm") {
buildCommandPrefix = "npm run";
} else {
buildCommandPrefix = "yarn";
}
const selectProtocol = (selectedProtocol: string) => {
setProtocol(selectedProtocol);
setCreateDeployProgress(3);
};
const addBuildEnv = () => {
setBuildEnv([...buildEnv, { key: "", value: "" }]);
};
const removeBuildEnvItem = (id: number) => {
setBuildEnv(buildEnv.filter((item, i) => i !== id));
};
const fillEnvKey = (value: string, id: number) => {
setBuildEnv(
buildEnv.map((item, i) =>
i === id ? { key: value, value: item.value } : item,
),
);
};
const fillEnvValue = (value: string, id: number) => {
setBuildEnv(
buildEnv.map((item, i) => (i === id ? { key: item.key, value } : item)),
);
};
return (
<div className="DeploySiteConfig">
<RootHeader parent={"DeploySiteConfig"} />
<main className="app-main">
<div className="deploy-site-container">
<div className="deploy-site-card">
<div className="deploy-site-card-inner">
<div className="go-back" onClick={goBackAction}>
<span>
<FontAwesomeIcon icon={faArrowLeft} />
</span>
<span>Back</span>
</div>
<h1 className="deploy-site-title">Create a new site</h1>
<div className="deploy-site-subtitle">
Just follow these 2 step to deploy your website to ArGo
</div>
<div className="deploy-site-progress-bar">
<div className="deploy-site-progress-number-container">
{createDeployProgress <= 1 ? (
<div
className={`deploy-site-progress-number ${
createDeployProgress === 1 ? "active" : ""
}`}
>
1
</div>
) : (
<div className="deploy-site-progress-done">
<FontAwesomeIcon icon={faCheck} />
</div>
)}
<div
className={`deploy-site-progress-text ${
createDeployProgress === 1
? "deploy-site-progress-text-active"
: ""
}`}
>
Pick a repository
</div>
</div>
<div className="deploy-site-progress-number-container">
{createDeployProgress <= 2 ? (
<div
className={`deploy-site-progress-number ${
createDeployProgress === 2 ? "active" : ""
}`}
>
2
</div>
) : (
<div className="deploy-site-progress-done">
<FontAwesomeIcon icon={faCheck} />
</div>
)}
<div
className={`deploy-site-progress-text ${
createDeployProgress === 2
? "deploy-site-progress-text-active"
: ""
}`}
>
Pick a Protocol
</div>
</div>
<div className="deploy-site-progress-number-container">
{createDeployProgress <= 3 ? (
<div
className={`deploy-site-progress-number ${
createDeployProgress === 3 ? "active" : ""
}`}
>
3
</div>
) : (
<div className="deploy-site-progress-done">
<FontAwesomeIcon icon={faCheck} />
</div>
)}
<div
className={`deploy-site-progress-text ${
createDeployProgress === 3
? "deploy-site-progress-text-active"
: ""
}`}
>
Build options, and deploy!
</div>
</div>
</div>
<div className="deploy-site-form-container">
{createDeployProgress === 1 && (
<div className="deploy-site-form-item">
<label className="deploy-site-item-title">
{/* Continuous Deployment: GitHub Webhook */}
Choose repository
</label>
<label className="deploy-site-item-subtitle">
Choose the repository you want to link to your site on ArGo.
</label>
{!showGithubRepos ? (
<div className="deployment-provider-container">
<div className="deployment-provider-title">
Connect with your favorite provider
</div>
<div className="deployment-provider-buttons">
<button
className="github-button"
disabled={userLoading}
onClick={openGithubAppAuth}
>
<span className="github-icon">
<GithubIcon />
</span>
<span>Github</span>
</button>
</div>
</div>
) : reposOwnerDetails.length || ownerLoading ? (
<div className="deploy-site-item-repo-list-container">
<div className="deploy-site-item-repo-header">
<div
className="deploy-site-item-repo-header-left"
onClick={(e) =>
!ownerLoading ? setShowRepoOrgDropdown(true) : null
}
>
{!ownerLoading ? (
<LazyLoadedImage height={32} once>
<img
src={selectedRepoOwner.avatar}
alt="camera"
className="deploy-site-item-repo-org-avatar"
height={32}
width={32}
loading="lazy"
/>
</LazyLoadedImage>
) : (
<Skeleton
circle={true}
height={32}
width={32}
duration={2}
/>
)}
<span className="deploy-site-item-repo-org-name">
{!ownerLoading ? (
selectedRepoOwner.name
) : (
<Skeleton width={140} height={24} duration={2} />
)}
</span>
<span className="deploy-site-item-repo-down">
<FontAwesomeIcon
icon={
showRepoOrgDropdown ? faChevronUp : faChevronDown
}
/>
</span>
</div>
<div className="deploy-site-item-repo-header-right">
{/* <div className="deploy-site-item-repo-search-container">
<span className="deploy-site-item-repo-search-icon">
<FontAwesomeIcon icon={faSearch}></FontAwesomeIcon>
</span>
<input
type="text"
className="deploy-site-item-repo-search-input"
placeholder="Search repos"
/>
</div> */}
<div
className="refresh-control"
onClick={getAllGithubInstallations}
>
<FontAwesomeIcon icon={faSyncAlt}></FontAwesomeIcon>
</div>
</div>
{showRepoOrgDropdown && (
<MemoRepoOrgDropdown
setShowDropdown={setShowRepoOrgDropdown}
repoOwner={reposOwnerDetails}
selectedRepoOwner={selectedRepoOwner}
setSelectedRepoOwner={selectRepoOwner}
/>
)}
</div>
<div className="deploy-site-item-repo-body">
{!repoLoading ? (
reposSelectedOwnerRepoDetails.map(
(repo: any, index: number) => (
<MemoRepoItem
skeleton={false}
name={repo.fullName}
privateRepo={repo.private}
key={index}
onClick={() => selectRepositories(repo)}
/>
),
)
) : (
<>
<MemoRepoItem
skeleton={true}
name={""}
privateRepo={false}
onClick={() => null}
/>
<MemoRepoItem
skeleton={true}
name={""}
privateRepo={false}
onClick={() => null}
/>
</>
)}
</div>
<div className="deploy-site-item-repo-body">
Can’t see your repo here?
<a
href={`${config.urls.API_URL}/auth/github/app/new`}
// eslint-disable-next-line react/jsx-no-target-blank
target="_blank"
rel="noopener noreferrer"
>
Configure the ArGo app on GitHub.
</a>
</div>
</div>
) : (
<div className="deployment-provider-container">
<div className="deployment-provider-title">
You don't have any configured owner, Configure it now to
view your repositories
</div>
<div className="deployment-provider-buttons">
<button
className="github-button"
onClick={openGithubAppAuth}
>
<span className="github-icon">
<GithubIcon />
</span>
<span>Github</span>
</button>
</div>
</div>
)}
</div>
)}
{createDeployProgress === 2 && (
<>
<div className="deploy-site-form-item">
<label className="deploy-site-item-title">
Select the protocol to deploy {selectedRepo.name}
</label>
<label className="deploy-site-item-subtitle">
Click on the protocol in which you want ArGo to deploy your
site.
</label>
<div className="deploy-protocol-list-container">
<ul className="deploy-protocol-list">
<div
className="deploy-protocol-image"
onClick={(e) => selectProtocol("arweave")}
>
<LazyLoadedImage height={50} once>
<img
src={require("../../assets/png/arweave_logo.png")}
alt="Arweave"
className="deploy-protocol-item-avatar"
height={50}
width={200}
loading="lazy"
/>
</LazyLoadedImage>
</div>
<div
className="deploy-protocol-image"
onClick={(e) => selectProtocol("skynet")}
>
<LazyLoadedImage height={50} once>
<img
src={require("../../assets/png/skynet_logo.png")}
alt="Skynet"
className="deploy-protocol-item-avatar"
height={50}
width={200}
loading="lazy"
/>
</LazyLoadedImage>
<div className="new-protocol-tag">New</div>
</div>
<div
className="deploy-protocol-image"
onClick={(e) => selectProtocol("ipfs-filecoin")}
>
<LazyLoadedImage height={50} once>
<img
src={require("../../assets/png/filecoin-full.png")}
alt="filecoin"
className="deploy-protocol-item-avatar"
height={50}
width={200}
loading="lazy"
/>
</LazyLoadedImage>
<div className="new-protocol-tag">New</div>
</div>
<div
className="deploy-protocol-image"
onClick={(e) => selectProtocol("ipfs-pinata")}
>
<LazyLoadedImage height={50} once>
<img
src={require("../../assets/svg/pinata-full.svg")}
alt="filecoin"
className="deploy-protocol-item-avatar"
height={62}
width={220}
loading="lazy"
/>
</LazyLoadedImage>
<div className="new-protocol-tag">New</div>
</div>
{/* <div
className="deploy-protocol-image"
onClick={(e) => selectProtocol("neofs")}
>
<LazyLoadedImage height={50} once>
<img
src={require("../../assets/svg/neofs_logo.svg")}
alt="neoFS"
className="deploy-protocol-item-avatar"
height={50}
width={200}
loading="lazy"
/>
</LazyLoadedImage>
<div className="new-protocol-tag">New</div>
</div> */}
</ul>
</div>
</div>
<div className="button-container">
<button
type="button"
className="cancel-button"
onClick={(e) => setCreateDeployProgress(1)}
>
Back
</button>
</div>
</>
)}
{createDeployProgress === 3 && (
<>
<ReactTooltip />
<div className="deploy-site-form-item">
<label className="deploy-site-item-title">
Deploy settings for {selectedRepo.name}
</label>
<label className="deploy-site-item-subtitle">
Get more control over how ArGo builds and deploys your site
with these settings.
</label>
<div className="deploy-site-item-form">
<div className="deploy-site-item-form-item">
<label>Owner</label>
<div className="deploy-site-item-select-container">
<select
className="deploy-site-item-select"
value={owner._id}
onChange={(e) => {
const selOrg = user
? user.organizations
? user.organizations.filter(
(org) => org._id === e.target.value,
)[0]
: null
: null;
setSelectedOrganization(selOrg as any);
setOwner(e.target.value);
}}
>
{user?.organizations &&
user?.organizations.map((organization, index) => (
<option value={organization._id} key={index}>
{organization.profile.name}
</option>
))}
</select>
<span className="select-down-icon">
<FontAwesomeIcon icon={faChevronDown} />
</span>
</div>
</div>
<div className="deploy-site-item-form-item">
<label>Branch to deploy</label>
<div className="deploy-site-item-select-container">
<select
className="deploy-site-item-select"
value={branch}
onChange={(e) => setBranch(e.target.value)}
>
{repoBranches.map((branch, index) => (
<option value={branch.name} key={index}>
{branch.name}
</option>
))}
</select>
<span className="select-down-icon">
{!repoBranchesLoading ? (
<FontAwesomeIcon icon={faChevronDown} />
) : (
<BounceLoader
size={20}
color={"#0a3669"}
loading={true}
/>
)}
</span>
</div>
</div>
<div className="deploy-site-item-form-item">
<label>
Workspace to deploy
<span
className="tooltip"
data-tip="If your app is a monorepo, then you can specify your app directory you want to deploy using the workspace."
>
<FontAwesomeIcon size="sm" icon={faInfoCircle} />
</span>
</label>
<input
type="text"
className="deploy-site-item-input"
value={workspace}
onChange={(e) => setWorkspace(e.target.value)}
/>
</div>
</div>
</div>
<div className="deploy-site-form-item">
<label className="deploy-site-item-title">
Basic build settings
</label>
<label className="deploy-site-item-subtitle">
If you’re using a static site generator or build tool, we’ll
need these settings to build your site.
</label>
<div className="deploy-site-item-form">
<div className="deploy-site-item-form-item">
<label>
Framework
<span
className="tooltip"
data-tip="The framework that your app is built upon."
>
<FontAwesomeIcon size="sm" icon={faInfoCircle} />
</span>
</label>
<div className="deploy-site-item-select-container">
<select
className="deploy-site-item-select"
value={framework}
onChange={(e) => setFramework(e.target.value)}
>
<option value="static">
No Framework - Simple JavaScript App
</option>
<option value="react">Create React App</option>
<option value="vue">Vue App</option>
<option value="angular">Angular App</option>
{protocol !== "skynet" && (
<option value="next">Next.js App</option>
)}
</select>
<span className="select-down-icon">
<FontAwesomeIcon icon={faChevronDown} />
</span>
</div>
</div>
{framework !== "static" && (
<>
<div className="deploy-site-item-form-item">
<label>
Package Manager
<span
className="tooltip"
data-tip="The package manager that you want your app to be built with."
>
<FontAwesomeIcon size="sm" icon={faInfoCircle} />
</span>
</label>
<div className="deploy-site-item-select-container">
<select
className="deploy-site-item-select"
value={packageManager}
onChange={(e) => setPackageManager(e.target.value)}
>
<option value="npm">NPM</option>
<option value="yarn">YARN</option>
</select>
<span className="select-down-icon">
<FontAwesomeIcon icon={faChevronDown} />
</span>
</div>
</div>
<div className="deploy-site-item-form-item">
<label>
Build command
<span
className="tooltip"
data-tip="The command your frontend framework provides for compiling your code."
>
<FontAwesomeIcon size="sm" icon={faInfoCircle} />
</span>
</label>
{framework !== "next" ? (
<div className="deploy-site-item-input-container">
<input
type="text"
className="deploy-site-item-input-disabled"
value={buildCommandPrefix}
disabled
/>
<input
type="text"
className="deploy-site-item-input-build"
value={buildCommand}
onChange={(e) => setBuildCommand(e.target.value)}
/>
</div>
) : (
<input
type="text"
className="deploy-site-item-input"
value={buildCommand}
onChange={(e) => setBuildCommand(e.target.value)}
/>
)}
</div>
<div className="deploy-site-item-form-item">
<label>
Publish directory
<span
className="tooltip"
data-tip="The directory in which your compiled frontend will be located."
>
<FontAwesomeIcon size="sm" icon={faInfoCircle} />
</span>
</label>
<input
type="text"
className="deploy-site-item-input"
value={publishDirectory}
onChange={(e) => setPublishDirectory(e.target.value)}
/>
</div>
</>
)}
</div>
</div>
<div className="deploy-site-form-item">
<label className="deploy-site-item-title">
Advanced build settings
</label>
<label className="deploy-site-item-subtitle">
Define environment variables for more control and flexibility
over your build.
</label>
<div className="deploy-site-item-form">
<div className="deploy-site-item-form-item">
<label>
Continuous Deployment{" "}
<span className="new-item-tag">NEW</span>
</label>
<label className="deploy-site-item-subtitle">
Enabling this will automatically create a production CD
pipeline for your selected branch. When you push any new
code to GitHub, we will run our build tool and deploy the
result.
</label>
</div>
<div className="webhook-confirm-container">
<span className="confirm-checkbox">
<input
type="checkbox"
checked={autoPublish}
onChange={(e) => setAutoPublish(e.target.checked)}
/>
</span>
<span>
<div className="webhook-title">
Do you want to enable Continuous Deployment?
</div>
<div className="webhook-note">
Note: If the project already has CD enabled, this won't
overwrite the existing configuration. To change this,
you have to go to Project Settings.
</div>
</span>
</div>
</div>
<div className="deploy-site-item-form">
<div className="deploy-site-item-form-item">
<label>Environment Variables</label>
<label className="deploy-site-item-subtitle">
Note that adding environment variables here won't work if
project already exists, you have to add environment
variables by going to your Project Settings {"->"}{" "}
Environment Variables
</label>
</div>
{buildEnv.length !== 0 && (
<div className="deploy-site-item-form-item">
<div className="deploy-site-env-title">
<label className="deploy-site-env-title-item">
Key
</label>
<label className="deploy-site-env-title-item">
Value
</label>
</div>
{buildEnv.map((env, i) => (
<div
className="deploy-site-item-env-container"
key={i}
>
<input
type="text"
className="deploy-site-env-input"
placeholder="VARIABLE_NAME"
value={env.key}
onChange={(e) => fillEnvKey(e.target.value, i)}
/>
<input
type="text"
className="deploy-site-env-input"
placeholder="somevalue"
value={env.value}
onChange={(e) => fillEnvValue(e.target.value, i)}
/>
<span
className="remove-env-item"
onClick={(e) => removeBuildEnvItem(i)}
>
<FontAwesomeIcon
icon={faTimesCircle}
></FontAwesomeIcon>
</span>
</div>
))}
</div>
)}
<button
type="button"
className="add-new-var-button"
onClick={(e) => addBuildEnv()}
>
New Variable
</button>
</div>
{!selectedOrg?.wallet && !orgLoading ? (
<div className="wallet-details-container">
<div className="wallet-details-items">
<span className="exclamation-icon">
<FontAwesomeIcon
icon={faExclamationCircle}
></FontAwesomeIcon>
</span>
<span>
You have to enable your organization wallet before you
can deploy your project.
<Link to="/dashboard/wallet">Enable now</Link>
</span>
</div>
</div>
) : null}
</div>
<div className="button-container">
<button
type="button"
className="primary-button"
onClick={startDeployment}
disabled={deployDisabled}
>
{startDeploymentLoading && (
<BounceLoader size={20} color={"#fff"} loading={true} />
)}
Deploy
</button>
<button
type="button"
className="cancel-button"
onClick={(e) => setCreateDeployProgress(2)}
>
Back
</button>
</div>
{errorWarning ? (
<div className="warning-container">
<div className="warning-header">
<FontAwesomeIcon icon={faExclamationCircle} />{" "}
{errorMessage}
</div>
</div>
) : null}
</>
)}
</div>
</div>
</div>
</div>
</main>
</div>
);
}
Example #5
| Source File: AllDeployments.tsx From argo-react with MIT License | 4 votes |
|
AllDeployments = () => {
// const history = useHistory();
// const [autoDeployment, setAutoDeployment] = useState<boolean>(true);
const { projectLoading, selectedProject } = useContext<IStateModel>(StateContext);
const { fetchProject } = useContext<IActionModel>(ActionContext);
// const { setRepoForTriggerDeployment } = useContext<IActionModel>(ActionContext);
const sortedDeployments = projectLoading
? []
: selectedProject?.deployments.sort((a, b) =>
moment(b.createdAt).diff(moment(a.createdAt)),
);
// const triggerDeployment = () => {
// setRepoForTriggerDeployment({
// github_url: selectedProject?.url,
// branch: selectedProject?.branch,
// publish_dir: selectedProject?.publish_dir,
// package_manager: selectedProject?.package_manager,
// build_command: selectedProject?.build_command,
// });
// history.push("/deploy/new");
// };
return (
<div className="AllDeployments">
<ProjectTopCard />
<div className="site-deployment-card-container deploy-container">
<div className="site-deployment-header-title">Deploy Info</div>
<div className="deploy-summary-item">
<div className="deploy-summary-body-item">
<label>Total Deployments:</label>
<span>
{!projectLoading ? (
selectedProject?.deployments?.length
) : (
<Skeleton width={20} duration={2} />
)}
</span>
</div>
<div className="deploy-summary-body-item">
<label>Pending Deployments:</label>
<span>
{!projectLoading ? (
selectedProject?.deployments?.filter(
(deployment) => deployment.status.toLowerCase() === "pending",
).length
) : (
<Skeleton width={20} duration={2} />
)}
</span>
</div>
<div className="deploy-summary-body-item">
<label>Successful Deployments:</label>
<span>
{!projectLoading ? (
selectedProject?.deployments?.filter(
(deployment) => deployment.status.toLowerCase() === "deployed",
).length
) : (
<Skeleton width={20} duration={2} />
)}
</span>
</div>
<div className="deploy-summary-body-item">
<label>Failed Deployments:</label>
<span>
{!projectLoading ? (
selectedProject?.deployments?.filter(
(deployment) => deployment.status.toLowerCase() === "failed",
).length
) : (
<Skeleton width={20} duration={2} />
)}
</span>
</div>
{/* <div className="deploy-summary-body-item">
<label>
Auto Deployment:
<br />
<label>(Deploys from master are published automatically.)</label>
</label>
<Switch
checked={autoDeployment}
onChange={(checked) => setAutoDeployment(checked)}
onColor="#3677e9"
onHandleColor="#0a3669"
handleDiameter={30}
uncheckedIcon={false}
checkedIcon={false}
boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
height={20}
width={48}
className="react-switch"
/>
</div> */}
</div>
</div>
<div className="site-deployment-card-container deploy-container">
<div className="site-deployment-header-title">
<span>Deployments</span>
<div
className="refresh-control"
onClick={() => fetchProject(`${selectedProject?._id}`)}
>
<FontAwesomeIcon icon={faSyncAlt}></FontAwesomeIcon>
</div>
{/* <button className="trigger-deploy-button" onClick={triggerDeployment}>
Trigger deploy
</button> */}
</div>
<div className="deploy-summary-item">
{!projectLoading ? (
(sortedDeployments ? sortedDeployments : []).map((deployment, index) => (
<div key={index}>
<DeploymentItem
index={index}
type="filled"
deployment={deployment}
/>
</div>
))
) : (
<>
<DeploymentItem index={1} type="skeleton" deployment={null} />
<DeploymentItem index={2} type="skeleton" deployment={null} />
</>
)}
</div>
</div>
</div>
);
}
Example #6
| Source File: Deployment.tsx From argo-react with MIT License | 4 votes |
|
Deployment = () => {
const timeAgo = new TimeAgo("en-US");
const history = useHistory();
const params = useParams<any>();
const defaultOptions = {
loop: true,
autoplay: true,
animationData,
rendererSettings: {
preserveAspectRatio: "xMidYMid",
},
};
const { currentSiteDeployConfig, currentSiteDeployLogs, selectedProject } =
useContext<IStateModel>(StateContext);
const { setLatestDeploymentLogs, setLatestDeploymentConfig, fetchProject } =
useContext<IActionModel>(ActionContext);
const [deploymentStatus, setDeploymentStatus] = useState<string>("pending");
const [buildTime, setBuildTime] = useState<{ min: number; sec: number }>({
min: 0,
sec: 0,
});
const [paymentStatus, setPaymentStatus] = useState<string>("waiting");
const [livePaymentStatus, setlivePaymentStatus] = useState<string>("waiting");
const [paymentMessage, setPaymentMessage] = useState<string>("");
const [paymentDetails, setPaymentDetails] = useState<{
providerFee: number;
argoFee: number;
discount: number;
finalArgoFee: number;
token: string;
}>({ providerFee: 0, argoFee: 0, discount: 0, finalArgoFee: 0, token: "ARGO" });
const [deployedLink, setDeployedLink] = useState<string>("");
const [deploymentLoading, setDeploymentLoading] = useState<boolean>(true);
const [confettiStart, setConfettiStart] = useState<boolean>(false);
const [pinDetailLoading, setPinDetailLoading] = useState<boolean>(true);
const [pinDetail, setPinDetail] = useState<any>({ cid: "N.A", isPinned: false });
const componentIsMounted = useRef(true);
let socket: any = null;
let deploymentSvc: any = null;
useEffect(() => {
fetchProject(params.siteid);
deploymentStartup();
return () => {
if (socket) {
socket.disconnect();
}
if (deploymentSvc) {
deploymentSvc.unsubscribe();
}
componentIsMounted.current = false;
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const deploymentStartup = async () => {
setDeploymentLoading(true);
setLatestDeploymentLogs([]);
setDeploymentStatus("pending");
setPaymentStatus("waiting");
setPaymentDetails({
providerFee: 0,
argoFee: 0,
discount: 0,
finalArgoFee: 0,
token: "ARGO",
});
setBuildTime({
min: 0,
sec: 0,
});
socket = socketIOClient(config.urls.API_URL);
deploymentSvc = ApiService.getDeployment(params.deploymentid).subscribe(
(result) => {
if (componentIsMounted.current) {
const deployment = {
githubUrl: result.deployment.project.githubUrl,
branch: result.deployment.configuration.branch,
createdAt: result.deployment.createdAt,
updatedAt: result.deployment.updatedAt,
protocol: result.deployment.configuration.protocol,
commitHash: result.deployment.commitId,
commitMessage: result.deployment.commitMessage,
};
setLatestDeploymentConfig(deployment);
currentSiteDeployLogs.splice(0, currentSiteDeployLogs.length);
result.deployment.logs.forEach((logItem: any) => {
logItem.log.split("\n").forEach((line: string) => {
if (line.trim()) {
currentSiteDeployLogs.push({
log: line,
time: moment(logItem.time).format("hh:mm:ss A MM-DD-YYYY"),
});
}
});
setLatestDeploymentLogs(currentSiteDeployLogs);
scrollToWithContainer(currentSiteDeployLogs.length - 1);
});
if (result.deployment.status.toLowerCase() === "pending") {
socket.on(`deployment.${result.deployment.topic}`, (stream: any) => {
if (stream.type === 1) {
stream.data.split("\n").forEach((line: string) => {
if (line.trim()) {
if (
currentSiteDeployLogs
.map((l) => l.log)
.indexOf(line.trim()) === -1
) {
currentSiteDeployLogs.push({
log: line,
time: moment().format("hh:mm:ss A MM-DD-YYYY"),
});
}
}
});
setDeploymentStatus("pending");
setLatestDeploymentLogs(currentSiteDeployLogs);
scrollToWithContainer(currentSiteDeployLogs.length - 1);
} else if (stream.type === 2) {
const protocolLink = stream.data.logsToCapture.sitePreview;
setDeployedLink(protocolLink);
setDeploymentStatus(protocolLink ? "deployed" : "failed");
const buildMins = Number.parseInt(`${stream.data.buildTime / 60}`);
const buildSecs = Number.parseInt(`${stream.data.buildTime % 60}`);
setBuildTime({ min: buildMins, sec: buildSecs });
} else if (stream.type === 3) {
setDeployedLink("");
setDeploymentStatus("failed");
setBuildTime({ min: 0, sec: 0 });
}
});
} else {
setDeployedLink(result.deployment.sitePreview);
setDeploymentStatus(result.deployment.status.toLowerCase());
const buildMins = Number.parseInt(`${result.deployment.buildTime / 60}`);
const buildSecs = Number.parseInt(`${result.deployment.buildTime % 60}`);
setBuildTime({ min: buildMins, sec: buildSecs });
}
const paymentSocketOpeningCondition = result.deployment.payment
? result.deployment.payment.status !== "success" &&
result.deployment.payment.status !== "failed"
: true;
if (paymentSocketOpeningCondition) {
if (result.deployment.payment) {
setPaymentStatus(result.deployment.payment.status);
}
socket.on(`payment.${result.deployment.topic}`, (stream: any) => {
if (stream.type === 1) {
setPaymentStatus("started");
} else if (stream.type === 2) {
const paymentDetails = stream.payload;
if (paymentDetails.status === "success") {
setPaymentDetails(paymentDetails);
setlivePaymentStatus("success");
} else {
setPaymentMessage(paymentDetails.failedMessage);
}
setPaymentStatus(paymentDetails.status);
}
});
} else {
if (result.deployment.payment.status === "success") {
const paymentDetails = {
providerFee: result.deployment.payment.providerFee,
argoFee: result.deployment.payment.argoFee,
discount: result.deployment.payment.discount,
finalArgoFee: result.deployment.payment.finalArgoFee,
token: result.deployment.payment.token,
};
setPaymentDetails(paymentDetails);
setPaymentStatus("success");
} else {
setPaymentStatus("failed");
setPaymentMessage(result.deployment.payment.failedMessage);
}
}
setDeploymentLoading(false);
}
},
);
};
useEffect(() => {
if (deploymentStatus === "deployed" && livePaymentStatus === "success") {
setConfettiStart(true);
}
}, [deploymentStatus, livePaymentStatus]);
let displayGithubRepo = "";
let githubBranchLink = "";
let githubCommitLink = "";
if (currentSiteDeployConfig) {
displayGithubRepo = currentSiteDeployConfig.githubUrl.substring(
19,
currentSiteDeployConfig.githubUrl.length - 4,
);
githubBranchLink = `${currentSiteDeployConfig.githubUrl.substring(
0,
currentSiteDeployConfig.githubUrl.length - 4,
)}/tree/${currentSiteDeployConfig.branch}`;
githubCommitLink = `${currentSiteDeployConfig.githubUrl.substring(
0,
currentSiteDeployConfig.githubUrl.length - 4,
)}/commit/${currentSiteDeployConfig.commitHash}`;
}
const domains =
selectedProject && deployedLink
? selectedProject.domains.filter((d) => deployedLink.indexOf(d.link) !== -1)
: [];
const subdomains =
selectedProject && deployedLink
? selectedProject.subdomains.filter((d) => deployedLink.indexOf(d.link) !== -1)
: [];
const hnsDomains =
selectedProject && deployedLink
? selectedProject.handshakeDomains.filter(
(d) => deployedLink.indexOf(d.link) !== -1,
)
: [];
const hnsSubdomains =
selectedProject && deployedLink
? selectedProject.handshakeSubdomains.filter(
(d) => deployedLink.indexOf(d.link) !== -1,
)
: [];
const ensDomains =
selectedProject && deployedLink
? selectedProject.ensDomains.filter((d) => deployedLink.indexOf(d.link) !== -1)
: [];
const isDomainOrSubPresent =
[...domains, ...subdomains, ...hnsDomains, ...hnsSubdomains, ...ensDomains]
.length > 0;
const scrollToWithContainer = (index: number) => {
window.scrollTo({
top: document.getElementById("deploy-logs-container")?.scrollHeight,
left: 0,
behavior: "smooth",
});
var myElement = document.getElementById(`deploy-logs-items-${index}`);
var topPos = myElement?.offsetTop;
if (document && document.getElementById("deploy-logs-list")) {
(document as any).getElementById("deploy-logs-list").scrollTop = topPos
? topPos
: 0;
}
};
const showProtocolImage = (protocol: string) => {
switch (protocol) {
case "arweave":
return (
<img
src={require("../../../../assets/png/ar_light.png")}
alt="arweave"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "skynet":
return (
<img
src={require("../../../../assets/png/skynet.png")}
alt="skynet"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "ipfs-filecoin":
return (
<img
src={require("../../../../assets/png/filecoin.png")}
alt="skynet"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "ipfs-pinata":
return (
<img
src={require("../../../../assets/svg/pinata.svg")}
alt="skynet"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
case "neofs":
return (
<img
src={require("../../../../assets/png/neo-light.png")}
alt="neofs"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
default:
return (
<img
src={require("../../../../assets/png/question_mark.png")}
alt="?"
className="site-deployment-logo"
height={24}
width={24}
loading="lazy"
/>
);
}
};
const showProtocolText = (protocol: string) => {
switch (protocol) {
case "arweave":
return (
<span className="site-deployment-link">
Deploying on Arweave, Preview in a minute
</span>
);
case "skynet":
return (
<span className="site-deployment-link">
Deploying on Skynet, Preview in a minute
</span>
);
case "ipfs-filecoin":
return (
<span className="site-deployment-link">
Deploying on IPFS with Filecoin, Preview in a minute
</span>
);
case "ipfs-pinata":
return (
<span className="site-deployment-link">
Deploying on IPFS with Pinata, Preview in a minute
</span>
);
case "neofs":
return (
<span className="site-deployment-link">
Deploying on NeoFS, Preview in a minute
</span>
);
default:
return (
<span className="site-deployment-link">
Cannot find Protocol to Deploy
</span>
);
}
};
const showProtocolPrice = (protocol: string) => {
switch (protocol) {
case "arweave":
return <span>{paymentDetails?.providerFee || 0} AR</span>;
case "skynet":
return <span>N.A</span>;
case "neofs":
return <span>{paymentDetails?.providerFee || 0} NEO</span>;
case "ipfs-filecoin":
return <span>{paymentDetails?.providerFee || 0} FIL</span>;
case "ipfs-pinata":
return <span>N.A</span>;
default:
return <span>{paymentDetails?.providerFee || 0} ?</span>;
}
};
useEffect(() => {
if (deploymentStatus === "deployed") {
if (currentSiteDeployConfig?.protocol === "ipfs-filecoin") {
getFilecoinPinDetais();
} else if (currentSiteDeployConfig?.protocol === "ipfs-pinata") {
getPinataPinDetais();
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [deploymentStatus, currentSiteDeployConfig?.protocol]);
const getFilecoinPinDetais = async () => {
setPinDetailLoading(true);
if (deployedLink) {
const cid = deployedLink.split("https://ipfs.infura.io/ipfs/")[1];
ApiService.getFilecoinPinDetails(cid).subscribe((data) => {
if (componentIsMounted.current) {
setPinDetail(data);
setPinDetailLoading(false);
}
});
} else {
setPinDetailLoading(false);
}
};
const getPinataPinDetais = async () => {
setPinDetailLoading(true);
if (deployedLink) {
const cid = deployedLink.split("https://ipfs.infura.io/ipfs/")[1];
ApiService.getPinataPinDetails(cid).subscribe((data) => {
if (componentIsMounted.current) {
setPinDetail(data);
setPinDetailLoading(false);
}
});
} else {
setPinDetailLoading(false);
}
};
const [width, height] = useWindowSize();
const confettiStyles = {
zIndex: 2,
position: "fixed" as "fixed",
pointerEvents: "none" as "none",
top: 0,
left: 0,
bottom: 0,
right: 0,
};
return (
<div className="SiteDeployment">
{confettiStart && (
<div className="confetti-container">
<Confetti
width={width}
height={height}
style={confettiStyles}
numberOfPieces={700}
recycle={false}
/>
</div>
)}
<div
className="site-deployment-back"
onClick={(e) => {
fetchProject(params.siteid);
history.push(`/org/${params.orgid}/sites/${params.siteid}/deployments/`);
}}
>
<span>
<FontAwesomeIcon icon={faChevronLeft} />
</span>
<span>All Deploys</span>
</div>
<div className="site-deployment-card-container max-width-set">
<div className="site-deployment-card-header">
<h2 className="site-deployment-card-header-title">
{!deploymentLoading ? (
<>
<span>
{deploymentStatus === "pending" ? (
"Deploy in Progress"
) : deploymentStatus === "deployed" ? (
<div>Deployment successful</div>
) : (
"Deployment failed"
)}
</span>
{deploymentStatus === "pending" ? (
<Lottie options={defaultOptions} height={54} width={76} />
) : deploymentStatus === "deployed" ? (
<LazyLoadedImage height={24} once>
<img
src={require("../../../../assets/svg/rocket_background.svg")}
alt="rocket"
className="rocket-icon"
height={24}
width={24}
loading="lazy"
/>
</LazyLoadedImage>
) : deploymentStatus === "failed" ? (
<LazyLoadedImage height={24} once>
<img
src={require("../../../../assets/svg/error.svg")}
alt="rocket"
className="rocket-icon"
height={24}
width={24}
loading="lazy"
/>
</LazyLoadedImage>
) : null}
</>
) : (
<Skeleton width={200} duration={2} />
)}
</h2>
<p className="site-deployment-card-header-description">
{!deploymentLoading ? (
<>
<u>Production</u>: {currentSiteDeployConfig?.branch}
{currentSiteDeployConfig.commitHash ? (
<>
@
<a
href={githubCommitLink}
target="_blank"
rel="noopener noreferrer"
className="commit-link"
>
{currentSiteDeployConfig.commitHash.substr(0, 7)}{" "}
{currentSiteDeployConfig.commitMessage
? `- ${currentSiteDeployConfig.commitMessage.substr(
0,
84,
)}...`
: ""}
</a>
</>
) : null}
</>
) : (
<Skeleton width={400} duration={2} />
)}
</p>
<p className="site-deployment-card-header-description">
{!deploymentLoading ? (
<>
{deploymentStatus === "pending"
? currentSiteDeployLogs[0]?.time
? `Deployment started ${timeAgo.format(
moment(`${currentSiteDeployConfig.createdAt}`).toDate(),
)}`
: null
: `Deployment done at ${moment(
currentSiteDeployConfig.updatedAt,
).format("MMM DD, YYYY hh:mm a")}`}
</>
) : (
<Skeleton width={400} duration={2} />
)}
</p>
</div>
<div className="site-deployment-card-content">
{isDomainOrSubPresent && (
<div className="site-deployment-card-fields">
<span className="site-deployment-github-icon">
<FontAwesomeIcon icon={faGlobe} />
</span>
{!deploymentLoading ? (
<>
{domains.map((d: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`https://${d.name}`}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{d.name}
</a>
{(i !== a.length - 1 ||
subdomains.length > 0 ||
hnsDomains.length > 0 ||
hnsSubdomains.length > 0 ||
ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{subdomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`https://${s.name}`}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{(i !== a.length - 1 ||
hnsDomains.length > 0 ||
hnsSubdomains.length > 0 ||
ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{hnsDomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`http://${s.name}`}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{(i !== a.length - 1 ||
hnsSubdomains.length > 0 ||
ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{hnsSubdomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`http://${s.name}`}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{(i !== a.length - 1 || ensDomains.length > 0) && (
<span className="comma-sep">,</span>
)}
</>
))}
{ensDomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`http://${s.name}`}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{s.name}
</a>
{i !== a.length - 1 && <span className="comma-sep">,</span>}
</>
))}
</>
) : (
<Skeleton width={300} duration={2} />
)}
</div>
)}
<div className="site-deployment-card-fields">
<span className="site-deployment-github-icon">
<FontAwesomeIcon icon={faGithub} />
</span>
{!deploymentLoading ? (
<a
href={githubBranchLink}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
{displayGithubRepo} (branch: {currentSiteDeployConfig?.branch})
</a>
) : (
<Skeleton width={300} duration={2} />
)}
</div>
<div className="site-deployment-card-fields">
<LazyLoadedImage height={24} once>
{showProtocolImage(currentSiteDeployConfig?.protocol)}
</LazyLoadedImage>
{!deploymentLoading ? (
deploymentStatus === "deployed" ? (
<a
href={deployedLink}
className="site-deployment-link"
target="_blank"
rel="noopener noreferrer"
>
Preview deploy
</a>
) : deploymentStatus === "pending" ? (
showProtocolText(currentSiteDeployConfig?.protocol)
) : (
<span className="site-deployment-link">
Deploying failed, no link available
</span>
)
) : (
<Skeleton width={200} duration={2} />
)}
</div>
{paymentStatus === "success" && deploymentStatus === "deployed" && (
<div className="site-deployment-card-fields">
<div className="button-container">
<SharePopup
isOpen={confettiStart}
link={deployedLink}
protocol={currentSiteDeployConfig.protocol}
paymentStatus={paymentStatus}
/>
</div>
</div>
)}
</div>
</div>
{deploymentStatus !== "pending" && (
<div className="site-deployment-card-container deploy-container">
<div className="site-deployment-header-title">Deploy Summary</div>
<div className="deploy-summary-item">
<div className="deploy-summary-item-info-icon">
<FontAwesomeIcon icon={faInfoCircle} />
</div>
<div className="deploy-summary-item-info-container">
<div className="deploy-summary-item-info-title">
Total time to Build & Deploy: {buildTime?.min}m {buildTime?.sec}s
</div>
{(buildTime?.min !== 0 || buildTime?.sec !== 0) && (
<div className="deploy-summary-item-info-description">
Build started at {currentSiteDeployLogs[0]?.time} and ended at{" "}
{currentSiteDeployLogs[currentSiteDeployLogs.length - 1]?.time}.
</div>
)}
</div>
</div>
</div>
)}
{deploymentStatus !== "pending" && (
<div className="site-deployment-card-container deploy-container">
<div className="site-deployment-header-title">Payment Summary</div>
<div className="site-deployment-body">
{paymentStatus === "waiting" && (
<div className="payment-loading">
<span>
<PulseLoader size={20} color={"#3664ae"} />
</span>
<span>Waiting for the payment to be processed...</span>
</div>
)}
{paymentStatus === "started" && (
<div className="payment-loading">
<span>
<PulseLoader size={20} color={"#3664ae"} />
</span>
<span>Processing Payment...</span>
</div>
)}
{paymentStatus === "failed" && (
<div className="payment-failed">
<span>
<LazyLoadedImage height={24} once>
<img
src={require("../../../../assets/svg/error.svg")}
alt="rocket"
className="rocket-icon"
height={36}
width={36}
loading="lazy"
/>
</LazyLoadedImage>
</span>
<span>{paymentMessage}</span>
{paymentMessage ===
"Payment failed due to insufficient allowance." && (
<button
className="set-allowance"
onClick={() => history.push("/wallet/recharge")}
>
Set Allowance
</button>
)}
</div>
)}
{paymentStatus === "success" && (
<>
<div className="site-deployment-body-item">
<label>Build Time:</label>
<span>
{buildTime?.min}m {buildTime?.sec}s
</span>
</div>
<div className="site-deployment-body-item">
<label>Provider Fee:</label>
{showProtocolPrice(currentSiteDeployConfig?.protocol)}
</div>
<div className="site-deployment-body-item">
<label>Total Fee:</label>
<span>
{paymentDetails?.argoFee || 0} ${paymentDetails?.token || "ARGO"}
</span>
</div>
<div className="site-deployment-body-item">
<label>Discount:</label>
<span>
{paymentDetails?.discount || 0} $
{paymentDetails?.token || "ARGO"}
</span>
</div>
<div className="site-deployment-body-item">
<label>Final Payment:</label>
<span>
{paymentDetails?.finalArgoFee || 0} $
{paymentDetails?.token || "ARGO"}
</span>
</div>
</>
)}
</div>
</div>
)}
{deploymentStatus === "deployed" &&
currentSiteDeployConfig?.protocol === "ipfs-filecoin" && (
<div className="site-deployment-card-container deploy-container">
<div className="site-deployment-header-title">
Filecoin Pinning Details
</div>
<div className="site-deployment-body">
<div className="site-deployment-body-item">
<label>Filecoin CID:</label>
<span>
{!pinDetailLoading ? (
pinDetail.cid
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
<div className="site-deployment-body-item">
<label>Filecoin Pinning Status:</label>
<span>
{!pinDetailLoading ? (
pinDetail.isPinned ? (
"Pinned"
) : (
"Not Pinned"
)
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
{!pinDetailLoading && pinDetail.isPinned && (
<div className="site-deployment-body-item">
<label>Filecoin Pinned Date:</label>
<span>
{!pinDetailLoading ? (
moment(pinDetail.pinnedDate).format("MMM DD, YYYY hh:mm A")
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
)}
</div>
</div>
)}
{deploymentStatus === "deployed" &&
currentSiteDeployConfig?.protocol === "ipfs-pinata" && (
<div className="site-deployment-card-container deploy-container">
<div className="site-deployment-header-title">
Pinata Pinning Details
</div>
<div className="site-deployment-body">
<div className="site-deployment-body-item">
<label>IPFS CID:</label>
<span>
{!pinDetailLoading ? (
pinDetail.cid
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
<div className="site-deployment-body-item">
<label>IPFS Pinning Status:</label>
<span>
{!pinDetailLoading ? (
pinDetail.isPinned ? (
"Pinned"
) : (
"Not Pinned"
)
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
{!pinDetailLoading && pinDetail.isPinned && (
<div className="site-deployment-body-item">
<label>IPFS Pinned Date:</label>
<span>
{!pinDetailLoading ? (
moment(pinDetail.pinnedDate).format("MMM DD, YYYY hh:mm A")
) : (
<Skeleton width={200} duration={2} />
)}
</span>
</div>
)}
</div>
</div>
)}
<div
className="site-deployment-card-container deploy-container"
id="deploy-logs-container"
>
<div className="card-header-title deploy-logs-card-title">
<div className="card-header-deploy-title-container">
<div className="card-header-deploy-title">Deploy Logs</div>
<div className="card-header-deploy-subtitle">
Please note that the realtime log streaming may not show all the logs
based on your connection bandwidth. Please refresh if you don't see
some logs
</div>
</div>
{/* <button className="copy-to-clipboard-button">Copy to clipboard</button> */}
<div className="refresh-control" onClick={deploymentStartup}>
<FontAwesomeIcon icon={faSyncAlt}></FontAwesomeIcon>
</div>
</div>
<div className="deploy-logs-container" id="deploy-logs-list">
{
<div className="deploy-logs-items" id={`deploy-logs-items-${1}`} key={1}>
{currentSiteDeployLogs?.map((currLog, i) => (
<div
className="deploy-logs-items"
id={`deploy-logs-items-${i}`}
key={i}
>
{currLog.time}:{" "}
{currLog.log.indexOf("https://arweave.net/") !== -1 ||
currLog.log.indexOf("https://siasky.net/") !== -1 ||
currLog.log.indexOf("https://http.fs.neo.org/") !== -1 ||
currLog.log.indexOf("https://ipfs.infura.io/ipfs/") !== -1 ? (
<a
href={currLog.log.trim()}
className="log-site-link"
target="_blank"
rel="noopener noreferrer"
>
{currLog.log}
</a>
) : (
currLog.log
)}
</div>
))}
</div>
}
</div>
</div>
</div>
);
}
Example #7
| Source File: WalletRecharge.tsx From argo-react with MIT License | 4 votes |
|
function WalletRecharge() {
const history = useHistory();
const { fetchUser } = useContext<IActionModel>(ActionContext);
const { selectedOrg, orgLoading } = useContext<IStateModel>(StateContext);
const [wallet, setWallet] = useState<string>("");
const [walletBal, setWalletBal] = useState<number>(0);
const [walletApproval, setWalletApproval] = useState<number>(0);
const [rechargeAmount, setRechargeAmount] = useState<string>("");
const [walletLoader, setWalletLoader] = useState<boolean>(false);
const [rechargeLoader, setRechargeLoader] = useState<boolean>(false);
const [walletLoading, setWalletLoading] = useState<boolean>(false);
const [orgWallet, setOrgWallet] = useState<string>("");
const [errorWarning, setErrorWarning] = useState<boolean>(false);
const [errorMessage, setErrorMessage] = useState<string>("");
const componentIsMounted = useRef(true);
useEffect(() => {
if (selectedOrg && !orgLoading) {
setWalletLoading(true);
if (componentIsMounted.current) {
setOrgWallet(selectedOrg.wallet.address);
setWalletLoading(false);
}
} else {
if (orgLoading) {
setWalletLoading(true);
} else {
setWalletLoading(false);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedOrg, orgLoading]);
const rechargeArGo = async () => {
setErrorWarning(false);
try {
if (!wallet) {
setWalletLoader(true);
const wallet = await Web3Service.getPolygonAccount();
setWallet(wallet);
if (wallet) {
const walletBal = await Web3Service.getArgoBalance(wallet);
const walletApproval = await Web3Service.getArgoAllowances(wallet);
setWalletBal(walletBal);
setWalletApproval(walletApproval);
}
setWalletLoader(false);
} else {
setRechargeLoader(true);
await Web3Service.giveAllowance(rechargeAmount);
setRechargeLoader(false);
fetchUser();
history.goBack();
}
} catch (err) {
// eslint-disable-next-line no-console
console.log(err);
setWalletLoader(false);
setRechargeLoader(false);
setErrorMessage((err as any).message);
setErrorWarning(true);
setTimeout(() => {
setErrorWarning(false);
setErrorMessage("");
}, 5000);
// window.location.reload();
}
};
const refreshWallet = async () => {
try {
setErrorWarning(false);
setWalletLoader(true);
const wallet = await Web3Service.getPolygonCurrentAccount();
const walletBal = await Web3Service.getArgoBalance(wallet);
const walletApproval = await Web3Service.getArgoAllowances(wallet);
setWallet(wallet);
setWalletBal(walletBal);
setWalletApproval(walletApproval);
setWalletLoader(false);
} catch (err) {
// eslint-disable-next-line no-console
console.log(err);
setWalletLoader(false);
setErrorMessage((err as any).message);
setErrorWarning(true);
setTimeout(() => {
setErrorWarning(false);
setErrorMessage("");
}, 5000);
// window.location.reload();
}
};
useEffect(() => {
return () => {
componentIsMounted.current = false;
Web3Service.disconnectPolygon();
};
}, []);
const rechargeDisable =
rechargeLoader || wallet ? !rechargeAmount || wallet !== orgWallet : false;
return (
<div className="WalletRecharge">
<RootHeader parent={"CreateOrg"} />
<main className="app-main">
<div className="wallet-recharge-container">
<div className="wallet-recharge-card">
<div className="wallet-recharge-card-inner">
<h1 className="wallet-recharge-title">Set Allowance</h1>
<div className="wallet-recharge-form">
<label className="wallet-recharge-form-title">Your wallet</label>
<label className="wallet-chain-info">
<FontAwesomeIcon
icon={faInfoCircle}
style={{ marginRight: 7 }}
></FontAwesomeIcon>
We currently support Matic Mumbai Testnet. Please add Matic Mumbai
chain in your metamask.
</label>
<label className="wallet-recharge-form-subtitle">
Please approve more than minimum $ARGO tokens to our Payment Smart
Contract. Approval transaction is <b>Gassless</b>, no need to hold
$MATIC tokens for approval.
</label>
<label className="wallet-recharge-form-subtitle">
To start deploying your application, minimum allowance required is
60 $ARGO and minimum balance required is 60 $ARGO tokens.
</label>
<label className="wallet-recharge-form-subtitle">
To get <b>Matic Testnet $ARGO Tokens</b>, please visit{" "}
<a
href="https://faucet.spheron.network/"
target="_blank"
rel="noopener noreferrer"
>
https://faucet.spheron.network
</a>
.
</label>
<div className="current-wallet-details">
<div className="current-wallet-details-title">Owner Address:</div>
<div className="current-wallet-details-desc">
{!walletLoading ? (
`${orgWallet}`
) : (
<Skeleton width={150} duration={2} />
)}
</div>
</div>
</div>
{wallet && (
<>
<div className="wallet-recharge-form">
<div className="wallet-recharge-form-title-container">
<label className="wallet-recharge-form-title">
Wallet Details
</label>
<div className="refresh-control" onClick={refreshWallet}>
<FontAwesomeIcon icon={faSyncAlt}></FontAwesomeIcon>
</div>
</div>
<div className="wallet-details-container">
<div className="wallet-details-items">
<div className="wallet-details-item-title">
Wallet Address
</div>
<div className="wallet-details-item-desc">
{!walletLoader ? (
wallet
) : (
<Skeleton width={300} duration={2} />
)}
</div>
</div>
<div className="wallet-details-items">
<div className="wallet-details-item-title">ARGO Balance</div>
<div className="wallet-details-item-desc">
{!walletLoader ? (
`${walletBal} $ARGO`
) : (
<Skeleton width={150} duration={2} />
)}
</div>
</div>
<div className="wallet-details-items">
<div className="wallet-details-item-title">
ARGO Allowance
</div>
<div className="wallet-details-item-desc">
{!walletLoader ? (
`${walletApproval} $ARGO`
) : (
<Skeleton width={150} duration={2} />
)}
</div>
</div>
</div>
</div>
<div className="wallet-recharge-form">
<label className="wallet-recharge-form-title">
Approval Amount
</label>
<label className="wallet-recharge-form-subtitle">
Please provide the approval amount.
</label>
<input
type="number"
className="wallet-recharge-form-input"
value={rechargeAmount}
onChange={(e) => setRechargeAmount(e.target.value)}
/>
</div>
</>
)}
{wallet && wallet !== orgWallet ? (
<div className="note-container">
Note: We currently support Matic Mumbai Testnet. Only owner of this
wallet can increase allowance
</div>
) : null}
<div className="button-container">
<button
type="button"
className="primary-button"
disabled={rechargeDisable}
onClick={rechargeArGo}
>
{rechargeLoader && (
<BounceLoader size={20} color={"#fff"} loading={true} />
)}
{!wallet ? "Connect" : "Approve"}
</button>
<button
type="button"
className="cancel-button"
onClick={(e) => history.goBack()}
>
Cancel
</button>
</div>
{errorWarning ? (
<div className="warning-container">
<div className="warning-header">
<FontAwesomeIcon icon={faExclamationCircle} /> {errorMessage}
</div>
</div>
) : null}
</div>
</div>
</div>
</main>
</div>
);
}
