geonizeli/x-stake
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add unauthenticated message on wallet page

Browse Source
This commit is contained in:
João Geonizeli
2021-08-13 19:37:37 -03:00
parent 4672804212
commit edf4094e2f
15 changed files with 545 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/javascript/src/pages/Wallet/Balances.tsx
View File

@@ -10,14 +10,16 @@ type Props = {
balancesRef: Balances_balances$key;
};
export const Balances: FC<Props> = ({ balancesRef }) => {
const { nodes } = useFragment<Balances_balances$key>(
const { edges } = useFragment<Balances_balances$key>(
graphql`
fragment Balances_balances on BalanceConnection {
nodes {
id
amount
currency {
name
edges {
node {
id
amount
currency {
name
}
}
}
}
@@ -25,7 +27,7 @@ export const Balances: FC<Props> = ({ balancesRef }) => {
balancesRef
);
if (!nodes?.length) return null;
if (!edges.length) return null;
return (
<div className="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
@@ -48,28 +50,28 @@ export const Balances: FC<Props> = ({ balancesRef }) => {
</tr>
</thead>
<tbody>
{nodes?.map((balance) => {
{edges.map(({ node }) => {
return (
<tr key={balance?.id}>
<tr key={node.id}>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<div className="flex items-center">
<div className="flex-shrink-0">
<img
alt={`${balance?.currency.name} icon`}
src={getCurrencyLogo(balance?.currency.name)}
alt={`${node.currency.name} icon`}
src={getCurrencyLogo(node.currency.name)}
className="mx-auto object-cover rounded-full h-10 w-10 "
/>
</div>
<div className="ml-3">
<p className="text-gray-900 whitespace-no-wrap">
{balance?.currency.name}
{node.currency.name}
</p>
</div>
</div>
</td>
<td className="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<p className="text-gray-900 whitespace-no-wrap">
{balance?.amount}
{node.amount}
</p>
</td>
</tr>

24
app/javascript/src/pages/Wallet/FiatBalances.tsx
View File

@@ -9,26 +9,28 @@ type Props = {
fiatBalancesRef: FiatBalances_fiatBalances$key;
};
export const FiatBalances: FC<Props> = ({ fiatBalancesRef }) => {
const { nodes } = useFragment<FiatBalances_fiatBalances$key>(
const { edges } = useFragment<FiatBalances_fiatBalances$key>(
graphql`
fragment FiatBalances_fiatBalances on FiatBalanceConnection {
nodes {
id
amountCents
amountCurrency
edges {
node {
id
amountCents
amountCurrency
}
}
}
`,
fiatBalancesRef
);
if (!nodes?.length) return null;
if (!edges.length) return null;
const [firstResult] = nodes;
const [firstResult] = edges;
const amount = (
firstResult?.amountCents ? firstResult?.amountCents / 100 : 0
).toFixed(2);
const { amountCents, amountCurrency } = firstResult.node;
const amount = (amountCents ? amountCents / 100 : 0).toFixed(2);
return (
<div className="shadow rounded-lg p-4 bg-white dark:bg-gray-800">
@@ -50,7 +52,7 @@ export const FiatBalances: FC<Props> = ({ fiatBalancesRef }) => {
<div className="flex flex-col justify-start">
<p className="text-gray-700 dark:text-gray-100 text-4xl text-left font-bold my-4">
{amount}
<span className="text-sm">{firstResult?.amountCurrency}</span>
<span className="text-sm">{amountCurrency}</span>
</p>
</div>
</div>

5
app/javascript/src/pages/Wallet/Wallet.tsx
View File

@@ -3,11 +3,14 @@ import type { FC } from "react";
import React from "react";
import { useLazyLoadQuery } from "react-relay";
import { useCurrentUser } from "../../contexts/UserProvider";
import { Messages } from "../../messages";
import { Balances } from "./Balances";
import { FiatBalances } from "./FiatBalances";
import type { WalletQuery } from "./__generated__/WalletQuery.graphql";
export const Wallet: FC = () => {
const { isAuthenticated } = useCurrentUser();
const { fiatBalances, balances } = useLazyLoadQuery<WalletQuery>(
graphql`
query WalletQuery {
@@ -22,6 +25,8 @@ export const Wallet: FC = () => {
{}
);
if (!isAuthenticated) return <Messages.Unauthenticated />;
return (
<div className="flex flex-col h-full w-full overflow-x-hidden">
<div className="container mx-auto px-4 sm:px-8 max-w-3xl">

65
app/javascript/src/pages/Wallet/__generated__/Balances_balances.graphql.ts generated
View File

@@ -5,13 +5,15 @@
import { ReaderFragment } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
export type Balances_balances = {
readonly nodes: ReadonlyArray<{
readonly id: string;
readonly amount: string;
readonly currency: {
readonly name: string;
readonly edges: ReadonlyArray<{
readonly node: {
readonly id: string;
readonly amount: string;
readonly currency: {
readonly name: string;
};
};
} | null> | null;
}>;
readonly " $refType": "Balances_balances";
};
export type Balances_balances$data = Balances_balances;
@@ -31,38 +33,49 @@ const node: ReaderFragment = {
{
"alias": null,
"args": null,
"concreteType": "Balance",
"concreteType": "BalanceEdge",
"kind": "LinkedField",
"name": "nodes",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "Currency",
"concreteType": "Balance",
"kind": "LinkedField",
"name": "currency",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "Currency",
"kind": "LinkedField",
"name": "currency",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
}
],
"storageKey": null
}
],
@@ -75,5 +88,5 @@ const node: ReaderFragment = {
"type": "BalanceConnection",
"abstractKey": null
};
(node as any).hash = '2704da1dc9949b1becbd9ec947c5ec33';
(node as any).hash = 'f42e01739ec72a194e05843169435d96';
export default node;

61
app/javascript/src/pages/Wallet/__generated__/FiatBalances_fiatBalances.graphql.ts generated
View File

@@ -5,11 +5,13 @@
import { ReaderFragment } from "relay-runtime";
import { FragmentRefs } from "relay-runtime";
export type FiatBalances_fiatBalances = {
readonly nodes: ReadonlyArray<{
readonly id: string;
readonly amountCents: number;
readonly amountCurrency: string;
} | null> | null;
readonly edges: ReadonlyArray<{
readonly node: {
readonly id: string;
readonly amountCents: number;
readonly amountCurrency: string;
};
}>;
readonly " $refType": "FiatBalances_fiatBalances";
};
export type FiatBalances_fiatBalances$data = FiatBalances_fiatBalances;
@@ -29,30 +31,41 @@ const node: ReaderFragment = {
{
"alias": null,
"args": null,
"concreteType": "FiatBalance",
"concreteType": "FiatBalanceEdge",
"kind": "LinkedField",
"name": "nodes",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amountCents",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amountCurrency",
"concreteType": "FiatBalance",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amountCents",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amountCurrency",
"storageKey": null
}
],
"storageKey": null
}
],
@@ -62,5 +75,5 @@ const node: ReaderFragment = {
"type": "FiatBalanceConnection",
"abstractKey": null
};
(node as any).hash = '0584f36abe6ca6f8612b8c593c4cfb6d';
(node as any).hash = '106c8efa69b9cde5af510a15c2493ba6';
export default node;

100
app/javascript/src/pages/Wallet/__generated__/WalletQuery.graphql.ts generated
View File

@@ -31,21 +31,25 @@ query WalletQuery {
}
fragment Balances_balances on BalanceConnection {
nodes {
id
amount
currency {
name
edges {
node {
id
amount
currency {
name
id
}
}
}
}
fragment FiatBalances_fiatBalances on FiatBalanceConnection {
nodes {
id
amountCents
amountCurrency
edges {
node {
id
amountCents
amountCurrency
}
}
}
*/
@@ -118,24 +122,35 @@ return {
{
"alias": null,
"args": null,
"concreteType": "FiatBalance",
"concreteType": "FiatBalanceEdge",
"kind": "LinkedField",
"name": "nodes",
"name": "edges",
"plural": true,
"selections": [
(v0/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amountCents",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amountCurrency",
"concreteType": "FiatBalance",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v0/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amountCents",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amountCurrency",
"storageKey": null
}
],
"storageKey": null
}
],
@@ -155,35 +170,46 @@ return {
{
"alias": null,
"args": null,
"concreteType": "Balance",
"concreteType": "BalanceEdge",
"kind": "LinkedField",
"name": "nodes",
"name": "edges",
"plural": true,
"selections": [
(v0/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "amount",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "Currency",
"concreteType": "Balance",
"kind": "LinkedField",
"name": "currency",
"name": "node",
"plural": false,
"selections": [
(v0/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"name": "amount",
"storageKey": null
},
(v0/*: any*/)
{
"alias": null,
"args": null,
"concreteType": "Currency",
"kind": "LinkedField",
"name": "currency",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
},
(v0/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
}
@@ -196,12 +222,12 @@ return {
]
},
"params": {
"cacheID": "82d013e2bf418b53aeec5412f2f92661",
"cacheID": "3c87fba4bacbbbe14fd4b584bfb1f7bb",
"id": null,
"metadata": {},
"name": "WalletQuery",
"operationKind": "query",
"text": "query WalletQuery {\n fiatBalances {\n ...FiatBalances_fiatBalances\n }\n balances {\n ...Balances_balances\n }\n}\n\nfragment Balances_balances on BalanceConnection {\n nodes {\n id\n amount\n currency {\n name\n id\n }\n }\n}\n\nfragment FiatBalances_fiatBalances on FiatBalanceConnection {\n nodes {\n id\n amountCents\n amountCurrency\n }\n}\n"
"text": "query WalletQuery {\n fiatBalances {\n ...FiatBalances_fiatBalances\n }\n balances {\n ...Balances_balances\n }\n}\n\nfragment Balances_balances on BalanceConnection {\n edges {\n node {\n id\n amount\n currency {\n name\n id\n }\n }\n }\n}\n\nfragment FiatBalances_fiatBalances on FiatBalanceConnection {\n edges {\n node {\n id\n amountCents\n amountCurrency\n }\n }\n}\n"
}
};
})();